.
*/
- }
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search {
- right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search {
- left: 0;
}
.block-search-wide__wrapper .search-form__submit .icon--search {
- position: absolute;
- top: 0;
- display: block;
- width: 1.5rem; /* Width of the SVG background image. */
- height: 100%;
- pointer-events: none;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain
- }
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
- left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
- right: 0;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-end: 0;
+ display: block;
+ width: 1.5rem; /* Width of the SVG background image. */
+ height: 100%;
+ pointer-events: none;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
}
.block-search-wide__wrapper .search-form__submit .icon--search::after {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 0;
- content: "";
- transition: transform 0.2s;
- transform: scaleX(0);
- transform-origin: left;
- border-top: solid var(--sp0-5) var(--color--primary-50);
- }
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 0;
+ content: "";
+ transition: transform 0.2s;
+ transform: scaleX(0);
+ transform-origin: left;
+ border-block-start: solid var(--sp0-5) var(--color--primary-50);
+}
.block-search-wide__wrapper .search-form__submit:focus {
- outline: solid 4px transparent;
- outline-offset: -4px;
- box-shadow: none
- }
+ outline: solid 4px transparent;
+ outline-offset: -4px;
+ box-shadow: none;
+}
.block-search-wide__wrapper .search-form__submit:focus span::after {
- transform: scaleX(1);
- }
-
-@media screen and (-ms-high-contrast: active) {
-
-.block-search-wide__wrapper .search-form__submit:focus {
- border-bottom-width: var(--sp0-5)
- }
-
- .block-search-wide__wrapper .search-form__submit:focus span::after {
- content: none;
- }
- }
+ transform: scaleX(1);
+}
@media screen and (-ms-high-contrast: active) {
-
-.block-search-wide__wrapper .search-form__submit {
- /* Edge's high contrast does show the background image, so we hide it. */
+ .block-search-wide__wrapper .search-form__submit:focus {
+ border-bottom-width: var(--sp0-5);
}
- .block-search-wide__wrapper .search-form__submit .icon--search {
- display: none;
- }
- }
-[dir="ltr"] .block-search-wide__container {
- padding-right: var(--sp2);
+ .block-search-wide__wrapper .search-form__submit:focus span::after {
+ content: none;
+ }
}
-[dir="rtl"] .block-search-wide__container {
- padding-left: var(--sp2);
+@media screen and (-ms-high-contrast: active) {
+ /* Edge's high contrast does show the background image, so we hide it. */
+ .block-search-wide__wrapper .search-form__submit .icon--search {
+ display: none;
+ }
}
.block-search-wide__container {
max-width: var(--max-width);
+ padding-inline-end: var(--sp2);
}
.block-search-wide__grid {
- display: -ms-grid;
display: grid;
- -ms-grid-columns: (1fr)[var(--grid-col-count)];
grid-template-columns: repeat(var(--grid-col-count), 1fr);
grid-column-gap: var(--grid-gap);
}
@@ -301,13 +169,12 @@
/* Override specificity from container-inline.module.css */
.container-inline .block-search-wide__container {
- display: block;
- }
+ display: block;
+}
.container-inline .block-search-wide__grid {
- display: -ms-grid;
- display: grid;
- }
+ display: grid;
+}
.block-search-wide__button {
position: relative;
@@ -318,83 +185,71 @@
color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
border: 0;
background: transparent;
- -webkit-appearance: none
+ -webkit-appearance: none;
}
.block-search-wide__button:focus {
- position: relative;
- outline: 0
- }
+ position: relative;
+ outline: 0;
+}
.block-search-wide__button:focus::after {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 80%;
- height: var(--sp3);
- content: "";
- transform: translate(-50%, -50%);
- border: solid 2px var(--color--primary-50);
- border-radius: 0.25rem;
- }
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80%;
+ height: var(--sp3);
+ content: "";
+ transform: translate(-50%, -50%);
+ border: solid 2px var(--color--primary-50);
+ border-radius: 0.25rem;
+}
.block-search-wide__button[aria-expanded="true"] {
- background: var(--color--black)
- }
+ background: var(--color--black);
+}
.block-search-wide__button[aria-expanded="true"]:focus::after {
- border-color: var(--color--white);
- }
+ border-color: var(--color--white);
+}
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before,
- .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
- position: absolute;
- top: 50%;
- left: 50%;
- width: var(--sp1-5);
- height: 0;
- content: "";
- border-top: solid 2px var(--color--white);
- }
-
-.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
- transform: translate(-50%, -50%) rotate(-45deg);
- }
-
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
- transform: translate(-50%, -50%) rotate(45deg);
- }
-
-.block-search-wide__button[aria-expanded="true"] svg {
- display: none;
- }
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: var(--sp1-5);
+ height: 0;
+ content: "";
+ border-block-start: solid 2px var(--color--white);
+}
-[dir="ltr"] .block-search-wide__button svg {
- margin-left: auto;
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
+ transform: translate(-50%, -50%) rotate(-45deg);
}
-[dir="rtl"] .block-search-wide__button svg {
- margin-right: auto;
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
+ transform: translate(-50%, -50%) rotate(45deg);
}
-[dir="ltr"] .block-search-wide__button svg {
- margin-right: auto;
+.block-search-wide__button[aria-expanded="true"] svg {
+ display: none;
}
-[dir="rtl"] .block-search-wide__button svg {
- margin-left: auto;
+.block-search-wide__button svg {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
}
@media (forced-colors: active) {
+ .block-search-wide__button {
+ background: ButtonFace;
+ }
-.block-search-wide__button {
- background: ButtonFace
-}
-
- .block-search-wide__button path {
- fill: ButtonText;
- }
+ .block-search-wide__button path {
+ fill: ButtonText;
}
+}
/* Provide rudimentary access to site search if JS is disabled. */
@@ -410,25 +265,24 @@ html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
- background-size: 0% 0.625rem
+ background-size: 0% 0.625rem;
}
[dir] .block-search-wide__wrapper input[type="search"]:focus {
- background-size: 100% var(--sp0-5);
- }
+ background-size: 100% var(--sp0-5);
+}
[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
- background-position: bottom right;
- }
+ background-position: bottom right;
+}
[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
- transform-origin: right;
- }
+ transform-origin: right;
+}
@media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
+ body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
body:not(.is-always-mobile-nav) .block-search-wide__button {
- display: block
+ display: block;
}
- }
+}
diff --git a/css/components/header-site-branding.css b/css/components/header-site-branding.css
index 631f01b..b6338bc 100644
--- a/css/components/header-site-branding.css
+++ b/css/components/header-site-branding.css
@@ -10,95 +10,46 @@
* Site branding in header.
*/
-/*
- * 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"] .site-branding {
- margin-left: calc(var(--container-padding)*-1);
- margin-right: var(--sp)
-}
-
-[dir="rtl"] .site-branding {
- margin-right: calc(var(--container-padding)*-1);
- margin-left: var(--sp)
-}
-
-[dir="ltr"] .site-branding {
- padding-left: var(--container-padding)
-}
-
-[dir="rtl"] .site-branding {
- padding-right: var(--container-padding)
-}
-
-[dir="ltr"] .site-branding {
- padding-right: var(--container-padding)
-}
-
-[dir="rtl"] .site-branding {
- padding-left: var(--container-padding)
-}
-
.site-branding {
display: flex;
flex-shrink: 1;
align-items: flex-end;
- min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)); /* Span minimum of 2 column widths. */
- min-height: var(--sp3); /* Negative margin to break out of .container element. */
- padding-top: 0;
- padding-bottom: var(--sp0-5);
- background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%)
+ min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
+ min-height: var(--sp3);
+ margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
+ padding-block: 0 var(--sp0-5);
+ padding-inline-start: var(--container-padding);
+ padding-inline-end: var(--container-padding);
+ background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
}
@media (min-width: 31.25rem) {
-
-.site-branding {
- min-height: var(--sp4)
-}
+ .site-branding {
+ min-height: var(--sp4);
}
+}
@media (min-width: 43.75rem) {
-
-.site-branding {
- min-width: calc(var(--grid-col-width)*4 + var(--grid-gap)*4 + var(--container-padding)); /* Span minimum of 4 column widths. */
+ .site-branding {
+ min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6);
- padding-bottom: var(--sp)
-}
+ padding-block-end: var(--sp);
}
+}
@media (min-width: 62.5rem) {
-
-.site-branding {
- min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)) /* Span minimum of 2 column widths. */
-}
+ .site-branding {
+ min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
}
+}
@media (min-width: 75rem) {
-
-[dir="ltr"] .site-branding {
- margin-left: calc(var(--container-padding)*-1)
- }
-
-[dir="rtl"] .site-branding {
- margin-right: calc(var(--container-padding)*-1)
- }
-
-.site-branding {
+ .site-branding {
min-height: var(--site-header-height-wide);
- padding-top: 0;
- padding-bottom: 0
-}
+ margin-inline-start: calc(-1 * var(--container-padding));
+ padding-block: 0;
}
+}
[dir="rtl"] .site-branding {
background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
@@ -114,106 +65,82 @@
.site-branding__inner {
display: flex;
- align-items: center
+ align-items: center;
}
.site-branding__inner a {
- text-decoration: none;
- }
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
@media (min-width: 75rem) {
-
-[dir="ltr"] .site-branding__inner {
- padding-left: 0
- }
-
-[dir="rtl"] .site-branding__inner {
- padding-right: 0
- }
-
-[dir="ltr"] .site-branding__inner {
- padding-right: 0
- }
-
-[dir="rtl"] .site-branding__inner {
- padding-left: 0
- }
-
-.site-branding__inner {
+ .site-branding__inner {
height: var(--header-height-wide-when-fixed);
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5)
-}
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
+}
.site-branding__logo {
flex-shrink: 0;
- max-width: 100%
+ max-width: 100%;
}
.site-branding__logo img {
- width: auto;
- max-width: 100%;
- max-height: var(--sp2)
- }
+ width: auto;
+ max-width: 100%;
+ max-height: var(--sp2);
+}
@media (min-width: 31.25rem) {
-
-.site-branding__logo img {
- max-height: var(--sp3)
+ .site-branding__logo img {
+ max-height: var(--sp3);
}
- }
+}
@media (min-width: 43.75rem) {
-
-.site-branding__logo img {
- max-height: var(--sp4)
+ .site-branding__logo img {
+ max-height: var(--sp4);
}
- }
+}
@media (min-width: 75rem) {
-
-.site-branding__logo img {
- max-height: calc(var(--header-height-wide-when-fixed) - var(--sp))
+ .site-branding__logo img {
+ max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
}
- }
+}
.site-branding__text {
color: var(--color--white);
font-size: 1.125rem;
- font-weight: bold
+ font-weight: bold;
}
.site-branding__text a {
- color: inherit;
- }
+ color: inherit;
+}
@media (min-width: 43.75rem) {
-
-.site-branding__text {
+ .site-branding__text {
font-size: 1.75rem;
- line-height: 1.75rem
-}
+ line-height: 1.75rem;
}
+}
@media (min-width: 75rem) {
-
-.site-branding__text {
+ .site-branding__text {
letter-spacing: 0.02em;
font-size: 2rem;
- line-height: var(--sp2)
-}
+ line-height: var(--sp2);
}
+}
.site-branding--bg-gray .site-branding__text,
.site-branding--bg-white .site-branding__text {
color: var(--color--primary-50);
}
-[dir="ltr"] .site-branding__logo + .site-branding__text {
- margin-left: 0.75rem
-}
-
-[dir="rtl"] .site-branding__logo + .site-branding__text {
- margin-right: 0.75rem
+.site-branding__logo + .site-branding__text {
+ margin-inline-start: 0.75rem;
}
diff --git a/css/components/header-sticky-toggle.css b/css/components/header-sticky-toggle.css
index 9b578c3..f28f3ca 100644
--- a/css/components/header-sticky-toggle.css
+++ b/css/components/header-sticky-toggle.css
@@ -13,26 +13,12 @@
* toggles fixing the header to the top of the viewport.
*/
-/*
- * 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. */
-
.sticky-header-toggle {
- display: none
+ display: none;
}
@media (min-width: 75rem) {
-
-.sticky-header-toggle {
+ .sticky-header-toggle {
display: flex;
flex-shrink: 0;
align-items: center;
@@ -43,31 +29,29 @@
opacity: 0;
border: 0;
outline: 0;
- background-color: var(--color--primary-50)
-}
+ background-color: var(--color--primary-50);
+ }
- .sticky-header-toggle:focus {
- cursor: pointer;
- pointer-events: auto;
- opacity: 1;
- outline: solid 2px var(--color--white);
- outline-offset: -4px;
- }
+ .sticky-header-toggle:focus {
+ cursor: pointer;
+ pointer-events: auto;
+ opacity: 1;
+ outline: solid 2px var(--color--white);
+ outline-offset: -4px;
}
+}
@media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
- visibility: visible
-}
+ body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
+ visibility: visible;
}
+}
@media (min-width: 75rem) {
-
-body.is-always-mobile-nav .sticky-header-toggle {
- visibility: hidden
-}
+ body.is-always-mobile-nav .sticky-header-toggle {
+ visibility: hidden;
}
+}
.sticky-header-toggle__icon {
--icon-bar-height: 0.1875rem;
@@ -77,21 +61,21 @@ body.is-always-mobile-nav .sticky-header-toggle {
flex-direction: column;
justify-content: space-between;
width: var(--sp2);
- height: calc(var(--icon-bar-height)*3 + var(--icon-bar-space)*2);
+ height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
/* Height = 3 bars + 2 spaces */
transition: opacity 0.2s;
pointer-events: none;
- transform-style: preserve-3d
+ transform-style: preserve-3d;
}
.sticky-header-toggle__icon > span {
- display: block;
- width: 100%;
- height: var(--icon-bar-height);
- transition: transform 0.2s;
- transform-origin: center;
- background-color: var(--color--white);
- }
+ display: block;
+ width: 100%;
+ height: var(--icon-bar-height);
+ transition: transform 0.2s;
+ transform-origin: center;
+ background-color: var(--color--white);
+}
.is-fixed .sticky-header-toggle {
cursor: pointer;
@@ -100,13 +84,13 @@ body.is-always-mobile-nav .sticky-header-toggle {
}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
- transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
- }
+ transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
+}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
- opacity: 0;
- }
+ opacity: 0;
+}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
- transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
- }
+ transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
+}
diff --git a/css/components/hero.css b/css/components/hero.css
index 28954c9..060075a 100644
--- a/css/components/hero.css
+++ b/css/components/hero.css
@@ -10,79 +10,50 @@
* Main Hero.
*/
-/*
- * 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. */
-
.hero__content {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
- grid-column: 1 / 7
+ grid-column: 1 / 7;
}
@media (min-width: 43.75rem) {
-
-.hero__content { /* 700px */
- -ms-grid-column: 3;
- -ms-grid-column-span: 10;
- grid-column: 3 / 13
-}
+ .hero__content {
+ /* 700px */
+ grid-column: 3 / 13;
}
+}
@media (min-width: 62.5rem) {
-
-.hero__content {
- -ms-grid-column: 3;
- -ms-grid-column-span: 8;
- grid-column: 3 / 11
-}
+ .hero__content {
+ grid-column: 3 / 11;
}
+}
.hero__img {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7;
- margin-top: var(--sp2);
- margin-bottom: var(--sp2)
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
}
.hero__img img {
- width: 100%;
- }
+ width: 100%;
+}
@media (min-width: 31.25rem) {
-
-.hero__img {
- margin-top: var(--sp3);
- margin-bottom: var(--sp3)
-}
+ .hero__img {
+ margin-block-start: var(--sp3);
+ margin-block-end: var(--sp3);
}
+}
@media (min-width: 43.75rem) {
-
-.hero__img {
- -ms-grid-column: 1;
- -ms-grid-column-span: 14;
+ .hero__img {
grid-column: 1 / 15;
- margin-top: var(--sp4);
- margin-bottom: var(--sp4)
-}
+ margin-block-start: var(--sp4);
+ margin-block-end: var(--sp4);
}
+}
@media (min-width: 62.5rem) {
-
-.hero__img {
- -ms-grid-column: 2;
- -ms-grid-column-span: 12;
- grid-column: 2 / 14
-}
+ .hero__img {
+ grid-column: 2 / 14;
}
+}
diff --git a/css/components/links.css b/css/components/links.css
index bba0f3b..8795873 100644
--- a/css/components/links.css
+++ b/css/components/links.css
@@ -10,68 +10,24 @@
* Links component.
*/
-/*
- * 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"] .links.inline {
- margin-left: 0
-}
-
-[dir="rtl"] .links.inline {
- margin-right: 0
-}
-
-[dir="ltr"] .links.inline {
- padding-left: 0
-}
-
-[dir="rtl"] .links.inline {
- padding-right: 0
-}
-
-[dir="ltr"] .links.inline {
- padding-right: 0
-}
-
-[dir="rtl"] .links.inline {
- padding-left: 0
-}
-
.links.inline {
- padding-top: 0;
- padding-bottom: 0;
- list-style: none
+ margin-inline-start: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
}
.links.inline > * {
- display: inline
- }
-
-[dir="ltr"] .links.inline > *:not(:last-child) {
- padding-right: 1em
+ display: inline;
}
-[dir="rtl"] .links.inline > *:not(:last-child) {
- padding-left: 1em
+.links.inline > *:not(:last-child) {
+ padding-inline-end: 1em;
}
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .node--type-book .links.inline {
- text-align: right
- }
-
-[dir="rtl"] .node--type-book .links.inline {
- text-align: left
- }
+ .node--type-book .links.inline {
+ text-align: end;
}
+}
diff --git a/css/components/maintenance-page.css b/css/components/maintenance-page.css
index 80c24e3..f3fd81c 100644
--- a/css/components/maintenance-page.css
+++ b/css/components/maintenance-page.css
@@ -10,37 +10,22 @@
* Maintenance page.
*/
-/*
- * 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. */
-
@media (min-width: 75rem) {
-
-.maintenance-page .site-header__initial {
- flex-shrink: 0;
- width: var(--content-left)
+ .maintenance-page .site-header__initial {
+ flex-shrink: 0;
+ width: var(--content-left);
}
- }
+}
.maintenance-page .main-content {
- min-height: 80vh;
- }
+ min-height: 80vh;
+}
.maintenance-page-icon {
display: block;
- margin-top: var(--sp3);
- margin-bottom: var(--sp3)
+ margin-block: var(--sp3);
}
.maintenance-page-icon path {
- fill: var(--color--primary-50);
- }
+ fill: var(--color--primary-50);
+}
diff --git a/css/components/messages.css b/css/components/messages.css
index 6d08c13..6b31af7 100644
--- a/css/components/messages.css
+++ b/css/components/messages.css
@@ -10,231 +10,125 @@
* Messages.
*/
-/*
- * 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"] .messages-list {
- padding-left: 0;
-}
-
-[dir="rtl"] .messages-list {
- padding-right: 0;
-}
-
-[dir="ltr"] .messages-list {
- padding-right: 0;
-}
-
-[dir="rtl"] .messages-list {
- padding-left: 0;
+:root {
+ --messages-icon-size: 2rem;
}
.messages-list {
- margin-top: var(--sp1);
- margin-bottom: var(--sp1);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: var(--sp1);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
-[dir="ltr"] .messages {
- padding-left: var(--sp1-5);
-}
-
-[dir="rtl"] .messages {
- padding-right: var(--sp1-5);
-}
-
-[dir="ltr"] .messages {
- padding-right: var(--sp1-5);
-}
-
-[dir="rtl"] .messages {
- padding-left: var(--sp1-5);
-}
-
.messages {
- min-height: calc(2rem + var(--sp1)*2);
- padding-top: var(--sp1);
- padding-bottom: var(--sp1);
+ min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
+ padding-block: var(--sp1);
+ padding-inline-start: var(--sp1-5);
+ padding-inline-end: var(--sp1-5);
color: var(--color--white);
outline: solid 1px transparent;
- background-color: var(--color--gray-5)
+ background-color: var(--color--gray-5);
}
.messages * {
- color: inherit;
- }
-
-.messages {
-
- /* Additional specificity to override contrib modules. */
+ color: inherit;
}
-.messages.messages-list__item {
- background-image: none;
- }
-
-[dir="ltr"] .messages__list {
- margin-left: 0;
-}
-
-[dir="rtl"] .messages__list {
- margin-right: 0;
-}
-
-[dir="ltr"] .messages__list {
- margin-right: 0;
-}
-
-[dir="rtl"] .messages__list {
- margin-left: 0;
-}
-
-[dir="ltr"] .messages__list {
- padding-left: 0;
-}
+/* Additional specificity to override contrib modules. */
-[dir="rtl"] .messages__list {
- padding-right: 0;
-}
-
-[dir="ltr"] .messages__list {
- padding-right: 0;
-}
-
-[dir="rtl"] .messages__list {
- padding-left: 0;
+.messages.messages-list__item {
+ background-image: none;
}
.messages__list {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ 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;
}
.messages:not(.hidden) ~ .messages {
- margin-top: var(--sp1);
+ margin-block-start: var(--sp1);
}
.messages__item + .messages__item {
- margin-top: var(--sp0-5);
+ margin-block-start: var(--sp0-5);
}
.messages__container {
display: flex;
}
-[dir="ltr"] .messages__header {
- margin-right: var(--sp1);
-}
-
-[dir="rtl"] .messages__header {
- margin-left: var(--sp1);
-}
-
.messages__header {
- flex-shrink: 0
-}
-
-[dir="ltr"] .messages__header.no-icon {
- margin-right: 0;
+ flex-shrink: 0;
+ margin-inline-end: var(--sp1);
}
-[dir="rtl"] .messages__header.no-icon {
- margin-left: 0;
+.messages__header.no-icon {
+ margin-inline-end: 0;
}
.messages__content {
overflow: auto; /* Ensure large code blocks can be scrolled to. */
flex: 1;
- padding-top: 0.1875rem;
-}
-
-[dir="ltr"] .messages__button {
- margin-left: var(--sp1);
-}
-
-[dir="rtl"] .messages__button {
- margin-right: var(--sp1);
+ padding-block-start: 0.1875rem;
}
.messages__button {
flex-shrink: 0;
- padding-top: 0.1875rem;
-}
-
-[dir="ltr"] .messages__close {
- padding-left: 0;
-}
-
-[dir="rtl"] .messages__close {
- padding-right: 0;
-}
-
-[dir="ltr"] .messages__close {
- padding-right: 0;
-}
-
-[dir="rtl"] .messages__close {
- padding-left: 0;
+ margin-inline-start: var(--sp1);
+ padding-block-start: 0.1875rem;
}
.messages__close {
position: relative;
width: 1.5625rem;
height: 1.5625rem;
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
vertical-align: top;
border: 0;
background: none;
-webkit-appearance: none;
- appearance: none
+ appearance: none;
}
.messages__close::before,
- .messages__close::after {
- position: absolute;
- top: 50%;
- left: 50%;
- display: block;
- width: 2.0625rem;
- height: 0;
- content: "";
- border-top: solid 2px var(--color--gray-60);
- }
+.messages__close::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: block;
+ width: 2.0625rem;
+ height: 0;
+ content: "";
+ border-top: solid 2px var(--color--gray-60);
+}
.messages__close::before {
- transform: translate(-50%, -50%) rotate(45deg);
- }
+ transform: translate(-50%, -50%) rotate(45deg);
+}
.messages__close::after {
- transform: translate(-50%, -50%) rotate(-45deg);
- }
+ transform: translate(-50%, -50%) rotate(-45deg);
+}
.messages__close:hover::before,
- .messages__close:hover::after {
- border-color: var(--color--white);
- }
+.messages__close:hover::after {
+ border-color: var(--color--white);
+}
.messages__close:focus {
- outline: 2px solid var(--color--primary-60);
- outline-offset: 2px;
- }
+ outline: 2px solid var(--color--primary-60);
+ outline-offset: 2px;
+}
.messages__icon svg {
vertical-align: top;
@@ -264,14 +158,7 @@
margin: 0;
}
-[dir="ltr"] .js-form-managed-file .messages {
- border-left: solid 6px var(--color--red);
-}
-
-[dir="rtl"] .js-form-managed-file .messages {
- border-right: solid 6px var(--color--red);
-}
-
.js-form-managed-file .messages {
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
+ border-inline-start: solid 0.375rem var(--color--red);
}
diff --git a/css/components/navigation/menu-sidebar.css b/css/components/navigation/menu-sidebar.css
index 6b78d77..b776580 100644
--- a/css/components/navigation/menu-sidebar.css
+++ b/css/components/navigation/menu-sidebar.css
@@ -10,90 +10,53 @@
* Styles for menu placed in sidebar 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. */
-
.menu--sidebar {
- list-style: none
+ list-style: none;
}
.menu--sidebar .menu {
- list-style: none;
- }
-
-.menu--sidebar .menu--level-1 {
- margin: 0;
- }
-
-[dir="ltr"] .menu--sidebar .menu__link {
- padding-left: 0
-}
-
-[dir="rtl"] .menu--sidebar .menu__link {
- padding-right: 0
+ list-style: none;
}
-[dir="ltr"] .menu--sidebar .menu__link {
- padding-right: 0
-}
-
-[dir="rtl"] .menu--sidebar .menu__link {
- padding-left: 0
+.menu--sidebar .menu--level-1 {
+ margin: 0;
}
.menu--sidebar .menu__link {
- position: relative;
- display: block;
- padding-top: var(--sp0-75);
- padding-bottom: var(--sp0-75);
- font-family: var(--font-serif);
- font-size: 1.125rem
-
- /* Bottom divider line. */
- }
-
-[dir="ltr"] .menu--sidebar .menu__link::after {
- left: 0
-}
+ position: relative;
+ display: block;
+ padding-block: var(--sp0-75);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ font-family: var(--font-serif);
+ font-size: 1.125rem;
-[dir="rtl"] .menu--sidebar .menu__link::after {
- right: 0
+ /* Bottom divider line. */
}
.menu--sidebar .menu__link::after {
- position: absolute;
- bottom: 0;
- width: var(--sp4);
- height: 0;
- content: "";
- border-top: solid 2px var(--color--gray-95);
- }
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--sp4);
+ height: 0;
+ content: "";
+ border-block-start: solid 2px var(--color--gray-95);
+}
.menu--sidebar .menu__link--link {
- text-decoration: none;
- color: var(--color-text-neutral-loud);
- font-weight: 600
- }
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: var(--color-text-neutral-loud);
+ font-weight: 600;
+}
.menu--sidebar .menu__link--link:hover {
- color: var(--color--primary-50);
- }
+ color: var(--color--primary-50);
+}
-.menu--sidebar {
+/* No bottom divider line for last menu item. */
- /* No bottom divider line for last menu item. */
+:is(.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child)::after {
+ content: none;
}
-
-.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child::after, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child::after {
- content: none;
- }
diff --git a/css/components/navigation/nav-button-mobile.css b/css/components/navigation/nav-button-mobile.css
index 80fbe57..4a79af4 100644
--- a/css/components/navigation/nav-button-mobile.css
+++ b/css/components/navigation/nav-button-mobile.css
@@ -10,92 +10,41 @@
* Nav Button Mobile.
*/
-/*
- * 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"] .mobile-nav-button {
- margin-left: auto
-}
-
-[dir="rtl"] .mobile-nav-button {
- margin-right: auto
-}
-
-[dir="ltr"] .mobile-nav-button {
- margin-right: -0.375rem
-}
-
-[dir="rtl"] .mobile-nav-button {
- margin-left: -0.375rem
-}
-
-[dir="ltr"] .mobile-nav-button {
- padding-left: 0.375rem
-}
-
-[dir="rtl"] .mobile-nav-button {
- padding-right: 0.375rem
-}
-
-[dir="ltr"] .mobile-nav-button {
- padding-right: 0.375rem
-}
-
-[dir="rtl"] .mobile-nav-button {
- padding-left: 0.375rem
-}
-
.mobile-nav-button {
position: relative;
z-index: 505; /* Appear above mobile nav. */
display: flex;
align-items: center;
- -ms-grid-row-align: center;
align-self: center;
width: var(--sp2);
height: var(--sp2);
- padding-top: 0;
- padding-bottom: 0;
+ margin-inline-start: auto;
+ margin-inline-end: -0.375rem;
+ padding-block: 0;
+ padding-inline-start: 0.375rem;
+ padding-inline-end: 0.375rem;
cursor: pointer;
border: none;
background: transparent;
-webkit-appearance: none;
- appearance: none
+ appearance: none;
}
.mobile-nav-button:focus {
- outline: solid 2px var(--color--primary-40);
- }
+ outline: solid 2px var(--color--primary-40);
+}
.mobile-nav-button:active {
- color: inherit; /* Override Safari's default UA styles. */
- }
+ color: inherit; /* Override Safari's default UA styles. */
+}
@media (min-width: 31.25rem) {
-
-[dir="ltr"] .mobile-nav-button {
- padding-left: var(--sp)
- }
-
-[dir="rtl"] .mobile-nav-button {
- padding-right: var(--sp)
- }
-
-.mobile-nav-button {
+ .mobile-nav-button {
display: inline-flex;
- width: auto
-}
+ width: auto;
+ padding-inline-start: var(--sp);
}
+}
/* Text that says "menu". */
@@ -106,76 +55,59 @@
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
- word-wrap: normal
+ word-wrap: normal;
}
@media (min-width: 31.25rem) {
-
-[dir="ltr"] .mobile-nav-button__label {
- margin-right: 0.75rem
- }
-
-[dir="rtl"] .mobile-nav-button__label {
- margin-left: 0.75rem
- }
-
-.mobile-nav-button__label {
+ .mobile-nav-button__label {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
+ margin-inline-end: 0.75rem;
letter-spacing: 0.05em;
font-size: 0.875rem;
- font-weight: 600
-}
+ font-weight: 600;
}
+}
.mobile-nav-button__icon {
position: relative;
display: block;
width: var(--sp2);
height: 0;
- border-top: solid 3px var(--color--primary-50)
-}
-
-[dir="ltr"] .mobile-nav-button__icon::before,[dir="ltr"]
- .mobile-nav-button__icon::after {
- left: 0
-}
-
-[dir="rtl"] .mobile-nav-button__icon::before,[dir="rtl"]
- .mobile-nav-button__icon::after {
- right: 0
+ border-top: solid 3px var(--color--primary-50);
}
.mobile-nav-button__icon::before,
- .mobile-nav-button__icon::after {
- position: absolute;
- top: 0;
- width: 100%;
- height: 0;
- content: "";
- transition: transform 0.2s;
- border-top: solid 3px var(--color--primary-50);
- }
+.mobile-nav-button__icon::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 0;
+ content: "";
+ transition: transform 0.2s;
+ border-top: solid 3px var(--color--primary-50);
+}
.mobile-nav-button__icon::before {
- transform: translateY(-0.6875rem);
- }
+ transform: translateY(-0.6875rem);
+}
.mobile-nav-button__icon::after {
- transform: translateY(0.3125rem);
- }
+ transform: translateY(0.3125rem);
+}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
- border-top-color: transparent
+ border-top-color: transparent;
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before {
- transform: translateY(-0.1875rem) rotate(-45deg);
- }
+ transform: translateY(-0.1875rem) rotate(-45deg);
+}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {
- transform: translateY(-0.1875rem) rotate(45deg);
- }
+ transform: translateY(-0.1875rem) rotate(45deg);
+}
diff --git a/css/components/navigation/nav-primary-button.css b/css/components/navigation/nav-primary-button.css
index b7ce5de..6c6e645 100644
--- a/css/components/navigation/nav-primary-button.css
+++ b/css/components/navigation/nav-primary-button.css
@@ -10,170 +10,126 @@
* Button that expands second level nav when clicked.
*/
-/*
- * 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"] .primary-nav__button-toggle {
- padding-left: 0
-}
-
-[dir="rtl"] .primary-nav__button-toggle {
- padding-right: 0
-}
-
-[dir="ltr"] .primary-nav__button-toggle {
- padding-right: 0
-}
-
-[dir="rtl"] .primary-nav__button-toggle {
- padding-left: 0
-}
-
.primary-nav__button-toggle {
position: relative;
overflow: hidden;
width: var(--sp2);
height: var(--sp2);
- margin-top: var(--sp0-5); /* Visually align button with menu link text. */
- padding-top: 0;
- padding-bottom: 0;
+ margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
text-indent: -62.4375rem;
border: 0;
background: transparent;
- -webkit-appearance: none
+ -webkit-appearance: none;
}
.primary-nav__button-toggle:focus {
- outline: auto 2px var(--color--primary-50);
- outline-offset: 2px;
- }
+ outline: auto 2px var(--color--primary-50);
+ outline-offset: 2px;
+}
.primary-nav__button-toggle .icon--menu-toggle {
- position: absolute;
- /* stylelint-disable csstools/use-logical */
- top: 50%;
- left: 50%;
- /* stylelint-enable csstools/use-logical */
- width: 1rem;
- height: 1rem;
- transition: background-color 0.2s;
- transform: translate(-50%, -50%);
- border-radius: 2px
- }
+ position: absolute;
+ /* stylelint-disable csstools/use-logical */
+ top: 50%;
+ left: 50%;
+ /* stylelint-enable csstools/use-logical */
+ width: 1rem;
+ height: 1rem;
+ transition: background-color 0.2s;
+ transform: translate(-50%, -50%);
+ border-radius: 2px;
+}
.primary-nav__button-toggle .icon--menu-toggle::before,
- .primary-nav__button-toggle .icon--menu-toggle::after {
- position: absolute;
- /* stylelint-disable csstools/use-logical */
- top: 50%;
- left: 50%;
- /* stylelint-enable csstools/use-logical */
- width: var(--sp);
- height: 0;
- content: "";
- transform: translate(-50%, -50%);
- /* Intentionally not using CSS logical properties. */
- border-top: solid 3px var(--color--primary-50);
- }
+.primary-nav__button-toggle .icon--menu-toggle::after {
+ position: absolute;
+ /* stylelint-disable csstools/use-logical */
+ top: 50%;
+ left: 50%;
+ /* stylelint-enable csstools/use-logical */
+ width: var(--sp);
+ height: 0;
+ content: "";
+ transform: translate(-50%, -50%);
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 3px var(--color--primary-50);
+}
.primary-nav__button-toggle .icon--menu-toggle::after {
- transition: opacity 0.2s;
- transform: translate(-50%, -50%) rotate(90deg);
- }
+ transition: opacity 0.2s;
+ transform: translate(-50%, -50%) rotate(90deg);
+}
.primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
- opacity: 0;
- }
-
-.primary-nav__button-toggle {
+ opacity: 0;
+}
- /* aria-hidden attribute is removed by JS. Button is non-functional
+/* aria-hidden attribute is removed by JS. Button is non-functional
until JS is enabled.
*/
-}
.primary-nav__button-toggle[aria-hidden="true"] {
- pointer-events: none;
- }
+ pointer-events: none;
+}
@media (min-width: 75rem) {
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
- margin-right: calc(var(--sp2)*-1)
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
+ flex-shrink: 0;
+ align-self: stretch;
+ width: calc(var(--sp2) + 0.5rem);
+ height: auto;
+ margin-block-start: 0;
+ margin-inline-end: calc(-1 * var(--sp2));
}
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
- margin-left: calc(var(--sp2)*-1)
+
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
+ border: 0;
+ outline: 0;
}
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
- flex-shrink: 0;
- -ms-grid-row-align: stretch;
- align-self: stretch;
- width: calc(var(--sp2) + 0.5rem);
- height: auto;
- margin-top: 0
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
- border: 0;
- outline: 0
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
- border: solid 2px var(--color--primary-40);
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active {
- /* Necessary for Safari. */
- color: currentColor;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
- opacity: 0.8;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
- left: 0.1875rem
+
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
+ border: solid 2px var(--color--primary-40);
+ }
+
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active {
+ /* Necessary for Safari. */
+ color: currentColor;
+ }
+
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
+ opacity: 0.8;
}
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
- right: 0.1875rem
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
+ inset-inline-start: 0.1875rem;
+ width: 1.125rem;
+ transform: translateY(-50%);
+ border-radius: 0.25rem;
+ background-color: var(--color--white);
}
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
- width: 1.125rem;
- transform: translateY(-50%);
- border-radius: 0.25rem;
- background-color: var(--color--white)
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::before {
- content: none;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after {
- /* stylelint-disable csstools/use-logical */
- top: calc(50% - 2px);
- left: 0.1875rem;
- /* stylelint-enable csstools/use-logical */
- width: 0.5rem;
- height: 0.5rem;
- content: "";
- transform: translateY(-50%) rotate(45deg);
- opacity: 0.8;
- /* Intentionally not using CSS logical properties. */
- border-top: none;
- border-right: solid 2px currentColor;
- border-bottom: solid 2px currentColor;
- background: transparent;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::before {
+ content: none;
}
+
+ body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after {
+ /* stylelint-disable csstools/use-logical */
+ top: calc(50% - 2px);
+ left: 0.1875rem;
+ /* stylelint-enable csstools/use-logical */
+ width: 0.5rem;
+ height: 0.5rem;
+ content: "";
+ transform: translateY(-50%) rotate(45deg);
+ opacity: 0.8;
+ /* Intentionally not using CSS logical properties. */
+ border-top: none;
+ border-right: solid 2px currentColor;
+ border-bottom: solid 2px currentColor;
+ background: transparent;
+ }
+}
diff --git a/css/components/navigation/nav-primary-no-js.css b/css/components/navigation/nav-primary-no-js.css
index e61980e..ba4b6e6 100644
--- a/css/components/navigation/nav-primary-no-js.css
+++ b/css/components/navigation/nav-primary-no-js.css
@@ -10,219 +10,139 @@
* Styles for primary navigation when JavaScript is disabled.
*/
-/*
- * 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 {
+ --no-js-nav-column-width: 18.75rem;
+ --no-js-nav-column-gap: var(--sp2);
+}
-html:not(.js) {
- /**
+/**
* Mobile styles for primary navigation when JS is disabled.
*/
-}
@media (max-width: 75rem) {
- html:not(.js) .primary-nav__menu--level-1 {
- column-width: 18.75rem;
- grid-column-gap: var(--sp2);
- }
-
- html:not(.js) .primary-nav__menu-item {
- page-break-inside: avoid;
- break-inside: avoid;
- }
-
- html:not(.js) .site-header__inner__container {
- flex-wrap: wrap;
- }
-
- html:not(.js) .mobile-buttons {
- display: none;
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- margin-left: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- margin-right: var(--sp2);
+ html:not(.js) .primary-nav__menu--level-1 {
+ column-width: var(--no-js-nav-column-width);
+ column-gap: var(--no-js-nav-column-gap);
}
- html[dir="ltr"]:not(.js) .header-nav {
- margin-right: var(--sp2);
+ html:not(.js) .primary-nav__menu-item {
+ page-break-inside: avoid;
+ break-inside: avoid;
}
- html[dir="rtl"]:not(.js) .header-nav {
- margin-left: var(--sp2);
+ html:not(.js) .site-header__inner__container {
+ flex-wrap: wrap;
}
- html[dir="ltr"]:not(.js) .header-nav {
- padding-left: var(--sp2);
+ html:not(.js) .mobile-buttons {
+ display: none;
}
- html[dir="rtl"]:not(.js) .header-nav {
- padding-right: var(--sp2);
+ html:not(.js) .header-nav {
+ border: solid 1px var(--color--gray-95) !important;
}
- html[dir="ltr"]:not(.js) .header-nav {
- padding-right: var(--sp2);
+ html:not(.js) .header-nav {
+ position: static;
+ visibility: visible;
+ flex-basis: 100%;
+ width: 100%;
+ max-width: none;
+ margin-block: var(--sp2) 0;
+ margin-inline-start: var(--sp2);
+ margin-inline-end: var(--sp2);
+ padding-block: var(--sp2) 0;
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
+ transform: none;
+ box-shadow: 0 0 36px var(--color--gray-90);
}
- html[dir="rtl"]:not(.js) .header-nav {
- padding-left: var(--sp2);
+ html:not(.js) .primary-nav__menu--level-2 {
+ border-inline-start: 0;
}
- html:not(.js) .header-nav {
- position: static;
- visibility: visible;
- flex-basis: 100%;
- width: 100%;
- max-width: none;
- margin-top: var(--sp2);
- margin-bottom: 0;
- padding-top: var(--sp2);
- padding-bottom: 0;
- transform: none;
- border: solid 1px var(--color--gray-95) !important;
- box-shadow: 0 0 36px var(--color--gray-90);
- }
-
- html[dir="ltr"]:not(.js) .primary-nav__menu--level-2 {
- border-left: 0;
+ html:not(.js) .primary-nav__button-toggle {
+ display: none;
}
-
- html[dir="rtl"]:not(.js) .primary-nav__menu--level-2 {
- border-right: 0;
- }
-
- html:not(.js) .primary-nav__button-toggle {
- display: none;
- }
- html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
- html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- content: none;
- }
+ html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
+ html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+ content: none;
}
+}
@media (min-width: 75rem) {
-
-html:not(.js) {
- /**
+ /**
* Styles for 'always on mobile navigation' when JS is disabled.
*/
-}
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
- column-width: 18.75rem;
- grid-column-gap: var(--sp2);
- }
-
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
- page-break-inside: avoid;
- break-inside: avoid;
- }
-
- html:not(.js) body.is-always-mobile-nav .site-header__inner__container {
- flex-wrap: wrap;
- }
-
- html:not(.js) body.is-always-mobile-nav .mobile-buttons {
- display: none;
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
+ column-width: var(--no-js-nav-column-width);
+ column-gap: var(--no-js-nav-column-gap);
}
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
+ page-break-inside: avoid;
+ break-inside: avoid;
}
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .site-header__inner__container {
+ flex-wrap: wrap;
}
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .mobile-buttons {
+ display: none;
}
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .header-nav {
+ border: solid 1px var(--color--gray-95) !important;
}
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .header-nav {
+ position: static;
+ visibility: visible;
+ flex-basis: 100%;
+ width: 100%;
+ max-width: none;
+ margin-block: var(--sp2) 0;
+ margin-inline-start: var(--sp2);
+ margin-inline-end: var(--sp2);
+ padding-block: var(--sp2) 0;
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
+ transform: none;
+ box-shadow: 0 0 36px var(--color--gray-90);
}
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
+ border-inline-start: 0;
}
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: var(--sp2);
+ html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
+ display: none;
}
-
- html:not(.js) body.is-always-mobile-nav .header-nav {
- position: static;
- visibility: visible;
- flex-basis: 100%;
- width: 100%;
- max-width: none;
- margin-top: var(--sp2);
- margin-bottom: 0;
- padding-top: var(--sp2);
- padding-bottom: 0;
- transform: none;
- border: solid 1px var(--color--gray-95) !important;
- box-shadow: 0 0 36px var(--color--gray-90);
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
- border-left: 0;
+ html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
+ html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+ content: none;
}
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
- border-right: 0;
- }
-
- html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
- display: none;
- }
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
- html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- content: none;
- }
-
-html:not(.js) {
-
- /**
+ /**
* Styles for traditional dropdown primary navigation when JS is disabled.
*/
-}
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
- visibility: visible;
- transform: translate(-50%, 0);
- opacity: 1;
- }
- html:not(.js) body:not(.is-always-mobile-nav) {
-
- /*
+ html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
+ html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
+ visibility: visible;
+ transform: translate(-50%, 0);
+ opacity: 1;
+ }
+
+ /*
* Cannot combine the focus-within pseudo selector with other selectors,
* because it will break IE11 and earlier versions of MS Edge.
*/
- }
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
- html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
- visibility: visible;
- transform: translate(-50%, 0);
- opacity: 1;
- }
+ html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
+ html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
+ visibility: visible;
+ transform: translate(-50%, 0);
+ opacity: 1;
}
+}
diff --git a/css/components/navigation/nav-primary-wide.css b/css/components/navigation/nav-primary-wide.css
index 9891aee..675d46d 100644
--- a/css/components/navigation/nav-primary-wide.css
+++ b/css/components/navigation/nav-primary-wide.css
@@ -10,315 +10,203 @@
* Nav Primary (wide widths).
*/
-/*
- * 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. */
-
@media (min-width: 75rem) {
- body:not(.is-always-mobile-nav) .primary-nav__menu-item {
- flex-wrap: nowrap /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
- }
- body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
- body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
- flex-basis: auto;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children {
-
- /* Remove hover state if submenu exists. */
- }
- body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after {
- content: none;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link {
- letter-spacing: 0.02em;
- font-size: 1rem;
- line-height: var(--sp1-5)
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
- position: relative;
- outline: 0
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before {
- position: absolute;
- top: 50%;
- left: 50%;
- width: calc(100% + var(--sp));
- height: var(--sp3);
- content: "";
- transform: translate(-50%, -50%);
- border: solid 2px var(--color--primary-50);
- border-radius: 0.25rem;
- }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-right: 0.5625rem;
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-left: 0.5625rem;
- }
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- overflow: visible /* Necessary to view icon in IE11 */
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before {
- width: calc(100% + var(--sp1-5));
- content: "";
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before {
- content: none;
- }
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
-
- /* Chevron icon for desktop navigation. */
- }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- left: calc(100% - 0.1875rem);
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- right: calc(100% - 0.1875rem);
- }
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- position: absolute;
- top: 50%;
- width: 0.5rem;
- height: 0.5rem;
- margin-top: -2px;
- transform: translateY(-50%) rotate(45deg);
- /* Intentionally not using CSS logical properties. */
- border-top: 0;
- border-right: solid 2px currentColor;
- border-bottom: solid 2px currentColor;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
- opacity: 1;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-left: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-right: 0;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-right: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-left: 0;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-top: var(--sp2);
- padding-bottom: var(--sp2)
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after {
- transform-origin: center;
- border-top-width: var(--sp0-5);
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- margin-right: var(--sp);
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- margin-left: var(--sp);
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- display: flex;
- align-items: stretch;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-item {
+ flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
+ }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
+ body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
+ flex-basis: auto;
+ }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-left: 0;
- }
+ /* Remove hover state if submenu exists. */
+ body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after {
+ content: none;
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-right: 0;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link {
+ letter-spacing: 0.02em;
+ font-size: 1rem;
+ line-height: var(--sp1-5);
+ }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-right: 0;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
+ position: relative;
+ outline: 0;
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-left: 0;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: calc(100% + var(--sp));
+ height: var(--sp3);
+ content: "";
+ transform: translate(-50%, -50%);
+ border: solid 2px var(--color--primary-50);
+ border-radius: 0.25rem;
+ }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
+ overflow: visible; /* Necessary to view icon in IE11 */
+ padding-inline-end: 0.5625rem;
+ }
- body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- position: relative; /* Anchor secondary menu */
- display: flex;
- align-items: center;
- width: max-content;
- max-width: 12.5rem;
- margin-top: 0;
- margin-bottom: 0
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before {
+ width: calc(100% + var(--sp1-5));
+ content: "";
+ }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
- margin-right: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before {
+ content: none;
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
- margin-left: var(--sp2);
- }
+ /* Chevron icon for desktop navigation. */
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+ position: absolute;
+ inset-block-start: 50%;
+ inset-inline-start: calc(100% - 0.1875rem);
+ width: 0.5rem;
+ height: 0.5rem;
+ margin-block-start: -2px;
+ transform: translateY(-50%) rotate(45deg);
+ /* Intentionally not using CSS logical properties. */
+ border-top: 0;
+ border-right: solid 2px currentColor;
+ border-bottom: solid 2px currentColor;
+ }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- margin-left: 0;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
+ opacity: 1;
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- margin-right: 0;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
+ padding-block: var(--sp2);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-left: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after {
+ transform-origin: center;
+ border-top-width: var(--sp0-5);
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-right: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
+ display: flex;
+ align-items: stretch;
+ margin-inline-end: var(--sp);
+ }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-right: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
+ position: relative; /* Anchor secondary menu */
+ display: flex;
+ align-items: center;
+ width: max-content;
+ max-width: 12.5rem;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-left: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
+ margin-inline-end: var(--sp2);
+ }
- body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- position: absolute;
- z-index: 105; /* Appear above search container. */
- top: calc(100% - var(--sp)*0.5);
- left: 50%;
- visibility: hidden;
- overflow: auto;
- width: 15.625rem;
- /* Ensure that long level-2 menus will never overflow viewport (focused
+ body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
+ position: absolute;
+ z-index: 105; /* Appear above search container. */
+ top: calc(100% - (0.5 * var(--sp)));
+ left: 50%;
+ visibility: hidden;
+ overflow: auto;
+ width: 15.625rem;
+ /* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines). */
- max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));
- margin-top: 0;
- padding-top: calc(var(--sp)*3);
- padding-bottom: calc(var(--sp)*3);
- transition: none;
- transform: translate(-50%, -1.25rem);
- opacity: 0;
- /* Intentionally not using CSS logical properties. */
- border-top: solid var(--color--primary-50) var(--sp0-5);
- border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
- border-bottom: solid 1px transparent;
- border-left: solid 1px transparent;
- border-radius: 0 0 2px 2px;
- background: var(--color--white);
- box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08)
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
- visibility: visible;
- margin-top: 0;
- transform: translate(-50%, 0);
- opacity: 1;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
- display: block
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before {
- top: 0;
- left: calc(var(--sp0-5)*-1);
- height: 100%;
- transform: none;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-left: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-right: 0;
- }
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));
+ margin-block-start: 0;
+ margin-inline-start: 0;
+ padding-block: calc(3 * var(--sp));
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
+ transition: none;
+ transform: translate(-50%, -1.25rem);
+ opacity: 0;
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid var(--color--primary-50) var(--sp0-5);
+ border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
+ border-bottom: solid 1px transparent;
+ border-left: solid 1px transparent;
+ border-radius: 0 0 2px 2px;
+ background: var(--color--white);
+ box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
+ }
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-right: 0;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
+ visibility: visible;
+ margin-block-start: 0;
+ transform: translate(-50%, 0);
+ opacity: 1;
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-left: 0;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
+ display: block;
+ }
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5)
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before {
+ top: 0;
+ left: calc(var(--sp0-5) * -1);
+ height: 100%;
+ transform: none;
+ }
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
- transform-origin: left; /* LTR */
- border-top-width: 3px
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
- transform-origin: right;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
+ transform-origin: left; /* LTR */
+ border-top-width: 3px;
+ }
-body:not(.is-always-mobile-nav) {
+ [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
+ transform-origin: right;
+ }
- /**
+ /**
* Arrow is placed outside of submenu because the submenu has the
* `overflow: hidden` CSS rule applied.
*/
-}
- body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
- position: absolute;
- z-index: 105; /* Match level 2 menus. */
- top: calc(100% - var(--sp));
- left: 50%;
- visibility: hidden;
- width: 0;
- height: 0;
- transform: translate(-50%, -1.25rem);
- opacity: 0;
- /* Intentionally not using CSS logical properties. */
- border-right: solid 10px transparent;
- border-bottom: solid 10px var(--color--primary-50);
- border-left: solid 10px transparent
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
- visibility: visible;
- transform: translate(-50%, 0);
- opacity: 1;
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
+ position: absolute;
+ z-index: 105; /* Match level 2 menus. */
+ top: calc(100% - var(--sp));
+ left: 50%;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+ transform: translate(-50%, -1.25rem);
+ opacity: 0;
+ /* Intentionally not using CSS logical properties. */
+ border-right: solid 10px transparent;
+ border-bottom: solid 10px var(--color--primary-50);
+ border-left: solid 10px transparent;
+ }
-body:not(.is-always-mobile-nav) {
+ body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
+ visibility: visible;
+ transform: translate(-50%, 0);
+ opacity: 1;
+ }
- /**
+ /**
* When ensuring that long menus don't overflow viewport, we can give a
* little extra room when the toolbar is fixed (and is shorter).
*/
-}
- body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
- max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));
- }
+ body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
+ max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4));
}
+}
/*
* Only apply transition styles to menu when JS is loaded. This
@@ -326,8 +214,8 @@ body:not(.is-always-mobile-nav) {
*/
@media (min-width: 75rem) {
- html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
- html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
- transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
- }
+ html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
+ html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
+ transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
}
+}
diff --git a/css/components/navigation/nav-primary.css b/css/components/navigation/nav-primary.css
index d059963..186b3b1 100644
--- a/css/components/navigation/nav-primary.css
+++ b/css/components/navigation/nav-primary.css
@@ -10,251 +10,134 @@
* Nav Primary.
*/
-/*
- * 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. */
-
.primary-nav__menu {
flex-wrap: wrap;
list-style: none;
}
.primary-nav__menu-item {
- margin-bottom: var(--sp0-5)
+ margin-block-end: var(--sp0-5);
}
.primary-nav__menu-item:last-child {
- margin-bottom: 0;
- }
+ margin-block-end: 0;
+}
.primary-nav__menu-item.primary-nav__menu-item--has-children {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between
- }
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
- .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
- /* Ensure that long text doesn't make the mobile expand button wrap. */
- flex-basis: calc(100% - var(--sp3));
- }
+.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
+ /* Ensure that long text doesn't make the mobile expand button wrap. */
+ flex-basis: calc(100% - var(--sp3));
+}
.primary-nav__menu-link {
flex-grow: 1;
+ -webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-neutral-loud);
font-size: 1.75rem;
font-weight: bold;
- line-height: var(--sp2)
+ line-height: var(--sp2);
}
.primary-nav__menu-link:hover {
- color: inherit;
- }
-
-.primary-nav__menu-link:focus {
- outline: auto 2px var(--color--primary-50);
- outline-offset: 2px;
- }
-
-[dir="ltr"] .primary-nav__menu-link--nolink {
- padding-left: 0;
+ color: inherit;
}
-[dir="rtl"] .primary-nav__menu-link--nolink {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--nolink {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--nolink {
- padding-left: 0;
+.primary-nav__menu-link:focus {
+ outline: auto 2px var(--color--primary-50);
+ outline-offset: 2px;
}
.primary-nav__menu-link--nolink {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
color: var(--color-text-neutral-soft);
font-weight: normal;
}
-[dir="ltr"] .primary-nav__menu-link--button {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--button {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
- padding-left: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--button {
- text-align: left;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
- text-align: right;
-}
-
.primary-nav__menu-link--button {
position: relative;
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
+ text-align: start;
border: 0;
- background: transparent
+ background: transparent;
/* Plus icon for mobile navigation. */
}
-[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-right: var(--sp3);
-}
-
-[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-left: var(--sp3);
-}
-
-.primary-nav__menu-link--button.primary-nav__menu-link--has-children { /* Ensure text does not overlap icon. */
- }
-
-[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,[dir="ltr"]
- .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- right: 0.5625rem;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,[dir="rtl"]
- .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- left: 0.5625rem;
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children {
+ padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
- .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- position: absolute;
- top: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
- width: 1.125rem;
- height: 0;
- content: "";
- /* Intentionally not using CSS logical properties. */
- border-top: solid 3px var(--color--primary-50);
- }
-
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
- transition: opacity 0.2s;
- transform: rotate(90deg);
- }
-
-.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
- opacity: 0;
- }
-
-[dir="ltr"] .primary-nav__menu-link-inner {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link-inner {
- padding-right: 0;
+ position: absolute;
+ inset-inline-end: 0.5625rem;
+ inset-block-start: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
+ width: 1.125rem;
+ height: 0;
+ content: "";
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 3px var(--color--primary-50);
}
-[dir="ltr"] .primary-nav__menu-link-inner {
- padding-right: 0;
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+ transition: opacity 0.2s;
+ transform: rotate(90deg);
}
-[dir="rtl"] .primary-nav__menu-link-inner {
- padding-left: 0;
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
+ opacity: 0;
}
.primary-nav__menu-link-inner {
position: relative;
display: inline-flex;
align-items: center;
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5)
-}
-
-[dir="ltr"] .primary-nav__menu-link-inner::after {
- left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link-inner::after {
- right: 0;
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
.primary-nav__menu-link-inner::after {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 0;
- content: "";
- transition: transform 0.2s;
- transform: scaleX(0);
- transform-origin: left;
- /* Intentionally not using CSS logical properties. */
- border-top: solid 5px var(--color--primary-50);
- }
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 0;
+ content: "";
+ transition: transform 0.2s;
+ transform: scaleX(0);
+ transform-origin: left;
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 5px var(--color--primary-50);
+}
.primary-nav__menu-link:hover .primary-nav__menu-link-inner::after {
- transform: scaleX(1)
- }
+ transform: scaleX(1);
+}
/*
Top level specific styles.
*/
-[dir="ltr"] .primary-nav__menu--level-1 {
- margin-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- margin-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
- margin-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- margin-left: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- padding-left: 0;
-}
-
.primary-nav__menu--level-1 {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
.primary-nav__menu-link--level-1 {
@@ -267,66 +150,32 @@
Secondary menu specific styles.
*/
-[dir="ltr"] .primary-nav__menu--level-2 {
- margin-left: calc(var(--sp)*-1);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- margin-right: calc(var(--sp)*-1);
-}
-
-[dir="ltr"] .primary-nav__menu--level-2 {
- padding-left: var(--sp2-5);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- padding-right: var(--sp2-5);
-}
-
-[dir="ltr"] .primary-nav__menu--level-2 {
- border-left: solid var(--sp) var(--color--primary-50);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- border-right: solid var(--sp) var(--color--primary-50);
-}
-
.primary-nav__menu--level-2 {
visibility: hidden;
overflow: hidden;
flex-basis: 100%;
max-height: 0;
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: calc(-1 * var(--sp));
+ padding-inline-start: var(--sp2-5);
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
- opacity: 0
+ opacity: 0;
+ border-inline-start: solid var(--sp) var(--color--primary-50);
}
.primary-nav__menu--level-2.is-active-menu-parent {
- visibility: visible;
- max-height: none;
- margin-top: var(--sp1-5);
- opacity: 1;
- }
+ visibility: visible;
+ max-height: none;
+ margin-block-start: var(--sp1-5);
+ opacity: 1;
+}
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .primary-nav__menu--level-2 {
- margin-left: calc(var(--sp3)*-1);
- }
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- margin-right: calc(var(--sp3)*-1);
- }
-
-[dir="ltr"] .primary-nav__menu--level-2 {
- padding-left: var(--sp3);
- }
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- padding-right: var(--sp3);
- }
+ .primary-nav__menu--level-2 {
+ margin-inline-start: calc(-1 * var(--sp3));
+ padding-inline-start: var(--sp3);
}
+}
/*
* Olives doesn't officially support nested tertiary submenus, but this
@@ -346,11 +195,11 @@
}
html:not(.js) .primary-nav__menu--level-2 {
- visibility: visible;
- max-height: none;
- opacity: 1;
- }
+ visibility: visible;
+ max-height: none;
+ opacity: 1;
+}
[dir="rtl"] .primary-nav__menu-link-inner::after {
- transform-origin: right;
- }
+ transform-origin: right;
+}
diff --git a/css/components/navigation/nav-secondary.css b/css/components/navigation/nav-secondary.css
index 92f90e4..7eacf9c 100644
--- a/css/components/navigation/nav-secondary.css
+++ b/css/components/navigation/nav-secondary.css
@@ -10,84 +10,36 @@
* Secondary navigation 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. */
-
.secondary-nav {
letter-spacing: 0.02em;
font-size: var(--font-size-s);
font-weight: 600;
}
-[dir="ltr"] .secondary-nav__menu {
- margin-left: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- margin-right: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
- margin-right: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- margin-left: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
- padding-left: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- padding-right: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
- padding-right: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- padding-left: 0;
-}
-
.secondary-nav__menu {
display: flex;
align-items: center;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ 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;
}
.secondary-nav__menu-item {
+ /* @todo should this be scoped to desktop nav? */
+ width: max-content;
+ max-width: 12.5rem;
/* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a
* certain arbitrary width.
*/
-
- /* @todo should this be scoped to desktop nav? */
- width: max-content;
- max-width: 12.5rem
-}
-
-[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
- margin-right: var(--sp1-5);
}
-[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
- margin-left: var(--sp1-5);
+.secondary-nav__menu-item:not(:last-child) {
+ margin-inline-end: var(--sp1-5);
}
.secondary-nav__menu-link {
@@ -95,86 +47,66 @@
display: inline-flex;
align-items: center;
height: var(--sp2);
+ -webkit-text-decoration: none;
text-decoration: none;
- color: inherit
+ color: inherit;
}
.secondary-nav__menu-link::after {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 0;
- content: "";
- transition: opacity 0.2s, transform 0.2s;
- transform: translateY(0.3125rem);
- opacity: 0;
- /* Intentionally not using CSS logical properties. */
- border-top: solid 2px currentColor;
- }
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 0;
+ content: "";
+ transition: opacity 0.2s, transform 0.2s;
+ transform: translateY(0.3125rem);
+ opacity: 0;
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 2px currentColor;
+}
.secondary-nav__menu-link:hover::after {
- transform: translateY(0);
- opacity: 0.8;
- }
+ transform: translateY(0);
+ opacity: 0.8;
+}
@media (min-width: 75rem) {
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
- margin-left: var(--sp);
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
- margin-right: var(--sp);
+ body:not(.is-always-mobile-nav) .secondary-nav {
+ position: relative;
+ display: flex;
+ margin-inline-start: var(--sp);
+ padding-inline-start: var(--sp2);
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
- padding-left: var(--sp2);
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
- padding-right: var(--sp2);
- }
- body:not(.is-always-mobile-nav) .secondary-nav {
- position: relative;
- display: flex
- }
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav::before {
- left: 0;
+ body:not(.is-always-mobile-nav) .secondary-nav::before {
+ position: absolute;
+ inset-block-start: 50%;
+ inset-inline-start: 0;
+ width: 2px;
+ height: var(--sp2);
+ content: "";
+ transform: translateY(-50%);
+ background-color: var(--color--gray-90);
}
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav::before {
- right: 0;
+ body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
+ margin-inline-end: var(--sp2);
}
-
- body:not(.is-always-mobile-nav) .secondary-nav::before {
- position: absolute;
- top: 50%;
- width: 2px;
- height: var(--sp2);
- content: "";
- transform: translateY(-50%);
- background-color: var(--color--gray-90);
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
- margin-right: var(--sp2);
+ body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
+ position: relative;
+ outline: 0;
}
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
- margin-left: var(--sp2);
- }
- body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
- position: relative;
- outline: 0
- }
-
- body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before {
- position: absolute;
- top: 50%;
- left: 50%;
- width: calc(100% + var(--sp));
- height: var(--sp3);
- content: "";
- transform: translate(-50%, -50%);
- border: solid 2px var(--color--primary-50);
- border-radius: 0.25rem;
- }
+ body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: calc(100% + var(--sp));
+ height: var(--sp3);
+ content: "";
+ transform: translate(-50%, -50%);
+ border: solid 2px var(--color--primary-50);
+ border-radius: 0.25rem;
}
+}
diff --git a/css/components/navigation/wide-nav-expand.css b/css/components/navigation/wide-nav-expand.css
index 61b59c6..51e4040 100644
--- a/css/components/navigation/wide-nav-expand.css
+++ b/css/components/navigation/wide-nav-expand.css
@@ -10,26 +10,12 @@
* Button which expands the navigation at wide viewport widths.
*/
-/*
- * 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. */
-
.wide-nav-expand {
- display: none
+ display: none;
}
@media (min-width: 75rem) {
-
-.wide-nav-expand {
+ .wide-nav-expand {
display: flex;
visibility: hidden;
flex-shrink: 0;
@@ -41,28 +27,26 @@
pointer-events: auto;
color: var(--color--white);
border: 0;
- background-color: var(--color--primary-50)
-}
+ background-color: var(--color--primary-50);
+ }
- .wide-nav-expand:focus {
- outline: solid 2px currentColor;
- outline-offset: -4px;
- }
+ .wide-nav-expand:focus {
+ outline: solid 2px currentColor;
+ outline-offset: -4px;
}
+}
@media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
- visibility: visible
-}
+ body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
+ visibility: visible;
}
+}
@media (min-width: 75rem) {
-
-body.is-always-mobile-nav .wide-nav-expand {
- visibility: hidden
-}
+ body.is-always-mobile-nav .wide-nav-expand {
+ visibility: hidden;
}
+}
.wide-nav-expand__icon {
position: relative;
@@ -71,82 +55,60 @@ body.is-always-mobile-nav .wide-nav-expand {
transition: opacity 0.2s;
pointer-events: none;
opacity: 0;
- transform-style: preserve-3d
+ transform-style: preserve-3d;
}
.wide-nav-expand__icon > span {
- display: block;
- height: 0;
- /* Intentionally not using CSS logical properties. */
- border-top: solid 3px currentColor
- }
-
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) {
- left: 0
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) {
- right: 0
+ display: block;
+ height: 0;
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 3px currentColor;
}
.wide-nav-expand__icon > span:nth-child(1) {
- position: absolute;
- top: 0;
- width: 100%;
- height: 0;
- transition: transform 0.2s;
- background-color: currentColor;
- }
-
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) {
- left: 0
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) {
- right: 0
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 0;
+ transition: transform 0.2s;
+ background-color: currentColor;
}
.wide-nav-expand__icon > span:nth-child(2) {
- position: absolute;
- top: 0.5625rem;
- width: 100%;
- height: 0;
- transition: opacity 0.2s;
- background-color: currentColor;
- }
-
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) {
- left: 0
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) {
- right: 0
+ position: absolute;
+ inset-block-start: 0.5625rem;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 0;
+ transition: opacity 0.2s;
+ background-color: currentColor;
}
.wide-nav-expand__icon > span:nth-child(3) {
- position: absolute;
- top: auto;
- bottom: 0;
- width: 100%;
- height: 0;
- transition: transform 0.2s;
- background-color: currentColor;
- }
+ position: absolute;
+ inset-block: auto 0;
+ inset-inline-start: 0;
+ width: 100%;
+ height: 0;
+ transition: transform 0.2s;
+ background-color: currentColor;
+}
.is-fixed .wide-nav-expand__icon {
opacity: 1;
}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {
- top: 0.5625rem;
- transform: rotate(-45deg);
- }
+ inset-block-start: 0.5625rem;
+ transform: rotate(-45deg);
+}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) {
- opacity: 0;
- }
+ opacity: 0;
+}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {
- top: 0.5625rem;
- transform: rotate(45deg);
- }
+ inset-block-start: 0.5625rem;
+ transform: rotate(45deg);
+}
diff --git a/css/components/node-preview-container.css b/css/components/node-preview-container.css
index dfd4a63..55916a5 100644
--- a/css/components/node-preview-container.css
+++ b/css/components/node-preview-container.css
@@ -10,38 +10,10 @@
* Node preview container 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"] .node-preview-container {
- padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] .node-preview-container {
- padding-right: var(--sp0-5);
-}
-
-[dir="ltr"] .node-preview-container {
- padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] .node-preview-container {
- padding-left: var(--sp0-5);
-}
-
.node-preview-container {
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: var(--sp0-5);
+ padding-inline-end: var(--sp0-5);
background: var(--color--white);
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
}
@@ -60,23 +32,8 @@
align-items: center;
}
-[dir="ltr"] .node-preview-backlink {
- margin-left: 0;
-}
-
-[dir="rtl"] .node-preview-backlink {
- margin-right: 0;
-}
-
-[dir="ltr"] .node-preview-backlink {
- margin-right: auto;
-}
-
-[dir="rtl"] .node-preview-backlink {
- margin-left: auto;
-}
-
.node-preview-backlink {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
+ margin-inline-start: 0;
+ margin-inline-end: auto;
}
diff --git a/css/components/node-teaser.css b/css/components/node-teaser.css
index aa882b2..efaa290 100644
--- a/css/components/node-teaser.css
+++ b/css/components/node-teaser.css
@@ -10,191 +10,127 @@
* Node Teaser specific styles.
*/
-/*
- * 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. */
-
.node--view-mode-teaser {
position: relative; /* Anchor after pseudo-element. */
- margin-bottom: var(--sp1-5)
+ margin-block-end: var(--sp1-5);
}
.node--view-mode-teaser::after {
- position: absolute;
- bottom: 0;
- width: var(--sp3);
- height: 0;
- content: "";
- /* Intentionally not using CSS logical properties. */
- border-top: solid 2px var(--color--gray-95);
- }
+ position: absolute;
+ inset-block-end: 0;
+ width: var(--sp3);
+ height: 0;
+ content: "";
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 2px var(--color--gray-95);
+}
.node--view-mode-teaser .node__meta {
- margin-bottom: var(--sp)
- }
+ margin-block-end: var(--sp);
+}
.node--view-mode-teaser .node__meta a {
- color: var(--color-text-primary-medium);
- font-weight: bold;
- }
+ color: var(--color-text-primary-medium);
+ font-weight: bold;
+}
.node--view-mode-teaser .node__top-wrapper {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin: 0
- }
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 0;
+}
@media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .node__top-wrapper {
- position: relative /* Anchor the image */
+ .node--view-mode-teaser .node__top-wrapper {
+ position: relative; /* Anchor the image */
}
- }
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
- margin-right: var(--sp1)
-}
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
- margin-left: var(--sp1)
}
.node--view-mode-teaser .primary-image {
- flex-shrink: 0;
- margin: 0;
- margin-bottom: var(--sp1)
+ flex-shrink: 0;
+ margin: 0;
+ margin-block-end: var(--sp1);
+ margin-inline-end: var(--sp1);
- /* Ensure title does not wrap under image until necessary. */
- }
+ /* Ensure title does not wrap under image until necessary. */
+}
-.node--view-mode-teaser .primary-image + .node__title {
- flex-basis: calc(100% - var(--sp)*4.5)
- }
+:is(.node--view-mode-teaser .primary-image) + .node__title {
+ flex-basis: calc(100% - calc(4.5 * var(--sp)));
+}
@media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .primary-image + .node__title {
- flex-basis: auto
- }
- }
+ :is(.node--view-mode-teaser .primary-image) + .node__title {
+ flex-basis: auto;
+ }
+}
.node--view-mode-teaser .primary-image a {
- display: block;
- }
-
-.node--view-mode-teaser .primary-image img {
- width: calc(var(--sp)*3.5);
- height: calc(var(--sp)*3.5);
- -o-object-fit: cover;
- object-fit: cover;
- border-radius: 50%
- }
-
-@media (min-width: 62.5rem) {
+ display: block;
+}
.node--view-mode-teaser .primary-image img {
- width: var(--grid-col-width);
- height: var(--grid-col-width)
- }
- }
+ width: calc(3.5 * var(--sp));
+ height: calc(3.5 * var(--sp));
+ object-fit: cover;
+ border-radius: 50%;
+}
@media (min-width: 62.5rem) {
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
- left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
- }
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
- right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
- }
-
-.node--view-mode-teaser .primary-image {
- position: absolute;
- top: 0;
- margin: 0
- }
- }
-
-.node--view-mode-teaser .node__title {
- margin: 0;
- margin-bottom: var(--sp1);
- color: var(--color-text-neutral-loud);
- font-size: 1.5rem;
- line-height: var(--line-height-base)
+ .node--view-mode-teaser .primary-image img {
+ width: var(--grid-col-width);
+ height: var(--grid-col-width);
}
+}
@media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .node__title {
- font-size: var(--sp2);
- line-height: var(--sp3)
+ .node--view-mode-teaser .primary-image {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+ margin: 0;
}
- }
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- margin-left: 0
}
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- margin-right: 0
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- margin-right: 0
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- margin-left: 0
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- padding-left: 0
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- padding-right: 0
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- padding-right: 0
+.node--view-mode-teaser .node__title {
+ margin: 0;
+ margin-block-end: var(--sp1);
+ color: var(--color-text-neutral-loud);
+ font-size: 1.5rem;
+ line-height: var(--line-height-base);
}
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- padding-left: 0
+@media (min-width: 62.5rem) {
+ .node--view-mode-teaser .node__title {
+ font-size: var(--sp2);
+ line-height: var(--sp3);
+ }
}
.node--view-mode-teaser .field--tag-ref {
- margin-top: var(--sp1);
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
- background-color: transparent
- }
+ margin-block-start: var(--sp1);
+ margin-block-end: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ background-color: transparent;
+}
@media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .field--tag-ref {
- margin-top: var(--sp2)
+ .node--view-mode-teaser .field--tag-ref {
+ margin-block-start: var(--sp2);
}
- }
+}
@media (min-width: 62.5rem) {
-
-.node--view-mode-teaser {
- margin-bottom: var(--sp3)
-}
+ .node--view-mode-teaser {
+ margin-block-end: var(--sp3);
}
+}
.views-row:last-child .node--view-mode-teaser {
- margin-bottom: 0;
+ margin-block-end: 0;
}
diff --git a/css/components/node.css b/css/components/node.css
index 5114f98..c6a8495 100644
--- a/css/components/node.css
+++ b/css/components/node.css
@@ -10,86 +10,64 @@
* Node specific styles.
*/
-/*
- * 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. */
-
.node__meta {
display: flex;
align-items: center;
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
color: var(--color-text-neutral-soft);
font-size: 0.875rem;
- line-height: var(--sp)
+ line-height: var(--sp);
}
.node__meta a {
- font-weight: bold;
- }
+ font-weight: bold;
+}
@media (min-width: 31.25rem) {
-
-.node__meta {
- margin-bottom: var(--sp2)
-}
+ .node__meta {
+ margin-block-end: var(--sp2);
}
-
-[dir="ltr"] .node__author-image img {
- margin-right: var(--sp0-5)
-}
-
-[dir="rtl"] .node__author-image img {
- margin-left: var(--sp0-5)
}
.node__author-image img {
width: var(--sp2-5);
height: var(--sp2-5);
- -o-object-fit: cover;
+ margin-inline-end: var(--sp0-5);
object-fit: cover;
border-radius: 50%;
}
.node__title a {
- padding-bottom: 0.1875rem;
- transition: background-size 0.2s, color 0.2s;
- text-decoration: none;
- color: var(--color-text-neutral-loud);
- background-color: transparent;
- background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
- background-repeat: no-repeat;
- background-position: bottom left; /* LTR */
- background-size: 0 0.1875rem
- }
+ padding-block-end: 0.1875rem;
+ transition: background-size 0.2s, color 0.2s;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: var(--color-text-neutral-loud);
+ background-color: transparent;
+ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+ background-repeat: no-repeat;
+ background-position: bottom left; /* LTR */
+ background-size: 0 0.1875rem;
+}
.node__title a:hover,
- .node__title a:focus {
- color: var(--color-text-primary-medium);
- }
+.node__title a:focus {
+ color: var(--color-text-primary-medium);
+}
[dir="rtl"] .node__title {
background-position: bottom right;
}
.node__content {
- padding-bottom: var(--sp1-5)
+ padding-block-end: var(--sp1-5);
}
@media (min-width: 62.5rem) {
-
-.node__content {
- padding-bottom: var(--sp3)
-}
+ .node__content {
+ padding-block-end: var(--sp3);
}
+}
.node--unpublished {
/* There is no variable for the color - #fff4f4. */
diff --git a/css/components/page-title.css b/css/components/page-title.css
index 4757231..e854944 100644
--- a/css/components/page-title.css
+++ b/css/components/page-title.css
@@ -10,19 +10,6 @@
* Page title.
*/
-/*
- * 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. */
-
.page-title {
/*
Necessary to properly display the star icon from core's shortcut
diff --git a/css/components/pager.css b/css/components/pager.css
index bde451d..b613011 100644
--- a/css/components/pager.css
+++ b/css/components/pager.css
@@ -10,51 +10,15 @@
* Styles for pagination.
*/
-/*
- * 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"] .pager__items {
- margin-left: 0;
-}
-
-[dir="rtl"] .pager__items {
- margin-right: 0;
-}
-
-[dir="ltr"] .pager__items {
- padding-left: 0;
-}
-
-[dir="rtl"] .pager__items {
- padding-right: 0;
-}
-
-[dir="ltr"] .pager__items {
- padding-right: 0;
-}
-
-[dir="rtl"] .pager__items {
- padding-left: 0;
-}
-
.pager__items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
font-weight: bold;
}
@@ -67,16 +31,15 @@
height: var(--sp2-5);
cursor: default;
color: var(--color-text-neutral-soft);
- background-color: var(--color--white)
+ background-color: var(--color--white);
}
@media (min-width: 31.25rem) {
-
-.pager__item {
+ .pager__item {
width: var(--sp3);
- height: var(--sp3)
-}
+ height: var(--sp3);
}
+}
[dir="rtl"] .pager__item--control {
transform: scaleX(-1);
@@ -88,10 +51,10 @@
}
@media (forced-colors: active) {
- .pager__item--control path {
- fill: linktext;
- }
+ .pager__item--control path {
+ fill: linktext;
}
+}
.pager__link {
display: flex;
@@ -99,6 +62,7 @@
justify-content: center;
width: 100%;
height: 100%;
+ -webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-neutral-soft);
}
diff --git a/css/components/powered-by-block.css b/css/components/powered-by-block.css
index 6a184e0..282095e 100644
--- a/css/components/powered-by-block.css
+++ b/css/components/powered-by-block.css
@@ -10,58 +10,40 @@
* Powered by block specific styles.
*/
-/*
- * 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-system-powered-by-block {
letter-spacing: 0.02em;
font-size: 0.875rem;
- line-height: var(--sp)
+ line-height: var(--sp);
}
.block-system-powered-by-block a {
- text-decoration: underline
- }
-
-.block-system-powered-by-block a:hover,
- .block-system-powered-by-block a:focus {
- text-decoration: none;
- }
-
-[dir="ltr"] .block-system-powered-by-block .drupal-logo {
- margin-left: calc(var(--sp)/4)
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
}
-[dir="rtl"] .block-system-powered-by-block .drupal-logo {
- margin-right: calc(var(--sp)/4)
+.block-system-powered-by-block a:hover,
+.block-system-powered-by-block a:focus {
+ -webkit-text-decoration: none;
+ text-decoration: none;
}
.block-system-powered-by-block .drupal-logo {
- display: inline-block;
- margin-top: calc(var(--sp)*-1/4);
- }
+ display: inline-block;
+ margin-block-start: calc(-1 * var(--sp) / 4);
+ margin-inline-start: calc(var(--sp) / 4);
+}
.block-system-powered-by-block svg {
- width: 0.875rem; /* 14 */
- height: 1.1875rem; /* 19 */
- vertical-align: top;
- fill: currentColor;
- }
+ width: 0.875rem; /* 14 */
+ height: 1.1875rem; /* 19 */
+ vertical-align: top;
+ fill: currentColor;
+}
.site-footer .block-system-powered-by-block a {
- color: var(--color--white);
- }
+ color: var(--color--white);
+}
.site-footer .block-system-powered-by-block svg path {
- fill: var(--color--white);
- }
+ fill: var(--color--white);
+}
diff --git a/css/components/progress.css b/css/components/progress.css
index 3719bf2..c204247 100644
--- a/css/components/progress.css
+++ b/css/components/progress.css
@@ -10,19 +10,6 @@
* Progress bar specific styles.
*/
-/*
- * 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. */
-
.progress__track {
overflow: hidden;
height: var(--sp);
@@ -35,10 +22,6 @@
background-color: var(--color--primary-40);
}
-[dir="ltr"] .progress__percentage {
- margin-left: 1rem;
-}
-
-[dir="rtl"] .progress__percentage {
- margin-right: 1rem;
+.progress__percentage {
+ margin-inline-start: 1rem;
}
diff --git a/css/components/search-results.css b/css/components/search-results.css
index 734fc35..51a093e 100644
--- a/css/components/search-results.css
+++ b/css/components/search-results.css
@@ -10,148 +10,102 @@
* Search results specific styles.
*/
-/*
- * 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"] .search-results {
- padding-left: 0
-}
-
-[dir="rtl"] .search-results {
- padding-right: 0
-}
-
-[dir="ltr"] .search-results {
- padding-right: 0
-}
-
-[dir="rtl"] .search-results {
- padding-left: 0
-}
-
.search-results {
- margin-bottom: var(--sp2);
- padding-top: 0;
- padding-bottom: 0;
- list-style: none
+ margin-block-end: var(--sp2);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
}
@media (min-width: 43.75rem) {
-
-.search-results {
- margin-bottom: var(--sp3)
-}
+ .search-results {
+ margin-block-end: var(--sp3);
}
-
-[dir="ltr"] .search-result__title {
- margin-left: 0
-}
-
-[dir="rtl"] .search-result__title {
- margin-right: 0
-}
-
-[dir="ltr"] .search-result__title {
- margin-right: 0
-}
-
-[dir="rtl"] .search-result__title {
- margin-left: 0
}
.search-result__title {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
color: var(--color-text-neutral-loud);
font-size: 1.25rem;
- line-height: var(--line-height-base)
+ line-height: var(--line-height-base);
}
.search-result__title a {
- padding-bottom: 0.1875rem;
- transition: background-size 0.2s, color 0.2s;
- text-decoration: none;
- background-color: transparent;
- background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
- background-repeat: no-repeat;
- background-position: bottom left; /* LTR */
- background-size: 0 0.1875rem
- }
+ padding-block-end: 0.1875rem;
+ transition: background-size 0.2s, color 0.2s;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ background-color: transparent;
+ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+ background-repeat: no-repeat;
+ background-position: bottom left; /* LTR */
+ background-size: 0 0.1875rem;
+}
.search-result__title a:hover {
- color: var(--color-text-primary-medium);
- }
+ color: var(--color-text-primary-medium);
+}
@media (min-width: 62.5rem) {
-
-.search-result__title {
- margin-bottom: var(--sp1);
+ .search-result__title {
+ margin-block-end: var(--sp1);
font-size: 1.875rem;
- line-height: var(--sp3)
-}
+ line-height: var(--sp3);
}
+}
[dir="rtl"] .search-result__title a {
background-position: bottom right;
}
.search-result__snippet {
- padding-bottom: calc(var(--sp1-5) - 2px)
+ padding-block-end: calc(var(--sp1-5) - 2px);
}
@media (min-width: 62.5rem) {
-
-.search-result__snippet {
- padding-bottom: var(--sp3)
-}
+ .search-result__snippet {
+ padding-block-end: var(--sp3);
}
+}
.search-result__meta {
display: flex;
align-items: center;
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
color: var(--color-text-neutral-soft);
font-size: 0.875rem;
- line-height: var(--sp)
+ line-height: var(--sp);
}
.search-result__meta a {
- color: var(--color-text-primary-medium);
- font-weight: bold;
- }
+ color: var(--color-text-primary-medium);
+ font-weight: bold;
+}
.search-results__item {
position: relative; /* Anchor after pseudo-element. */
- margin-bottom: var(--sp1-5)
+ margin-block-end: var(--sp1-5);
}
.search-results__item::after {
- position: absolute;
- bottom: 0;
- width: var(--sp3);
- height: 0;
- content: "";
- /* Intentionally not using CSS logical properties. */
- border-top: solid 2px var(--color--gray-95);
- }
+ position: absolute;
+ inset-block-end: 0;
+ width: var(--sp3);
+ height: 0;
+ content: "";
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 2px var(--color--gray-95);
+}
.search-results__item:last-child {
- margin-bottom: 0;
- }
+ margin-block-end: 0;
+}
@media (min-width: 62.5rem) {
-
-.search-results__item {
- margin-bottom: var(--sp3)
-}
+ .search-results__item {
+ margin-block-end: var(--sp3);
}
+}
diff --git a/css/components/site-header.css b/css/components/site-header.css
index 07585b0..4cbc7e6 100644
--- a/css/components/site-header.css
+++ b/css/components/site-header.css
@@ -10,43 +10,28 @@
* Site header.
*/
-/*
- * 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-header {
position: relative;
/**
* Ensure mobile site header is always above other elements including
* contextual links, and Tour.
*/
- z-index: 101
+ z-index: 101;
}
@media (min-width: 75rem) {
-
-.site-header {
+ .site-header {
/* Necessary to keep the content from jumping up when header transitions to fixed. */
min-height: var(--site-header-height-wide);
- border-bottom: solid 1px transparent /* Will show in Windows high contrast mode. */
-}
+ border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
}
+}
.site-header__initial {
position: relative;
z-index: 102;
display: flex;
align-items: flex-end;
- -ms-grid-row-align: stretch;
align-self: stretch;
background-color: var(--color--primary-50);
}
@@ -54,29 +39,29 @@
.site-header__fixable {
display: flex;
align-items: flex-end;
- transition: all 0.5s
+ transition: all 0.5s;
}
@media (min-width: 75rem) {
- .site-header__fixable.is-fixed:not(.is-expanded) {
- pointer-events: none;
- }
- }
+ .site-header__fixable.is-fixed:not(.is-expanded) {
+ pointer-events: none;
+ }
+}
@media (min-width: 75rem) {
- body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
- position: fixed;
- z-index: 102; /* Appear above body content that is position: relative */
- top: calc(0px - var(--sp4));
- max-width: var(--max-bg-color);
- }
+ body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
+ position: fixed;
+ z-index: 102; /* Appear above body content that is position: relative */
+ inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4));
+ max-width: var(--max-bg-color);
+ }
}
.site-header__inner {
position: relative;
z-index: 1; /* Appear in front of Drupal's tabs. */
flex-grow: 1;
- width: calc(100vw - var(--content-left));
+ width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
background: var(--color--white);
}
@@ -86,42 +71,37 @@
*/
@media (min-width: 75rem) {
-
-html.js body:not(.is-always-mobile-nav) .site-header__inner {
- transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s
-}
+ html.js body:not(.is-always-mobile-nav) .site-header__inner {
+ transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
}
+}
@media (min-width: 75rem) {
-
-.site-header__fixable.is-expanded .site-header__inner {
- box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08) /* LTR */
-}
+ .site-header__fixable.is-expanded .site-header__inner {
+ box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
}
+}
@media (min-width: 75rem) {
-
-[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
- box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08)
-}
+ [dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
+ box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
}
+}
/* Hide the desktop nav when it's fixed and not active. */
@media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+ body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
transform: translateX(-101%); /* LTR */
- opacity: 0
-}
+ opacity: 0;
}
+}
@media (min-width: 75rem) {
-
-[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
- transform: translateX(101%)
-}
+ [dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+ transform: translateX(101%);
}
+}
.site-header__inner__container {
display: flex;
diff --git a/css/components/skip-link.css b/css/components/skip-link.css
index a24b4f4..e354828 100644
--- a/css/components/skip-link.css
+++ b/css/components/skip-link.css
@@ -12,58 +12,36 @@
* Allows keyboard users to quickly skip to the main content of the page.
*/
-/*
- * 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"] .skip-link {
- padding-left: var(--sp)
-}
-
-[dir="rtl"] .skip-link {
- padding-right: var(--sp)
-}
-
-[dir="ltr"] .skip-link {
- padding-right: var(--sp)
-}
-
-[dir="rtl"] .skip-link {
- padding-left: var(--sp)
-}
-
.skip-link {
display: block;
width: 100%;
max-width: var(--max-bg-color);
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+ -webkit-text-decoration: none;
text-decoration: none;
color: var(--color--white);
outline: 0;
- background-color: var(--color--gray-5)
+ background-color: var(--color--gray-5);
}
.skip-link:hover {
- text-decoration: underline;
- color: var(--color--white);
- }
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+ color: var(--color--white);
+}
.skip-link::after {
- content: "\0020 âž”";
- }
+ content: "\0020 âž”";
+}
+
+.skip-link.focusable:focus {
+ position: absolute !important;
+}
.skip-link.focusable:focus {
- position: absolute !important; /* Override position from module file. */
+ /* Override position from module file. */
z-index: 503;
width: 100%;
height: 2.5rem;
diff --git a/css/components/table.css b/css/components/table.css
index 6edbedf..13b7511 100644
--- a/css/components/table.css
+++ b/css/components/table.css
@@ -10,163 +10,66 @@
* User generated tables.
*/
-/*
- * 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. */
-
.forum table,
.text-content table,
.views-table,
.draggable-table {
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
border-spacing: 0;
color: var(--color-text-neutral-medium);
border: 0;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: 1rem;
- line-height: var(--sp1-5)
+ line-height: var(--sp1-5);
}
-[dir="ltr"] .forum table caption,[dir="ltr"] .text-content table caption,[dir="ltr"] .views-table caption,[dir="ltr"] .draggable-table caption {
- text-align: left
-}
-
-[dir="rtl"] .forum table caption,[dir="rtl"] .text-content table caption,[dir="rtl"] .views-table caption,[dir="rtl"] .draggable-table caption {
- text-align: right
-}
-
-.forum table caption, .text-content table caption, .views-table caption, .draggable-table caption {
- margin-bottom: var(--sp1);
- color: var(--color-text-neutral-medium);
- font-family: var(--font-serif);
- font-size: 0.875rem;
- font-style: italic;
- line-height: var(--sp);
- }
-
-.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td, .draggable-table tr:last-child td {
- border-bottom: 0;
- }
-
-[dir="ltr"] .forum table td,[dir="ltr"]
- .forum table th,[dir="ltr"]
- .text-content table td,[dir="ltr"]
- .text-content table th,[dir="ltr"]
- .views-table td,[dir="ltr"]
- .views-table th,[dir="ltr"]
- .draggable-table td,[dir="ltr"]
- .draggable-table th {
- padding-left: 0
-}
-
-[dir="rtl"] .forum table td,[dir="rtl"]
- .forum table th,[dir="rtl"]
- .text-content table td,[dir="rtl"]
- .text-content table th,[dir="rtl"]
- .views-table td,[dir="rtl"]
- .views-table th,[dir="rtl"]
- .draggable-table td,[dir="rtl"]
- .draggable-table th {
- padding-right: 0
-}
-
-[dir="ltr"] .forum table td,[dir="ltr"]
- .forum table th,[dir="ltr"]
- .text-content table td,[dir="ltr"]
- .text-content table th,[dir="ltr"]
- .views-table td,[dir="ltr"]
- .views-table th,[dir="ltr"]
- .draggable-table td,[dir="ltr"]
- .draggable-table th {
- padding-right: var(--sp1)
-}
-
-[dir="rtl"] .forum table td,[dir="rtl"]
- .forum table th,[dir="rtl"]
- .text-content table td,[dir="rtl"]
- .text-content table th,[dir="rtl"]
- .views-table td,[dir="rtl"]
- .views-table th,[dir="rtl"]
- .draggable-table td,[dir="rtl"]
- .draggable-table th {
- padding-left: var(--sp1)
-}
-
-.forum table td,
- .forum table th,
- .text-content table td,
- .text-content table th,
- .views-table td,
- .views-table th,
- .draggable-table td,
- .draggable-table th {
- padding-top: var(--sp1);
- padding-bottom: var(--sp1);
- vertical-align: top;
- }
-
-[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th {
- margin-left: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) caption {
+ margin-block-end: var(--sp1);
+ text-align: start;
+ color: var(--color-text-neutral-medium);
+ font-family: var(--font-serif);
+ font-size: 0.875rem;
+ font-style: italic;
+ line-height: var(--sp);
}
-[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th {
- margin-right: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) tr:last-child td {
+ border-block-end: 0;
}
-[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th {
- margin-right: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) td,
+:is(.forum table, .text-content table, .views-table, .draggable-table) th {
+ padding-block: var(--sp1);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp1);
+ vertical-align: top;
}
-[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th {
- margin-left: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) th {
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ text-align: start;
+ letter-spacing: 0.02em;
+ color: var(--color-text-neutral-loud);
+ border-block-end: 2px solid var(--color--primary-50);
+ font-family: var(--font-sans);
+ font-size: 0.875rem;
+ line-height: var(--sp);
}
-[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th {
- text-align: left
+:is(.forum table, .text-content table, .views-table, .draggable-table) td {
+ white-space: normal;
+ border-block-end: 2px solid var(--color--gray-65);
}
-[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th {
- text-align: right
+:is(.forum table, .text-content table, .views-table, .draggable-table) th.checkbox,
+:is(.forum table, .text-content table, .views-table, .draggable-table) td.checkbox {
+ text-align: center;
}
-.forum table th, .text-content table th, .views-table th, .draggable-table th {
- margin-top: 0;
- margin-bottom: 0;
- letter-spacing: 0.02em;
- color: var(--color-text-neutral-loud);
- border-bottom: 2px solid var(--color--primary-50);
- font-family: var(--font-sans);
- font-size: 0.875rem;
- line-height: var(--sp);
- }
-
-.forum table td, .text-content table td, .views-table td, .draggable-table td {
- white-space: normal;
- border-bottom: 2px solid var(--color--gray-65);
- }
-
-.forum table th.checkbox,
- .forum table td.checkbox,
- .text-content table th.checkbox,
- .text-content table td.checkbox,
- .views-table th.checkbox,
- .views-table td.checkbox,
- .draggable-table th.checkbox,
- .draggable-table td.checkbox {
- text-align: center;
- }
-
.draggable-table {
width: 100%;
}
@@ -182,7 +85,7 @@
.sticky-header {
z-index: 0;
margin: 0;
- border-bottom: 4px solid var(--color--primary-50);
+ border-block-end: 0.25rem solid var(--color--primary-50);
}
/* Properly align VBO checkboxes. */
diff --git a/css/components/tabledrag.css b/css/components/tabledrag.css
index c41780a..839ae3f 100644
--- a/css/components/tabledrag.css
+++ b/css/components/tabledrag.css
@@ -10,19 +10,6 @@
* Styles for tabledrag.
*/
-/*
- * 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. */
-
.draggable:hover {
background-color: var(--color--gray-100);
}
@@ -45,12 +32,8 @@ a.tabledrag-handle,
height: 2.25rem;
}
-[dir="ltr"] .draggable a.tabledrag-handle {
- margin-left: 0;
-}
-
-[dir="rtl"] .draggable a.tabledrag-handle {
- margin-right: 0;
+.draggable a.tabledrag-handle {
+ margin-inline-start: 0;
}
a.tabledrag-handle .handle {
@@ -65,25 +48,10 @@ a.tabledrag-handle .handle {
background-position: 50% 5px;
}
-[dir="ltr"] .touchevents .draggable td {
- padding-left: 0;
-}
-
-[dir="rtl"] .touchevents .draggable td {
- padding-right: 0;
-}
-
-[dir="ltr"] .touchevents .draggable td {
- padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] .touchevents .draggable td {
- padding-left: var(--sp0-5);
-}
-
.touchevents .draggable td {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp0-5);
}
.touchevents .draggable .menu-item__link {
diff --git a/css/components/tabs.css b/css/components/tabs.css
index cba5018..1c1c15e 100644
--- a/css/components/tabs.css
+++ b/css/components/tabs.css
@@ -4,30 +4,7 @@
* https://www.drupal.org/node/3084859
* @preserve
*/
-
-/*
- * 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. */
-
/* Breakpoint where tabs switch between vertical and horizontal layouts. */
-
-[dir="ltr"] .tabs {
- margin-left: 0
-}
-
-[dir="rtl"] .tabs {
- margin-right: 0
-}
-
.tabs {
--tabs-height: var(--sp3);
--tabs-padding-inline: var(--sp1-5);
@@ -46,270 +23,169 @@
display: flex;
flex-direction: column;
width: 100%;
- margin: 0; /* Override [dir] attribute in base in compiled CSS. */
+ margin: 0;
+ margin-inline-start: 0; /* Override [dir] attribute in base in compiled CSS. */
padding: 0;
- list-style: none
+ list-style: none;
}
-
@media (min-width: 43.75rem) {
-
-.tabs {
+ .tabs {
flex-direction: row;
- flex-wrap: wrap
-}
+ flex-wrap: wrap;
}
-
+}
.tabs__tab {
display: none;
margin: 0;
- margin-bottom: calc(var(--tabs-border-width)*-1)
+ margin-block-end: calc(-1 * var(--tabs-border-width));
}
-
.tabs__tab.is-active {
- display: flex;
- }
-
+ display: flex;
+}
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .tabs__tab {
- margin-left: calc(var(--tabs-border-width)*-1)
- }
-
-[dir="rtl"] .tabs__tab {
- margin-right: calc(var(--tabs-border-width)*-1)
- }
-
-.tabs__tab {
+ .tabs__tab {
display: flex;
- margin-bottom: 0
-}
+ margin-block-end: 0;
+ margin-inline-start: calc(-1 * var(--tabs-border-width));
}
-
-.tabs__tab {
-
- /* Show tabs when JavaScript disabled. */
}
-
+/* Show tabs when JavaScript disabled. */
html:not(.js) .tabs__tab {
- display: flex
-}
-
-.tabs__tab {
-
- /* Show tabs when tabs-expanded class is present. */
+ display: flex;
}
-
+/* Show tabs when tabs-expanded class is present. */
.tabs.is-expanded .tabs__tab {
- display: flex
-}
-
-.tabs__tab {
-
- /* Secondary tabs will always be expanded. */
+ display: flex;
}
-
+/* Secondary tabs will always be expanded. */
.tabs--secondary .tabs__tab {
- display: block
+ display: block;
}
-
@media (min-width: 43.75rem) {
-
-.tabs--secondary .tabs__tab {
- display: flex
+ .tabs--secondary .tabs__tab {
+ display: flex;
+ }
}
- }
-
.tabs__link {
display: flex;
flex-grow: 1;
align-items: center;
height: var(--tabs-height);
- padding-top: 0;
- padding-bottom: 0;
- padding-left: var(--tabs-padding-inline);
- padding-right: var(--tabs-padding-inline);
+ padding-block: 0;
+ padding-inline: var(--tabs-padding-inline);
transition: background-color var(--tabs-transition-duration);
+ -webkit-text-decoration: none;
text-decoration: none;
letter-spacing: var(--tabs-letter-spacing);
color: var(--tabs-text-color);
border: var(--tabs-border-width) solid var(--tabs-border-color);
background-color: var(--tabs-background-color);
- font-size: var(--tabs-font-size)
+ font-size: var(--tabs-font-size);
}
-
.tabs__link:hover {
- color: var(--tabs-text-color-active);
- background-color: var(--tabs-background-color-hover);
- }
-
+ color: var(--tabs-text-color-active);
+ background-color: var(--tabs-background-color-hover);
+}
.tabs__link:focus {
- position: relative;
- outline: solid 3px var(--tabs-highlight-color);
- outline-offset: -3px;
- }
-
+ position: relative;
+ outline: solid 3px var(--tabs-highlight-color);
+ outline-offset: -3px;
+}
.tabs__link.is-active {
- position: relative; /* Anchor ::after pseudo-element. */
- color: var(--tabs-text-color-active);
- font-weight: 600
+ position: relative; /* Anchor ::after pseudo-element. */
+ color: var(--tabs-text-color-active);
+ font-weight: 600;
- /*
+ /*
* We use ::after pseudo-element in place of border so edges do not appear
* diagonally cut off due to other edges with transparent borders.
*/
- }
-
-[dir="ltr"] .tabs__link.is-active::after {
- left: calc(var(--tabs-border-width)*-1)
}
-
-[dir="rtl"] .tabs__link.is-active::after {
- right: calc(var(--tabs-border-width)*-1)
-}
-
-[dir="ltr"] .tabs__link.is-active::after {
- border-left: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
-}
-
-[dir="rtl"] .tabs__link.is-active::after {
- border-right: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
-}
-
.tabs__link.is-active::after {
- position: absolute;
- top: calc(var(--tabs-border-width)*-1);
- height: calc(100% + var(--tabs-border-width)*2);
- content: ""
- }
-
+ position: absolute;
+ inset-block-start: calc(-1 * var(--tabs-border-width));
+ inset-inline-start: calc(-1 * var(--tabs-border-width));
+ height: calc(100% + var(--tabs-border-width) * 2);
+ content: "";
+ border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+}
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .tabs__link.is-active::after {
- border-left: 0
- }
-
-[dir="rtl"] .tabs__link.is-active::after {
- border-right: 0
+ .tabs__link.is-active::after {
+ inset-block: auto calc(-1 * var(--tabs-border-width));
+ width: calc(100% + 2 * var(--tabs-border-width));
+ height: 0;
+ border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+ border-inline-start: 0;
}
-
-.tabs__link.is-active::after {
- top: auto;
- bottom: calc(var(--tabs-border-width)*-1);
- width: calc(100% + var(--tabs-border-width)*2);
- height: 0;
- border-top: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
- }
- }
-
-.tabs__link {
-
- /* No regular borders or background color for secondary tab links. */
}
-
+/* No regular borders or background color for secondary tab links. */
@media (min-width: 43.75rem) {
-
-.tabs--secondary .tabs__link {
- border-color: transparent;
- background-color: transparent
+ .tabs--secondary .tabs__link {
+ border-color: transparent;
+ background-color: transparent;
+ }
}
- }
-
/* Button that opens and closes primary tabs at narrow viewports. */
-
-[dir="ltr"] .tabs__trigger {
- margin-left: calc(var(--tabs-border-width)*-1);
- margin-right: 0
-}
-
-[dir="rtl"] .tabs__trigger {
- margin-right: calc(var(--tabs-border-width)*-1);
- margin-left: 0
-}
-
.tabs__trigger {
display: flex;
align-items: center;
justify-content: center;
width: var(--tabs-height);
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline: calc(-1 * var(--tabs-border-width)) 0;
cursor: pointer;
border: solid var(--tabs-border-width) var(--tabs-border-color);
- background-color: var(--tabs-background-color)
+ background-color: var(--tabs-background-color);
}
-
.tabs__trigger:hover {
- background-color: var(--tabs-background-color-hover);
- }
-
+ background-color: var(--tabs-background-color-hover);
+}
.tabs__trigger:focus {
- position: relative;
- border-color: var(--tabs-highlight-color);
- outline: none;
- }
-
-.tabs__trigger {
-
- /* Button will not work when JavaScript is disabled, so we hide it. */
+ position: relative;
+ border-color: var(--tabs-highlight-color);
+ outline: none;
}
-
+/* Button will not work when JavaScript is disabled, so we hide it. */
html:not(.js) .tabs__trigger {
- display: none
+ display: none;
}
-
@media (min-width: 43.75rem) {
-
-.tabs__trigger {
- display: none
-}
+ .tabs__trigger {
+ display: none;
}
-
+}
.tabs__trigger-icon {
position: relative;
display: block;
width: var(--sp);
height: 0.625rem;
- margin-top: calc(var(--tabs-border-width)*-2)
-}
-
-[dir="ltr"] .tabs__trigger-icon > span {
- left: 0
-}
-
-[dir="rtl"] .tabs__trigger-icon > span {
- right: 0
+ margin-block-start: calc(-2 * var(--tabs-border-width));
}
-
.tabs__trigger-icon > span {
- position: absolute;
- display: block;
- width: 100%;
- transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
- border-top: solid 2px var(--tabs-highlight-color)
- }
-
+ position: absolute;
+ inset-inline-start: 0;
+ display: block;
+ width: 100%;
+ transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
+ border-block-start: solid 2px var(--tabs-highlight-color);
+}
.tabs__trigger-icon > span:nth-child(1) {
- top: 0
- }
-
-.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) {
- top: calc(50% + 1px);
- transform: rotate(45deg)
- }
-
+ inset-block-start: 0;
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(1)) {
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(45deg);
+}
.tabs__trigger-icon > span:nth-child(2) {
- top: calc(50% + 1px)
- }
-
-.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) {
- opacity: 0
- }
-
+ inset-block-start: calc(50% + 1px);
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) {
+ opacity: 0;
+}
.tabs__trigger-icon > span:nth-child(3) {
- top: calc(100% + 2px)
- }
-
-.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) {
- top: calc(50% + 1px);
- transform: rotate(-45deg)
- }
+ inset-block-start: calc(100% + 2px);
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(3)) {
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(-45deg);
+}
diff --git a/css/components/tags.css b/css/components/tags.css
index 8f03429..71703ad 100644
--- a/css/components/tags.css
+++ b/css/components/tags.css
@@ -10,138 +10,57 @@
* Tags field 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. */
-
.field--tags {
display: flex;
font-family: var(--font-sans);
}
-[dir="ltr"] .field--tags__label {
- margin-right: calc(var(--sp1-5) - var(--sp0-5)/2);
-}
-
-[dir="rtl"] .field--tags__label {
- margin-left: calc(var(--sp1-5) - var(--sp0-5)/2);
-}
-
.field--tags__label {
margin: 0;
+ margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2));
letter-spacing: 0.02em;
color: var(--color-text-neutral-soft);
font-size: var(--font-size-s);
font-weight: 600;
- line-height: 1.6
+ line-height: 1.6;
}
.field--tags__label::after {
- content: ":";
- }
+ content: ":";
+}
@media (min-width: 43.75rem) {
-
-.field--tags__label {
- line-height: 2
-}
+ .field--tags__label {
+ line-height: 2;
}
-
-[dir="ltr"] .field--label-inline .field--tags__label {
- padding-left: 0;
-}
-
-[dir="rtl"] .field--label-inline .field--tags__label {
- padding-right: 0;
-}
-
-[dir="ltr"] .field--label-inline .field--tags__label {
- padding-right: 0;
-}
-
-[dir="rtl"] .field--label-inline .field--tags__label {
- padding-left: 0;
}
.field--label-inline .field--tags__label {
- padding-top: 0;
- padding-bottom: 0;
-}
-
-[dir="ltr"] .field--tags__items {
- margin-left: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="rtl"] .field--tags__items {
- margin-right: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="ltr"] .field--tags__items {
- margin-right: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="rtl"] .field--tags__items {
- margin-left: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="ltr"] .field--tags__items {
- padding-left: 0;
-}
-
-[dir="rtl"] .field--tags__items {
- padding-right: 0;
-}
-
-[dir="ltr"] .field--tags__items {
- padding-right: 0;
-}
-
-[dir="rtl"] .field--tags__items {
- padding-left: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
.field--tags__items {
display: flex;
flex-wrap: wrap;
- margin-top: calc(var(--sp0-5)/2*-1);
- margin-bottom: calc(var(--sp0-5)/2*-1);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-start: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-end: calc((var(--sp0-5) / 2) * -1);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
-[dir="ltr"] .field--tags__item {
- margin-left: calc(var(--sp0-5)/2);
-}
-
-[dir="rtl"] .field--tags__item {
- margin-right: calc(var(--sp0-5)/2);
-}
-
-[dir="ltr"] .field--tags__item {
- margin-right: calc(var(--sp0-5)/2);
-}
-
-[dir="rtl"] .field--tags__item {
- margin-left: calc(var(--sp0-5)/2);
-}
-
.field--tags__item {
display: flex;
- margin-top: calc(var(--sp0-5)/2);
- margin-bottom: calc(var(--sp0-5)/2);
+ margin-block: calc(var(--sp0-5) / 2);
+ margin-inline-start: calc(var(--sp0-5) / 2);
+ margin-inline-end: calc(var(--sp0-5) / 2);
}
-.field--tags__item:nth-last-child(n+2)::after {
+.field--tags__item:nth-last-child(n + 2)::after {
content: ",";
font-size: var(--font-size-base);
line-height: 1.5;
@@ -151,6 +70,7 @@
position: relative;
display: flex;
align-items: center;
+ -webkit-text-decoration: none;
text-decoration: none;
letter-spacing: 0.02em;
color: var(--color-text-primary-medium);
@@ -159,26 +79,11 @@
line-height: 1.5;
}
-[dir="ltr"] .node--view-mode-full .field--tags {
- padding-left: var(--sp2);
-}
-
-[dir="rtl"] .node--view-mode-full .field--tags {
- padding-right: var(--sp2);
-}
-
-[dir="ltr"] .node--view-mode-full .field--tags {
- padding-right: var(--sp2);
-}
-
-[dir="rtl"] .node--view-mode-full .field--tags {
- padding-left: var(--sp2);
-}
-
.node--view-mode-full .field--tags {
- margin-top: var(--sp4);
- margin-bottom: var(--sp4);
- padding-top: var(--sp1-5);
- padding-bottom: var(--sp1-5);
- background-color: var(--color--gray-100);
- }
+ margin-block-start: var(--sp4);
+ margin-block-end: var(--sp4);
+ padding-block: var(--sp1-5);
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
+ background-color: var(--color--gray-100);
+}
diff --git a/css/components/text-content.css b/css/components/text-content.css
index 384fa70..7b7832e 100644
--- a/css/components/text-content.css
+++ b/css/components/text-content.css
@@ -10,24 +10,11 @@
* Text Content.
*/
-/*
- * 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. */
-
.text-content,
.cke_editable {
color: var(--color-text-neutral-medium);
font-family: var(--font-serif);
- line-height: var(--sp1-5)
+ line-height: var(--sp1-5);
/*
@todo
@@ -39,212 +26,164 @@
*/
}
-.text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) {
- color: var(--color-text-primary-medium);
- -webkit-text-decoration-color: currentColor;
- text-decoration-color: currentColor;
- text-decoration-thickness: 2px;
- word-wrap: break-word
- }
+.text-content a:where(:not(.button)),
+.cke_editable a:where(:not(.button)) {
+ color: var(--color-text-primary-medium);
+ text-decoration-color: currentColor;
+ text-decoration-thickness: 2px;
+ overflow-wrap: break-word;
+}
@supports (box-shadow: none) {
-
-.text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) {
- transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
- text-decoration: none;
- box-shadow: inset 0 -2px 0 0 var(--color--primary-50)
- }
-
- .text-content a:where(:not(.button)):hover, .cke_editable a:where(:not(.button)):hover {
- text-decoration: underline;
- color: var(--color--black);
- box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
- -webkit-text-decoration-color: var(--color--primary-80);
- text-decoration-color: var(--color--primary-80);
- }
- }
-
-.text-content p, .cke_editable p {
- margin-top: var(--sp);
- margin-bottom: var(--sp)
+ .text-content a:where(:not(.button)),
+ .cke_editable a:where(:not(.button)) {
+ transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ box-shadow: inset 0 -2px 0 0 var(--color--primary-50);
}
-.text-content p:first-child, .cke_editable p:first-child {
- margin-top: 0;
- }
-
-.text-content p:last-child, .cke_editable p:last-child {
- margin-bottom: 0;
- }
-
-@media (min-width: 43.75rem) {
-
-.text-content p, .cke_editable p {
- margin-top: var(--sp2);
- margin-bottom: var(--sp2)
- }
- }
-
-.text-content code, .cke_editable code {
- background-color: var(--color--gray-100);
+ .text-content a:where(:not(.button)):hover,
+ .cke_editable a:where(:not(.button)):hover {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+ color: var(--color--black);
+ box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
+ text-decoration-color: var(--color--primary-80);
}
-
-[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
- padding-left: var(--sp)
-}
-
-[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
- padding-right: var(--sp)
}
-[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
- padding-right: var(--sp)
+.text-content p,
+.cke_editable p {
+ margin-block-start: var(--sp);
+ margin-block-end: var(--sp);
}
-[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
- padding-left: var(--sp)
+.text-content p:first-child,
+.cke_editable p:first-child {
+ margin-block-start: 0;
}
-.text-content pre code, .cke_editable pre code {
- display: block;
- overflow: auto;
- padding-top: var(--sp);
- padding-bottom: var(--sp);
- color: var(--color-text-neutral-soft);
- }
-
-[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
- margin-left: 0
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
- margin-right: 0
+.text-content p:last-child,
+.cke_editable p:last-child {
+ margin-block-end: 0;
}
-[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
- margin-right: 0
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
- margin-left: 0
-}
-
-[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
- padding-left: var(--sp2)
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
- padding-right: var(--sp2)
-}
-
-.text-content blockquote, .cke_editable blockquote {
- position: relative;
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
- letter-spacing: -0.01em;
- font-family: var(--font-serif);
- font-size: 1.3125rem;
- line-height: var(--sp2)
+@media (min-width: 43.75rem) {
+ .text-content p,
+ .cke_editable p {
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
}
-
-[dir="ltr"] .text-content blockquote::before,[dir="ltr"] .cke_editable blockquote::before {
- left: 0
}
-[dir="rtl"] .text-content blockquote::before,[dir="rtl"] .cke_editable blockquote::before {
- right: 0
+.text-content code,
+.cke_editable code {
+ background-color: var(--color--gray-100);
}
-.text-content blockquote::before, .cke_editable blockquote::before {
- position: absolute;
- top: 0;
- content: "\201C";
- color: var(--color--primary-60);
- font-size: 3.375rem;
- }
-
-[dir="ltr"] .text-content blockquote::after,[dir="ltr"] .cke_editable blockquote::after {
- left: 0
+.text-content pre code,
+.cke_editable pre code {
+ display: block;
+ overflow: auto;
+ padding-block: var(--sp);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+ color: var(--color-text-neutral-soft);
}
-[dir="rtl"] .text-content blockquote::after,[dir="rtl"] .cke_editable blockquote::after {
- right: 0
+.text-content blockquote,
+.cke_editable blockquote {
+ position: relative;
+ margin-block: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-inline-start: var(--sp2);
+ letter-spacing: -0.01em;
+ font-family: var(--font-serif);
+ font-size: 1.3125rem;
+ line-height: var(--sp2);
}
-[dir="ltr"] .text-content blockquote::after,[dir="ltr"] .cke_editable blockquote::after {
- margin-left: 0.25rem
+.text-content blockquote::before,
+.cke_editable blockquote::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ content: "\201C";
+ color: var(--color--primary-60);
+ font-size: 3.375rem;
}
-[dir="rtl"] .text-content blockquote::after,[dir="rtl"] .cke_editable blockquote::after {
- margin-right: 0.25rem
+.text-content blockquote::after,
+.cke_editable blockquote::after {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--sp0-5);
+ height: calc(100% - 1.875rem);
+ margin-inline-start: 0.25rem;
+ content: "";
+ background: var(--color--gray-100);
}
-.text-content blockquote::after, .cke_editable blockquote::after {
- position: absolute;
- bottom: 0;
- width: var(--sp0-5);
- height: calc(100% - 1.875rem);
- content: "";
- background: var(--color--gray-100);
- }
-
@media (min-width: 43.75rem) {
-
-.text-content blockquote, .cke_editable blockquote {
- font-size: 2rem;
- line-height: var(--sp3)
+ .text-content blockquote,
+ .cke_editable blockquote {
+ font-size: 2rem;
+ line-height: var(--sp3);
}
- }
+}
@media (min-width: 62.5rem) {
-
-.text-content blockquote, .cke_editable blockquote {
- font-size: 2.5rem;
- line-height: calc(var(--sp)*3.5)
+ .text-content blockquote,
+ .cke_editable blockquote {
+ font-size: 2.5rem;
+ line-height: calc(3.5 * var(--sp));
}
- }
+}
@media (min-width: 43.75rem) {
-
-.text-content,
-.cke_editable {
+ .text-content,
+ .cke_editable {
font-size: 1.125rem;
- line-height: var(--sp2)
-}
+ line-height: var(--sp2);
}
+}
/**
* Special colors for footer that has a dark background.
*/
.site-footer .text-content {
- color: inherit
+ color: inherit;
}
.site-footer .text-content * {
- color: inherit;
- }
+ color: inherit;
+}
.site-footer .text-content a {
- text-decoration: underline;
- color: var(--color--white);
- box-shadow: none
- }
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+ color: var(--color--white);
+ box-shadow: none;
+}
.site-footer .text-content a:hover {
- text-decoration: none;
- color: var(--color--white);
- box-shadow: none;
- }
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: var(--color--white);
+ box-shadow: none;
+}
/**
* Decrease font-size for blockquote placed in sidebar region.
*/
@media (min-width: 62.5rem) {
-
-.region--sidebar .text-content blockquote {
+ .region--sidebar .text-content blockquote {
font-size: 1.5rem;
- line-height: var(--sp2)
-}
+ line-height: var(--sp2);
}
+}
diff --git a/css/components/ui-dialog.css b/css/components/ui-dialog.css
index 14b593d..ef0721e 100644
--- a/css/components/ui-dialog.css
+++ b/css/components/ui-dialog.css
@@ -10,32 +10,21 @@
* Styles for jQuery UI dialog.
*/
-[dir="ltr"] .ui-dialog .ui-dialog-buttonpane {
- padding-left: 0.2em;
-}
-
-[dir="rtl"] .ui-dialog .ui-dialog-buttonpane {
- padding-right: 0.2em;
-}
-
-[dir="ltr"] .ui-dialog .ui-dialog-buttonpane {
- padding-right: 0.2em;
-}
-
-[dir="rtl"] .ui-dialog .ui-dialog-buttonpane {
- padding-left: 0.2em;
+.ui-dialog .ui-dialog-buttonpane {
+ padding-inline-start: 0.2em;
+ padding-inline-end: 0.2em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
- display: flex;
- float: none;
- flex-wrap: wrap;
- grid-gap: 0.3125rem;
- }
+ display: flex;
+ float: none;
+ flex-wrap: wrap;
+ gap: 0.3125rem;
+}
.ui-dialog .ui-dialog-buttonpane button {
- margin: 0;
- }
+ margin: 0;
+}
.ui-widget-overlay {
z-index: 1259;
diff --git a/css/components/vertical-tabs.css b/css/components/vertical-tabs.css
index dafe110..6398b8d 100644
--- a/css/components/vertical-tabs.css
+++ b/css/components/vertical-tabs.css
@@ -10,78 +10,52 @@
* Vertical Tabs.
*/
-/*
- * 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 {
+ --vertical-tabs-menu-width: 15rem;
+ --vertical-tabs-menu-border-width: 1px;
+}
@media (min-width: 62.5rem) {
-
-.vertical-tabs {
- display: flex
-}
+ .vertical-tabs {
+ display: flex;
}
-
-[dir="ltr"] .vertical-tabs__menu {
- margin-left: 0
-}
-
-[dir="rtl"] .vertical-tabs__menu {
- margin-right: 0
-}
-
-[dir="ltr"] .vertical-tabs__menu {
- margin-right: 0
-}
-
-[dir="rtl"] .vertical-tabs__menu {
- margin-left: 0
}
.vertical-tabs__menu {
position: relative;
align-self: flex-start;
margin: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
list-style: none;
- border-width: 1px;
+ border-width: var(--vertical-tabs-menu-border-width);
border-style: solid;
- border-color: var(--color--gray-95)
+ border-color: var(--color--gray-95);
}
@media (min-width: 62.5rem) {
-
-.vertical-tabs__menu {
- width: 15rem;
- border-width: 1px 0 1px 1px
-}
+ .vertical-tabs__menu {
+ width: var(--vertical-tabs-menu-width);
+ border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width);
}
+}
.vertical-tabs__panes {
- margin-top: -1px
+ margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1);
}
@media (min-width: 62.5rem) {
-
-.vertical-tabs__panes {
- width: calc(100% - 15rem);
- margin-top: 0
-}
+ .vertical-tabs__panes {
+ width: calc(100% - var(--vertical-tabs-menu-width));
+ margin-block-start: 0;
}
+}
@media (min-width: 62.5rem) {
-
-.vertical-tabs__pane {
- min-height: 100%
-}
+ .vertical-tabs__pane {
+ min-height: 100%;
}
+}
.vertical-tabs__pane.olives-details {
margin: 0;
@@ -93,63 +67,37 @@
display: none;
}
-.vertical-tabs__menu-item:nth-child(n+2) {
- border-top: 1px solid var(--color--gray-95);
-}
-
-[dir="ltr"] .vertical-tabs__menu-item a {
- padding-left: var(--sp0-75)
-}
-
-[dir="rtl"] .vertical-tabs__menu-item a {
- padding-right: var(--sp0-75)
-}
-
-[dir="ltr"] .vertical-tabs__menu-item a {
- padding-right: var(--sp0-75)
-}
-
-[dir="rtl"] .vertical-tabs__menu-item a {
- padding-left: var(--sp0-75)
+.vertical-tabs__menu-item:nth-child(n + 2) {
+ border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
}
.vertical-tabs__menu-item a {
display: block;
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp0-75);
+ padding-inline-end: var(--sp0-75);
+ -webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-primary-loud);
- background-color: var(--color--gray-95)
+ background-color: var(--color--gray-95);
}
.vertical-tabs__menu-item a:focus,
- .vertical-tabs__menu-item a:hover,
- .vertical-tabs__menu-item a:active {
- background-color: var(--color--gray-100);
- }
+.vertical-tabs__menu-item a:hover,
+.vertical-tabs__menu-item a:active {
+ background-color: var(--color--gray-100);
+}
.vertical-tabs__menu-item.is-selected {
- background-color: var(--color--white)
+ background-color: var(--color--white);
}
@media (min-width: 62.5rem) {
-
-[dir="ltr"] .vertical-tabs__menu-item.is-selected {
- margin-right: -1px
-}
-
-[dir="rtl"] .vertical-tabs__menu-item.is-selected {
- margin-left: -1px
-}
-
-[dir="ltr"] .vertical-tabs__menu-item.is-selected {
- padding-right: 1px
-}
-
-[dir="rtl"] .vertical-tabs__menu-item.is-selected {
- padding-left: 1px
-}
+ .vertical-tabs__menu-item.is-selected {
+ margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1);
+ padding-inline-end: var(--vertical-tabs-menu-border-width);
}
+}
.vertical-tabs__menu-item.is-selected a {
background-color: transparent;
diff --git a/css/components/wide-image.css b/css/components/wide-image.css
index 1652d64..637df39 100644
--- a/css/components/wide-image.css
+++ b/css/components/wide-image.css
@@ -10,106 +10,46 @@
* Wide image component.
*/
-/*
- * 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"] .wide-image {
- margin-left: 0
-}
-
-[dir="rtl"] .wide-image {
- margin-right: 0
-}
-
-[dir="ltr"] .wide-image {
- margin-right: 0
-}
-
-[dir="rtl"] .wide-image {
- margin-left: 0
-}
-
.wide-image {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp2)
+ margin-block-start: var(--sp0-5);
+ margin-block-end: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .wide-image {
- margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+ .wide-image {
+ 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(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
-
-[dir="rtl"] .wide-image {
- margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
- }
-
-.wide-image {
- 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)
}
- }
@media (min-width: 62.5rem) {
-
-[dir="ltr"] .wide-image {
- margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
- }
-
-[dir="rtl"] .wide-image {
- margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+ .wide-image {
+ width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
-
-.wide-image {
- width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
}
- }
/* Ensure that image doesn't overlap sidebar. */
@media (min-width: 62.5rem) {
-
-.sidebar-grid .wide-image {
- width: calc(var(--grid-col-width)*9 + var(--grid-gap)*8)
-}
+ .sidebar-grid .wide-image {
+ width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
}
+}
@media (min-width: 81.25rem) {
-
-.sidebar-grid .wide-image {
- width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9)
-}
+ .sidebar-grid .wide-image {
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
}
-
-/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
-
-[dir="ltr"] .layout-builder .wide-image {
- margin-left: 0
-}
-
-[dir="rtl"] .layout-builder .wide-image {
- margin-right: 0
-}
-
-[dir="ltr"] .layout-builder .wide-image {
- margin-right: 0
}
-[dir="rtl"] .layout-builder .wide-image {
- margin-left: 0
-}
+/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
.layout-builder .wide-image {
max-width: 100%;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
diff --git a/css/layout/grid.css b/css/layout/grid.css
index 1f7f865..d462d9c 100644
--- a/css/layout/grid.css
+++ b/css/layout/grid.css
@@ -10,34 +10,18 @@
* Grid system.
*/
-/*
- * 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. */
-
.grid-full {
- display: -ms-grid;
display: grid;
- -ms-grid-rows: 1fr;
grid-template-rows: 1fr;
- -ms-grid-columns: (minmax(0, 1fr))[var(--grid-col-count)];
grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
- grid-column-gap: var(--grid-gap)
+ grid-column-gap: var(--grid-gap);
/* .grid-full classes nested 3 or more deep go full width. */
}
.grid-full .grid-full .grid-full {
- display: block;
- }
+ display: block;
+}
/*
If the .grid-full is nested within the following, apply the appropriate number of columns.
@@ -46,22 +30,18 @@
*/
@media (min-width: 43.75rem) {
-
-.layout--content-narrow .grid-full,
-.layout--pass--content-narrow > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 2)];
- grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
-}
+ .layout--content-narrow .grid-full,
+ .layout--pass--content-narrow > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
}
+}
@media (min-width: 62.5rem) {
-
-.layout--content-narrow .grid-full,
-.layout--pass--content-narrow > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 6)];
- grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr))
-}
+ .layout--content-narrow .grid-full,
+ .layout--pass--content-narrow > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
}
+}
/*
If the .grid-full is nested within the following, apply the appropriate number of columns.
@@ -70,19 +50,15 @@
*/
@media (min-width: 43.75rem) {
-
-.layout--content-medium .grid-full,
-.layout--pass--content-medium > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 2)];
- grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
-}
+ .layout--content-medium .grid-full,
+ .layout--pass--content-medium > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
}
+}
@media (min-width: 62.5rem) {
-
-.layout--content-medium .grid-full,
-.layout--pass--content-medium > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 4)];
- grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr))
-}
+ .layout--content-medium .grid-full,
+ .layout--pass--content-medium > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
}
+}
diff --git a/css/layout/layout-builder-fourcol-section.css b/css/layout/layout-builder-fourcol-section.css
index 9ddc38d..c607c6f 100644
--- a/css/layout/layout-builder-fourcol-section.css
+++ b/css/layout/layout-builder-fourcol-section.css
@@ -10,105 +10,66 @@
* Provides the layout styles for four-column layout section.
*/
-/*
- * 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. */
-
.layout--fourcol-section {
display: flex;
- flex-wrap: wrap
+ flex-wrap: wrap;
}
.layout--fourcol-section > .layout__region {
- flex: 1 0 100%;
- margin-bottom: var(--grid-gap)
- }
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+}
@media (min-width: 43.75rem) {
-
-.layout--fourcol-section > .layout__region {
- flex-basis: calc(50% - var(--grid-gap)*0.5);
- flex-grow: 0;
- flex-shrink: 0;
- margin-bottom: 0
+ .layout--fourcol-section > .layout__region {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
}
- }
-
-.layout--fourcol-section {
-
- /* Two column layout. */
}
-@media (min-width: 43.75rem) {
- .layout--fourcol-section > .layout__region--first,
- .layout--fourcol-section > .layout__region--second {
- margin-bottom: var(--grid-gap);
- }
-
- [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"]
- .layout--fourcol-section > .layout__region--third {
- margin-right: calc(var(--grid-gap)*0.5)
- }
+/* Two column layout. */
- [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"]
- .layout--fourcol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap)*0.5)
+@media (min-width: 43.75rem) {
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--second {
+ margin-block-end: var(--grid-gap);
}
- [dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"]
- .layout--fourcol-section > .layout__region--fourth {
- margin-left: calc(var(--grid-gap)*0.5)
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--third {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
- [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"]
- .layout--fourcol-section > .layout__region--fourth {
- margin-right: calc(var(--grid-gap)*0.5)
+ .layout--fourcol-section > .layout__region--second,
+ .layout--fourcol-section > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
- }
-
-.layout--fourcol-section {
-
- /* Four column layout. */
}
-@media (min-width: 62.5rem) {
- .layout--fourcol-section > .layout__region {
- flex-basis: calc(25% - var(--grid-gap)*0.75);
- }
-
- .layout--fourcol-section > .layout__region--first,
- .layout--fourcol-section > .layout__region--second {
- margin-bottom: 0;
- }
+/* Four column layout. */
- [dir="ltr"] .layout--fourcol-section > .layout__region--first {
- margin-right: calc(var(--grid-gap)*0.5)
+@media (min-width: 62.5rem) {
+ .layout--fourcol-section > .layout__region {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.75));
}
- [dir="rtl"] .layout--fourcol-section > .layout__region--first {
- margin-left: calc(var(--grid-gap)*0.5)
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--second {
+ margin-block-end: 0;
}
- .layout--fourcol-section > .layout__region--second,
- .layout--fourcol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap)*0.5);
- margin-right: calc(var(--grid-gap)*0.5);
- }
-
- [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
- margin-left: calc(var(--grid-gap)*0.5)
+ .layout--fourcol-section > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
- [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
- margin-right: calc(var(--grid-gap)*0.5)
+ .layout--fourcol-section > .layout__region--second,
+ .layout--fourcol-section > .layout__region--third {
+ margin-inline: calc(var(--grid-gap) * 0.5);
}
+
+ .layout--fourcol-section > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
+}
diff --git a/css/layout/layout-builder-threecol-section.css b/css/layout/layout-builder-threecol-section.css
index 9caf4ff..df66d8b 100644
--- a/css/layout/layout-builder-threecol-section.css
+++ b/css/layout/layout-builder-threecol-section.css
@@ -10,85 +10,63 @@
* Provides the layout styles for three-column layout section.
*/
-/*
- * 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. */
-
.layout--threecol-section {
display: flex;
- flex-wrap: wrap
+ flex-wrap: wrap;
}
.layout--threecol-section > .layout__region {
- flex: 1 0 100%;
- margin-bottom: var(--grid-gap)
- }
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+}
@media (min-width: 62.5rem) {
-
-.layout--threecol-section > .layout__region {
- flex-grow: 0;
- flex-shrink: 0;
- margin-bottom: 0
+ .layout--threecol-section > .layout__region {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
}
- }
+}
@media (min-width: 62.5rem) {
- [dir="ltr"] .layout--threecol-section > .layout__region--first {
- margin-right: calc(var(--grid-gap)*0.5)
- }
- [dir="rtl"] .layout--threecol-section > .layout__region--first {
- margin-left: calc(var(--grid-gap)*0.5)
+ .layout--threecol-section > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
- .layout--threecol-section > .layout__region--second {
- margin-left: calc(var(--grid-gap)*0.5);
- margin-right: calc(var(--grid-gap)*0.5);
- }
-
- [dir="ltr"] .layout--threecol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap)*0.5)
+ .layout--threecol-section > .layout__region--second {
+ margin-inline: calc(var(--grid-gap) * 0.5);
}
- [dir="rtl"] .layout--threecol-section > .layout__region--third {
- margin-right: calc(var(--grid-gap)*0.5)
+ .layout--threecol-section > .layout__region--third {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ .layout--threecol-section--25-50-25 > .layout__region--first,
+ .layout--threecol-section--25-50-25 > .layout__region--third {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
}
- .layout--threecol-section--25-50-25 > .layout__region--first,
- .layout--threecol-section--25-50-25 > .layout__region--third {
- flex-basis: calc(25% - var(--grid-gap)*0.5);
- }
- .layout--threecol-section--25-50-25 > .layout__region--second {
- flex-basis: calc(50% - var(--grid-gap));
- }
- .layout--threecol-section--25-25-50 > .layout__region--first,
- .layout--threecol-section--25-25-50 > .layout__region--second {
- flex-basis: calc(25% - var(--grid-gap)*0.5);
- }
+ .layout--threecol-section--25-50-25 > .layout__region--second {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+ .layout--threecol-section--25-25-50 > .layout__region--first,
+ .layout--threecol-section--25-25-50 > .layout__region--second {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
- .layout--threecol-section--25-25-50 > .layout__region--third {
- flex-basis: calc(50% - var(--grid-gap));
- }
- .layout--threecol-section--50-25-25 > .layout__region--first {
- flex-basis: calc(50% - var(--grid-gap));
- }
+ .layout--threecol-section--25-25-50 > .layout__region--third {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+ .layout--threecol-section--50-25-25 > .layout__region--first {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
- .layout--threecol-section--50-25-25 > .layout__region--second,
- .layout--threecol-section--50-25-25 > .layout__region--third {
- flex-basis: calc(25% - var(--grid-gap)*0.5);
- }
- .layout--threecol-section--33-34-33 > .layout__region--first,
- .layout--threecol-section--33-34-33 > .layout__region--second,
- .layout--threecol-section--33-34-33 > .layout__region--third {
- flex-basis: calc(33.33% - var(--grid-gap)*0.667);
- }
+ .layout--threecol-section--50-25-25 > .layout__region--second,
+ .layout--threecol-section--50-25-25 > .layout__region--third {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
+ .layout--threecol-section--33-34-33 > .layout__region--first,
+ .layout--threecol-section--33-34-33 > .layout__region--second,
+ .layout--threecol-section--33-34-33 > .layout__region--third {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+ }
}
diff --git a/css/layout/layout-builder-twocol-section.css b/css/layout/layout-builder-twocol-section.css
index 1f3d686..43dfb2b 100644
--- a/css/layout/layout-builder-twocol-section.css
+++ b/css/layout/layout-builder-twocol-section.css
@@ -10,142 +10,68 @@
* Provides the layout styles for two-column layout section.
*/
-/*
- * 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. */
-
.layout--twocol-section {
display: flex;
- flex-wrap: wrap
+ flex-wrap: wrap;
}
.layout--twocol-section > .layout__region {
- flex: 1 0 100%;
- margin-bottom: var(--grid-gap)
- }
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+}
@media (min-width: 43.75rem) {
-
-.layout--twocol-section > .layout__region {
- flex-grow: 0;
- flex-shrink: 0;
- margin-bottom: 0
+ .layout--twocol-section > .layout__region {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
}
- }
+}
@media (min-width: 43.75rem) {
- [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-right: calc(var(--grid-gap)*0.5)
- }
- [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-left: calc(var(--grid-gap)*0.5)
- }
- .layout--twocol-section--50-50 > .layout__region--first {
- flex-basis: calc(50% - var(--grid-gap)*0.5);
- }
-
- [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-left: calc(var(--grid-gap)*0.5)
- }
-
- [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-right: calc(var(--grid-gap)*0.5)
- }
-
- .layout--twocol-section--50-50 > .layout__region--second {
- flex-basis: calc(50% - var(--grid-gap)*0.5);
- }
- [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-right: calc(var(--grid-gap)*0.3333)
- }
- [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-left: calc(var(--grid-gap)*0.3333)
- }
- .layout--twocol-section--33-67 > .layout__region--first {
- flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
- }
-
- [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-left: calc(var(--grid-gap)*0.6666)
- }
-
- [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-right: calc(var(--grid-gap)*0.6666)
+ .layout--twocol-section--50-50 > .layout__region--first {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
- .layout--twocol-section--33-67 > .layout__region--second {
- flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
- }
- [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
- margin-right: calc(var(--grid-gap)*0.6666)
+ .layout--twocol-section--50-50 > .layout__region--second {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
- [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
- margin-left: calc(var(--grid-gap)*0.6666)
+ .layout--twocol-section--33-67 > .layout__region--first {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-end: calc(var(--grid-gap) * 0.3333);
}
- .layout--twocol-section--67-33 > .layout__region--first {
- flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
- }
- [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
- margin-left: calc(var(--grid-gap)*0.3333)
+ .layout--twocol-section--33-67 > .layout__region--second {
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-start: calc(var(--grid-gap) * 0.6666);
}
-
- [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
- margin-right: calc(var(--grid-gap)*0.3333)
- }
-
- .layout--twocol-section--67-33 > .layout__region--second {
- flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
- }
- [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-right: calc(var(--grid-gap)*0.25)
- }
- [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-left: calc(var(--grid-gap)*0.25)
+ .layout--twocol-section--67-33 > .layout__region--first {
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-end: calc(var(--grid-gap) * 0.6666);
}
- .layout--twocol-section--25-75 > .layout__region--first {
- flex-basis: calc(25% - var(--grid-gap)*0.25);
- }
- [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
- margin-left: calc(var(--grid-gap)*0.75)
+ .layout--twocol-section--67-33 > .layout__region--second {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-start: calc(var(--grid-gap) * 0.3333);
}
-
- [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
- margin-right: calc(var(--grid-gap)*0.75)
+ .layout--twocol-section--25-75 > .layout__region--first {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-end: calc(var(--grid-gap) * 0.25);
}
- .layout--twocol-section--25-75 > .layout__region--second {
- flex-basis: calc(75% - var(--grid-gap)*0.75);
- }
- [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-right: calc(var(--grid-gap)*0.75)
- }
- [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-left: calc(var(--grid-gap)*0.75)
+ .layout--twocol-section--25-75 > .layout__region--second {
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-start: calc(var(--grid-gap) * 0.75);
}
- .layout--twocol-section--75-25 > .layout__region--first {
- flex-basis: calc(75% - var(--grid-gap)*0.75);
- }
-
- [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
- margin-left: calc(var(--grid-gap)*0.25)
+ .layout--twocol-section--75-25 > .layout__region--first {
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-end: calc(var(--grid-gap) * 0.75);
}
- [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
- margin-right: calc(var(--grid-gap)*0.25)
+ .layout--twocol-section--75-25 > .layout__region--second {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-start: calc(var(--grid-gap) * 0.25);
}
-
- .layout--twocol-section--75-25 > .layout__region--second {
- flex-basis: calc(25% - var(--grid-gap)*0.25);
- }
}
diff --git a/css/layout/layout-content-medium.css b/css/layout/layout-content-medium.css
index 2da76c8..bae3903 100644
--- a/css/layout/layout-content-medium.css
+++ b/css/layout/layout-content-medium.css
@@ -10,46 +10,25 @@
* Grid system definition for the content wide layout.
*/
-/*
- * 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. */
-
.layout--content-medium,
.layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7;
- width: 100%
+ width: 100%;
}
@media (min-width: 43.75rem) {
-
-.layout--content-medium,
-.layout--pass--content-medium > * {
- -ms-grid-column: 2;
- -ms-grid-column-span: 12;
- grid-column: 2 / 14
-}
+ .layout--content-medium,
+ .layout--pass--content-medium > * {
+ grid-column: 2 / 14;
}
+}
@media (min-width: 62.5rem) {
-
-.layout--content-medium,
-.layout--pass--content-medium > * {
- -ms-grid-column: 3;
- -ms-grid-column-span: 10;
- grid-column: 3 / 13
-}
+ .layout--content-medium,
+ .layout--pass--content-medium > * {
+ grid-column: 3 / 13;
}
+}
/*
If .layout--content-medium is nested within itself, or an element that's inheriting the
@@ -58,25 +37,19 @@
*/
@media (min-width: 43.75rem) {
-
-.layout--pass--content-medium > * .layout--content-medium,
- .layout--pass--content-medium > * .layout--pass--content-medium > *,
+ .layout--pass--content-medium > * .layout--content-medium,
.layout--content-medium .layout--content-medium,
+ .layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--content-medium .layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 12;
- grid-column: 1 / 13
+ grid-column: 1 / 13;
}
- }
+}
@media (min-width: 62.5rem) {
-
-.layout--pass--content-medium > * .layout--content-medium,
- .layout--pass--content-medium > * .layout--pass--content-medium > *,
+ .layout--pass--content-medium > * .layout--content-medium,
.layout--content-medium .layout--content-medium,
+ .layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--content-medium .layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 10;
- grid-column: 1 / 11
+ grid-column: 1 / 11;
}
- }
+}
diff --git a/css/layout/layout-content-narrow.css b/css/layout/layout-content-narrow.css
index 2adc0b0..aabeee4 100644
--- a/css/layout/layout-content-narrow.css
+++ b/css/layout/layout-content-narrow.css
@@ -10,46 +10,25 @@
* Grid system definition for the content narrow layout.
*/
-/*
- * 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. */
-
.layout--content-narrow,
.layout--pass--content-narrow > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
grid-column: 1 / 7;
- width: 100%
+ width: 100%;
}
@media (min-width: 43.75rem) {
-
-.layout--content-narrow,
-.layout--pass--content-narrow > * {
- -ms-grid-column: 2;
- -ms-grid-column-span: 12;
- grid-column: 2 / 14
-}
+ .layout--content-narrow,
+ .layout--pass--content-narrow > * {
+ grid-column: 2 / 14;
}
+}
@media (min-width: 62.5rem) {
-
-.layout--content-narrow,
-.layout--pass--content-narrow > * {
- -ms-grid-column: 3;
- -ms-grid-column-span: 8;
- grid-column: 3 / 11
-}
+ .layout--content-narrow,
+ .layout--pass--content-narrow > * {
+ grid-column: 3 / 11;
}
+}
/*
If .layout--content-narrow is nested within any of the following, allocate the appropriate
@@ -61,36 +40,30 @@
*/
@media (min-width: 43.75rem) {
-
-.layout--content-narrow .layout--content-narrow,
- .layout--content-narrow .layout--pass--content-narrow > *,
+ .layout--content-narrow .layout--content-narrow,
.layout--pass--content-narrow > * .layout--content-narrow,
- .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--content-narrow,
- .layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--content-narrow,
+ .layout--content-narrow .layout--pass--content-narrow > *,
+ .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+ .layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 12;
- grid-column: 1 / 13
+ grid-column: 1 / 13;
}
- }
+}
@media (min-width: 62.5rem) {
-
-.layout--content-narrow .layout--content-narrow,
- .layout--content-narrow .layout--pass--content-narrow > *,
+ .layout--content-narrow .layout--content-narrow,
.layout--pass--content-narrow > * .layout--content-narrow,
- .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--content-narrow,
- .layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--content-narrow,
+ .layout--content-narrow .layout--pass--content-narrow > *,
+ .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+ .layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 8;
- grid-column: 1 / 9
+ grid-column: 1 / 9;
}
- }
+}
/*
Special grid-breaking treatment for text-content elements that
@@ -98,79 +71,55 @@
*/
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote::before,[dir="ltr"] .layout--content-narrow .text-content blockquote::before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote::before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote::before {
- left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+ .layout--content-narrow.text-content blockquote::before,
+ .layout--pass--content-narrow > *.text-content blockquote::before,
+ .layout--content-narrow .text-content blockquote::before,
+ .layout--pass--content-narrow > * .text-content blockquote::before {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote::before,[dir="rtl"] .layout--content-narrow .text-content blockquote::before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote::before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote::before {
- right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
- }
- }
+}
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote::after,[dir="ltr"] .layout--content-narrow .text-content blockquote::after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote::after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote::after {
- left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+ .layout--content-narrow.text-content blockquote::after,
+ .layout--pass--content-narrow > *.text-content blockquote::after,
+ .layout--content-narrow .text-content blockquote::after,
+ .layout--pass--content-narrow > * .text-content blockquote::after {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ width: var(--sp);
+ height: calc(100% - 2.8125rem);
+ margin-inline-start: 2px;
}
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote::after,[dir="rtl"] .layout--content-narrow .text-content blockquote::after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote::after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote::after {
- right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
- }
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote::after,[dir="ltr"] .layout--content-narrow .text-content blockquote::after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote::after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote::after {
- margin-left: 2px
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote::after,[dir="rtl"] .layout--content-narrow .text-content blockquote::after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote::after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote::after {
- margin-right: 2px
- }
-
-.layout--content-narrow.text-content blockquote::after, .layout--content-narrow .text-content blockquote::after, .layout--pass--content-narrow > *.text-content blockquote::after, .layout--pass--content-narrow > * .text-content blockquote::after {
- width: var(--sp);
- height: calc(100% - 2.8125rem)
- }
- }
+}
@media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote,[dir="ltr"] .layout--content-narrow .text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote {
- padding-left: 0
- }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote,[dir="rtl"] .layout--content-narrow .text-content blockquote,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote {
- padding-right: 0
+ .layout--content-narrow.text-content blockquote,
+ .layout--pass--content-narrow > *.text-content blockquote,
+ .layout--content-narrow .text-content blockquote,
+ .layout--pass--content-narrow > * .text-content blockquote {
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+ margin-block: var(--sp3);
+ padding-inline-start: 0;
}
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
- width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
- margin-top: var(--sp3);
- margin-bottom: var(--sp3)
- }
- }
+}
@media (min-width: 43.75rem) {
-
-.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- margin-top: var(--sp3);
- margin-bottom: var(--sp3)
- }
- }
-
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"] .layout--content-narrow .text-content pre,[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
- margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+ .layout--content-narrow.text-content pre,
+ .layout--pass--content-narrow > *.text-content pre,
+ .layout--content-narrow .text-content pre,
+ .layout--pass--content-narrow > * .text-content pre {
+ margin-block: var(--sp3);
}
+}
-[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"] .layout--content-narrow .text-content pre,[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
- margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+@media (min-width: 62.5rem) {
+ .layout--content-narrow.text-content pre,
+ .layout--pass--content-narrow > *.text-content pre,
+ .layout--content-narrow .text-content pre,
+ .layout--pass--content-narrow > * .text-content pre {
+ 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.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
- width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
- }
- }
+}
/**
*
and elements should not break containers and overflow
@@ -178,12 +127,12 @@
*/
.sidebar-grid .layout--content-narrow.text-content blockquote,
- .sidebar-grid .layout--content-narrow.text-content pre,
- .sidebar-grid .layout--content-narrow .text-content blockquote,
- .sidebar-grid .layout--content-narrow .text-content pre,
- .sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
- .sidebar-grid .layout--pass--content-narrow > *.text-content pre,
- .sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,
- .sidebar-grid .layout--pass--content-narrow > * .text-content pre {
- width: auto;
- }
+.sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
+.sidebar-grid .layout--content-narrow .text-content blockquote,
+.sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,
+.sidebar-grid .layout--content-narrow.text-content pre,
+.sidebar-grid .layout--pass--content-narrow > *.text-content pre,
+.sidebar-grid .layout--content-narrow .text-content pre,
+.sidebar-grid .layout--pass--content-narrow > * .text-content pre {
+ width: auto;
+}
diff --git a/css/layout/layout-discovery-section-layout.css b/css/layout/layout-discovery-section-layout.css
index 934d59a..e92fe2c 100644
--- a/css/layout/layout-discovery-section-layout.css
+++ b/css/layout/layout-discovery-section-layout.css
@@ -10,33 +10,18 @@
* Provides default layout styles for all layout sections.
*/
-/*
- * 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. */
-
.layout {
- margin-bottom: var(--sp)
+ margin-block-end: var(--sp);
}
@media (min-width: 43.75rem) {
-
-.layout {
- margin-bottom: var(--sp2)
-}
+ .layout {
+ margin-block-end: var(--sp2);
}
+}
@media (min-width: 62.5rem) {
-
-.layout {
- margin-bottom: var(--sp3)
-}
+ .layout {
+ margin-block-end: var(--sp3);
}
+}
diff --git a/css/layout/layout-footer.css b/css/layout/layout-footer.css
index 45bae86..17df54d 100644
--- a/css/layout/layout-footer.css
+++ b/css/layout/layout-footer.css
@@ -10,19 +10,6 @@
* Grid system definition for the footer top and footer bottom layouts.
*/
-/*
- * 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. */
-
/**
* Creates stacking context ensuring that child elements can never appear in
* front of mobile navigation.
@@ -34,43 +21,37 @@
}
.site-footer__inner {
- padding-top: var(--sp2);
- padding-bottom: var(--sp2)
+ padding-block: var(--sp2);
}
@media (min-width: 75rem) {
-
-.site-footer__inner {
- padding-top: var(--sp4);
- padding-bottom: calc(var(--sp)*13)
-}
+ .site-footer__inner {
+ padding-block: var(--sp4) calc(13 * var(--sp));
}
+}
-.region--footer_top__inner > *, .region--footer_bottom__inner > * {
- margin-bottom: var(--sp2)
- }
+.region--footer_top__inner > *,
+.region--footer_bottom__inner > * {
+ margin-block-end: var(--sp2);
+}
@media (min-width: 43.75rem) {
-
-.region--footer_top__inner > *, .region--footer_bottom__inner > * {
- flex: 1;
- margin-bottom: 0
- }
-
- [dir="ltr"] .region--footer_top__inner > *:not(:last-child),[dir="ltr"] .region--footer_bottom__inner > *:not(:last-child) {
- margin-right: var(--sp2);
+ .region--footer_top__inner > *,
+ .region--footer_bottom__inner > * {
+ flex: 1;
+ margin-block-end: 0;
}
- [dir="rtl"] .region--footer_top__inner > *:not(:last-child),[dir="rtl"] .region--footer_bottom__inner > *:not(:last-child) {
- margin-left: var(--sp2);
+ .region--footer_top__inner > *:not(:last-child),
+ .region--footer_bottom__inner > *:not(:last-child) {
+ margin-inline-end: var(--sp2);
}
- }
+}
@media (min-width: 43.75rem) {
-
-.region--footer_top__inner,
-.region--footer_bottom__inner {
+ .region--footer_top__inner,
+ .region--footer_bottom__inner {
display: flex;
- flex-wrap: wrap
-}
+ flex-wrap: wrap;
}
+}
diff --git a/css/layout/layout-sidebar.css b/css/layout/layout-sidebar.css
index 1dc1f95..4ff12fa 100644
--- a/css/layout/layout-sidebar.css
+++ b/css/layout/layout-sidebar.css
@@ -10,86 +10,50 @@
* Special grid system for sidebar.
*/
-/*
- * 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. */
-
.sidebar-grid > .site-main {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
- grid-column: 1 / 7;
- align-self: flex-start
- }
+ grid-column: 1 / 7;
+ align-self: flex-start;
+}
@media (min-width: 43.75rem) {
-
-.sidebar-grid > .site-main {
- -ms-grid-column: 1;
- -ms-grid-column-span: 14;
- grid-column: 1 / 15
+ .sidebar-grid > .site-main {
+ grid-column: 1 / 15;
}
- }
+}
@media (min-width: 62.5rem) {
-
-.sidebar-grid > .site-main {
- display: -ms-grid;
- display: grid;
- -ms-grid-columns: (minmax(0, 1fr))[8];
- grid-template-columns: repeat(8, minmax(0, 1fr));
- -ms-grid-column: 3;
- -ms-grid-column-span: 8;
- grid-column: 3 / 11
+ .sidebar-grid > .site-main {
+ display: grid;
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ grid-column: 3 / 11;
}
- .sidebar-grid > .site-main > .region--content-above,
- .sidebar-grid > .site-main > .region--content {
- -ms-grid-columns: (minmax(0, 1fr))[8];
- grid-template-columns: repeat(8, minmax(0, 1fr));
- -ms-grid-column: 1;
- -ms-grid-column-span: 8;
- grid-column: 1 / 9;
- }
+ .sidebar-grid > .site-main > .region--content-above,
+ .sidebar-grid > .site-main > .region--content {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ grid-column: 1 / 9;
+ }
- .sidebar-grid > .site-main .layout--content-narrow,
- .sidebar-grid > .site-main .layout--pass--content-narrow > *,
- .sidebar-grid > .site-main .layout--content-medium,
- .sidebar-grid > .site-main .layout--pass--content-medium > * {
- -ms-grid-column: 1;
- -ms-grid-column-span: 8;
- grid-column: 1 / 9;
- }
- }
+ .sidebar-grid > .site-main .layout--content-narrow,
+ .sidebar-grid > .site-main .layout--pass--content-narrow > *,
+ .sidebar-grid > .site-main .layout--content-medium,
+ .sidebar-grid > .site-main .layout--pass--content-medium > * {
+ grid-column: 1 / 9;
+ }
+}
.sidebar-grid .region--sidebar {
- -ms-grid-column: 1;
- -ms-grid-column-span: 6;
- grid-column: 1 / 7
- }
+ grid-column: 1 / 7;
+}
@media (min-width: 43.75rem) {
-
-.sidebar-grid .region--sidebar {
- -ms-grid-column: 3;
- -ms-grid-column-span: 10;
- grid-column: 3 / 13
+ .sidebar-grid .region--sidebar {
+ grid-column: 3 / 13;
}
- }
+}
@media (min-width: 62.5rem) {
-
-.sidebar-grid .region--sidebar {
- -ms-grid-column: 12;
- -ms-grid-column-span: 3;
- grid-column: 12 / 15
+ .sidebar-grid .region--sidebar {
+ grid-column: 12 / 15;
}
- }
+}
diff --git a/css/layout/layout-views-grid.css b/css/layout/layout-views-grid.css
index c76c61f..42c5c2a 100644
--- a/css/layout/layout-views-grid.css
+++ b/css/layout/layout-views-grid.css
@@ -14,19 +14,6 @@
* they reach the --views-grid-item--min-width value.
*/
-/*
- * 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. */
-
.views-view-grid {
--views-grid--layout-gap: var(--sp);
--views-grid--column-count: 4; /* Will be overridden by an inline style. */
@@ -38,10 +25,8 @@
* Calculated values.
*/
--views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
- --views-grid--total-gap-width: calc(var(--views-grid--gap-count)*var(--views-grid--layout-gap));
- --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width))/var(--views-grid--column-count));
-
- display: -ms-grid;
+ --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+ --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
@@ -49,14 +34,14 @@
}
.views-view-grid--vertical {
- margin-bottom: calc(var(--views-grid--layout-gap)*-1); /* Offset the bottom row's padding. */
+ margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
column-width: var(--views-grid-item--min-width);
column-count: var(--views-grid--column-count);
- grid-column-gap: var(--views-grid--layout-gap)
+ column-gap: var(--views-grid--layout-gap);
}
.views-view-grid--vertical .views-view-grid__item > * {
- padding-bottom: var(--views-grid--layout-gap);
- page-break-inside: avoid;
- break-inside: avoid;
- }
+ padding-block-end: var(--views-grid--layout-gap);
+ page-break-inside: avoid;
+ break-inside: avoid;
+}
diff --git a/css/layout/layout.css b/css/layout/layout.css
index 825af5a..3753598 100644
--- a/css/layout/layout.css
+++ b/css/layout/layout.css
@@ -10,24 +10,10 @@
* Base Layout.
*/
-/*
- * 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. */
-
.container {
width: 100%;
max-width: var(--max-width);
- padding-left: var(--container-padding);
- padding-right: var(--container-padding)
+ padding-inline: var(--container-padding);
/* This fixes an issue where if the toolbar is open in vertical mode, and
* the mobile navigation is open, the "close" button gets pushed outside of
@@ -35,7 +21,7 @@
}
body.is-fixed .container {
- width: 100%
+ width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
}
.page-wrapper {
@@ -56,36 +42,26 @@ body.is-fixed .container {
/* Contains the social sidebar, and the primary content area. */
@media (min-width: 75rem) {
-
-.layout-main {
+ .layout-main {
display: flex;
flex-direction: row-reverse;
- flex-wrap: wrap
-}
+ flex-wrap: wrap;
}
+}
@media (min-width: 75rem) {
-
-[dir="ltr"] .main-content {
- margin-right: auto
- }
-
-[dir="rtl"] .main-content {
- margin-left: auto
+ .main-content {
+ width: calc(100% - var(--content-left));
+ margin-inline-end: auto;
}
-
-.main-content {
- width: calc(100% - var(--content-left))
}
- }
.main-content__container {
- padding-top: var(--sp3)
+ padding-block-start: var(--sp3);
}
@media (min-width: 43.75rem) {
-
-.main-content__container {
- padding-top: var(--sp5)
-}
+ .main-content__container {
+ padding-block-start: var(--sp5);
}
+}
diff --git a/css/layout/region-content-below.css b/css/layout/region-content-below.css
index 096f8c5..14341c4 100644
--- a/css/layout/region-content-below.css
+++ b/css/layout/region-content-below.css
@@ -10,73 +10,37 @@
* Content below region layout.
*/
-/*
- * 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. */
-
@media (min-width: 43.75rem) {
-
-.region--content-below {
+ .region--content-below {
display: flex;
- flex-wrap: wrap
-}
-
- [dir="ltr"] .region--content-below > * {
- margin-right: var(--grid-gap)
-}
-
- [dir="rtl"] .region--content-below > * {
- margin-left: var(--grid-gap)
-}
-
- .region--content-below > * {
- flex-basis: calc(50% - var(--grid-gap)/2);
- flex-grow: 1;
- flex-shrink: 0
- }
-
- [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
- .region--content-below > *:last-child {
- margin-right: 0
-}
-
- [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"]
- .region--content-below > *:last-child {
- margin-left: 0
-}
+ flex-wrap: wrap;
}
-@media (min-width: 43.75rem) {
- .region--content-below > * {
- flex-basis: calc(33.33% - var(--grid-gap)*0.667)
- }
+ .region--content-below > * {
+ flex-basis: calc(50% - (var(--grid-gap) / 2));
+ flex-grow: 1;
+ flex-shrink: 0;
+ margin-inline-end: var(--grid-gap);
+ }
- [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
- .region--content-below > *:last-child {
- margin-right: var(--grid-gap)
+ .region--content-below > *:nth-child(2n),
+ .region--content-below > *:last-child {
+ margin-inline-end: 0;
+ }
}
- [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"]
- .region--content-below > *:last-child {
- margin-left: var(--grid-gap)
-}
+@media (min-width: 43.75rem) {
+ .region--content-below > * {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+ }
- [dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"]
- .region--content-below > *:last-child {
- margin-right: 0
-}
+ .region--content-below > *:nth-child(2n),
+ .region--content-below > *:last-child {
+ margin-inline-end: var(--grid-gap);
+ }
- [dir="rtl"] .region--content-below > *:nth-child(3n),[dir="rtl"]
- .region--content-below > *:last-child {
- margin-left: 0
-}
+ .region--content-below > *:nth-child(3n),
+ .region--content-below > *:last-child {
+ margin-inline-end: 0;
}
+}
diff --git a/css/layout/region-content.css b/css/layout/region-content.css
index bc8e12d..7e60724 100644
--- a/css/layout/region-content.css
+++ b/css/layout/region-content.css
@@ -10,33 +10,18 @@
* Content region layout.
*/
-/*
- * 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. */
-
.region--content {
- margin-bottom: var(--sp)
+ margin-block-end: var(--sp);
}
@media (min-width: 43.75rem) {
-
-.region--content {
- margin-bottom: var(--sp2)
-}
+ .region--content {
+ margin-block-end: var(--sp2);
}
+}
@media (min-width: 62.5rem) {
-
-.region--content {
- margin-bottom: var(--sp3)
-}
+ .region--content {
+ margin-block-end: var(--sp3);
}
+}
diff --git a/css/layout/region-hero.css b/css/layout/region-hero.css
index 86b1c68..f739ad9 100644
--- a/css/layout/region-hero.css
+++ b/css/layout/region-hero.css
@@ -10,19 +10,6 @@
* Region default layout.
*/
-/*
- * 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. */
-
.region--hero > *:last-child {
- margin-bottom: 0;
- }
+ margin-block-end: 0;
+}
diff --git a/css/layout/region-secondary-menu.css b/css/layout/region-secondary-menu.css
index 4de9ad5..5f17730 100644
--- a/css/layout/region-secondary-menu.css
+++ b/css/layout/region-secondary-menu.css
@@ -10,37 +10,24 @@
* Secondary menu region layout 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. */
-
.region--secondary-menu {
display: flex;
- margin-top: var(--sp2);
- margin-bottom: var(--sp2)
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
}
.region--secondary-menu > * {
- margin-bottom: 0;
- }
+ margin-block-end: 0;
+}
@media (min-width: 75rem) {
- body:not(.is-always-mobile-nav) .region--secondary-menu {
- justify-content: flex-end;
- margin: 0
+ body:not(.is-always-mobile-nav) .region--secondary-menu {
+ justify-content: flex-end;
+ margin: 0;
- /* If the secondary nav is the first item within the header, it does not need left separator. */
- }
- body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav::before {
- content: none;
- }
+ /* If the secondary nav is the first item within the header, it does not need left separator. */
}
+ body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav::before {
+ content: none;
+ }
+}
diff --git a/css/layout/region.css b/css/layout/region.css
index e11590f..e6a968d 100644
--- a/css/layout/region.css
+++ b/css/layout/region.css
@@ -10,33 +10,18 @@
* Region default layout.
*/
-/*
- * 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. */
-
.region > * {
- margin-bottom: var(--sp)
+ margin-block-end: var(--sp);
}
@media (min-width: 43.75rem) {
-
-.region > * {
- margin-bottom: var(--sp2)
-}
+ .region > * {
+ margin-block-end: var(--sp2);
}
+}
@media (min-width: 62.5rem) {
-
-.region > * {
- margin-bottom: var(--sp3)
-}
+ .region > * {
+ margin-block-end: var(--sp3);
}
+}
diff --git a/css/layout/social-bar.css b/css/layout/social-bar.css
index c9f6223..2b5b72e 100644
--- a/css/layout/social-bar.css
+++ b/css/layout/social-bar.css
@@ -11,132 +11,65 @@
.
*/
-/*
- * 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. */
-
@media (min-width: 75rem) {
-
-.social-bar {
+ .social-bar {
flex-shrink: 0;
width: var(--content-left);
- background-color: var(--color--gray-100)
-}
+ background-color: var(--color--gray-100);
}
-
-[dir="ltr"] .social-bar__inner {
- padding-left: var(--sp)
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-right: var(--sp)
-}
-
-[dir="ltr"] .social-bar__inner {
- padding-right: var(--sp)
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-left: var(--sp)
}
.social-bar__inner {
position: relative;
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5)
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
}
@media (min-width: 75rem) {
-
-[dir="ltr"] .social-bar__inner {
- padding-left: 0
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-right: 0
-}
-
-[dir="ltr"] .social-bar__inner {
- padding-right: 0
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-left: 0
-}
-
-.social-bar__inner {
+ .social-bar__inner {
position: relative;
width: var(--content-left);
- padding-top: calc(var(--sp)*5);
- padding-bottom: calc(var(--sp)*5)
-}
-
- [dir="ltr"] .social-bar__inner.is-fixed {
- left: 0
-}
-
- [dir="rtl"] .social-bar__inner.is-fixed {
- right: 0
-}
-
- .social-bar__inner.is-fixed {
- position: fixed;
- top: var(--sp6);
- height: calc(100vh - var(--sp)*6);
- }
+ padding-block: calc(5 * var(--sp));
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
-.rotate > * {
- margin-bottom: var(--sp2)
- }
-
-@media (min-width: 75rem) {
-
-.rotate > * {
- display: flex;
- align-items: center;
- margin-bottom: 0
+ .social-bar__inner.is-fixed {
+ position: fixed;
+ inset-block-start: var(--sp6);
+ inset-inline-start: 0;
+ height: calc(100vh - 6 * var(--sp));
}
-
- [dir="ltr"] .rotate > *:not(:first-child) {
- margin-right: var(--sp2)
}
- [dir="rtl"] .rotate > *:not(:first-child) {
- margin-left: var(--sp2)
+.rotate > * {
+ margin-block-end: var(--sp2);
}
- }
@media (min-width: 75rem) {
+ .rotate > * {
+ display: flex;
+ align-items: center;
+ margin-block-end: 0;
+ }
-[dir="ltr"] .rotate .contextual {
- left: 100%;
- right: auto
-}
-
-[dir="rtl"] .rotate .contextual {
- right: 100%;
- left: auto
+ .rotate > *:not(:first-child) {
+ margin-inline-end: var(--sp2);
+ }
}
-.rotate .contextual {
- transform: rotate(90deg); /* LTR */
- transform-origin: top left /* LTR */
+@media (min-width: 75rem) {
+ .rotate .contextual {
+ inset-inline: 100% auto;
+ transform: rotate(90deg); /* LTR */
+ transform-origin: top left; /* LTR */
}
- .rotate .contextual .trigger {
- float: left /* LTR */
+ .rotate .contextual .trigger {
+ float: left; /* LTR */
- /**
+ /**
* Chromium and Webkit do not yet support flow relative logical properties,
* such as float: inline-end. However, PostCSS Logical does not compile this
* value, so we accommodate by not using these.
@@ -144,47 +77,38 @@
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
* @see https://github.com/csstools/postcss-plugins/issues/632
*/
- }
- [dir="rtl"] .rotate .contextual .trigger {
- float: right;
- }
- }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .rotate {
- left: 50%
-}
-
-[dir="rtl"] .rotate {
- right: 50%
+ }
+ [dir="rtl"] .rotate .contextual .trigger {
+ float: right;
+ }
}
-.rotate {
+@media (min-width: 75rem) {
+ .rotate {
position: absolute;
+ inset-inline-start: 50%;
display: flex;
flex-direction: row-reverse;
width: 100vh;
transform: rotate(-90deg) translateX(-100%); /* LTR */
- transform-origin: left /* LTR */
-}
-
- @supports (width: max-content) {
+ transform-origin: left; /* LTR */
+ }
-.rotate {
- width: max-content
-}
+ @supports (width: max-content) {
+ .rotate {
+ width: max-content;
}
}
+}
@media (min-width: 75rem) {
- [dir="rtl"] .rotate {
- transform: rotate(90deg) translateX(100%);
- transform-origin: right
- }
+ [dir="rtl"] .rotate {
+ transform: rotate(90deg) translateX(100%);
+ transform-origin: right;
+ }
- [dir="rtl"] .rotate .contextual {
- transform: rotate(-90deg);
- transform-origin: top right;
- }
+ [dir="rtl"] .rotate .contextual {
+ transform: rotate(-90deg);
+ transform-origin: top right;
}
+}
diff --git a/css/layout/views.css b/css/layout/views.css
index 175272d..e97620b 100644
--- a/css/layout/views.css
+++ b/css/layout/views.css
@@ -10,30 +10,16 @@
* Styles for views.
*/
-/*
- * 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. */
-
.view > * {
- margin-bottom: var(--sp2)
- }
+ margin-block-end: var(--sp2);
+}
.view > *:last-child {
- margin-bottom: 0;
- }
+ margin-block-end: 0;
+}
@media (min-width: 43.75rem) {
-
-.view > * {
- margin-bottom: var(--sp3)
+ .view > * {
+ margin-block-end: var(--sp3);
}
- }
+}
diff --git a/css/theme/filter.theme.css b/css/theme/filter.theme.css
index c54c272..ac53a01 100644
--- a/css/theme/filter.theme.css
+++ b/css/theme/filter.theme.css
@@ -10,25 +10,12 @@
* Styling for the Filter module.
*/
-/*
- * 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. */
-
/**
* Filter information under field.
*/
.text-full > .form-item {
- margin-bottom: 0;
+ margin-block-end: 0;
}
.form-element--editor-format {
@@ -36,8 +23,7 @@
}
.filter-wrapper {
- margin-top: var(--sp1);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp1) var(--sp0-5);
}
.filter-wrapper .form-item {
@@ -46,9 +32,8 @@
.filter-help {
float: right; /* LTR */
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
- font-size: var(--font-size-xxs)
+ padding-block: var(--sp0-5);
+ font-size: var(--font-size-xxs);
/**
* Chromium and Webkit do not yet support flow relative logical properties,
@@ -61,8 +46,8 @@
}
[dir="rtl"] .filter-help {
- float: left;
- }
+ float: left;
+}
/**
* Compose tips.
@@ -71,8 +56,7 @@
*/
.compose-tips__item {
- margin-top: var(--sp1-5);
- margin-bottom: var(--sp1-5);
+ margin-block: var(--sp1-5);
}
/**
@@ -80,14 +64,13 @@
*/
.filter-guidelines__item {
- margin-top: var(--sp1);
+ margin-block-start: var(--sp1);
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
.filter-guidelines p {
- margin-top: var(--sp0-25);
- margin-bottom: 0;
+ margin-block: var(--sp0-25) 0;
}
/**
@@ -98,16 +81,14 @@
*/
.filter-tips--long {
- margin-bottom: var(--sp1-5);
+ margin-block-end: var(--sp1-5);
}
.filter-tips__item,
.filter-tips--long p {
- margin-top: var(--sp0-75);
- margin-bottom: var(--sp0-75);
+ margin-block: var(--sp0-75);
}
.filter-tips__item--short {
- margin-top: var(--sp0-25);
- margin-bottom: 0;
+ margin-block: var(--sp0-25) 0;
}