From 198b27470e24647d34ae9a0e28eb0e2c398f47c3 Mon Sep 17 00:00:00 2001 From: rdrew Date: Fri, 17 Nov 2023 15:40:26 -0400 Subject: [PATCH] changed css --- css/base/base.css | 114 ++--- css/base/fonts.css | 86 +--- css/base/fonts.pcss.css | 58 --- css/base/variables.css | 179 ++++--- css/base/variables.pcss.css | 1 - css/components/action-links.css | 52 +- css/components/ajax-progress.module.css | 90 +--- .../autocomplete-loading.module.css | 42 +- css/components/block.css | 16 +- css/components/book.css | 227 ++------- css/components/breadcrumb.css | 245 +++------- css/components/button.css | 185 +++---- css/components/color-picker.css | 6 +- css/components/comments.css | 399 +++++----------- css/components/container-inline.module.css | 6 +- css/components/content-moderation.css | 159 ++----- css/components/details.css | 92 +--- css/components/dropbutton.css | 174 +++---- css/components/embedded-media.css | 245 +++------- css/components/feed.css | 37 +- css/components/field.css | 47 +- css/components/fieldset.css | 168 ++----- css/components/footer.css | 54 +-- css/components/form-boolean.css | 134 +++--- css/components/form-select.css | 119 ++--- css/components/form-text.css | 129 ++--- css/components/form-textarea.css | 13 - css/components/form.css | 119 ++--- css/components/forum.css | 17 +- css/components/header-buttons-mobile.css | 45 +- css/components/header-navigation.css | 195 ++------ css/components/header-search-narrow.css | 360 +++++--------- css/components/header-search-wide.css | 438 ++++++----------- css/components/header-site-branding.css | 183 +++---- css/components/header-sticky-toggle.css | 80 ++-- css/components/hero.css | 75 +-- css/components/links.css | 66 +-- css/components/maintenance-page.css | 33 +- css/components/messages.css | 225 +++------ css/components/navigation/menu-sidebar.css | 97 ++-- .../navigation/nav-button-mobile.css | 146 ++---- .../navigation/nav-primary-button.css | 222 ++++----- .../navigation/nav-primary-no-js.css | 256 ++++------ .../navigation/nav-primary-wide.css | 450 +++++++----------- css/components/navigation/nav-primary.css | 317 ++++-------- css/components/navigation/nav-secondary.css | 184 +++---- css/components/navigation/wide-nav-expand.css | 136 ++---- css/components/node-preview-container.css | 55 +-- css/components/node-teaser.css | 218 +++------ css/components/node.css | 72 +-- css/components/page-title.css | 13 - css/components/pager.css | 62 +-- css/components/powered-by-block.css | 58 +-- css/components/progress.css | 21 +- css/components/search-results.css | 146 ++---- css/components/site-header.css | 82 ++-- css/components/skip-link.css | 54 +-- css/components/table.css | 171 ++----- css/components/tabledrag.css | 42 +- css/components/tabs.css | 308 ++++-------- css/components/tags.css | 149 ++---- css/components/text-content.css | 273 +++++------ css/components/ui-dialog.css | 31 +- css/components/vertical-tabs.css | 128 ++--- css/components/wide-image.css | 98 +--- css/layout/grid.css | 62 +-- css/layout/layout-builder-fourcol-section.css | 111 ++--- .../layout-builder-threecol-section.css | 104 ++-- css/layout/layout-builder-twocol-section.css | 152 ++---- css/layout/layout-content-medium.css | 61 +-- css/layout/layout-content-narrow.css | 185 +++---- .../layout-discovery-section-layout.css | 29 +- css/layout/layout-footer.css | 59 +-- css/layout/layout-sidebar.css | 96 ++-- css/layout/layout-views-grid.css | 31 +- css/layout/layout.css | 48 +- css/layout/region-content-below.css | 84 +--- css/layout/region-content.css | 29 +- css/layout/region-hero.css | 17 +- css/layout/region-secondary-menu.css | 37 +- css/layout/region.css | 29 +- css/layout/social-bar.css | 182 +++---- css/layout/views.css | 28 +- css/theme/filter.theme.css | 43 +- 84 files changed, 3054 insertions(+), 7035 deletions(-) diff --git a/css/base/base.css b/css/base/base.css index 89eaeab..70471f9 100644 --- a/css/base/base.css +++ b/css/base/base.css @@ -10,19 +10,6 @@ * Generic base elements. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - *, *::before, *::after { @@ -42,31 +29,31 @@ body { color: var(--color-text-neutral-medium); background-color: var(--color--gray-100); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e"); - background-position: top left /* LTR */ + background-position: top left; /* LTR */ } body.is-fixed { - position: fixed; - overflow: hidden; - width: 100%; - } + position: fixed; + overflow: hidden; + width: 100%; +} [dir="rtl"] body { background-position: top right; } a { - color: var(--color-text-primary-medium) + color: var(--color-text-primary-medium); } a:hover { - color: var(--color--primary-50); - } + color: var(--color--primary-50); +} a:focus { - outline: solid 2px currentColor; - outline-offset: 2px; - } + outline: solid 2px currentColor; + outline-offset: 2px; +} button { font-family: inherit; @@ -87,43 +74,40 @@ audio { h1 { letter-spacing: -0.01em; font-size: 1.75rem; - line-height: var(--sp2) + line-height: var(--sp2); } @media (min-width: 43.75rem) { - -h1 { + h1 { font-size: 3.75rem; - line-height: var(--sp4) -} + line-height: var(--sp4); } +} h2 { letter-spacing: -0.01em; font-size: 1.5rem; - line-height: var(--sp2) + line-height: var(--sp2); } @media (min-width: 43.75rem) { - -h2 { + h2 { font-size: 2.25rem; - line-height: var(--sp3) -} + line-height: var(--sp3); } +} h3 { font-size: 1.25rem; - line-height: var(--sp1-5) + line-height: var(--sp1-5); } @media (min-width: 43.75rem) { - -h3 { + h3 { font-size: 1.5rem; - line-height: var(--sp2) -} + line-height: var(--sp2); } +} h4 { font-size: 1.125rem; @@ -146,53 +130,29 @@ h3, h4, h5, h6 { - margin-top: var(--sp); - margin-bottom: var(--sp); + margin-block: var(--sp); color: var(--color-text-neutral-loud); font-family: var(--font-sans); - font-weight: bold + font-weight: bold; } @media (min-width: 43.75rem) { - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: var(--sp2); - margin-bottom: var(--sp2) -} + h1, + h2, + h3, + h4, + h5, + h6 { + margin-block: var(--sp2); } - -[dir="ltr"] ul { - margin-left: 1.5em; -} - -[dir="rtl"] ul { - margin-right: 1.5em; -} - -[dir="ltr"] ul { - margin-right: 0; -} - -[dir="rtl"] ul { - margin-left: 0; -} - -[dir="ltr"] ul { - padding-left: 0; -} - -[dir="rtl"] ul { - padding-right: 0; } ul { - margin-top: 0.25em; - margin-bottom: 0.25em; + 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/fonts.css b/css/base/fonts.css index 4ecec98..86c3624 100644 --- a/css/base/fonts.css +++ b/css/base/fonts.css @@ -10,77 +10,6 @@ * Base Fonts. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - -@font-face { - font-family: 'Libre Bodoni'; - src: url('../../fonts/LibreBodoni-Bold.woff2') format('woff2'), - url('../../fonts/LibreBodoni-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Libre Bodoni'; - src: url('../../fonts/LibreBodoni-Italic.woff2') format('woff2'), - url('../../fonts/LibreBodoni-Italic.woff') format('woff'); - font-weight: normal; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Libre Bodoni'; - src: url('../../fonts/LibreBodoni-Regular.woff2') format('woff2'), - url('../../fonts/LibreBodoni-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Source Sans 3'; - src: url('../../fonts/SourceSans3-Bold.woff2') format('woff2'), - url('../../fonts/SourceSans3-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Source Sans 3'; - src: url('../../fonts/SourceSans3-Regular.woff2') format('woff2'), - url('../../fonts/SourceSans3-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Source Sans 3'; - src: url('../../fonts/SourceSans3-Italic.woff2') format('woff2'), - url('../../fonts/SourceSans3-Italic.woff') format('woff'); - font-weight: normal; - font-style: italic; - font-display: swap; -} - -/* - *old stuff - */ - @font-face { font-family: metropolis; src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); @@ -109,10 +38,7 @@ @font-face { font-family: Lora; - src: - local("Lora Regular"), - local("Lora-Regular"), - url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"); + 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; @@ -122,10 +48,7 @@ @font-face { font-family: Lora; - src: - local("Lora Italic"), - local("Lora-Italic"), - url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"); + 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; @@ -135,10 +58,7 @@ @font-face { font-family: Lora; - src: - local("Lora Bold"), - local("Lora-Bold"), - url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"); + 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/fonts.pcss.css b/css/base/fonts.pcss.css index 6f0dd75..50e9e4a 100644 --- a/css/base/fonts.pcss.css +++ b/css/base/fonts.pcss.css @@ -5,64 +5,6 @@ @import "media-queries.pcss.css"; -@font-face { - font-family: 'Libre Bodoni'; - src: url('../../fonts/LibreBodoni-Bold.woff2') format('woff2'), - url('../../fonts/LibreBodoni-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Libre Bodoni'; - src: url('../../fonts/LibreBodoni-Italic.woff2') format('woff2'), - url('../../fonts/LibreBodoni-Italic.woff') format('woff'); - font-weight: normal; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Libre Bodoni'; - src: url('../../fonts/LibreBodoni-Regular.woff2') format('woff2'), - url('../../fonts/LibreBodoni-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Source Sans 3'; - src: url('../../fonts/SourceSans3-Bold.woff2') format('woff2'), - url('../../fonts/SourceSans3-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Source Sans 3'; - src: url('../../fonts/SourceSans3-Regular.woff2') format('woff2'), - url('../../fonts/SourceSans3-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Source Sans 3'; - src: url('../../fonts/SourceSans3-Italic.woff2') format('woff2'), - url('../../fonts/SourceSans3-Italic.woff') format('woff'); - font-weight: normal; - font-style: italic; - font-display: swap; -} - -/* - *old stuff - */ - @font-face { font-family: metropolis; src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); diff --git a/css/base/variables.css b/css/base/variables.css index 8210eff..750826d 100644 --- a/css/base/variables.css +++ b/css/base/variables.css @@ -9,102 +9,157 @@ Global CSS custom properties. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - /* stylelint-disable */ :root { - /*--font-serif: "Libre Bodoni", "georgia", serif;*/ + --font-sans: "metropolis", sans-serif; + --font-serif: "Lora", "georgia", serif; /* Typography helpers. */ - - /* Layout helpers. */ /* Width to which the background color extends to. */ /* Inline padding on .container elements. */ -} - -@media (min-width: 75rem) { - -:root { - --container-padding: var(--sp2); -} - } - -:root { + --font-size-base: 1rem; + --font-size-l: 1.125rem; + --font-size-s: 0.875rem; + --font-size-xs: 0.8125rem; + --font-size-xxs: 0.75rem; + --line-height-base: 1.6875rem; + --line-height-s: 1.125rem; + + /* Layout helpers. */ + --max-width: 84.375rem; + --max-bg-color: 98.125rem; /* Width to which the background color extends to. */ + --sp: 1.125rem; + --content-left: 5.625rem; + --site-header-height-wide: var(--sp10); + --container-padding: var(--sp); /** * 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. - */ /* Unit must be specified here for calc() to work properly.*/ /* Count of grid-gaps. */ /* Width of the entire grid. */ /* Width of a grid column. */ -} - -@media (min-width: 43.75rem) { - -:root { - --grid-col-count: 14; - --grid-gap: var(--sp2); -} - } - -@media (min-width: 62.5rem) { - -:root { - --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ -} - } - -@media (min-width: 75rem) { - -:root { - --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); -} - } - -@media (min-width: 90rem) { - -:root { - --grid-full-width: calc(var(--max-width) - var(--sp4)); -} - } - -:root { + */ + --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)); /* 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. - */ /* Black */ /* Black 2 */ /* Gray Dark */ /* Gray medium */ /* Black 4 */ /* Gray medium 2 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */ + */ + --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%); /** * Primary colors. * * Color number roughly corresponds to its luminosity. - */ /* Blue dark */ /* Blue medium */ /* Blue bright */ /* Blue very bright */ + */ + --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)))))); /** * 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. - */ /* Black */ /* White */ /* Red */ /* Gold */ /* Green */ + */ + --color--black: #000; /* Black */ + --color--white: #fff; /* White */ + --color--red: #e33f1e; /* Red */ + --color--gold: #fdca40; /* Gold */ + --color--green: #3fa21c; /* Header */ + --header-height-wide-when-fixed: calc(6 * var(--sp)); /* Width of slide out navigation */ + --mobile-nav-width: 31.25rem; /* Border radius */ + --border-radius: 0.1875rem; /* Inline padding on .container elements. */ +} + +@media (min-width: 75rem) { + :root { + --container-padding: var(--sp2); + } +} + +/* Green */ + +/* Width of a grid column. */ + +@media (min-width: 43.75rem) { + :root { + --grid-col-count: 14; + --grid-gap: var(--sp2); + } +} + +/* Blue very bright */ + +@media (min-width: 62.5rem) { + :root { + --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ + } +} + +/* Gray light 2 */ + +@media (min-width: 75rem) { + :root { + --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); + } +} + +@media (min-width: 90rem) { + :root { + --grid-full-width: calc(var(--max-width) - var(--sp4)); + } } diff --git a/css/base/variables.pcss.css b/css/base/variables.pcss.css index 1f80fc2..59a4824 100644 --- a/css/base/variables.pcss.css +++ b/css/base/variables.pcss.css @@ -9,7 +9,6 @@ :root { --font-sans: "metropolis", sans-serif; --font-serif: "Lora", "georgia", serif; - /*--font-serif: "Libre Bodoni", "georgia", serif;*/ /* Typography helpers. */ --font-size-base: 16px; diff --git a/css/components/action-links.css b/css/components/action-links.css index fd36887..6975268 100644 --- a/css/components/action-links.css +++ b/css/components/action-links.css @@ -8,51 +8,21 @@ * @file * Styles for action links. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ -/* Navigation related breakpoints */ -/* Grid related breakpoints */ -/* Grid shifts from 6 to 14 columns. */ -/* Width of the entire grid maxes out. */ -[dir="ltr"] .action-links { - margin-left: 0 -} -[dir="rtl"] .action-links { - margin-right: 0 -} -[dir="ltr"] .action-links { - margin-right: 0 -} -[dir="rtl"] .action-links { - margin-left: 0 -} -[dir="ltr"] .action-links { - padding-left: 0 -} -[dir="rtl"] .action-links { - padding-right: 0 -} -[dir="ltr"] .action-links { - padding-right: 0 -} -[dir="rtl"] .action-links { - padding-left: 0 -} .action-links { - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; - list-style: none + 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; } .action-links li { - display: inline-block - } + display: inline-block; +} .action-links li a { - color: var(--color-text-primary-medium); - } + color: var(--color-text-primary-medium); +} .action-links-item { display: inline-block; } diff --git a/css/components/ajax-progress.module.css b/css/components/ajax-progress.module.css index 0ec28d4..27bc796 100644 --- a/css/components/ajax-progress.module.css +++ b/css/components/ajax-progress.module.css @@ -10,19 +10,6 @@ * Visual styles for ajax-progress throbber. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - .ajax-progress { display: inline-block; } @@ -31,29 +18,15 @@ * Throbber. */ -[dir="ltr"] .ajax-progress-throbber { - margin-left: var(--sp0-5); -} - -[dir="rtl"] .ajax-progress-throbber { - margin-right: var(--sp0-5); -} - -[dir="ltr"] .ajax-progress-throbber { - margin-right: var(--sp0-5); -} - -[dir="rtl"] .ajax-progress-throbber { - margin-left: var(--sp0-5); -} - .ajax-progress-throbber { position: relative; display: inline-flex; align-content: center; height: 1.125rem; - margin-top: -0.1875rem; - margin-bottom: 0; + margin-block-start: -0.1875rem; + 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; @@ -66,16 +39,9 @@ border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); } -[dir="ltr"] .ajax-progress-throbber .message { - padding-left: var(--sp0-5); -} - -[dir="rtl"] .ajax-progress-throbber .message { - padding-right: var(--sp0-5); -} - .ajax-progress-throbber .message { display: inline-block; + padding-inline-start: var(--sp0-5); font-size: var(--font-size-s); font-weight: 400; } @@ -84,44 +50,30 @@ * Full screen throbber. */ -[dir="ltr"] .ajax-progress-fullscreen { - left: 50%; -} - -[dir="rtl"] .ajax-progress-fullscreen { - right: 50%; -} - .ajax-progress-fullscreen { position: fixed; z-index: 1000; - top: 50%; + 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 */ -} - -[dir="ltr"] .ajax-progress-fullscreen::before { - left: 50%; -} - -[dir="rtl"] .ajax-progress-fullscreen::before { - right: 50%; + box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */ } .ajax-progress-fullscreen::before { - position: absolute; - top: 50%; - width: 1.75rem; - height: 1.75rem; - margin: -0.875rem; - content: ""; - border-width: 3px; - } + 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); @@ -144,12 +96,8 @@ * have a large margin set. */ -html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber { - margin-left: 0; -} - -html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber { - margin-right: 0; +html.js .button:not(.js-hide) + .ajax-progress-throbber { + margin-inline-start: 0; } @keyframes olives-throbber { diff --git a/css/components/autocomplete-loading.module.css b/css/components/autocomplete-loading.module.css index d582289..1acefcd 100644 --- a/css/components/autocomplete-loading.module.css +++ b/css/components/autocomplete-loading.module.css @@ -10,42 +10,22 @@ * Visual styles for autocomplete input field. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - -[dir="ltr"] [type].form-autocomplete { - padding-right: var(--sp3); -} - -[dir="rtl"] [type].form-autocomplete { - padding-left: var(--sp3); -} - [type].form-autocomplete { + padding-inline-end: var(--sp3); background-color: var(--color--white); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e"); background-repeat: no-repeat; - background-position: right var(--sp1) center /* LTR */ + background-position: right var(--sp1) center; /* LTR */ } -[type].form-autocomplete:disabled { - background-color: var(--color--gray-100); - } +.form-autocomplete[type]:disabled { + background-color: var(--color--gray-100); +} -[type].form-autocomplete.ui-autocomplete-loading { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e"); - } +.form-autocomplete.ui-autocomplete-loading[type] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e"); +} -[dir="rtl"] [type].form-autocomplete { - background-position: left var(--sp1) center; - } +[dir="rtl"] .form-autocomplete[type] { + background-position: left var(--sp1) center; +} diff --git a/css/components/block.css b/css/components/block.css index 51f9201..b546977 100644 --- a/css/components/block.css +++ b/css/components/block.css @@ -10,22 +10,8 @@ * Block styling. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - .block__title { - margin-top: 0; - margin-bottom: var(--sp); + margin-block: 0 var(--sp); letter-spacing: 0.02em; color: var(--color-text-neutral-soft); font-size: var(--font-size-s); diff --git a/css/components/book.css b/css/components/book.css index 9f4ba4d..8b98cc8 100644 --- a/css/components/book.css +++ b/css/components/book.css @@ -10,101 +10,46 @@ * Book module styling. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - -[dir="ltr"] .book-pager { - margin-left: 0; -} - -[dir="rtl"] .book-pager { - margin-right: 0; -} - -[dir="ltr"] .book-pager { - margin-right: 0; -} - -[dir="rtl"] .book-pager { - margin-left: 0; -} - -[dir="ltr"] .book-pager { - padding-left: 0; -} - -[dir="rtl"] .book-pager { - padding-right: 0; -} - -[dir="ltr"] .book-pager { - padding-right: 0; -} - -[dir="rtl"] .book-pager { - padding-left: 0; -} - .book-pager { display: flex; flex-wrap: wrap; - margin-top: 0 var(--sp); - padding-top: 0; - padding-bottom: var(--sp); + 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-bottom: solid 1px var(--color--primary-40); + border-block-end: solid 1px var(--color--primary-40); } .book-pager__item { - display: inline-block + display: inline-block; } @media (min-width: 31.25rem) { - -.book-pager__item { - flex: 0 0 33.33% -} + .book-pager__item { + flex: 0 0 33.33%; } - -@media (min-width: 31.25rem) { - -.book-pager__item--center { - text-align: center } - } @media (min-width: 31.25rem) { - -[dir="ltr"] .book-pager__item--next { - margin-left: auto; - } - -[dir="rtl"] .book-pager__item--next { - margin-right: auto; - } - -[dir="ltr"] .book-pager__item--next { - text-align: right; + .book-pager__item--center { + text-align: center; } +} -[dir="rtl"] .book-pager__item--next { - text-align: left; - } +@media (min-width: 31.25rem) { + .book-pager__item--next { + margin-inline-start: auto; + text-align: end; } +} .book-pager__link { display: inline-flex; align-items: center; + -webkit-text-decoration: none; text-decoration: none; color: var(--color-text-primary-medium); font-family: var(--font-serif); @@ -112,124 +57,50 @@ font-weight: 600; } -[dir="ltr"] .book-pager__link--previous::before { - margin-right: 0.25em; -} - -[dir="rtl"] .book-pager__link--previous::before { - margin-left: 0.25em; -} - -[dir="ltr"] .book-pager__link--previous::before { - border-left: solid 3px currentColor; -} - -[dir="rtl"] .book-pager__link--previous::before { - border-right: solid 3px currentColor; -} - .book-pager__link--previous::before { - display: block; - width: var(--sp0-5); - height: var(--sp0-5); - content: ""; - transform: rotate(-45deg); - border-top: solid 3px currentColor; - } - -[dir="ltr"] .book-pager__link--next::after { - margin-left: 0.25em; -} - -[dir="rtl"] .book-pager__link--next::after { - margin-right: 0.25em; -} - -[dir="ltr"] .book-pager__link--next::after { - border-left: solid 3px currentColor; -} - -[dir="rtl"] .book-pager__link--next::after { - border-right: solid 3px currentColor; + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + margin-inline-end: 0.25em; + content: ""; + transform: rotate(-45deg); + border-block-start: solid 0.1875rem currentColor; + border-inline-start: solid 0.1875rem currentColor; } .book-pager__link--next::after { - display: block; - width: var(--sp0-5); - height: var(--sp0-5); - content: ""; - transform: rotate(135deg); - border-top: solid 3px currentColor; - } - -[dir="ltr"] .book-navigation__menu { - margin-left: 0; -} - -[dir="rtl"] .book-navigation__menu { - margin-right: 0; -} - -[dir="ltr"] .book-navigation__menu { - margin-right: 0; -} - -[dir="rtl"] .book-navigation__menu { - margin-left: 0; -} - -[dir="ltr"] .book-navigation__menu { - padding-left: 0; -} - -[dir="rtl"] .book-navigation__menu { - padding-right: 0; -} - -[dir="ltr"] .book-navigation__menu { - padding-right: 0; -} - -[dir="rtl"] .book-navigation__menu { - padding-left: 0; + display: block; + width: var(--sp0-5); + height: var(--sp0-5); + margin-inline-start: 0.25em; + content: ""; + transform: rotate(135deg); + border-block-start: solid 0.1875rem currentColor; + border-inline-start: solid 0.1875rem currentColor; } .book-navigation__menu { - margin-top: var(--sp2); - margin-bottom: var(--sp2); - padding-top: 0; - padding-bottom: 0; + 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; } -[dir="ltr"] .book-navigation__item { - padding-left: 0; -} - -[dir="rtl"] .book-navigation__item { - padding-right: 0; -} - -[dir="ltr"] .book-navigation__item { - padding-right: 0; -} - -[dir="rtl"] .book-navigation__item { - padding-left: 0; -} - .book-navigation__item { - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; + 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); - } + transform: rotate(45deg); +} [dir="rtl"] .book-pager__link--next::after { - transform: rotate(-135deg); - } + transform: rotate(-135deg); +} diff --git a/css/components/breadcrumb.css b/css/components/breadcrumb.css index 33204da..647cdca 100644 --- a/css/components/breadcrumb.css +++ b/css/components/breadcrumb.css @@ -10,243 +10,120 @@ * Breadcrumb region. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - .breadcrumb { position: relative; font-size: 0.875rem; font-weight: bold; - line-height: var(--sp1) + line-height: var(--sp1); /* Shadow on the right side of breadcrumbs for narrow screens. */ } -[dir="ltr"] .breadcrumb::after { - right: calc(var(--sp1)*-1) -} - -[dir="rtl"] .breadcrumb::after { - left: calc(var(--sp1)*-1) -} - .breadcrumb::after { - position: absolute; - top: 0; - width: var(--sp3); - height: var(--sp2); - content: ""; - background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%) /* LTR */ - } + 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 (min-width: 62.5rem) { - -.breadcrumb::after { - content: none + .breadcrumb::after { + content: none; } - } +} @media (min-width: 62.5rem) { - -.breadcrumb { - position: static -} + .breadcrumb { + position: static; } +} [dir="rtl"] .breadcrumb::after { background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); } -[dir="ltr"] .breadcrumb__content { - margin-left: calc(var(--sp0-5)*-1) -} - -[dir="rtl"] .breadcrumb__content { - margin-right: calc(var(--sp0-5)*-1) -} - -[dir="ltr"] .breadcrumb__content { - margin-right: calc(var(--sp1)*-1) -} - -[dir="rtl"] .breadcrumb__content { - margin-left: calc(var(--sp1)*-1) -} - -[dir="ltr"] .breadcrumb__content { - padding-left: var(--sp0-5) -} - -[dir="rtl"] .breadcrumb__content { - padding-right: var(--sp0-5) -} - .breadcrumb__content { overflow: auto; - margin-top: calc(var(--sp0-5)*-1); - margin-bottom: calc(var(--sp0-5)*-1); - padding-top: var(--sp0-5); - padding-bottom: var(--sp0-5); - -webkit-overflow-scrolling: touch + 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 (min-width: 62.5rem) { - -[dir="ltr"] .breadcrumb__content { - margin-right: 0 - } - -[dir="rtl"] .breadcrumb__content { - margin-left: 0 - } + .breadcrumb__content { + margin-inline-end: 0; } - -[dir="ltr"] .breadcrumb__list { - margin-left: calc(var(--sp1)*-1) -} - -[dir="rtl"] .breadcrumb__list { - margin-right: calc(var(--sp1)*-1) -} - -[dir="ltr"] .breadcrumb__list { - margin-right: calc(var(--sp1)*-1) -} - -[dir="rtl"] .breadcrumb__list { - margin-left: calc(var(--sp1)*-1) -} - -[dir="ltr"] .breadcrumb__list { - padding-left: var(--sp1) -} - -[dir="rtl"] .breadcrumb__list { - padding-right: var(--sp1) -} - -[dir="ltr"] .breadcrumb__list { - padding-right: 0 -} - -[dir="rtl"] .breadcrumb__list { - padding-left: 0 } .breadcrumb__list { overflow-x: auto; width: max-content; - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - padding-bottom: var(--sp1); + 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 + white-space: nowrap; } @media (min-width: 62.5rem) { - -[dir="ltr"] .breadcrumb__list { - margin-left: 0 - } - -[dir="rtl"] .breadcrumb__list { - margin-right: 0 - } - -[dir="ltr"] .breadcrumb__list { - margin-right: 0 - } - -[dir="rtl"] .breadcrumb__list { - margin-left: 0 - } - -[dir="ltr"] .breadcrumb__list { - padding-left: 0 - } - -[dir="rtl"] .breadcrumb__list { - padding-right: 0 - } - -.breadcrumb__list { + .breadcrumb__list { overflow: visible; - padding-bottom: 0; - white-space: normal -} + margin-inline-start: 0; + margin-inline-end: 0; + padding-block-end: 0; + padding-inline-start: 0; + white-space: normal; } - -.breadcrumb__item { - display: inline-block } -[dir="ltr"] .breadcrumb__item:nth-child(n+2)::before { - margin-left: 1rem; - margin-right: 1.25rem -} - -[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { - margin-right: 1rem; - margin-left: 1.25rem -} - -[dir="ltr"] .breadcrumb__item:nth-child(n+2)::before { - border-right: 2px solid var(--color--gray-45) -} - -[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { - border-left: 2px solid var(--color--gray-45) +.breadcrumb__item { + display: inline-block; } -.breadcrumb__item:nth-child(n+2)::before { - display: inline-block; - width: 0.5rem; - height: 0.5rem; - content: ""; - transform: rotate(45deg); /* LTR */ - border-top: 2px solid var(--color--gray-45); - } - -[dir="ltr"] .breadcrumb__item:last-child { - margin-right: var(--sp3) +.breadcrumb__item:nth-child(n + 2)::before { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + margin-inline: 1rem 1.25rem; + content: ""; + transform: rotate(45deg); /* LTR */ + border-block-start: 2px solid var(--color--gray-45); + border-inline-end: 2px solid var(--color--gray-45); } -[dir="rtl"] .breadcrumb__item:last-child { - margin-left: var(--sp3) +.breadcrumb__item:last-child { + margin-inline-end: var(--sp3); } @media (min-width: 62.5rem) { - -[dir="ltr"] .breadcrumb__item:last-child { - margin-right: 0 + .breadcrumb__item:last-child { + margin-inline-end: 0; } +} -[dir="rtl"] .breadcrumb__item:last-child { - margin-left: 0 - } - } - -[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { +[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before { transform: rotate(-45deg); } .breadcrumb__link { + -webkit-text-decoration: none; text-decoration: none; - color: var(--color-text-primary-medium) + color: var(--color-text-primary-medium); } .breadcrumb__link:hover, - .breadcrumb__link:focus { - text-decoration: underline; - } +.breadcrumb__link:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} diff --git a/css/components/button.css b/css/components/button.css index e0dd7e7..46bd12d 100644 --- a/css/components/button.css +++ b/css/components/button.css @@ -10,46 +10,17 @@ * Buttons. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - -[dir="ltr"] .button { - margin-left: 0 -} - -[dir="rtl"] .button { - margin-right: 0 -} - -[dir="ltr"] .button { - margin-right: var(--sp1) -} - -[dir="rtl"] .button { - margin-left: var(--sp1) -} - .button { display: inline-block; height: var(--sp3); - margin-top: var(--sp1); - margin-bottom: var(--sp1); - padding-top: calc(var(--sp3)/2 - var(--line-height-s)/2); - padding-bottom: calc(var(--sp3)/2 - var(--line-height-s)/2); - padding-left: var(--sp1-5); - padding-right: var(--sp1-5); + 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; + -webkit-text-decoration: none; text-decoration: none; color: var(--color-text-primary-medium); border: solid 2px currentColor; @@ -60,87 +31,65 @@ font-weight: 700; -webkit-appearance: none; appearance: none; - -webkit-font-smoothing: antialiased + -webkit-font-smoothing: antialiased; } .button:hover, - .button:focus { - text-decoration: none; - color: var(--color-text-primary-loud); - border: solid 2px currentColor; - background: none; - font-weight: 700; - } +.button:focus { + -webkit-text-decoration: none; + text-decoration: none; + color: var(--color-text-primary-loud); + border: solid 2px currentColor; + background: none; + font-weight: 700; +} .button:focus { - outline: 2px solid var(--color--primary-60); - outline-offset: 2px; - } + outline: 2px solid var(--color--primary-60); + outline-offset: 2px; +} .button:active { - color: var(--color-text-primary-medium); - border-color: currentColor; - } + color: var(--color-text-primary-medium); + border-color: currentColor; +} .button:disabled, - .button.is-disabled { - cursor: default; - color: var(--color--gray-90); - border-color: var(--color--gray-90); - } - -.button { +.button.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) { - -.button { + .button { display: inline-flex; align-items: center; /* Top padding accounts for font not being vertically centered within line-height. */ - padding-top: 1px; - padding-bottom: 0; - padding-left: var(--sp1-5); - padding-right: var(--sp1-5); - line-height: var(--line-height-s) -} + padding-block: 1px 0; + padding-inline: var(--sp1-5); + line-height: var(--line-height-s); } - -/* No margin if is part of a menu. */ - -[dir="ltr"] .menu .button { - margin-left: 0 -} - -[dir="rtl"] .menu .button { - margin-right: 0 -} - -[dir="ltr"] .menu .button { - margin-right: 0 } -[dir="rtl"] .menu .button { - margin-left: 0 -} +/* No margin if is part of a menu. */ .menu .button { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; } .button--small { height: var(--sp2-5); - padding-top: calc(var(--sp2-5)/2 - var(--line-height-s)/2); - padding-bottom: calc(var(--sp2-5)/2 - var(--line-height-s)/2); - padding-left: var(--sp); - padding-right: var(--sp); + padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); + padding-inline: var(--sp); font-size: var(--font-size-base); line-height: normal; } @@ -148,56 +97,42 @@ .button--primary { color: var(--color--white); border-color: var(--color--primary-40); - background-color: var(--color--primary-40) + background-color: var(--color--primary-40); } .button--primary:hover, - .button--primary:focus { - color: var(--color--white); - border-color: var(--color--primary-30); - background-color: var(--color--primary-30); - } +.button--primary:focus { + color: var(--color--white); + border-color: var(--color--primary-30); + background-color: var(--color--primary-30); +} .button--primary:active { - color: var(--color--white); - background-color: var(--color--primary-40); - } + color: var(--color--white); + background-color: var(--color--primary-40); +} .button--primary:disabled, - .button--primary.is-disabled { - color: var(--color--white); - background-color: var(--color--gray-90); - } +.button--primary.is-disabled { + color: var(--color--white); + background-color: var(--color--gray-90); +} .button--icon-back { display: inline-flex; - align-items: center -} - -[dir="ltr"] .button--icon-back::before { - margin-right: 0.5em -} - -[dir="rtl"] .button--icon-back::before { - margin-left: 0.5em -} - -[dir="ltr"] .button--icon-back::before { - border-left: solid 2px currentColor -} - -[dir="rtl"] .button--icon-back::before { - border-right: solid 2px currentColor + align-items: center; } .button--icon-back::before { - display: block; - width: 0.5em; - height: 0.5em; - content: ""; - transform: rotate(45deg); /* LTR */ - border-bottom: solid 2px currentColor; - } + 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); diff --git a/css/components/color-picker.css b/css/components/color-picker.css index e325f6e..e995851 100644 --- a/css/components/color-picker.css +++ b/css/components/color-picker.css @@ -11,6 +11,6 @@ */ [data-drupal-selector="olives-color-picker"] input[type="color"] { - margin-left: 0.8125rem; - vertical-align: bottom; - } + margin-left: 0.8125rem; + vertical-align: bottom; +} diff --git a/css/components/comments.css b/css/components/comments.css index 6e50a72..2d99694 100644 --- a/css/components/comments.css +++ b/css/components/comments.css @@ -10,286 +10,185 @@ * Comment section and individual comments. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ +:root { + --comment-indentation: var(--sp2); + --comment-indentation--md: var(--sp4); +} .comment--level-1 { - border-top: 2px solid var(--color--gray-95) + border-block-start: 2px solid var(--color--gray-95); } .comment--level-1 ~ .comment--level-1 { - margin-top: var(--sp2); - } + margin-block-start: var(--sp2); +} .comments__title { display: flex; align-items: center; - margin-top: 0; -} - -[dir="ltr"] .comments__count { - margin-left: var(--sp) -} - -[dir="rtl"] .comments__count { - margin-right: var(--sp) -} - -[dir="ltr"] .comments__count { - margin-right: var(--sp) -} - -[dir="rtl"] .comments__count { - margin-left: var(--sp) -} - -[dir="ltr"] .comments__count { - padding-left: 0.3125rem -} - -[dir="rtl"] .comments__count { - padding-right: 0.3125rem -} - -[dir="ltr"] .comments__count { - padding-right: 0.3125rem -} - -[dir="rtl"] .comments__count { - padding-left: 0.3125rem + margin-block-start: 0; } .comments__count { position: relative; display: inline-block; min-width: 2.125rem; - margin-top: 0; - margin-bottom: var(--sp0-5); - padding-top: 0; - padding-bottom: 0; + 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: 0.3125rem; + padding-inline-end: 0.3125rem; text-align: center; color: var(--color--white); border-radius: 2px; background-color: var(--color--primary-40); font-size: 0.6875rem; - line-height: 1.3125rem -} - -[dir="ltr"] .comments__count::after { - left: 0.5rem -} - -[dir="rtl"] .comments__count::after { - right: 0.5rem -} - -[dir="ltr"] .comments__count::after { - border-right: 8px solid transparent -} - -[dir="rtl"] .comments__count::after { - border-left: 8px solid transparent + line-height: 1.3125rem; } .comments__count::after { - position: absolute; - bottom: -0.4375rem; - width: 0; - height: 0; - content: ""; - border-top: 7px solid var(--color--primary-40); - } - -.comment-form { - padding-bottom: var(--sp2); -} - -[dir="ltr"] .add-comment__form { - padding-left: 0 -} - -[dir="rtl"] .add-comment__form { - padding-right: 0 + position: absolute; + inset-block-end: -0.4375rem; + inset-inline-start: 0.5rem; + width: 0; + height: 0; + content: ""; + border-block-start: 0.4375rem solid var(--color--primary-40); + border-inline-end: 0.5rem solid transparent; } -[dir="ltr"] .comment { - padding-left: var(--sp3) +.comment-form { + padding-block-end: var(--sp2); } -[dir="rtl"] .comment { - padding-right: var(--sp3) +.add-comment__form { + padding-inline-start: 0; } .comment { position: relative; - padding-top: var(--sp2) + padding-block-start: var(--sp2); + padding-inline-start: var(--sp3); } @media (min-width: 43.75rem) { - -[dir="ltr"] .comment { - padding-left: 0 - } - -[dir="rtl"] .comment { - padding-right: 0 - } + .comment { + padding-inline-start: 0; } +} .comment__text-content { - font-size: 1rem + font-size: 1rem; } .comment__text-content blockquote { - font-size: 1.3125rem; - line-height: var(--sp2); - } - -.comment__text-content { - - /* Override for .field:not(:last-child) */ + font-size: 1.3125rem; + line-height: var(--sp2); } +/* Override for .field:not(:last-child) */ + .comment__text-content:not(:last-child) { - margin-bottom: 0; - } + margin-block-end: 0; +} .comment__links { - margin-top: var(--sp); - margin-bottom: 0; + margin-block: var(--sp) 0; } .comment__links-link { + -webkit-text-decoration: none; text-decoration: none; font-size: 0.875rem; font-weight: bold; - line-height: var(--sp) + line-height: var(--sp); } .comment__links-link:hover { - text-decoration: underline; - } - -.add-comment__picture-wrapper { - top: calc(var(--line-height-base) + var(--sp0-5)); -} - -[dir="ltr"] .add-comment__picture,[dir="ltr"] -.comment__picture { - left: 0 + -webkit-text-decoration: underline; + text-decoration: underline; } -[dir="rtl"] .add-comment__picture,[dir="rtl"] -.comment__picture { - right: 0 +.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) + background-color: var(--color--gray-95); } -.add-comment__picture *:not(img), .comment__picture *:not(img) { - display: inherit; - width: inherit; - height: inherit; - } +.add-comment__picture *:not(img), +.comment__picture *:not(img) { + display: inherit; + width: inherit; + height: inherit; +} -.add-comment__picture img, .comment__picture img { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover +.add-comment__picture img, +.comment__picture img { + width: 100%; + height: 100%; + object-fit: cover; - /* @TODO: create image-style for profile's avatar to have image squared by default. */ - } + /* @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) { - -.add-comment__picture img, .comment__picture img { - position: absolute; - /* stylelint-disable csstools/use-logical */ - top: 50%; - left: 50%; - /* stylelint-enable csstools/use-logical */ - width: 100%; - height: auto; - transform: translate(-50%, -50%) + .add-comment__picture img, + .comment__picture img { + 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 (min-width: 43.75rem) { - -[dir="ltr"] .add-comment__picture,[dir="ltr"] -.comment__picture { - left: calc(var(--sp5)*-1) - } - -[dir="rtl"] .add-comment__picture,[dir="rtl"] -.comment__picture { - right: calc(var(--sp5)*-1) - } - -.add-comment__picture, -.comment__picture { + .add-comment__picture, + .comment__picture { + inset-inline-start: calc(-1 * var(--sp5)); width: var(--sp3); - height: var(--sp3) -} + height: var(--sp3); } +} @media (min-width: 43.75rem) { - -[dir="ltr"] .indented .comment__picture { - left: calc(var(--sp4)*-1) - } - -[dir="rtl"] .indented .comment__picture { - right: calc(var(--sp4)*-1) - } - -.indented .comment__picture { + .indented .comment__picture { + inset-inline-start: calc(-1 * var(--sp4)); width: var(--sp2); - height: var(--sp2) -} + height: var(--sp2); } - -.comment__meta * { - display: inline; - } - -[dir="ltr"] .comment__author { - margin-right: var(--sp) } -[dir="rtl"] .comment__author { - margin-left: var(--sp) +.comment__meta * { + display: inline; } .comment__author { + margin-inline-end: var(--sp); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; - line-height: var(--sp) + line-height: var(--sp); } .comment__author a { - text-decoration: none; - } + -webkit-text-decoration: none; + text-decoration: none; +} .comment__time { margin: 0; @@ -299,97 +198,40 @@ line-height: var(--sp); } -[dir="ltr"] .indented { - margin-left: var(--sp2) -} - -[dir="rtl"] .indented { - margin-right: var(--sp2) -} - -[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before { - left: calc(var(--sp2)*-1 - var(--sp)) -} - -[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before { - right: calc(var(--sp2)*-1 - var(--sp)) -} - -[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before { - border-left: solid 1px var(--color--gray-95) +.indented { + margin-inline-start: var(--comment-indentation); } -[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before { - border-right: solid 1px var(--color--gray-95) +.indented > .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); } -.indented > .comment:not(:last-of-type):not(.has-children)::before { - position: absolute; - top: var(--sp2); /* Comment's padding-top */ - width: 0; - height: 100%; - content: "" - } - @media (min-width: 43.75rem) { - -[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before { - left: calc(var(--sp4)*-1 + var(--sp)) + .indented > .comment:not(:last-of-type, .has-children)::before { + inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); } - -[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before { - right: calc(var(--sp4)*-1 + var(--sp)) - } - } +} @media (min-width: 43.75rem) { - -[dir="ltr"] .indented { - margin-left: var(--sp4) + .indented { + margin-inline-start: var(--comment-indentation--md); } - -[dir="rtl"] .indented { - margin-right: var(--sp4) - } - } - -[dir="ltr"] .show-hide-btn { - margin-left: var(--sp3) -} - -[dir="rtl"] .show-hide-btn { - margin-right: var(--sp3) -} - -[dir="ltr"] .show-hide-btn { - margin-right: 0 -} - -[dir="rtl"] .show-hide-btn { - margin-left: 0 -} - -[dir="ltr"] .show-hide-btn { - padding-left: 0 -} - -[dir="rtl"] .show-hide-btn { - padding-right: 0 -} - -[dir="ltr"] .show-hide-btn { - padding-right: 0 -} - -[dir="rtl"] .show-hide-btn { - padding-left: 0 } .show-hide-btn { - margin-top: var(--sp2); - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; + 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; @@ -398,24 +240,19 @@ font-weight: 600; line-height: 1.125rem; -webkit-appearance: none; - appearance: none + appearance: none; } .show-hide-btn[aria-expanded="true"]::after { - content: "\0020 -"; - } + content: "\0020 -"; +} .show-hide-btn[aria-expanded="false"]::after { - content: "\0020 +"; - } + content: "\0020 +"; +} @media (min-width: 43.75rem) { - -[dir="ltr"] .show-hide-btn { - margin-left: 0 - } - -[dir="rtl"] .show-hide-btn { - margin-right: 0 - } + .show-hide-btn { + margin-inline-start: 0; } +} diff --git a/css/components/container-inline.module.css b/css/components/container-inline.module.css index b88a797..6bc96eb 100644 --- a/css/components/container-inline.module.css +++ b/css/components/container-inline.module.css @@ -16,12 +16,10 @@ } .form-items-inline { - margin-top: -0.125em; - margin-bottom: -0.125em; /* 2px */ + margin-block: -0.125em; /* 2px */ } .form-items-inline > .form-item { display: inline-block; - margin-top: 0.125em; - margin-bottom: 0.125em; + margin-block: 0.125em; } diff --git a/css/components/content-moderation.css b/css/components/content-moderation.css index e633431..e3edea3 100644 --- a/css/components/content-moderation.css +++ b/css/components/content-moderation.css @@ -10,146 +10,85 @@ * Styles for content moderation toolbar. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - -[dir="ltr"] .entity-moderation-form { - padding-left: var(--sp) -} - -[dir="rtl"] .entity-moderation-form { - padding-right: var(--sp) -} - -[dir="ltr"] .entity-moderation-form { - padding-right: var(--sp) -} - -[dir="rtl"] .entity-moderation-form { - padding-left: var(--sp) -} - .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) + background-color: var(--color--gray-100); } .entity-moderation-form select, - .entity-moderation-form input:not([type="submit"]) { - background-color: var(--color--white); - } +.entity-moderation-form input:not([type="submit"]) { + background-color: var(--color--white); +} @media (min-width: 43.75rem) { - -.entity-moderation-form { - flex-direction: row -} + .entity-moderation-form { + flex-direction: row; } - -[dir="ltr"] .entity-moderation-form__item { - margin-right: var(--sp) -} - -[dir="rtl"] .entity-moderation-form__item { - margin-left: var(--sp) } .entity-moderation-form__item { - flex-basis: 0 -} - -[dir="ltr"] .entity-moderation-form__item:last-child { - margin-right: 0 -} - -[dir="rtl"] .entity-moderation-form__item:last-child { - margin-left: 0 + flex-basis: 0; + margin-inline-end: var(--sp); } .entity-moderation-form__item:last-child { - align-self: flex-start - } + align-self: flex-start; + margin-inline-end: 0; +} @media (min-width: 43.75rem) { - -.entity-moderation-form__item:last-child { - align-self: flex-end + .entity-moderation-form__item:last-child { + align-self: flex-end; } - } - -[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { - margin-left: 0 } -[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { - margin-right: 0 +.layout--content-narrow .entity-moderation-form, +.layout--pass--content-narrow > * .entity-moderation-form, +.layout--content-medium .entity-moderation-form, +.layout--pass--content-medium > * .entity-moderation-form { + width: 100%; + margin-inline-start: 0; } -.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { - width: 100% - } - @supports (width: max-content) { - -.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { - width: max-content + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + width: max-content; } - } +} @media (min-width: 43.75rem) { - -[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { - margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2) - } - -[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { - margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2) - } - -.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { - width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap)); - margin-top: var(--sp2); - margin-bottom: var(--sp4) + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + 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 (min-width: 62.5rem) { - -[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { - margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1) - } - -[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { - margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1) + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); + margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); } - -.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { - width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11) - } - } +} @media (min-width: 90rem) { - -[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { - margin-left: 0 - } - -[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { - margin-right: 0 + .layout--content-narrow .entity-moderation-form, + .layout--pass--content-narrow > * .entity-moderation-form, + .layout--content-medium .entity-moderation-form, + .layout--pass--content-medium > * .entity-moderation-form { + width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)); + margin-inline-start: 0; } - -.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { - width: calc(var(--grid-col-width)*10 + var(--grid-gap)*11) - } - } +} diff --git a/css/components/details.css b/css/components/details.css index 30ecd22..0ba1fd2 100644 --- a/css/components/details.css +++ b/css/components/details.css @@ -10,57 +10,32 @@ * Collapsible details. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ +:root { + --details-border-width: 1px; + --details-summary-transition: background-color 0.12s ease-in-out; +} .olives-details { display: block; - margin-top: var(--sp1); - margin-bottom: var(--sp1); + margin-block: var(--sp1); color: inherit; - border: 1px solid var(--color--gray-95); + 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 */ -[dir="ltr"] .olives-details__summary { - padding-left: var(--sp2); -} - -[dir="rtl"] .olives-details__summary { - padding-right: var(--sp2); -} - -[dir="ltr"] .olives-details__summary { - padding-right: var(--sp1); -} - -[dir="rtl"] .olives-details__summary { - padding-left: var(--sp1); -} - .olives-details__summary { position: relative; - padding-top: var(--sp1); - padding-bottom: var(--sp1); + padding-block: var(--sp1); + padding-inline-start: var(--sp2); + padding-inline-end: var(--sp1); list-style: none; cursor: pointer; - transition: background-color 0.12s ease-in-out; + transition: var(--details-summary-transition); word-wrap: break-word; -webkit-hyphens: auto; - -ms-hyphens: auto; hyphens: auto; color: inherit; background-color: var(--color--gray-100); @@ -71,17 +46,10 @@ /* Arrow icon */ -[dir="ltr"] .olives-details__summary::before { - left: var(--sp0-75); -} - -[dir="rtl"] .olives-details__summary::before { - right: var(--sp0-75); -} - .olives-details__summary::before { position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-start: var(--sp0-75); display: block; width: 0.625rem; height: 0.625rem; @@ -99,10 +67,7 @@ .olives-details__summary::after { position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; + inset: calc(var(--details-border-width) * -1); content: ""; pointer-events: none; opacity: 0; @@ -139,44 +104,29 @@ /* Rotate arrow icon of the details summary, when details expanded */ .olives-details[open] > .olives-details__summary::before { - margin-top: -2px; + margin-block-start: -2px; transform: translateY(-50%) rotate(135deg); } /* Details content wrapper */ .olives-details__wrapper { - margin: var(--sp1) + margin: var(--sp1); } @media (min-width: 62.5rem) { - -[dir="ltr"] .olives-details__wrapper { - margin-left: var(--sp2); - } - -[dir="rtl"] .olives-details__wrapper { - margin-right: var(--sp2); + .olives-details__wrapper { + margin-block-start: var(--sp1-5); + margin-block-end: var(--sp1-5); + margin-inline-start: var(--sp2); + margin-inline-end: var(--sp2); } - -[dir="ltr"] .olives-details__wrapper { - margin-right: var(--sp2); - } - -[dir="rtl"] .olives-details__wrapper { - margin-left: var(--sp2); - } - -.olives-details__wrapper { - margin-top: var(--sp1-5); - margin-bottom: var(--sp1-5) } - } /* Description */ .olives-details__description { - margin-bottom: var(--sp1); + 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/dropbutton.css b/css/components/dropbutton.css index 959f7c6..e0f5d91 100644 --- a/css/components/dropbutton.css +++ b/css/components/dropbutton.css @@ -18,79 +18,46 @@ --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. */ + --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. */ } .dropbutton-wrapper.open { - position: relative; - z-index: 100; /* Ensure this appears above all other dropbuttons. */ - filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color)); - } - -[dir="ltr"] .dropbutton-widget { - padding-right: var(--dropbutton--height); -} - -[dir="rtl"] .dropbutton-widget { - padding-left: var(--dropbutton--height); + 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); - border-radius: var(--dropbutton--border-radius) -} - -[dir="ltr"] .dropbutton-single .dropbutton-widget { - padding-right: 0; + padding-inline-end: var(--dropbutton--height); + border-radius: var(--dropbutton--border-radius); } -[dir="rtl"] .dropbutton-single .dropbutton-widget { - padding-left: 0; +.dropbutton-single .dropbutton-widget { + padding-inline-end: 0; } .dropbutton-wrapper.open .dropbutton-widget { - border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0 -} - -[dir="ltr"] .dropbutton { - margin-left: 0; -} - -[dir="rtl"] .dropbutton { - margin-right: 0; -} - -[dir="ltr"] .dropbutton { - padding-left: 0; -} - -[dir="rtl"] .dropbutton { - padding-right: 0; + border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0; } .dropbutton { height: var(--dropbutton--height); - margin-top: 0; - margin-bottom: 0; + 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. */ -[dir="ltr"] .dropbutton-toggle button { - right: 0; -} - -[dir="rtl"] .dropbutton-toggle button { - left: 0; -} - .dropbutton-toggle button { position: absolute; top: 0; + inset-inline-end: 0; display: flex; align-items: center; justify-content: center; @@ -100,89 +67,80 @@ cursor: pointer; border-color: transparent; border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ - background: var(--dropbutton--active-bg-color) + background: var(--dropbutton--active-bg-color); } .dropbutton-toggle button:focus { - outline: solid 2px var(--dropbutton--outline-color); - outline-offset: -2px; - } + outline: solid 2px var(--dropbutton--outline-color); + outline-offset: -2px; +} .dropbutton-toggle button::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) - } - -.dropbutton-wrapper.open .dropbutton-toggle button::before { - transform: translateY(25%) rotate(225deg) - } + 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); +} + +.dropbutton-wrapper.open :is(.dropbutton-toggle button::before) { + transform: translateY(25%) rotate(225deg); +} [dir="rtl"] .dropbutton-toggle button { - border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); - } + border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); +} /* This is the first
  • element in the list of actions. */ -[dir="ltr"] .dropbutton-action:first-child { - margin-right: 2px; +.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"] .dropbutton-action:first-child { - margin-left: 2px; + border: solid 1px transparent; + border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; } -.dropbutton-action:first-child { - 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"] .dropbutton-action:first-child { - border: solid 1px transparent; - border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; - } - .dropbutton-action a { - display: flex; - align-items: center; - margin-bottom: -2px; /* Account for borders. */ - padding: 0 0.5625rem; - text-decoration: none; - color: var(--dropbutton--text-color); - font-weight: 600 - } + display: flex; + align-items: center; + margin-bottom: -2px; /* Account for borders. */ + padding: 0 0.5625rem; + -webkit-text-decoration: none; + text-decoration: none; + color: var(--dropbutton--text-color); + font-weight: 600; +} .dropbutton-action a:hover { - color: inherit; - } + color: inherit; +} .dropbutton-action a:focus { - outline: solid 2px var(--dropbutton--outline-color); - outline-offset: -1px; /* Overlap parent container by 1px. */ - } - -.dropbutton-action { - - /* Special rules if there is only one action. */ + outline: solid 2px var(--dropbutton--outline-color); + outline-offset: -1px; /* Overlap parent container by 1px. */ } +/* Special rules if there is only one action. */ + .dropbutton-single .dropbutton-action:first-child { - border-right: solid 1px transparent; /* LTR */ - border-radius: var(--dropbutton--border-radius) - } + border-right: solid 1px transparent; /* LTR */ + border-radius: var(--dropbutton--border-radius); +} [dir="rtl"] .dropbutton-single .dropbutton-action:first-child { - border: solid 1px transparent; - } + border: solid 1px transparent; +} .dropbutton-single .dropbutton-action a { - justify-content: center; - } + justify-content: center; +} /* These are the
  • elements other than the first. */ @@ -191,17 +149,17 @@ 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) + background: var(--dropbutton--secondary-bg-color); } .secondary-action:last-child { - border-bottom: 1px solid var(--dropbutton--active-bg-color); - } + border-bottom: 1px solid var(--dropbutton--active-bg-color); +} .secondary-action a:hover { - color: var(--dropbutton--text-hover-color); - } + color: var(--dropbutton--text-hover-color); +} .dropbutton-wrapper.open .secondary-action { - visibility: visible + visibility: visible; } diff --git a/css/components/embedded-media.css b/css/components/embedded-media.css index ed883ea..7adb353 100644 --- a/css/components/embedded-media.css +++ b/css/components/embedded-media.css @@ -10,120 +10,46 @@ * Embedded Media. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - figure { background: var(--color--gray-100); } -[dir="ltr"] figcaption { - padding-left: var(--sp0-5); -} - -[dir="rtl"] figcaption { - padding-right: var(--sp0-5); -} - -[dir="ltr"] figcaption { - padding-right: var(--sp0-5); -} - -[dir="rtl"] figcaption { - padding-left: var(--sp0-5); -} - figcaption { - padding-top: var(--sp0-5); - padding-bottom: var(--sp0-5); + 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: 0.875rem; font-style: italic; - line-height: var(--sp) + line-height: var(--sp); } @media (min-width: 31.25rem) { - -[dir="ltr"] figcaption { - padding-left: var(--sp); - } - -[dir="rtl"] figcaption { - padding-right: var(--sp); - } - -[dir="ltr"] figcaption { - padding-right: var(--sp); - } - -[dir="rtl"] figcaption { - padding-left: var(--sp); - } - -figcaption { - padding-top: var(--sp); - padding-bottom: var(--sp) -} + figcaption { + padding-block: var(--sp); + padding-inline-start: var(--sp); + padding-inline-end: var(--sp); } - -[dir="ltr"] .align-right { - margin-left: 0; -} - -[dir="rtl"] .align-right { - margin-right: 0; -} - -[dir="ltr"] .align-right { - margin-right: 0; -} - -[dir="rtl"] .align-right { - margin-left: 0; } .align-right { float: none; /* Override core's align.module.css. */ max-width: 100%; - margin-top: var(--sp3); - margin-bottom: var(--sp3) + margin-block: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; } @media (min-width: 43.75rem) { - -[dir="ltr"] .align-right { - margin-left: var(--sp); - } - -[dir="rtl"] .align-right { - margin-right: var(--sp); - } - -[dir="ltr"] .align-right { - margin-right: 0; - } - -[dir="rtl"] .align-right { - margin-left: 0; - } - -.align-right { + .align-right { float: right; /* LTR */ max-width: 50%; - margin-top: var(--sp); - margin-bottom: var(--sp) + 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, @@ -133,117 +59,61 @@ figcaption { * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values * @see https://github.com/csstools/postcss-plugins/issues/632 */ -} - [dir="rtl"] .align-right { - float: left; - } } + [dir="rtl"] .align-right { + 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. */ -} +/* @todo this can be simplified. */ @media (min-width: 43.75rem) { - -[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] -.layout--pass--content-narrow > * .align-right { - margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1); - } - -[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] -.layout--pass--content-narrow > * .align-right { - margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1); - } + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); } +} @media (min-width: 62.5rem) { - -[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] -.layout--pass--content-narrow > * .align-right { - margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2); - } - -[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] -.layout--pass--content-narrow > * .align-right { - margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2); - } + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap)))); } +} @media (min-width: 75rem) { - -[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] -.layout--pass--content-narrow > * .align-right { - margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3); - } - -[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] -.layout--pass--content-narrow > * .align-right { - margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3); - } + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); } +} @media (min-width: 90rem) { - -[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] -.layout--pass--content-narrow > * .align-right { - margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3); + .layout--content-narrow .align-right, + .layout--pass--content-narrow > * .align-right { + margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); } - -[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] -.layout--pass--content-narrow > * .align-right { - margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3); - } - } - -[dir="ltr"] .align-left { - margin-left: 0; -} - -[dir="rtl"] .align-left { - margin-right: 0; -} - -[dir="ltr"] .align-left { - margin-right: 0; -} - -[dir="rtl"] .align-left { - margin-left: 0; } .align-left { float: none; /* Override core's align.module.css. */ max-width: 100%; - margin-top: var(--sp3); - margin-bottom: var(--sp3) + margin-block-start: var(--sp3); + margin-block-end: var(--sp3); + margin-inline-start: 0; + margin-inline-end: 0; } @media (min-width: 43.75rem) { - -[dir="ltr"] .align-left { - margin-left: 0; - } - -[dir="rtl"] .align-left { - margin-right: 0; - } - -[dir="ltr"] .align-left { - margin-right: var(--sp2); - } - -[dir="rtl"] .align-left { - margin-left: var(--sp2); - } - -.align-left { + .align-left { float: left; /* LTR */ max-width: 50%; - margin-top: var(--sp); - margin-bottom: var(--sp) /* Extra right margins in case of aligning next to lists. */ + 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, @@ -253,32 +123,25 @@ figcaption { * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values * @see https://github.com/csstools/postcss-plugins/issues/632 */ -} - [dir="rtl"] .align-left { - float: right; - } } + [dir="rtl"] .align-left { + float: right; + } +} /* Pull out of grid if nested in content narrow layout. */ @media (min-width: 43.75rem) { - -[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] -.layout--pass--content-narrow > * .align-left { - margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1); - } - -[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] -.layout--pass--content-narrow > * .align-left { - margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1); - } + .layout--content-narrow .align-left, + .layout--pass--content-narrow > * .align-left { + margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); } +} .align-center img, .align-center video, .align-center audio { - margin-left: auto; - margin-right: auto; + margin-inline: auto; } .media-oembed-content { diff --git a/css/components/feed.css b/css/components/feed.css index 949429b..1fb0c96 100644 --- a/css/components/feed.css +++ b/css/components/feed.css @@ -10,29 +10,17 @@ * RSS feed. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - .feed-icon { display: flex; align-items: center; + -webkit-text-decoration: none; text-decoration: none; - color: var(--color-text-neutral-soft) + color: var(--color-text-neutral-soft); } .feed-icon:hover { - color: var(--color--primary-50); - } + color: var(--color--primary-50); +} .feed-icon__label { flex-shrink: 0; @@ -41,14 +29,6 @@ font-weight: 600; } -[dir="ltr"] .feed-icon__icon { - margin-left: var(--sp0-5) -} - -[dir="rtl"] .feed-icon__icon { - margin-right: var(--sp0-5) -} - .feed-icon__icon { display: flex; flex-shrink: 0; @@ -56,11 +36,12 @@ 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) + background-color: var(--color--primary-50); } .feed-icon__icon svg { - vertical-align: top; - fill: currentColor; - } + vertical-align: top; + fill: currentColor; +} diff --git a/css/components/field.css b/css/components/field.css index 21425e5..d4fad4c 100644 --- a/css/components/field.css +++ b/css/components/field.css @@ -10,37 +10,23 @@ * Visual styles for fields. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - .field:not(:last-child) { - margin-bottom: var(--sp2); + margin-block-end: var(--sp2); } .node--view-mode-teaser .field { - margin-bottom: var(--sp) + margin-block-end: var(--sp); } .node--view-mode-teaser .field:last-child { - margin-bottom: 0; - } + margin-block-end: 0; +} @media (min-width: 62.5rem) { - -.node--view-mode-teaser .field { - margin-bottom: var(--sp2) -} + .node--view-mode-teaser .field { + margin-block-end: var(--sp2); } +} .field__label { font-weight: bold; @@ -48,7 +34,7 @@ .field--label-inline .field__label, .field--label-inline .field__items { - float: left /* LTR */ + float: left; /* LTR */ /** * Chromium and Webkit do not yet support flow relative logical properties, @@ -60,20 +46,15 @@ */ } -[dir="rtl"] .field--label-inline .field__label,[dir="rtl"] .field--label-inline .field__items { - float: right; - } - -[dir="ltr"] .field--label-inline .field__label,[dir="ltr"] -.field--label-inline > .field__item,[dir="ltr"] -.field--label-inline .field__items { - padding-right: 0.5em; +[dir="rtl"] .field--label-inline .field__label, +[dir="rtl"] .field--label-inline .field__items { + float: right; } -[dir="rtl"] .field--label-inline .field__label,[dir="rtl"] -.field--label-inline > .field__item,[dir="rtl"] +.field--label-inline .field__label, +.field--label-inline > .field__item, .field--label-inline .field__items { - padding-left: 0.5em; + padding-inline-end: 0.5em; } .field--label-inline .field__label::after { diff --git a/css/components/fieldset.css b/css/components/fieldset.css index 7f5b668..1b2a5fe 100644 --- a/css/components/fieldset.css +++ b/css/components/fieldset.css @@ -10,57 +10,14 @@ * Fieldset. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - -[dir="ltr"] .fieldset { - margin-left: 0; -} - -[dir="rtl"] .fieldset { - margin-right: 0; -} - -[dir="ltr"] .fieldset { - margin-right: 0; -} - -[dir="rtl"] .fieldset { - margin-left: 0; -} - -[dir="ltr"] .fieldset { - padding-left: 0; -} - -[dir="rtl"] .fieldset { - padding-right: 0; -} - -[dir="ltr"] .fieldset { - padding-right: 0; -} - -[dir="rtl"] .fieldset { - padding-left: 0; -} - .fieldset { min-width: 0; - margin-top: var(--sp1); - margin-bottom: var(--sp1); - padding-top: 0; - padding-bottom: 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); @@ -85,19 +42,19 @@ background-color: var(--color--gray-45); font-size: var(--font-size-l); font-weight: 700; - line-height: var(--line-height-base) + line-height: var(--line-height-base); } .fieldset__legend + * { - clear: left; - } + clear: left; +} .fieldset__legend .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"); - } + 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-top: 2px; + margin-block-start: 2px; color: inherit; } @@ -109,26 +66,11 @@ color: inherit; } -[dir="ltr"] .fieldset__label { - padding-left: var(--sp1); -} - -[dir="rtl"] .fieldset__label { - padding-right: var(--sp1); -} - -[dir="ltr"] .fieldset__label { - padding-right: var(--sp1); -} - -[dir="rtl"] .fieldset__label { - padding-left: var(--sp1); -} - .fieldset__label { display: block; - padding-top: var(--sp0-5); - padding-bottom: var(--sp0-5); + 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); } @@ -138,8 +80,7 @@ } .fieldset__description { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + margin-block: var(--sp0-5); font-size: var(--font-size-xs); line-height: var(--line-height-s); } @@ -148,49 +89,32 @@ color: var(--input--disabled-fg-color); } -[dir="ltr"] .fieldset__error-message { - padding-left: var(--sp1-5); -} - -[dir="rtl"] .fieldset__error-message { - padding-right: var(--sp1-5); -} - .fieldset__error-message { - margin-top: var(--sp0-5); - margin-bottom: var(--sp0-5); + 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) + line-height: var(--line-height-s); } @media screen and (-ms-high-contrast: active) { - -.fieldset__error-message { - 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") -} + .fieldset__error-message { + 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; } -[dir="ltr"] .fieldset__wrapper { - padding-left: var(--sp); -} - -[dir="rtl"] .fieldset__wrapper { - padding-right: var(--sp); -} - .fieldset__wrapper { - margin-top: 0; - padding-top: var(--sp); - padding-bottom: var(--sp); + margin-block-start: 0; + padding-block: var(--sp); + padding-inline-start: var(--sp); } .fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { @@ -199,44 +123,14 @@ border-bottom-left-radius: var(--border-radius); } -[dir="ltr"] .fieldset__wrapper--group { - margin-left: 0; -} - -[dir="rtl"] .fieldset__wrapper--group { - margin-right: 0; -} - -[dir="ltr"] .fieldset__wrapper--group { - margin-right: 0; -} - -[dir="rtl"] .fieldset__wrapper--group { - margin-left: 0; -} - .fieldset__wrapper--group { - margin-top: 0; - margin-bottom: 0; -} - -[dir="ltr"] .fieldset__wrapper > .container-inline { - padding-left: 0; -} - -[dir="rtl"] .fieldset__wrapper > .container-inline { - padding-right: 0; -} - -[dir="ltr"] .fieldset__wrapper > .container-inline { - padding-right: 0; -} - -[dir="rtl"] .fieldset__wrapper > .container-inline { - padding-left: 0; + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 0; } .fieldset__wrapper > .container-inline { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: 0; } diff --git a/css/components/footer.css b/css/components/footer.css index 95897c3..eb78429 100644 --- a/css/components/footer.css +++ b/css/components/footer.css @@ -10,62 +10,36 @@ * Footer regions. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - .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%) -} - -[dir="ltr"] .site-footer .menu { - margin-left: 0 -} - -[dir="rtl"] .site-footer .menu { - margin-right: 0 + background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%); } .site-footer .menu { - list-style: none - } - -[dir="ltr"] .site-footer .menu ul { - margin-left: var(--sp) + margin-inline-start: 0; + list-style: none; } -[dir="rtl"] .site-footer .menu ul { - margin-right: var(--sp) +.site-footer .menu ul { + margin-inline-start: var(--sp); } .site-footer .menu li { - margin-bottom: var(--sp0-5); - } + margin-block-end: var(--sp0-5); +} .site-footer a { - color: inherit - } + color: inherit; +} .site-footer a:hover { - text-decoration: none; - } + -webkit-text-decoration: none; + text-decoration: none; +} @media (min-width: 75rem) { - [dir="ltr"] body:not(.is-always-mobile-nav) .site-footer { - border-left: solid var(--content-left) var(--color--black) - } - [dir="rtl"] body:not(.is-always-mobile-nav) .site-footer { - border-right: solid var(--content-left) var(--color--black) + body:not(.is-always-mobile-nav) .site-footer { + border-inline-start: solid var(--content-left) var(--color--black); } } diff --git a/css/components/form-boolean.css b/css/components/form-boolean.css index 2291151..96226d4 100644 --- a/css/components/form-boolean.css +++ b/css/components/form-boolean.css @@ -10,19 +10,6 @@ * Checkbox and radio input elements. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - input[type="checkbox"], input[type="radio"] { display: inline-block; @@ -37,91 +24,92 @@ input[type="radio"] { background-position: 50% 50%; background-size: var(--sp1) var(--sp1); -webkit-appearance: none; - appearance: none + appearance: none; } -input[type="checkbox"]:focus, input[type="radio"]:focus { - border: solid 2px var(--color--primary-50); - outline: solid 2px var(--color--primary-50) - } +input[type="checkbox"]:focus, +input[type="radio"]:focus { + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); +} @supports (outline-style: double) { - -input[type="checkbox"]:focus, input[type="radio"]:focus { - border-width: 1px; - outline-width: 6px; - outline-style: double; - outline-offset: -1px - } - } - -input[type="checkbox"]:hover, input[type="radio"]:hover { - border-color: var(--color--primary-60); - } - -input[type="checkbox"][disabled], input[type="radio"][disabled] { - background-color: var(--color--gray-100) + input[type="checkbox"]:focus, + input[type="radio"]:focus { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; } +} -input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover { - border-color: var(--color--gray-60); - } +input[type="checkbox"]:hover, +input[type="radio"]:hover { + border-color: var(--color--primary-60); +} -input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked { - border-width: 1px; - } +input[type="checkbox"][disabled], +input[type="radio"][disabled] { + background-color: var(--color--gray-100); +} -input[type="checkbox"]:checked, input[type="radio"]:checked { - border-width: 2px; - } +input[type="checkbox"][disabled]:hover, +input[type="radio"][disabled]:hover { + border-color: var(--color--gray-60); +} -input[type="checkbox"].error, input[type="radio"].error { - border: solid 2px var(--color--red) - } +input[type="checkbox"][disabled]:checked, +input[type="radio"][disabled]:checked { + border-width: 1px; +} -input[type="checkbox"].error:focus, input[type="radio"].error:focus { - outline-color: var(--color--red); - outline-offset: -2px; - } +input[type="checkbox"]:checked, +input[type="radio"]:checked { + border-width: 2px; +} -[dir="ltr"] input[type="checkbox"] + label,[dir="ltr"] input[type="radio"] + label { - padding-left: var(--sp0-5) +input.error[type="checkbox"], +input.error[type="radio"] { + border: solid 2px var(--color--red); } -[dir="rtl"] input[type="checkbox"] + label,[dir="rtl"] input[type="radio"] + label { - padding-right: var(--sp0-5) +input.error[type="checkbox"]:focus, +input.error[type="radio"]:focus { + outline-color: var(--color--red); + outline-offset: -2px; } -input[type="checkbox"] + label, input[type="radio"] + label { - display: inline-block; - } +input[type="checkbox"] + label, +input[type="radio"] + 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"); - } + 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% + border-radius: 50%; } input[type="radio"]: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: 1.0625rem; - } + 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: 1.0625rem; +} input[type="radio"]: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); - } + 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); +} -input[type="radio"].error:focus { - outline-color: transparent; - box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); - } +input.error[type="radio"]:focus { + outline-color: transparent; + box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); +} .form-type-boolean { - margin-top: var(--sp1); - margin-bottom: var(--sp1); + margin-block: var(--sp1); } diff --git a/css/components/form-select.css b/css/components/form-select.css index b3673b7..a82d490 100644 --- a/css/components/form-select.css +++ b/css/components/form-select.css @@ -10,126 +10,89 @@ * Select input elements. */ -/* - * Media query breakpoints. - * Processed by postcss/postcss-custom-media. - */ - -/* Navigation related breakpoints */ - -/* Grid related breakpoints */ - -/* Grid shifts from 6 to 14 columns. */ - -/* Width of the entire grid maxes out. */ - -[dir="ltr"] select { - padding-left: var(--sp) -} - -[dir="rtl"] select { - padding-right: var(--sp) -} - -[dir="ltr"] select { - padding-right: var(--sp3) -} - -[dir="rtl"] select { - padding-left: var(--sp3) +:root { + --form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e"); } select { max-width: 100%; height: var(--sp3); - padding-top: 0; - padding-bottom: 0; + 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: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e"); + background-image: var(--form-element-select-icon); background-repeat: no-repeat; background-position: right var(--sp) center; /* LTR */ font-family: inherit; font-size: inherit; -webkit-appearance: none; - appearance: none + appearance: none; } select:focus { - border: solid 2px var(--color--primary-50); - outline: solid 2px var(--color--primary-50) - } + border: solid 2px var(--color--primary-50); + outline: solid 2px var(--color--primary-50); +} @supports (outline-style: double) { - -select:focus { - border-width: 1px; - outline-width: 6px; - outline-style: double; - outline-offset: -1px + select:focus { + border-width: 1px; + outline-width: 6px; + outline-style: double; + outline-offset: -1px; } - } +} select[disabled] { - color: var(--color--gray-60); - background-color: var(--color--gray-100); - } + color: var(--color--gray-60); + background-color: var(--color--gray-100); +} select.error { - border: solid 2px var(--color--red) - } + border: solid 2px var(--color--red); +} select.error:focus { - outline-color: var(--color--red); - } + outline-color: var(--color--red); +} select[multiple] { - height: auto; - padding: var(--sp0-5); - background-image: none; - line-height: 1 /* Needed by non-Chromium based MS Edge browsers. */ - } + height: auto; + padding: var(--sp0-5); + background-image: none; + line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ +} select[multiple] option { - padding: var(--sp0-5); - } + padding: var(--sp0-5); +} select.form-element--small { - height: var(--sp2-5); - } - -select { - - /* Necessary to show chevron in forced colors mode in modern browsers. */ + height: var(--sp2-5); } -@media (forced-colors: active) { +/* Necessary to show chevron in forced colors mode in modern browsers. */ -[dir="ltr"] select { - padding-right: var(--sp) - } - -[dir="rtl"] select { - padding-left: var(--sp) - } - -select { +@media (forced-colors: active) { + select { + padding-inline-end: var(--sp); background-image: none; -webkit-appearance: listbox; - appearance: listbox /* Default appearance value for modern browsers. */ /* Lets browser set