From 9bd32759c2cf7a9f01d5e24514bbdfee0c2cc16f Mon Sep 17 00:00:00 2001 From: rdrew Date: Fri, 22 May 2026 10:46:58 -0300 Subject: [PATCH] 1st --- css/base/pcss/base.pcss.css | 140 --------- css/base/pcss/fonts.pcss.css | 64 ---- css/base/pcss/media-queries.pcss.css | 18 -- css/base/pcss/variables.pcss.css | 142 --------- css/components/pcss/action-links.pcss.css | 27 -- .../pcss/ajax-progress.module.pcss.css | 102 ------- .../pcss/autocomplete-loading.module.pcss.css | 26 -- css/components/pcss/block.pcss.css | 18 -- css/components/pcss/book.pcss.css | 104 ------- css/components/pcss/breadcrumb.pcss.css | 111 ------- css/components/pcss/button.pcss.css | 131 -------- css/components/pcss/cke-dialog.pcss.css | 8 - css/components/pcss/color-picker.pcss.css | 11 - css/components/pcss/comments.pcss.css | 233 --------------- .../pcss/container-inline.module.pcss.css | 18 -- .../pcss/content-moderation.pcss.css | 67 ----- css/components/pcss/details.pcss.css | 115 ------- css/components/pcss/dropbutton.pcss.css | 157 ---------- css/components/pcss/embedded-media.pcss.css | 127 -------- css/components/pcss/feed.pcss.css | 41 --- css/components/pcss/field.pcss.css | 53 ---- css/components/pcss/fieldset.pcss.css | 133 --------- css/components/pcss/footer.pcss.css | 39 --- css/components/pcss/form-boolean.pcss.css | 99 ------ css/components/pcss/form-select.pcss.css | 84 ------ css/components/pcss/form-text.pcss.css | 90 ------ css/components/pcss/form-textarea.pcss.css | 13 - css/components/pcss/form.pcss.css | 193 ------------ css/components/pcss/forum.pcss.css | 19 -- .../pcss/header-buttons-mobile.pcss.css | 29 -- .../pcss/header-navigation.pcss.css | 128 -------- .../pcss/header-search-narrow.pcss.css | 173 ----------- .../pcss/header-search-wide.pcss.css | 282 ------------------ .../pcss/header-site-branding.pcss.css | 120 -------- .../pcss/header-sticky-toggle.pcss.css | 91 ------ css/components/pcss/hero.pcss.css | 43 --- css/components/pcss/links.pcss.css | 28 -- css/components/pcss/maintenance-page.pcss.css | 27 -- css/components/pcss/messages.pcss.css | 159 ---------- .../pcss/node-preview-container.pcss.css | 34 --- css/components/pcss/node-teaser.pcss.css | 116 ------- css/components/pcss/node.pcss.css | 67 ----- css/components/pcss/page-title.pcss.css | 14 - css/components/pcss/pager.pcss.css | 82 ----- css/components/pcss/powered-by-block.pcss.css | 44 --- css/components/pcss/progress.pcss.css | 22 -- css/components/pcss/search-results.pcss.css | 97 ------ css/components/pcss/site-header.pcss.css | 104 ------- css/components/pcss/skip-link.pcss.css | 38 --- css/components/pcss/table.pcss.css | 93 ------ css/components/pcss/tabledrag.pcss.css | 54 ---- css/components/pcss/tabs.pcss.css | 205 ------------- css/components/pcss/tags.pcss.css | 83 ------ css/components/pcss/text-content.pcss.css | 153 ---------- css/components/pcss/ui-dialog.pcss.css | 30 -- css/components/pcss/vertical-tabs.pcss.css | 98 ------ css/components/pcss/wide-image.pcss.css | 42 --- css/layout/pcss/grid.pcss.css | 50 ---- .../layout-builder-fourcol-section.pcss.css | 66 ---- .../layout-builder-threecol-section.pcss.css | 79 ----- .../layout-builder-twocol-section.pcss.css | 84 ------ .../pcss/layout-content-medium.pcss.css | 39 --- .../pcss/layout-content-narrow.pcss.css | 105 ------- .../layout-discovery-section-layout.pcss.css | 18 -- css/layout/pcss/layout-footer.pcss.css | 44 --- css/layout/pcss/layout-sidebar.pcss.css | 48 --- css/layout/pcss/layout-views-grid.pcss.css | 43 --- css/layout/pcss/layout.pcss.css | 57 ---- css/layout/pcss/region-content-below.pcss.css | 41 --- css/layout/pcss/region-content.pcss.css | 18 -- css/layout/pcss/region-hero.pcss.css | 12 - .../pcss/region-secondary-menu.pcss.css | 30 -- css/layout/pcss/region.pcss.css | 18 -- css/layout/pcss/social-bar.pcss.css | 105 ------- css/layout/pcss/views.pcss.css | 20 -- css/theme/pcss/filter.theme.pcss.css | 80 ----- 76 files changed, 5796 deletions(-) delete mode 100755 css/base/pcss/base.pcss.css delete mode 100755 css/base/pcss/fonts.pcss.css delete mode 100755 css/base/pcss/media-queries.pcss.css delete mode 100755 css/base/pcss/variables.pcss.css delete mode 100755 css/components/pcss/action-links.pcss.css delete mode 100755 css/components/pcss/ajax-progress.module.pcss.css delete mode 100755 css/components/pcss/autocomplete-loading.module.pcss.css delete mode 100755 css/components/pcss/block.pcss.css delete mode 100755 css/components/pcss/book.pcss.css delete mode 100755 css/components/pcss/breadcrumb.pcss.css delete mode 100755 css/components/pcss/button.pcss.css delete mode 100755 css/components/pcss/cke-dialog.pcss.css delete mode 100755 css/components/pcss/color-picker.pcss.css delete mode 100755 css/components/pcss/comments.pcss.css delete mode 100755 css/components/pcss/container-inline.module.pcss.css delete mode 100755 css/components/pcss/content-moderation.pcss.css delete mode 100755 css/components/pcss/details.pcss.css delete mode 100755 css/components/pcss/dropbutton.pcss.css delete mode 100755 css/components/pcss/embedded-media.pcss.css delete mode 100755 css/components/pcss/feed.pcss.css delete mode 100755 css/components/pcss/field.pcss.css delete mode 100755 css/components/pcss/fieldset.pcss.css delete mode 100755 css/components/pcss/footer.pcss.css delete mode 100755 css/components/pcss/form-boolean.pcss.css delete mode 100755 css/components/pcss/form-select.pcss.css delete mode 100755 css/components/pcss/form-text.pcss.css delete mode 100755 css/components/pcss/form-textarea.pcss.css delete mode 100755 css/components/pcss/form.pcss.css delete mode 100755 css/components/pcss/forum.pcss.css delete mode 100755 css/components/pcss/header-buttons-mobile.pcss.css delete mode 100755 css/components/pcss/header-navigation.pcss.css delete mode 100755 css/components/pcss/header-search-narrow.pcss.css delete mode 100755 css/components/pcss/header-search-wide.pcss.css delete mode 100755 css/components/pcss/header-site-branding.pcss.css delete mode 100755 css/components/pcss/header-sticky-toggle.pcss.css delete mode 100755 css/components/pcss/hero.pcss.css delete mode 100755 css/components/pcss/links.pcss.css delete mode 100755 css/components/pcss/maintenance-page.pcss.css delete mode 100755 css/components/pcss/messages.pcss.css delete mode 100755 css/components/pcss/node-preview-container.pcss.css delete mode 100755 css/components/pcss/node-teaser.pcss.css delete mode 100755 css/components/pcss/node.pcss.css delete mode 100755 css/components/pcss/page-title.pcss.css delete mode 100755 css/components/pcss/pager.pcss.css delete mode 100755 css/components/pcss/powered-by-block.pcss.css delete mode 100755 css/components/pcss/progress.pcss.css delete mode 100755 css/components/pcss/search-results.pcss.css delete mode 100755 css/components/pcss/site-header.pcss.css delete mode 100755 css/components/pcss/skip-link.pcss.css delete mode 100755 css/components/pcss/table.pcss.css delete mode 100755 css/components/pcss/tabledrag.pcss.css delete mode 100755 css/components/pcss/tabs.pcss.css delete mode 100755 css/components/pcss/tags.pcss.css delete mode 100755 css/components/pcss/text-content.pcss.css delete mode 100755 css/components/pcss/ui-dialog.pcss.css delete mode 100755 css/components/pcss/vertical-tabs.pcss.css delete mode 100755 css/components/pcss/wide-image.pcss.css delete mode 100755 css/layout/pcss/grid.pcss.css delete mode 100755 css/layout/pcss/layout-builder-fourcol-section.pcss.css delete mode 100755 css/layout/pcss/layout-builder-threecol-section.pcss.css delete mode 100755 css/layout/pcss/layout-builder-twocol-section.pcss.css delete mode 100755 css/layout/pcss/layout-content-medium.pcss.css delete mode 100755 css/layout/pcss/layout-content-narrow.pcss.css delete mode 100755 css/layout/pcss/layout-discovery-section-layout.pcss.css delete mode 100755 css/layout/pcss/layout-footer.pcss.css delete mode 100755 css/layout/pcss/layout-sidebar.pcss.css delete mode 100755 css/layout/pcss/layout-views-grid.pcss.css delete mode 100755 css/layout/pcss/layout.pcss.css delete mode 100755 css/layout/pcss/region-content-below.pcss.css delete mode 100755 css/layout/pcss/region-content.pcss.css delete mode 100755 css/layout/pcss/region-hero.pcss.css delete mode 100755 css/layout/pcss/region-secondary-menu.pcss.css delete mode 100755 css/layout/pcss/region.pcss.css delete mode 100755 css/layout/pcss/social-bar.pcss.css delete mode 100755 css/layout/pcss/views.pcss.css delete mode 100755 css/theme/pcss/filter.theme.pcss.css diff --git a/css/base/pcss/base.pcss.css b/css/base/pcss/base.pcss.css deleted file mode 100755 index dc8c93d..0000000 --- a/css/base/pcss/base.pcss.css +++ /dev/null @@ -1,140 +0,0 @@ -/** - * @file - * Generic base elements. - */ - -@import "media-queries.pcss.css"; - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: var(--font-sans); - font-size: 100%; - font-weight: normal; - font-style: normal; - line-height: var(--line-height-base); -} - -body { - margin: 0; - color: var(--color-text-neutral-medium); - background-color: var(--color--gray-100); - background-image: url("../../images/background.svg"); - background-position: top left; /* LTR */ - - &.is-fixed { - position: fixed; - overflow: hidden; - width: 100%; - } -} - -[dir="rtl"] body { - background-position: top right; -} - -a { - color: var(--color-text-primary-medium); - - &:hover { - color: var(--color--primary-50); - } - - &:focus { - outline: solid 2px currentColor; - outline-offset: 2px; - } -} - -button { - font-family: inherit; -} - -img, -video { - display: block; - max-width: 100%; - height: auto; -} - -audio { - display: block; - max-width: 100%; -} - -h1 { - letter-spacing: -0.01em; - font-size: 28px; - line-height: var(--sp2); - - @media (--md) { - font-size: 60px; - line-height: var(--sp4); - } -} - -h2 { - letter-spacing: -0.01em; - font-size: 24px; - line-height: var(--sp2); - - @media (--md) { - font-size: 36px; - line-height: var(--sp3); - } -} - -h3 { - font-size: 20px; - line-height: var(--sp1-5); - - @media (--md) { - font-size: 24px; - line-height: var(--sp2); - } -} - -h4 { - font-size: 18px; - line-height: var(--sp1-5); -} - -h5 { - font-size: 16px; - line-height: var(--sp1-5); -} - -h6 { - font-size: 14px; - line-height: var(--sp); -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-block: var(--sp); - color: var(--color-text-neutral-loud); - font-family: var(--font-sans); - font-weight: bold; - - @media (--md) { - margin-block: var(--sp2); - } -} - -ul { - margin-block-start: 0.25em; - margin-block-end: 0.25em; - margin-inline-start: 1.5em; - margin-inline-end: 0; - padding-inline-start: 0; - list-style-type: disc; - list-style-image: none; -} diff --git a/css/base/pcss/fonts.pcss.css b/css/base/pcss/fonts.pcss.css deleted file mode 100755 index 50e9e4a..0000000 --- a/css/base/pcss/fonts.pcss.css +++ /dev/null @@ -1,64 +0,0 @@ -/** - * @file - * Base Fonts. - */ - -@import "media-queries.pcss.css"; - -@font-face { - font-family: metropolis; - src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: metropolis; - src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"); - font-weight: 700; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: metropolis; - src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -/* lora-regular - latin */ -@font-face { - font-family: Lora; - src: - local("Lora Regular"), - local("Lora-Regular"), - url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -/* lora-italic - latin */ -@font-face { - font-family: Lora; - src: - local("Lora Italic"), - local("Lora-Italic"), - url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"); - font-weight: 400; - font-style: italic; - font-display: swap; -} -/* lora-700 - latin */ -@font-face { - font-family: Lora; - src: - local("Lora Bold"), - local("Lora-Bold"), - url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"); - font-weight: 700; - font-style: normal; - font-display: swap; -} diff --git a/css/base/pcss/media-queries.pcss.css b/css/base/pcss/media-queries.pcss.css deleted file mode 100755 index ec87de1..0000000 --- a/css/base/pcss/media-queries.pcss.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -@custom-media --sm (min-width: 500px); -@custom-media --md (min-width: 700px); -@custom-media --lg (min-width: 1000px); -@custom-media --xl (min-width: 1300px); - -/* Navigation related breakpoints */ -@custom-media --nav-md (min-width: 500px); -@custom-media --nav (min-width: 1200px); -@custom-media --max-nav (max-width: 1200px); - -/* Grid related breakpoints */ -@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */ -@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */ diff --git a/css/base/pcss/variables.pcss.css b/css/base/pcss/variables.pcss.css deleted file mode 100755 index 59a4824..0000000 --- a/css/base/pcss/variables.pcss.css +++ /dev/null @@ -1,142 +0,0 @@ -/* - Global CSS custom properties. -*/ - -@import "./media-queries.pcss.css"; - -/* stylelint-disable */ - -:root { - --font-sans: "metropolis", sans-serif; - --font-serif: "Lora", "georgia", serif; - - /* Typography helpers. */ - --font-size-base: 16px; - --font-size-l: 18px; - --font-size-s: 14px; - --font-size-xs: 13px; - --font-size-xxs: 12px; - --line-height-base: 27px; - --line-height-s: 18px; - - /* Layout helpers. */ - --max-width: 1350px; - --max-bg-color: 1570px; /* Width to which the background color extends to. */ - --sp: 18px; - --content-left: 90px; - --site-header-height-wide: var(--sp10); - --container-padding: var(--sp); /* Inline padding on .container elements. */ - - @media (--nav) { - --container-padding: var(--sp2); - } - - /** - * Grid helpers. - * - * These variables help authors apply widths and negative margins to break items out of - * the grid, while still conforming to the larger grid system. - */ - --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/ - --grid-col-count: 6; - --grid-gap: var(--sp); - --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */ - --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */ - --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */ - - @media (--md) { - --grid-col-count: 14; - --grid-gap: var(--sp2); - } - - @media (--lg) { - --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ - } - - @media (--nav) { - --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); - } - - @media (--grid-max) { - --grid-full-width: calc(var(--max-width) - var(--sp4)); - } - - /* Layout helpers */ - --sp0-25: calc(0.25 * var(--sp)); - --sp0-5: calc(0.5 * var(--sp)); - --sp0-75: calc(0.75 * var(--sp)); - --sp1: calc(1 * var(--sp)); - --sp1-5: calc(1.5 * var(--sp)); - --sp2: calc(2 * var(--sp)); - --sp2-5: calc(2.5 * var(--sp)); - --sp3: calc(3 * var(--sp)); - --sp4: calc(4 * var(--sp)); - --sp5: calc(5 * var(--sp)); - --sp6: calc(6 * var(--sp)); - --sp7: calc(7 * var(--sp)); - --sp8: calc(8 * var(--sp)); - --sp9: calc(9 * var(--sp)); - --sp10: calc(10 * var(--sp)); - --sp11: calc(11 * var(--sp)); - --sp12: calc(12 * var(--sp)); - - /** - * Gray colors. - * - * Color number roughly corresponds to its luminosity. - */ - --color--gray-hue: 201; - --color--gray-saturation: 15%; - --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */ - --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%); - --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */ - --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */ - --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */ - --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */ - --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */ - --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */ - --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */ - --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */ - - /** - * Primary colors. - * - * Color number roughly corresponds to its luminosity. - */ - --color--primary-hue: 202; - --color--primary-saturation: 79%; - --color--primary-lightness: 50; - --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness))))); - --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */ - --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */ - --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */ - --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */ - - /** - * Variables specific to text. - */ - --color-text-neutral-soft: var(--color--gray-45); - --color-text-neutral-medium: var(--color--gray-20); - --color-text-neutral-loud: var(--color--gray-5); - - --color-text-primary-medium: var(--color--primary-40); - --color-text-primary-loud: var(--color--primary-30); - - /** - * Named Colors. - */ - --color--black: #000; /* Black */ - --color--white: #fff; /* White */ - --color--red: #e33f1e; /* Red */ - --color--gold: #fdca40; /* Gold */ - --color--green: #3fa21c; /* Green */ - - /* Header */ - --header-height-wide-when-fixed: calc(6 * var(--sp)); - - /* Width of slide out navigation */ - --mobile-nav-width: 500px; - - /* Border radius */ - --border-radius: 3px; -} diff --git a/css/components/pcss/action-links.pcss.css b/css/components/pcss/action-links.pcss.css deleted file mode 100755 index 62d817c..0000000 --- a/css/components/pcss/action-links.pcss.css +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @file - * Styles for action links. -*/ -@import "../base/media-queries.pcss.css"; - -.action-links { - margin-block: 0; - margin-inline-start: 0; - margin-inline-end: 0; - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - list-style: none; - - & li { - display: inline-block; - - & a { - color: var(--color-text-primary-medium); - } - } -} - -.action-links-item { - display: inline-block; -} diff --git a/css/components/pcss/ajax-progress.module.pcss.css b/css/components/pcss/ajax-progress.module.pcss.css deleted file mode 100755 index 7212850..0000000 --- a/css/components/pcss/ajax-progress.module.pcss.css +++ /dev/null @@ -1,102 +0,0 @@ -/** - * @file - * Visual styles for ajax-progress throbber. - */ - -@import "../base/media-queries.pcss.css"; - -.ajax-progress { - display: inline-block; -} - -/** - * Throbber. - */ -.ajax-progress-throbber { - position: relative; - display: inline-flex; - align-content: center; - height: 1.125rem; - margin-block-start: -3px; - margin-block-end: 0; - margin-inline-start: var(--sp0-5); - margin-inline-end: var(--sp0-5); - vertical-align: middle; - white-space: nowrap; - line-height: 1.125rem; -} - -.ajax-progress-throbber .throbber { - width: 1.125rem; - height: 1.125rem; - border-width: 2px; - border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); -} - -.ajax-progress-throbber .message { - display: inline-block; - padding-inline-start: var(--sp0-5); - font-size: var(--font-size-s); - font-weight: 400; -} - -/** - * Full screen throbber. - */ -.ajax-progress-fullscreen { - position: fixed; - z-index: 1000; - inset-block-start: 50%; - inset-inline-start: 50%; - width: 3.5rem; - height: 3.5rem; - margin: -1.75rem; - border: 1px solid var(--color--gray-70); - border-radius: 3.5rem; - background-color: var(--color--white); - box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */ - - &::before { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - width: 1.75rem; - height: 1.75rem; - margin: -0.875rem; - content: ""; - border-width: 3px; - } -} - -[dir="rtl"] .ajax-progress-fullscreen { - box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); -} - -/** - * Common styles for all kinds of throbbers. - */ -.ajax-progress-throbber .throbber, -.ajax-progress-fullscreen::before { - animation: olivesbooks-throbber 0.75s linear infinite; - border-style: solid dotted solid solid; - border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); - border-radius: 50%; -} - -/** - * Remove margin from ajax throbbers following buttons because buttons already - * have a large margin set. - */ -html.js .button:not(.js-hide) + .ajax-progress-throbber { - margin-inline-start: 0; -} - -@keyframes olivesbooks-throbber { - 0% { - transform: rotateZ(0); - } - - 100% { - transform: rotateZ(360deg); - } -} diff --git a/css/components/pcss/autocomplete-loading.module.pcss.css b/css/components/pcss/autocomplete-loading.module.pcss.css deleted file mode 100755 index 2464789..0000000 --- a/css/components/pcss/autocomplete-loading.module.pcss.css +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @file - * Visual styles for autocomplete input field. - */ - -@import "../base/media-queries.pcss.css"; - -[type].form-autocomplete { - padding-inline-end: var(--sp3); - background-color: var(--color--white); - background-image: url("../../images/magnifying-glass.svg"); - background-repeat: no-repeat; - background-position: right var(--sp1) center; /* LTR */ - - &:disabled { - background-color: var(--color--gray-100); - } - - &.ui-autocomplete-loading { - background-image: url("../../images/throbber.svg"); - } - - &:dir(rtl) { - background-position: left var(--sp1) center; - } -} diff --git a/css/components/pcss/block.pcss.css b/css/components/pcss/block.pcss.css deleted file mode 100755 index 8fa2a37..0000000 --- a/css/components/pcss/block.pcss.css +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @file - * Block styling. - */ - -@import "../base/media-queries.pcss.css"; - -.block__title { - margin-block: 0 var(--sp); - letter-spacing: 0.02em; - color: var(--color-text-neutral-soft); - font-size: var(--font-size-s); - line-height: var(--sp); -} - -.site-footer .block__title { - color: var(--color--gray-65); -} diff --git a/css/components/pcss/book.pcss.css b/css/components/pcss/book.pcss.css deleted file mode 100755 index 97cfd17..0000000 --- a/css/components/pcss/book.pcss.css +++ /dev/null @@ -1,104 +0,0 @@ -/** - * @file - * Book module styling. - */ - -@import "../base/media-queries.pcss.css"; - -.book-pager { - display: flex; - flex-wrap: wrap; - margin-block-start: 0 var(--sp); - margin-inline-start: 0; - margin-inline-end: 0; - padding-block: 0 var(--sp); - padding-inline-start: 0; - padding-inline-end: 0; - list-style: none; - border-block-end: solid 1px var(--color--primary-40); -} - -.book-pager__item { - display: inline-block; - - @media (--sm) { - flex: 0 0 33.33%; - } -} - -.book-pager__item--center { - @media (--sm) { - text-align: center; - } -} - -.book-pager__item--next { - @media (--sm) { - margin-inline-start: auto; - text-align: end; - } -} - -.book-pager__link { - display: inline-flex; - align-items: center; - text-decoration: none; - color: var(--color-text-primary-medium); - font-family: var(--font-serif); - font-size: 18px; - font-weight: 600; -} - -.book-pager__link--previous { - &::before { - display: block; - width: var(--sp0-5); - height: var(--sp0-5); - margin-inline-end: 0.25em; - content: ""; - transform: rotate(-45deg); - border-block-start: solid 3px currentColor; - border-inline-start: solid 3px currentColor; - } -} - -.book-pager__link--next { - &::after { - display: block; - width: var(--sp0-5); - height: var(--sp0-5); - margin-inline-start: 0.25em; - content: ""; - transform: rotate(135deg); - border-block-start: solid 3px currentColor; - border-inline-start: solid 3px currentColor; - } -} - -.book-navigation__menu { - margin-block: var(--sp2); - margin-inline-start: 0; - margin-inline-end: 0; - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - list-style: none; -} - -.book-navigation__item { - margin-block: 0; - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - list-style: none; -} - -[dir="rtl"] { - & .book-pager__link--previous::before { - transform: rotate(45deg); - } - - & .book-pager__link--next::after { - transform: rotate(-135deg); - } -} diff --git a/css/components/pcss/breadcrumb.pcss.css b/css/components/pcss/breadcrumb.pcss.css deleted file mode 100755 index c050b9d..0000000 --- a/css/components/pcss/breadcrumb.pcss.css +++ /dev/null @@ -1,111 +0,0 @@ -/** - * @file - * Breadcrumb region. - */ - -@import "../base/media-queries.pcss.css"; - -.breadcrumb { - position: relative; - font-size: 14px; - font-weight: bold; - line-height: var(--sp1); - - /* Shadow on the right side of breadcrumbs for narrow screens. */ - &::after { - position: absolute; - inset-block-start: 0; - inset-inline-end: calc(var(--sp1) * -1); - width: var(--sp3); - height: var(--sp2); - content: ""; - background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ - - @media (--lg) { - content: none; - } - } - - @media (--lg) { - position: static; - } -} - -[dir="rtl"] .breadcrumb::after { - background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); -} - -.breadcrumb__content { - overflow: auto; - margin-block-start: calc(var(--sp0-5) * -1); - margin-block-end: calc(var(--sp0-5) * -1); - margin-inline-start: calc(var(--sp0-5) * -1); - margin-inline-end: calc(var(--sp1) * -1); - padding-block-start: var(--sp0-5); - padding-block-end: var(--sp0-5); - padding-inline-start: var(--sp0-5); - -webkit-overflow-scrolling: touch; - - @media (--lg) { - margin-inline-end: 0; - } -} - -.breadcrumb__list { - overflow-x: auto; - width: max-content; - margin-block: 0; - margin-inline-start: calc(var(--sp1) * -1); - margin-inline-end: calc(var(--sp1) * -1); - padding-block: 0 var(--sp1); - padding-inline-start: var(--sp1); - padding-inline-end: 0; - list-style: none; - white-space: nowrap; - - @media (--lg) { - overflow: visible; - margin-inline-start: 0; - margin-inline-end: 0; - padding-block-end: 0; - padding-inline-start: 0; - white-space: normal; - } -} - -.breadcrumb__item { - display: inline-block; - - &:nth-child(n+2)::before { - display: inline-block; - width: 8px; - height: 8px; - margin-inline: 16px 20px; - content: ""; - transform: rotate(45deg); /* LTR */ - border-block-start: 2px solid var(--color--gray-45); - border-inline-end: 2px solid var(--color--gray-45); - } - - &:last-child { - margin-inline-end: var(--sp3); - - @media (--lg) { - margin-inline-end: 0; - } - } -} - -[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { - transform: rotate(-45deg); -} - -.breadcrumb__link { - text-decoration: none; - color: var(--color-text-primary-medium); - - &:hover, - &:focus { - text-decoration: underline; - } -} diff --git a/css/components/pcss/button.pcss.css b/css/components/pcss/button.pcss.css deleted file mode 100755 index 652668b..0000000 --- a/css/components/pcss/button.pcss.css +++ /dev/null @@ -1,131 +0,0 @@ -/** - * @file - * Buttons. - */ - -@import "../base/media-queries.pcss.css"; - -.button { - display: inline-block; - height: var(--sp3); - margin-block: var(--sp1); - margin-inline-start: 0; - margin-inline-end: var(--sp1); - padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); - padding-inline: var(--sp1-5); - cursor: pointer; - text-align: center; - text-decoration: none; - color: var(--color-text-primary-medium); - border: solid 2px currentColor; - border-radius: var(--border-radius); - background-color: var(--color--white); - font-family: var(--font-sans); - font-size: var(--font-size-l); - font-weight: 700; - appearance: none; - -webkit-font-smoothing: antialiased; - - &:hover, - &:focus { - text-decoration: none; - color: var(--color-text-primary-loud); - border: solid 2px currentColor; - background: none; - font-weight: 700; - } - - &:focus { - outline: 2px solid var(--color--primary-60); - outline-offset: 2px; - } - - &:active { - color: var(--color-text-primary-medium); - border-color: currentColor; - } - - &:disabled, - &.is-disabled { - cursor: default; - color: var(--color--gray-90); - border-color: var(--color--gray-90); - } - - /* - IE11 doesn't work properly on button elements so we only do - inline-flex on modern browsers. - */ - @supports (display: inline-flex) { - display: inline-flex; - align-items: center; - - /* Top padding accounts for font not being vertically centered within line-height. */ - padding-block: 1px 0; - padding-inline: var(--sp1-5); - line-height: var(--line-height-s); - } -} - -/* No margin if is part of a menu. */ -.menu .button { - margin-block: 0; - margin-inline-start: 0; - margin-inline-end: 0; -} - -.button--small { - height: var(--sp2-5); - padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); - padding-inline: var(--sp); - font-size: var(--font-size-base); - line-height: normal; -} - -.button--primary { - color: var(--color--white); - border-color: var(--color--primary-40); - background-color: var(--color--primary-40); - - &:hover, - &:focus { - color: var(--color--white); - border-color: var(--color--primary-30); - background-color: var(--color--primary-30); - } - - &:active { - color: var(--color--white); - background-color: var(--color--primary-40); - } - - &:disabled, - &.is-disabled { - color: var(--color--white); - background-color: var(--color--gray-90); - } -} - -.button--icon-back { - display: inline-flex; - align-items: center; - - &::before { - display: block; - width: 0.5em; - height: 0.5em; - margin-inline-end: 0.5em; - content: ""; - transform: rotate(45deg); /* LTR */ - border-block-end: solid 2px currentColor; - border-inline-start: solid 2px currentColor; - } -} - -[dir="rtl"] .button--icon-back::before { - transform: rotate(-45deg); -} - -.shepherd-cancel-icon { - font-size: 1.5em; -} diff --git a/css/components/pcss/cke-dialog.pcss.css b/css/components/pcss/cke-dialog.pcss.css deleted file mode 100755 index 342e585..0000000 --- a/css/components/pcss/cke-dialog.pcss.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @file - * CKE Dialogs. - */ - -select.cke_dialog_ui_input_select { - appearance: menulist; -} diff --git a/css/components/pcss/color-picker.pcss.css b/css/components/pcss/color-picker.pcss.css deleted file mode 100755 index 02c6dff..0000000 --- a/css/components/pcss/color-picker.pcss.css +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @file - * Color picker styles. These appear within theme settings when selecting a custom color. - */ - -[data-drupal-selector="olivesbooks-color-picker"] { - & input[type="color"] { - margin-left: 13px; - vertical-align: bottom; - } -} diff --git a/css/components/pcss/comments.pcss.css b/css/components/pcss/comments.pcss.css deleted file mode 100755 index 042554a..0000000 --- a/css/components/pcss/comments.pcss.css +++ /dev/null @@ -1,233 +0,0 @@ -/** - * @file - * Comment section and individual comments. - */ - -@import "../base/media-queries.pcss.css"; - -:root { - --comment-indentation: var(--sp2); - --comment-indentation--md: var(--sp4); -} - -.comment--level-1 { - border-block-start: 2px solid var(--color--gray-95); - - & ~ .comment--level-1 { - margin-block-start: var(--sp2); - } -} - -.comments__title { - display: flex; - align-items: center; - margin-block-start: 0; -} - -.comments__count { - position: relative; - display: inline-block; - min-width: 34px; - margin-block-start: 0; - margin-block-end: var(--sp0-5); - margin-inline-start: var(--sp); - margin-inline-end: var(--sp); - padding-block: 0; - padding-inline-start: 5px; - padding-inline-end: 5px; - text-align: center; - color: var(--color--white); - border-radius: 2px; - background-color: var(--color--primary-40); - font-size: 11px; - line-height: 21px; - - &::after { - position: absolute; - inset-block-end: -7px; - inset-inline-start: 8px; - width: 0; - height: 0; - content: ""; - border-block-start: 7px solid var(--color--primary-40); - border-inline-end: 8px solid transparent; - } -} - -.comment-form { - padding-block-end: var(--sp2); -} - -.add-comment__form { - padding-inline-start: 0; -} - -.comment { - position: relative; - padding-block-start: var(--sp2); - padding-inline-start: var(--sp3); - - @media (--grid-md) { - padding-inline-start: 0; - } -} - -.comment__text-content { - font-size: 16px; - - & blockquote { - font-size: 21px; - line-height: var(--sp2); - } - - /* Override for .field:not(:last-child) */ - &:not(:last-child) { - margin-block-end: 0; - } -} - -.comment__links { - margin-block: var(--sp) 0; -} - -.comment__links-link { - text-decoration: none; - font-size: 14px; - font-weight: bold; - line-height: var(--sp); - - &:hover { - text-decoration: underline; - } -} - -.add-comment__picture-wrapper { - inset-block-start: calc(var(--line-height-base) + var(--sp0-5)); -} - -.add-comment__picture, -.comment__picture { - position: absolute; - inset-inline-start: 0; - overflow: hidden; - width: var(--sp2); - height: var(--sp2); - border-radius: 50%; - background-color: var(--color--gray-95); - - & *:not(img) { - display: inherit; - width: inherit; - height: inherit; - } - - & img { - width: 100%; - height: 100%; - object-fit: cover; - - /* @TODO: create image-style for profile's avatar to have image squared by default. */ - @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { - position: absolute; - /* stylelint-disable csstools/use-logical */ - top: 50%; - left: 50%; - /* stylelint-enable csstools/use-logical */ - width: 100%; - height: auto; - transform: translate(-50%, -50%); - } - } - - @media (--grid-md) { - inset-inline-start: calc(-1 * var(--sp5)); - width: var(--sp3); - height: var(--sp3); - } -} - -.indented .comment__picture { - @media (--grid-md) { - inset-inline-start: calc(-1 * var(--sp4)); - width: var(--sp2); - height: var(--sp2); - } -} - -.comment__meta { - & * { - display: inline; - } -} - -.comment__author { - margin-inline-end: var(--sp); - font-family: var(--font-sans); - font-size: 16px; - font-weight: 700; - line-height: var(--sp); - - & a { - text-decoration: none; - } -} - -.comment__time { - margin: 0; - color: var(--color-text-neutral-soft); - font-family: var(--font-sans); - font-size: 14px; - line-height: var(--sp); -} - -.indented { - margin-inline-start: var(--comment-indentation); - - & > .comment:not(:last-of-type, .has-children)::before { - position: absolute; - inset-block-start: var(--sp2); - inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */ - width: 0; - height: 100%; - content: ""; - border-inline-start: solid 1px var(--color--gray-95); - - @media (--md) { - inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); - } - } - - @media (--md) { - margin-inline-start: var(--comment-indentation--md); - } -} - -.show-hide-btn { - margin-block-start: var(--sp2); - margin-block-end: 0; - margin-inline-start: var(--sp3); - margin-inline-end: 0; - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - cursor: pointer; - color: var(--color-text-neutral-medium); - border: 0; - background: none; - font-size: 14px; - font-weight: 600; - line-height: 18px; - appearance: none; - - &[aria-expanded="true"]::after { - content: "\0020 -"; - } - - &[aria-expanded="false"]::after { - content: "\0020 +"; - } - - @media (--grid-md) { - margin-inline-start: 0; - } -} diff --git a/css/components/pcss/container-inline.module.pcss.css b/css/components/pcss/container-inline.module.pcss.css deleted file mode 100755 index f6d46f1..0000000 --- a/css/components/pcss/container-inline.module.pcss.css +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @file - * Inline items. - */ - -.container-inline div, -.container-inline label { - display: inline-block; -} - -.form-items-inline { - margin-block: -0.125em; /* 2px */ -} - -.form-items-inline > .form-item { - display: inline-block; - margin-block: 0.125em; -} diff --git a/css/components/pcss/content-moderation.pcss.css b/css/components/pcss/content-moderation.pcss.css deleted file mode 100755 index 40243fc..0000000 --- a/css/components/pcss/content-moderation.pcss.css +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @file - * Styles for content moderation toolbar. - */ - -@import "../base/media-queries.pcss.css"; - -.entity-moderation-form { - flex-direction: column; - padding-inline-start: var(--sp); - padding-inline-end: var(--sp); - border: 1px solid var(--color--gray-95); - background-color: var(--color--gray-100); - - & select, - & input:not([type="submit"]) { - background-color: var(--color--white); - } - - @media (--md) { - flex-direction: row; - } -} - -.entity-moderation-form__item { - flex-basis: 0; - margin-inline-end: var(--sp); - - &:last-child { - align-self: flex-start; - margin-inline-end: 0; - - @media (--md) { - align-self: flex-end; - } - } -} - -.layout--content-narrow, -.layout--pass--content-narrow > *, -.layout--content-medium, -.layout--pass--content-medium > * { - & .entity-moderation-form { - width: 100%; - margin-inline-start: 0; - - @supports (width: max-content) { - width: max-content; - } - - @media (--grid-md) { - width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); - margin-block: var(--sp2) var(--sp4); - margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap))); - } - - @media (--lg) { - width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); - margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); - } - - @media (--grid-max) { - width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)); - margin-inline-start: 0; - } - } -} diff --git a/css/components/pcss/details.pcss.css b/css/components/pcss/details.pcss.css deleted file mode 100755 index 4f94163..0000000 --- a/css/components/pcss/details.pcss.css +++ /dev/null @@ -1,115 +0,0 @@ -/** - * @file - * Collapsible details. - */ - -@import "../base/media-queries.pcss.css"; - -:root { - --details-border-width: 1px; - --details-summary-transition: background-color 0.12s ease-in-out; -} - -.olivesbooks-details { - display: block; - margin-block: var(--sp1); - color: inherit; - border: var(--details-border-width) solid var(--color--gray-95); - border-radius: var(--border-radius); - box-shadow: 0 1px 4px var(--color--gray-90); -} - -/* Details summary styles */ -.olivesbooks-details__summary { - position: relative; - padding-block: var(--sp1); - padding-inline-start: var(--sp2); - padding-inline-end: var(--sp1); - list-style: none; - cursor: pointer; - transition: var(--details-summary-transition); - word-wrap: break-word; - hyphens: auto; - color: inherit; - background-color: var(--color--gray-100); - font-size: var(--line-height-s); - font-weight: 700; - line-height: var(--sp1); -} - -/* Arrow icon */ -.olivesbooks-details__summary::before { - position: absolute; - inset-block-start: 50%; - inset-inline-start: var(--sp0-75); - display: block; - width: 10px; - height: 10px; - content: ""; - transform: translateY(-50%) rotate(45deg); /* LTR */ - border-top: solid 2px currentColor; - border-right: solid 2px currentColor; -} - -[dir="rtl"] .olivesbooks-details__summary::before { - transform: translateY(-50%) rotate(-135deg); -} - -/* Pseudo-selector to manage focus styles */ -.olivesbooks-details__summary::after { - position: absolute; - inset: calc(var(--details-border-width) * -1); - content: ""; - pointer-events: none; - opacity: 0; - border-radius: var(--border-radius); - box-shadow: inset 0 0 0 2px var(--color--primary-60); -} - -/* Hide the marker */ -.olivesbooks-details__summary::-webkit-details-marker { - display: none; -} - -/* Disable default outline for summary, since we have own implementation */ -.olivesbooks-details__summary:focus { - outline: solid 2px transparent; - outline-offset: -4px; -} - -/* Details summary, hover state */ -.olivesbooks-details__summary:hover { - background-color: var(--color--gray-95); -} - -/* Details summary, focus and active states */ -.olivesbooks-details__summary:focus::after, -.olivesbooks-details__summary:active::after { - opacity: 1; -} - -/* Rotate arrow icon of the details summary, when details expanded */ -.olivesbooks-details[open] > .olivesbooks-details__summary::before { - margin-block-start: -2px; - transform: translateY(-50%) rotate(135deg); -} - -/* Details content wrapper */ -.olivesbooks-details__wrapper { - margin: var(--sp1); - - @media (--lg) { - margin-block-start: var(--sp1-5); - margin-block-end: var(--sp1-5); - margin-inline-start: var(--sp2); - margin-inline-end: var(--sp2); - } -} - -/* Description */ -.olivesbooks-details__description { - margin-block-end: var(--sp1); - color: var(--color-text-neutral-medium); - font-size: var(--font-size-xs); - line-height: var(--line-height-s); -} diff --git a/css/components/pcss/dropbutton.pcss.css b/css/components/pcss/dropbutton.pcss.css deleted file mode 100755 index 0a30685..0000000 --- a/css/components/pcss/dropbutton.pcss.css +++ /dev/null @@ -1,157 +0,0 @@ -/** - * @file - * Dropbutton styles. - */ - -.dropbutton-wrapper { - --dropbutton--height: var(--sp1-5); - --dropbutton--secondary-bg-color: var(--color--white); - --dropbutton--active-bg-color: var(--color--gray-90); - --dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ - --dropbutton--border-radius: var(--border-radius); - --dropbutton--font-size: var(--font-size-s); - --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ - --dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ - - &.open { - position: relative; - z-index: 100; /* Ensure this appears above all other dropbuttons. */ - filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color)); - } -} - -.dropbutton-widget { - position: relative; - width: max-content; - height: var(--dropbutton--height); - padding-inline-end: var(--dropbutton--height); - border-radius: var(--dropbutton--border-radius); - - @nest .dropbutton-single & { - padding-inline-end: 0; - } - - @nest .dropbutton-wrapper.open & { - border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0; - } -} - -.dropbutton { - height: var(--dropbutton--height); - margin-block: 0; - margin-inline-start: 0; - padding-inline-start: 0; - list-style: none; - font-size: var(--dropbutton--font-size); -} - -/* This is the button that expands/collapses the secondary options. */ -.dropbutton-toggle button { - position: absolute; - top: 0; - inset-inline-end: 0; - display: flex; - align-items: center; - justify-content: center; - width: var(--dropbutton--height); - height: var(--dropbutton--height); - padding: 0; - cursor: pointer; - border-color: transparent; - border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ - background: var(--dropbutton--active-bg-color); - - &:focus { - outline: solid 2px var(--dropbutton--outline-color); - outline-offset: -2px; - } - - &::before { - display: block; - width: var(--sp0-5); - height: var(--sp0-5); - content: ""; - transform: translateY(-25%) rotate(45deg); - border-right: solid 2px var(--dropbutton--outline-color); - border-bottom: solid 2px var(--dropbutton--outline-color); - - @nest .dropbutton-wrapper.open & { - transform: translateY(25%) rotate(225deg); - } - } - - &:dir(rtl) { - border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); - } -} - -/* This is the first
  • element in the list of actions. */ -.dropbutton-action { - &:first-child { - margin-inline-end: 2px; - border: solid 1px transparent; - border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */ - background: var(--dropbutton--active-bg-color); - - &:dir(rtl) { - border: solid 1px transparent; - border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; - } - } - - & a { - display: flex; - align-items: center; - margin-bottom: -2px; /* Account for borders. */ - padding: 0 9px; - text-decoration: none; - color: var(--dropbutton--text-color); - font-weight: 600; - - &:hover { - color: inherit; - } - - &:focus { - outline: solid 2px var(--dropbutton--outline-color); - outline-offset: -1px; /* Overlap parent container by 1px. */ - } - } - - /* Special rules if there is only one action. */ - @nest .dropbutton-single & { - &:first-child { - border-right: solid 1px transparent; /* LTR */ - border-radius: var(--dropbutton--border-radius); - - &:dir(rtl) { - border: solid 1px transparent; - } - } - - & a { - justify-content: center; - } - } -} - -/* These are the
  • elements other than the first. */ -.secondary-action { - visibility: hidden; - width: calc(100% + var(--dropbutton--height)); - border-right: 1px solid var(--dropbutton--active-bg-color); - border-left: 1px solid var(--dropbutton--active-bg-color); - background: var(--dropbutton--secondary-bg-color); - - &:last-child { - border-bottom: 1px solid var(--dropbutton--active-bg-color); - } - - & a:hover { - color: var(--dropbutton--text-hover-color); - } - - @nest .dropbutton-wrapper.open & { - visibility: visible; - } -} diff --git a/css/components/pcss/embedded-media.pcss.css b/css/components/pcss/embedded-media.pcss.css deleted file mode 100755 index b6f52a8..0000000 --- a/css/components/pcss/embedded-media.pcss.css +++ /dev/null @@ -1,127 +0,0 @@ -/** - * @file - * Embedded Media. - */ - -@import "../base/media-queries.pcss.css"; - -figure { - background: var(--color--gray-100); -} - -figcaption { - padding-block: var(--sp0-5); - padding-inline-start: var(--sp0-5); - padding-inline-end: var(--sp0-5); - color: var(--color-text-neutral-medium); - background: var(--color--gray-100); - font-family: var(--font-serif); - font-size: 14px; - font-style: italic; - line-height: var(--sp); - - @media (--sm) { - padding-block: var(--sp); - padding-inline-start: var(--sp); - padding-inline-end: var(--sp); - } -} - -.align-right { - float: none; /* Override core's align.module.css. */ - max-width: 100%; - margin-block: var(--sp3); - margin-inline-start: 0; - margin-inline-end: 0; - - @media (--grid-md) { - float: right; /* LTR */ - max-width: 50%; - margin-block-start: var(--sp); - margin-block-end: var(--sp); - margin-inline-start: var(--sp); - margin-inline-end: 0; - - /** - * Chromium and Webkit do not yet support flow relative logical properties, - * such as float: inline-end. However, PostCSS Logical does not compile this - * value, so we accommodate by not using these. - * - * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values - * @see https://github.com/csstools/postcss-plugins/issues/632 - */ - &:dir(rtl) { - float: left; - } - } -} - -/* Pull out of grid if nested in content narrow layout. */ -.layout--content-narrow .align-right, -.layout--pass--content-narrow > * .align-right { - /* @todo this can be simplified. */ - @media (--grid-md) { - margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); - } - - @media (--lg) { - margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap)))); - } - - @media (--nav) { - margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); - } - - @media (--grid-max) { - margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); - } -} - -.align-left { - float: none; /* Override core's align.module.css. */ - max-width: 100%; - margin-block-start: var(--sp3); - margin-block-end: var(--sp3); - margin-inline-start: 0; - margin-inline-end: 0; - - @media (--grid-md) { - float: left; /* LTR */ - max-width: 50%; - margin-block-start: var(--sp); - margin-block-end: var(--sp); - margin-inline-start: 0; - margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */ - - /** - * Chromium and Webkit do not yet support flow relative logical properties, - * such as float: inline-end. However, PostCSS Logical does not compile this - * value, so we accommodate by not using these. - * - * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values - * @see https://github.com/csstools/postcss-plugins/issues/632 - */ - &:dir(rtl) { - float: right; - } - } -} - -/* Pull out of grid if nested in content narrow layout. */ -.layout--content-narrow .align-left, -.layout--pass--content-narrow > * .align-left { - @media (--grid-md) { - margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); - } -} - -.align-center img, -.align-center video, -.align-center audio { - margin-inline: auto; -} - -.media-oembed-content { - display: block; - max-width: 100%; -} diff --git a/css/components/pcss/feed.pcss.css b/css/components/pcss/feed.pcss.css deleted file mode 100755 index 1229c7f..0000000 --- a/css/components/pcss/feed.pcss.css +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @file - * RSS feed. - */ - -@import "../base/media-queries.pcss.css"; - -.feed-icon { - display: flex; - align-items: center; - text-decoration: none; - color: var(--color-text-neutral-soft); - - &:hover { - color: var(--color--primary-50); - } -} - -.feed-icon__label { - flex-shrink: 0; - letter-spacing: 0.08em; - font-size: var(--font-size-xxs); - font-weight: 600; -} - -.feed-icon__icon { - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - width: var(--sp1-5); - height: var(--sp1-5); - margin-inline-start: var(--sp0-5); - color: var(--color--white); - background-color: var(--color--primary-50); - - & svg { - vertical-align: top; - fill: currentColor; - } -} diff --git a/css/components/pcss/field.pcss.css b/css/components/pcss/field.pcss.css deleted file mode 100755 index 7c08eaf..0000000 --- a/css/components/pcss/field.pcss.css +++ /dev/null @@ -1,53 +0,0 @@ -/** - * @file - * Visual styles for fields. - */ - -@import "../base/media-queries.pcss.css"; - -.field:not(:last-child) { - margin-block-end: var(--sp2); -} - -.node--view-mode-teaser .field { - margin-block-end: var(--sp); - - &:last-child { - margin-block-end: 0; - } - - @media (--lg) { - margin-block-end: var(--sp2); - } -} - -.field__label { - font-weight: bold; -} - -.field--label-inline .field__label, -.field--label-inline .field__items { - float: left; /* LTR */ - - /** - * Chromium and Webkit do not yet support flow relative logical properties, - * such as float: inline-end. However, PostCSS Logical does not compile this - * value, so we accommodate by not using these. - * - * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values - * @see https://github.com/csstools/postcss-plugins/issues/632 - */ - &:dir(rtl) { - float: right; - } -} - -.field--label-inline .field__label, -.field--label-inline > .field__item, -.field--label-inline .field__items { - padding-inline-end: 0.5em; -} - -.field--label-inline .field__label::after { - content: ":"; -} diff --git a/css/components/pcss/fieldset.pcss.css b/css/components/pcss/fieldset.pcss.css deleted file mode 100755 index b6bc927..0000000 --- a/css/components/pcss/fieldset.pcss.css +++ /dev/null @@ -1,133 +0,0 @@ -/** - * @file - * Fieldset. - */ - -@import "../base/media-queries.pcss.css"; - -.fieldset { - min-width: 0; - margin-block: var(--sp1); - margin-inline-start: 0; - margin-inline-end: 0; - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - color: inherit; - border: solid 2px var(--color--gray-45); - border-radius: var(--border-radius); - background-color: var(--color--white); -} - -.fieldset--group { - width: 100%; - color: inherit; - border: 0; - border-radius: 0; - background: none; - box-shadow: none; -} - -.fieldset__legend { - float: left; /* Prevent sticking out of top of fieldset. */ - width: 100%; - color: inherit; - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); - background-color: var(--color--gray-45); - font-size: var(--font-size-l); - font-weight: 700; - line-height: var(--line-height-base); - - & + * { - clear: left; - } - - & .fieldset__label { - &.form-required { - &::after { - background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); - } - } - } -} - -.fieldset__legend--composite { - margin-block-start: 2px; - color: inherit; -} - -.fieldset__legend--invisible { - margin: 0; -} - -.fieldset__legend--group { - color: inherit; -} - -.fieldset__label { - display: block; - padding-block: var(--sp0-5); - padding-inline-start: var(--sp1); - padding-inline-end: var(--sp1); - color: var(--color--white); - line-height: var(--line-height-s); -} - -.fieldset__label.is-disabled { - color: var(--color-text-neutral-soft); -} - -.fieldset__description { - margin-block: var(--sp0-5); - font-size: var(--font-size-xs); - line-height: var(--line-height-s); -} - -.fieldset__description.is-disabled { - color: var(--input--disabled-fg-color); -} - -.fieldset__error-message { - margin-block: var(--sp0-5); - padding-inline-start: var(--sp1-5); - color: var(--color--red); - background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: left top; /* LTR */ - background-size: var(--sp1) var(--sp1); - font-size: var(--font-size-s); - line-height: var(--line-height-s); - - @media screen and (-ms-high-contrast: active) { - background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); - } -} - -[dir="rtl"] .fieldset__error-message { - background-position: left top; -} - -.fieldset__wrapper { - margin-block-start: 0; - padding-block: var(--sp); - padding-inline-start: var(--sp); -} - -.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { - border: solid 2px var(--color--gray-45); - border-bottom-right-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); -} - -.fieldset__wrapper--group { - margin-block: 0; - margin-inline-start: 0; - margin-inline-end: 0; -} - -.fieldset__wrapper > .container-inline { - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; -} diff --git a/css/components/pcss/footer.pcss.css b/css/components/pcss/footer.pcss.css deleted file mode 100755 index 853b2fb..0000000 --- a/css/components/pcss/footer.pcss.css +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @file - * Footer regions. - */ - -@import "../base/media-queries.pcss.css"; - -.site-footer { - position: relative; /* stack above left social bar */ - color: var(--color--gray-65); - background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%); - - & .menu { - margin-inline-start: 0; - list-style: none; - - & ul { - margin-inline-start: var(--sp); - } - - & li { - margin-block-end: var(--sp0-5); - } - } - - & a { - color: inherit; - - &:hover { - text-decoration: none; - } - } -} - -@media (--nav) { - body:not(.is-always-mobile-nav) .site-footer { - border-inline-start: solid var(--content-left) var(--color--black); - } -} diff --git a/css/components/pcss/form-boolean.pcss.css b/css/components/pcss/form-boolean.pcss.css deleted file mode 100755 index 9064b97..0000000 --- a/css/components/pcss/form-boolean.pcss.css +++ /dev/null @@ -1,99 +0,0 @@ -/** - * @file - * Checkbox and radio input elements. - */ - -@import "../base/media-queries.pcss.css"; - -input[type="checkbox"], -input[type="radio"] { - display: inline-block; - width: var(--sp1-5); - height: var(--sp1-5); - margin: 0; - vertical-align: middle; - border: 1px solid var(--color--gray-60); - border-radius: 3px; - background-color: var(--color--white); - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: var(--sp1) var(--sp1); - appearance: none; - - &:focus { - border: solid 2px var(--color--primary-50); - outline: solid 2px var(--color--primary-50); - - @supports (outline-style: double) { - border-width: 1px; - outline-width: 6px; - outline-style: double; - outline-offset: -1px; - } - } - - &:hover { - border-color: var(--color--primary-60); - } - - &[disabled] { - background-color: var(--color--gray-100); - - &:hover { - border-color: var(--color--gray-60); - } - - &:checked { - border-width: 1px; - } - } - - &:checked { - border-width: 2px; - } - - &.error { - border: solid 2px var(--color--red); - - &:focus { - outline-color: var(--color--red); - outline-offset: -2px; - } - } - - & + label { - display: inline-block; - padding-inline-start: var(--sp0-5); - } -} - -input[type="checkbox"] { - &:checked { - background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E"); - } -} - -input[type="radio"] { - border-radius: 50%; - - &:checked { - background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); - background-size: 17px; - } - - &:focus { - border-width: 2px; - border-color: var(--color--primary-50); - outline-color: transparent; - box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50); - } - - &.error:focus { - outline-color: transparent; - box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); - } -} - -.form-type-boolean { - margin-block: var(--sp1); -} diff --git a/css/components/pcss/form-select.pcss.css b/css/components/pcss/form-select.pcss.css deleted file mode 100755 index 37d08fd..0000000 --- a/css/components/pcss/form-select.pcss.css +++ /dev/null @@ -1,84 +0,0 @@ -/** - * @file - * Select input elements. - */ - -@import "../base/media-queries.pcss.css"; - -:root { - --form-element-select-icon: url("../../images/chevron-down.svg"); -} - -select { - max-width: 100%; - height: var(--sp3); - padding-block: 0; - padding-inline-start: var(--sp); - padding-inline-end: var(--sp3); - color: var(--color-text-neutral-loud); - border: 1px solid var(--color--gray-60); - border-radius: var(--border-radius); - background-color: var(--color--white); - background-image: var(--form-element-select-icon); - background-repeat: no-repeat; - background-position: right var(--sp) center; /* LTR */ - font-family: inherit; - font-size: inherit; - appearance: none; - - &:focus { - border: solid 2px var(--color--primary-50); - outline: solid 2px var(--color--primary-50); - - @supports (outline-style: double) { - border-width: 1px; - outline-width: 6px; - outline-style: double; - outline-offset: -1px; - } - } - - &[disabled] { - color: var(--color--gray-60); - background-color: var(--color--gray-100); - } - - &.error { - border: solid 2px var(--color--red); - - &:focus { - outline-color: var(--color--red); - } - } - - &[multiple] { - height: auto; - padding: var(--sp0-5); - background-image: none; - line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ - - & option { - padding: var(--sp0-5); - } - } - - &.form-element--small { - height: var(--sp2-5); - } - - /* Necessary to show chevron in forced colors mode in modern browsers. */ - @media (forced-colors: active) { - padding-inline-end: var(--sp); - background-image: none; - appearance: listbox; /* Default appearance to whatever the browser's default is. */ - @supports (appearance: revert) { - appearance: revert; - } - } -} - -[dir="rtl"] select { - background-position: left var(--sp) center; -} diff --git a/css/components/pcss/form-text.pcss.css b/css/components/pcss/form-text.pcss.css deleted file mode 100755 index defea74..0000000 --- a/css/components/pcss/form-text.pcss.css +++ /dev/null @@ -1,90 +0,0 @@ -/** - * @file - * Text input elements. - */ - -@import "../base/media-queries.pcss.css"; - -[type="color"], -[type="date"], -[type="datetime-local"], -[type="email"], -[type="file"], -[type="month"], -[type="number"], -[type="password"], -[type="search"], -[type="tel"], -[type="text"], -[type="time"], -[type="url"], -[type="week"], -textarea { - width: 100%; - max-width: 100%; - min-height: var(--sp3); - padding: 0 var(--sp); - color: var(--color-text-neutral-loud); - border: 1px solid var(--color--gray-60); - border-radius: var(--border-radius); - background-color: var(--color--white); - font-family: inherit; - font-size: inherit; - appearance: none; - - &:focus { - border: solid 2px var(--color--primary-50); - outline: solid 2px var(--color--primary-50); - - @supports (outline-style: double) { - border-width: 1px; - outline-width: 6px; - outline-style: double; - outline-offset: -1px; - } - } - - &[disabled] { - color: var(--color--gray-60); - background-color: var(--color--gray-100); - } - - &.error { - border: solid 2px var(--color--red); - - &:focus { - outline-color: var(--color--red); - outline-offset: -2px; - } - & + .ck-editor > .ck-editor__main { - border: solid 2px var(--color--red); - } - } - - &.form-element--small { - min-height: var(--sp2-5); - } - - @media (--sm) { - width: auto; - } -} - -[type="date"] { - /* Ensure that date field isn't larger than other fields. */ - &::-webkit-datetime-edit-fields-wrapper { - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - } -} - -[type="file"] { - height: auto; - padding-block: var(--sp0-75); -} - -[type="color"] { - width: var(--sp3); - padding: 0; -} diff --git a/css/components/pcss/form-textarea.pcss.css b/css/components/pcss/form-textarea.pcss.css deleted file mode 100755 index 5ca1567..0000000 --- a/css/components/pcss/form-textarea.pcss.css +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @file - * Textarea. - */ - -@import "../base/media-queries.pcss.css"; - -textarea { - display: block; - width: 100%; - min-height: var(--sp8); - padding: var(--sp); -} diff --git a/css/components/pcss/form.pcss.css b/css/components/pcss/form.pcss.css deleted file mode 100755 index b422853..0000000 --- a/css/components/pcss/form.pcss.css +++ /dev/null @@ -1,193 +0,0 @@ -/** - * @file - * Main form and form item styles. - */ - -@import "../base/media-queries.pcss.css"; - -::placeholder { - color: var(--color--gray-60); -} - -/** - * General form item. - */ -.form-item { - margin-block: var(--sp1); -} - -.form-item__label--multiple-value-form { - margin-block: 0; - font-size: inherit; - font-weight: inherit; - line-height: inherit; -} - -/** - * When a table row or a container-inline has a single form item, prevent it - * from adding unnecessary extra spacing. - * If it has multiple form items, allow spacing between them, overriding core. - */ -tr .form-item, -.container-inline .form-item { - margin-block: var(--sp0-5); -} - -/** - * Form element label. - */ -.form-item__label { - display: block; - margin-block: var(--sp0-5); -} - -.container-inline .form-item__label { - margin-inline-end: 1em; -} - -.form-item__label--multiple-value-form { - margin-block: 0; - font-size: inherit; - font-weight: inherit; - line-height: inherit; -} - -.form-item__label[for] { - cursor: pointer; -} - -.form-item__label.option { - display: inline; - font-weight: normal; -} - -/* Label states. */ -.form-item__label.is-disabled { - cursor: default; - color: var(--color--gray-70); -} - -/* Form required star icon */ -.form-item__label.form-required::after, -.fieldset__label.form-required::after, -.required-mark::after { - display: inline-block; - width: 0.5rem; - height: 0.5rem; - margin-inline: 0.3em; - content: ""; - vertical-align: text-top; - /* Use a background image to prevent screen readers from announcing the text. */ - background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A"); - background-repeat: no-repeat; - background-size: 0.5rem 0.5rem; - - @media screen and (-ms-high-contrast: active) { - background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); - } -} - -/** - * Form item description. - */ -.form-item__description { - margin-block: var(--sp0-5); - max-width: 60ch; - font-size: var(--font-size-s); - line-height: var(--line-height-s); -} - -.field-multiple-table + .form-item__description { - margin-block-start: 0; -} - -/** - * Error message (Inline form errors). - */ -.form-item--error-message { - margin-block: var(--sp0-5); - padding-inline-start: var(--sp1-5); - color: var(--color--red); - background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: left top; /* LTR */ - background-size: var(--sp1) var(--sp1); - font-size: var(--font-size-s); - line-height: var(--line-height-s); - - @media screen and (-ms-high-contrast: active) { - background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); - } -} - -[dir="rtl"] .form-item--error-message { - background-position: right top; -} - -/** - * Form actions. - */ -.form-actions { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - margin-block: var(--sp0-5); -} - -.form-actions .button, -.form-actions .action-link { - margin-block: var(--sp0-5); -} - -.form-actions .ajax-progress--throbber { - align-self: center; -} - -/** - * Custom label placement for editor filter format select. - */ -.form-item--editor-format { - display: flex; - flex-wrap: wrap; - align-items: center; - max-width: 100%; -} - -.form-item--editor-format .form-item__label, -.form-item--editor-format .form-item__prefix, -.form-item--editor-format .form-item__suffix, -.form-item--editor-format .form-element--editor-format { - min-width: 1px; -} - -.form-item--editor-format .form-item__label, -.form-item--editor-format .form-item__prefix, -.form-item--editor-format .form-item__suffix { - margin-inline-end: var(--sp0-5); -} - -.form-item--editor-format .form-item__description, -.form-item--editor-format .form-item--error-message { - flex: 0 1 100%; - min-width: 1px; -} - -/** - * Inline forms. - */ -.form--inline { - & > * { - display: inline-block; - margin-top: var(--sp0-5); - margin-bottom: 0; - vertical-align: top; /* Ensure proper alignment if description is present. */ - } - - & .form-item__label { - margin: 0; - } - - & .form-actions { - margin-top: var(--sp1-5); - } -} diff --git a/css/components/pcss/forum.pcss.css b/css/components/pcss/forum.pcss.css deleted file mode 100755 index 5ae66f8..0000000 --- a/css/components/pcss/forum.pcss.css +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @file - * Forum specific styles. - */ - -@import "../base/media-queries.pcss.css"; - -.forum { - & table { - width: 100%; - } -} - -.forum__name--link, -.forum__last-reply a, -.forum__title a { - color: var(--color-text-primary-medium); - font-weight: bold; -} diff --git a/css/components/pcss/header-buttons-mobile.pcss.css b/css/components/pcss/header-buttons-mobile.pcss.css deleted file mode 100755 index 4cf6bbe..0000000 --- a/css/components/pcss/header-buttons-mobile.pcss.css +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @file - * Header Mobile Buttons. - */ - -@import "../base/media-queries.pcss.css"; - -.mobile-buttons { - margin-block-start: var(--sp0-5); - margin-inline-start: auto; - - @media (--sm) { - margin-block-start: var(--sp2); - } - - @media (--md) { - margin-block-start: var(--sp4); - } - - @media (--nav) { - margin-block-start: var(--sp6); - } -} - -@media (--nav) { - body:not(.is-always-mobile-nav) .mobile-buttons { - display: none; - } -} diff --git a/css/components/pcss/header-navigation.pcss.css b/css/components/pcss/header-navigation.pcss.css deleted file mode 100755 index 9cf27bd..0000000 --- a/css/components/pcss/header-navigation.pcss.css +++ /dev/null @@ -1,128 +0,0 @@ -/** - * @file - * Navigation in header. - */ - -@import "../base/media-queries.pcss.css"; - -.header-nav { - position: fixed; - z-index: 501; /* Appear above overlay and contextual links in header. */ - inset-block-start: 0; - inset-inline-start: 100%; - visibility: hidden; - overflow: auto; - /* Ensure that header nav not use additional space and force system branding - * block text to unnecessarily wrap. */ - flex-basis: max-content; - width: 100%; - max-width: var(--mobile-nav-width); - height: 100%; - padding-block: 0 var(--sp); - padding-inline-start: var(--sp); - padding-inline-end: var(--sp); - /* Create room for the "close" button. We cannot use margin because the - * mobile navigation needs to slide beneath the button, but we also cannot - * use padding because that would enable the button to scroll out of the - * viewport on short screens. */ - border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); - background-color: var(--color--white); - box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); - - &.is-active { - visibility: visible; - transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ - - &:dir(rtl) { - transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px))); - } - } - - @media (--sm) { - border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px)); - } - - @media (--md) { - padding-block-end: var(--sp3); - padding-inline-start: var(--sp3); - border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px)); - } - - @media (--lg) { - grid-column: 5 / 14; - } - - /* - * Ensure top border has the same color as the background when in forced colors. - */ - @media (forced-colors: active) { - border-top-color: canvas; - } -} - -/* - * Only apply transition styles when JS is loaded. This - * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 - */ -html.js .header-nav { - transition: visibility 0.2s, transform 0.2s; -} - -body:not(.is-always-mobile-nav) .header-nav { - @media (--nav) { - position: static; - display: flex; - visibility: visible; - overflow: visible; - grid-column: 5 / 15; - align-items: center; - justify-content: flex-end; - max-width: none; - height: var(--header-height-wide-when-fixed); - margin-block-start: auto; - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - transition: transform 0.2s; - transform: none; - border-block-start: 0; - box-shadow: none; - } -} - -body.is-always-mobile-nav { - & .header-nav { - @media (--nav) { - overflow: auto; - max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); - padding-inline-end: var(--sp); - transition: transform 0.2s, visibility 0.2s; - border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)); - } - - @media (--grid-max) { - max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap))))); - padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); - } - } -} - -.header-nav-overlay { - position: fixed; - z-index: 101; - inset-block-start: 0; - inset-inline-start: 0; - display: none; - width: 100%; - height: 100vh; - opacity: 0.2; - background: var(--color--gray-5); - - @media (forced-colors: active) { - background: canvastext; - } - - @nest .is-overlay-active & { - display: block; - } -} diff --git a/css/components/pcss/header-search-narrow.pcss.css b/css/components/pcss/header-search-narrow.pcss.css deleted file mode 100755 index 60b167f..0000000 --- a/css/components/pcss/header-search-narrow.pcss.css +++ /dev/null @@ -1,173 +0,0 @@ -/** - * @file - * Header Search Narrow Block. - */ - -@import "../base/media-queries.pcss.css"; - -.block-search-narrow { - margin-inline: calc(-1 * var(--sp)); - margin-block-end: var(--sp2); - background: var(--color--black); - - & .search-block-form { - display: flex; - } - - & .form-item { - flex-grow: 1; - margin: 0; - } - - & .form-actions { - margin: 0; - } - - & input[type="search"] { - width: calc(100% + var(--sp2)); - height: calc(3 * var(--sp)); - padding-block: 0; - padding-inline-start: var(--sp); - padding-inline-end: var(--sp); - transition: background-size 0.4s; - color: var(--color--white); - border: solid 1px transparent; - background-color: transparent; - background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ - background-repeat: no-repeat; - background-position: bottom left; /* LTR */ - background-size: 0% 5px; - box-shadow: none; - font-family: var(--font-serif); - font-size: 16px; - -webkit-appearance: none; - - &:focus { - outline: solid 4px transparent; - outline-offset: -4px; - background-size: 100% 5px; - } - - @media (--md) { - height: calc(4 * var(--sp)); - padding-inline-start: var(--sp2); - padding-inline-end: var(--sp2); - } - } - - & .search-form__submit { - position: relative; - overflow: hidden; - align-self: stretch; - width: var(--sp3); - height: auto; - margin-block: 0; - margin-inline-start: 0; - margin-inline-end: 0; - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: 0; - cursor: pointer; - border-color: transparent; - background-color: transparent; - - /* - When in Windows high contrast mode, FF will not output either background - images or SVGs that are nested directly within a