.
*/
-}
+ }
.block-search-wide__wrapper .search-form__submit .icon--search {
- 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;
-}
+ 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;
- 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);
-}
+ 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);
-}
+ 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 {
+ border-bottom-width: var(--sp0-5);
+ }
- .block-search-wide__wrapper .search-form__submit:focus span:after {
- content: none;
- }
-}
+ .block-search-wide__wrapper .search-form__submit:focus span:after {
+ content: none;
+ }
+ }
@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;
- }
-}
+ /* 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);
@@ -170,12 +170,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: grid;
-}
+ display: grid;
+ }
.block-search-wide__button {
position: relative;
@@ -190,68 +190,68 @@
}
.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-block-start: solid 2px var(--color--white);
-}
+ .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-block-start: solid 2px var(--color--white);
+ }
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before {
- transform: translate(-50%, -50%) rotate(-45deg);
-}
+ 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);
-}
+ transform: translate(-50%, -50%) rotate(45deg);
+ }
.block-search-wide__button[aria-expanded="true"] svg {
- display: none;
-}
+ display: none;
+ }
.block-search-wide__button svg {
- margin-inline-start: auto;
- margin-inline-end: auto;
-}
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
@media (forced-colors: active) {
- .block-search-wide__button {
+.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. */
@@ -271,21 +271,21 @@ html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
}
[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/core/themes/olivero/css/components/header-site-branding.css b/core/themes/olivero/css/components/header-site-branding.css
index 0e0335863a..0244bcfdc2 100644
--- a/core/themes/olivero/css/components/header-site-branding.css
+++ b/core/themes/olivero/css/components/header-site-branding.css
@@ -25,35 +25,35 @@
@media (min-width: 31.25rem) {
- .site-branding {
+.site-branding {
min-height: var(--sp4);
- }
}
+ }
@media (min-width: 43.75rem) {
- .site-branding {
+.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-block-end: var(--sp);
- }
}
+ }
@media (min-width: 62.5rem) {
- .site-branding {
+.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) {
- .site-branding {
+.site-branding {
min-height: var(--site-header-height-wide);
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%, #0d7ab8 78.66%);
@@ -73,18 +73,18 @@
}
.site-branding__inner a {
- text-decoration: none;
-}
+ text-decoration: none;
+ }
@media (min-width: 75rem) {
- .site-branding__inner {
+.site-branding__inner {
height: var(--header-height-wide-when-fixed);
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
- }
}
+ }
.site-branding__logo {
flex-shrink: 0;
@@ -92,31 +92,31 @@
}
.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);
@@ -125,25 +125,25 @@
}
.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;
- }
}
+ }
@media (min-width: 75rem) {
- .site-branding__text {
+.site-branding__text {
letter-spacing: 0.02em;
font-size: 2rem;
line-height: var(--sp2);
- }
}
+ }
.site-branding--bg-gray .site-branding__text,
.site-branding--bg-white .site-branding__text {
diff --git a/core/themes/olivero/css/components/header-sticky-toggle.css b/core/themes/olivero/css/components/header-sticky-toggle.css
index 788611c333..4f67a22455 100644
--- a/core/themes/olivero/css/components/header-sticky-toggle.css
+++ b/core/themes/olivero/css/components/header-sticky-toggle.css
@@ -19,7 +19,7 @@
@media (min-width: 75rem) {
- .sticky-header-toggle {
+.sticky-header-toggle {
display: flex;
flex-shrink: 0;
align-items: center;
@@ -31,30 +31,30 @@
border: 0;
outline: 0;
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 {
+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 {
+body.is-always-mobile-nav .sticky-header-toggle {
visibility: hidden;
- }
}
+ }
.sticky-header-toggle__icon {
--icon-bar-height: 0.1875rem;
@@ -72,13 +72,13 @@
}
.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;
@@ -87,13 +87,13 @@
}
[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/core/themes/olivero/css/components/hero.css b/core/themes/olivero/css/components/hero.css
index fdf5bd59d8..3d0d88f822 100644
--- a/core/themes/olivero/css/components/hero.css
+++ b/core/themes/olivero/css/components/hero.css
@@ -16,17 +16,17 @@
@media (min-width: 43.75rem) {
- .hero__content { /* 700px */
+.hero__content { /* 700px */
grid-column: 3 / 13;
- }
}
+ }
@media (min-width: 62.5rem) {
- .hero__content {
+.hero__content {
grid-column: 3 / 11;
- }
}
+ }
.hero__img {
grid-column: 1 / 7;
@@ -35,29 +35,29 @@
}
.hero__img img {
- width: 100%;
-}
+ width: 100%;
+ }
@media (min-width: 31.25rem) {
- .hero__img {
+.hero__img {
margin-block-start: var(--sp3);
margin-block-end: var(--sp3);
- }
}
+ }
@media (min-width: 43.75rem) {
- .hero__img {
+.hero__img {
grid-column: 1 / 15;
margin-block-start: var(--sp4);
margin-block-end: var(--sp4);
- }
}
+ }
@media (min-width: 62.5rem) {
- .hero__img {
+.hero__img {
grid-column: 2 / 14;
- }
}
+ }
diff --git a/core/themes/olivero/css/components/links.css b/core/themes/olivero/css/components/links.css
index 371745e809..d5df337004 100644
--- a/core/themes/olivero/css/components/links.css
+++ b/core/themes/olivero/css/components/links.css
@@ -19,16 +19,16 @@
}
.links.inline > * {
- display: inline;
-}
+ display: inline;
+ }
.links.inline > *:not(:last-child) {
- padding-inline-end: 1em;
-}
+ padding-inline-end: 1em;
+ }
@media (min-width: 43.75rem) {
- .node--type-book .links.inline {
+.node--type-book .links.inline {
text-align: end;
- }
}
+ }
diff --git a/core/themes/olivero/css/components/maintenance-page.css b/core/themes/olivero/css/components/maintenance-page.css
index 8639527a70..64082c6bca 100644
--- a/core/themes/olivero/css/components/maintenance-page.css
+++ b/core/themes/olivero/css/components/maintenance-page.css
@@ -12,15 +12,15 @@
@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;
@@ -28,5 +28,5 @@
}
.maintenance-page-icon path {
- fill: var(--color--primary-50);
-}
+ fill: var(--color--primary-50);
+ }
diff --git a/core/themes/olivero/css/components/messages.css b/core/themes/olivero/css/components/messages.css
index 444c152aa7..25434e82ef 100644
--- a/core/themes/olivero/css/components/messages.css
+++ b/core/themes/olivero/css/components/messages.css
@@ -33,14 +33,14 @@
}
.messages * {
- color: inherit;
-}
+ color: inherit;
+ }
/* Additional specificity to override contrib modules. */
.messages.messages-list__item {
- background-image: none;
-}
+ background-image: none;
+ }
.messages__list {
margin-block: 0;
@@ -70,8 +70,8 @@
}
.messages__header.no-icon {
- margin-inline-end: 0;
-}
+ margin-inline-end: 0;
+ }
.messages__content {
overflow: auto; /* Ensure large code blocks can be scrolled to. */
@@ -101,34 +101,34 @@
}
.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;
diff --git a/core/themes/olivero/css/components/navigation/menu-sidebar.css b/core/themes/olivero/css/components/navigation/menu-sidebar.css
index d80d2f4bc9..63b6532323 100644
--- a/core/themes/olivero/css/components/navigation/menu-sidebar.css
+++ b/core/themes/olivero/css/components/navigation/menu-sidebar.css
@@ -15,47 +15,47 @@
}
.menu--sidebar .menu {
- list-style: none;
-}
+ list-style: none;
+ }
.menu--sidebar .menu--level-1 {
- margin: 0;
-}
+ margin: 0;
+ }
.menu--sidebar .menu__link {
- 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;
-
- /* Bottom divider line. */
-}
+ 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;
+
+ /* Bottom divider line. */
+ }
.menu--sidebar .menu__link:after {
- 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);
-}
+ 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;
-}
+ 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);
+ }
/* 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;
-}
+ content: none;
+ }
diff --git a/core/themes/olivero/css/components/navigation/nav-button-mobile.css b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
index 2106930608..e677e183cc 100644
--- a/core/themes/olivero/css/components/navigation/nav-button-mobile.css
+++ b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
@@ -31,21 +31,21 @@
}
.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) {
- .mobile-nav-button {
+.mobile-nav-button {
display: inline-flex;
width: auto;
padding-inline-start: var(--sp);
- }
}
+ }
/* Text that says "menu". */
@@ -61,7 +61,7 @@
@media (min-width: 31.25rem) {
- .mobile-nav-button__label {
+.mobile-nav-button__label {
position: static;
overflow: visible;
clip: auto;
@@ -71,8 +71,8 @@
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 600;
- }
}
+ }
.mobile-nav-button__icon {
position: relative;
@@ -83,33 +83,33 @@
}
.mobile-nav-button__icon::before,
-.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::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;
}
.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/core/themes/olivero/css/components/navigation/nav-primary-button.css b/core/themes/olivero/css/components/navigation/nav-primary-button.css
index bd95ac4a2a..dfa2ca4684 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-button.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-button.css
@@ -27,109 +27,109 @@
}
.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;
-}
+ opacity: 0;
+ }
/* 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;
-}
-
-@media (min-width: 75rem) {
- 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));
- }
-
- 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;
+ pointer-events: none;
}
- 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: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;
+@media (min-width: 75rem) {
+ 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));
+ }
+
+ 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;
+ }
+
+ 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: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/core/themes/olivero/css/components/navigation/nav-primary-no-js.css b/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
index 3520beeea7..0441f95731 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
@@ -20,129 +20,129 @@
*/
@media (max-width: 75rem) {
- 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:not(.js) .primary-nav__menu--level-1 {
+ column-width: var(--no-js-nav-column-width);
+ column-gap: var(--no-js-nav-column-gap);
+ }
+
+ 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:not(.js) .header-nav {
+ border: solid 1px var(--color--gray-95) !important;
+ }
+
+ 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:not(.js) .primary-nav__menu--level-2 {
+ border-inline-start: 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-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:not(.js) .header-nav {
- border: solid 1px var(--color--gray-95) !important;
- }
-
- 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:not(.js) .primary-nav__menu--level-2 {
- border-inline-start: 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;
- }
-}
-
@media (min-width: 75rem) {
- /**
+ /**
* 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: var(--no-js-nav-column-width);
- column-gap: var(--no-js-nav-column-gap);
- }
-
- 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:not(.js) body.is-always-mobile-nav .header-nav {
- border: solid 1px var(--color--gray-95) !important;
- }
-
- 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:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
- border-inline-start: 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) 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: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:not(.js) body.is-always-mobile-nav .header-nav {
+ border: solid 1px var(--color--gray-95) !important;
+ }
+
+ 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:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
+ border-inline-start: 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;
+ }
+
+ /**
* 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) .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/core/themes/olivero/css/components/navigation/nav-primary-wide.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.css
index abe5f3cdee..8db2d79cf8 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-wide.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.css
@@ -11,202 +11,202 @@
*/
@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;
- }
-
- /* 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;
- }
- 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-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;
- }
-
- /* 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;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]:after {
- opacity: 1;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-block: var(--sp2);
- padding-inline-start: 0;
- padding-inline-end: 0;
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after {
- transform-origin: center;
- border-top-width: var(--sp0-5);
- }
-
- body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- display: flex;
- align-items: stretch;
- margin-inline-end: var(--sp);
- }
-
- 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;
- }
-
- 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% - (0.5 * var(--sp)));
- 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-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;
+ }
+
+ /* 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;
+ }
+ 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-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;
+ }
+
+ /* 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;
+ }
+
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]:after {
+ opacity: 1;
+ }
+
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
+ padding-block: var(--sp2);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ }
+
+ body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after {
+ transform-origin: center;
+ border-top-width: var(--sp0-5);
+ }
+
+ body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
+ display: flex;
+ align-items: stretch;
+ margin-inline-end: var(--sp);
+ }
+
+ 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;
+ }
+
+ 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% - (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(--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);
- }
-
- 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;
- }
-
- 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;
- }
-
- 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;
- }
-
- 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;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {
- transform-origin: right;
- }
-
- /**
+ 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);
+ }
+
+ 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;
+ }
+
+ 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;
+ }
+
+ 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;
+ }
+
+ 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;
+ }
+
+ [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) .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(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - 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
@@ -214,8 +214,8 @@
*/
@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/core/themes/olivero/css/components/navigation/nav-primary.css b/core/themes/olivero/css/components/navigation/nav-primary.css
index d3bf9460b3..3370358bbc 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary.css
@@ -20,20 +20,20 @@
}
.primary-nav__menu-item:last-child {
- margin-block-end: 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;
@@ -45,13 +45,13 @@
}
.primary-nav__menu-link:hover {
- color: inherit;
-}
+ color: inherit;
+ }
.primary-nav__menu-link:focus {
- outline: auto 2px var(--color--primary-50);
- outline-offset: 2px;
-}
+ outline: auto 2px var(--color--primary-50);
+ outline-offset: 2px;
+ }
.primary-nav__menu-link--nolink {
padding-block: var(--sp0-5);
@@ -75,29 +75,29 @@
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
-}
+ 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;
- 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);
-}
+ .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
+ 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);
+ }
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
- transition: opacity 0.2s;
- transform: rotate(90deg);
-}
+ transition: opacity 0.2s;
+ transform: rotate(90deg);
+ }
.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]:after {
- opacity: 0;
-}
+ opacity: 0;
+ }
.primary-nav__menu-link-inner {
position: relative;
@@ -109,22 +109,22 @@
}
.primary-nav__menu-link-inner:after {
- 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);
-}
+ 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.
@@ -163,19 +163,19 @@
}
.primary-nav__menu--level-2.is-active-menu-parent {
- visibility: visible;
- max-height: none;
- margin-block-start: var(--sp1-5);
- opacity: 1;
-}
+ visibility: visible;
+ max-height: none;
+ margin-block-start: var(--sp1-5);
+ opacity: 1;
+ }
@media (min-width: 43.75rem) {
- .primary-nav__menu--level-2 {
+.primary-nav__menu--level-2 {
margin-inline-start: calc(-1 * var(--sp3));
padding-inline-start: var(--sp3);
- }
}
+ }
/*
* Olivero doesn't officially support nested tertiary submenus, but this
@@ -195,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/core/themes/olivero/css/components/navigation/nav-secondary.css b/core/themes/olivero/css/components/navigation/nav-secondary.css
index 7e45f14b9d..d9462e46c9 100644
--- a/core/themes/olivero/css/components/navigation/nav-secondary.css
+++ b/core/themes/olivero/css/components/navigation/nav-secondary.css
@@ -40,8 +40,8 @@
}
.secondary-nav__menu-item:not(:last-child) {
- margin-inline-end: var(--sp1-5);
-}
+ margin-inline-end: var(--sp1-5);
+ }
.secondary-nav__menu-link {
position: relative;
@@ -53,60 +53,60 @@
}
.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) {
- body:not(.is-always-mobile-nav) .secondary-nav {
- position: relative;
- display: flex;
- margin-inline-start: var(--sp);
- padding-inline-start: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .secondary-nav {
+ position: relative;
+ display: flex;
+ margin-inline-start: var(--sp);
+ padding-inline-start: var(--sp2);
+ }
- 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);
- }
+ 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);
+ }
- 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__menu-link:focus {
- position: relative;
- outline: 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__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/core/themes/olivero/css/components/navigation/wide-nav-expand.css b/core/themes/olivero/css/components/navigation/wide-nav-expand.css
index 924340e251..5a73da6fef 100644
--- a/core/themes/olivero/css/components/navigation/wide-nav-expand.css
+++ b/core/themes/olivero/css/components/navigation/wide-nav-expand.css
@@ -16,7 +16,7 @@
@media (min-width: 75rem) {
- .wide-nav-expand {
+.wide-nav-expand {
display: flex;
visibility: hidden;
flex-shrink: 0;
@@ -29,27 +29,27 @@
color: var(--color--white);
border: 0;
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 {
+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 {
+body.is-always-mobile-nav .wide-nav-expand {
visibility: hidden;
- }
}
+ }
.wide-nav-expand__icon {
position: relative;
@@ -62,56 +62,56 @@
}
.wide-nav-expand__icon > span {
- display: block;
- height: 0;
- /* Intentionally not using CSS logical properties. */
- border-top: solid 3px currentColor;
-}
+ 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;
- inset-block-start: 0;
- inset-inline-start: 0;
- width: 100%;
- height: 0;
- transition: transform 0.2s;
- background-color: currentColor;
-}
+ 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;
- inset-block-start: 0.5625rem;
- inset-inline-start: 0;
- width: 100%;
- height: 0;
- transition: opacity 0.2s;
- background-color: currentColor;
-}
+ 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;
- inset-block: auto 0;
- inset-inline-start: 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) {
- inset-block-start: 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) {
- inset-block-start: 0.5625rem;
- transform: rotate(45deg);
-}
+ inset-block-start: 0.5625rem;
+ transform: rotate(45deg);
+ }
diff --git a/core/themes/olivero/css/components/node-teaser.css b/core/themes/olivero/css/components/node-teaser.css
index 29023bf080..46be9f8b71 100644
--- a/core/themes/olivero/css/components/node-teaser.css
+++ b/core/themes/olivero/css/components/node-teaser.css
@@ -16,127 +16,127 @@
}
.node--view-mode-teaser:after {
- 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);
-}
+ 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-block-end: 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 */
}
-}
+ }
.node--view-mode-teaser .primary-image {
- flex-shrink: 0;
- margin: 0;
- margin-block-end: var(--sp1);
- margin-inline-end: 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. */
+ }
:is(.node--view-mode-teaser .primary-image) + .node__title {
- flex-basis: calc(100% - calc(4.5 * var(--sp)));
-}
+ flex-basis: calc(100% - calc(4.5 * var(--sp)));
+ }
@media (min-width: 62.5rem) {
- :is(.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;
-}
+ display: block;
+ }
.node--view-mode-teaser .primary-image img {
- width: calc(3.5 * var(--sp));
- height: calc(3.5 * var(--sp));
- object-fit: cover;
- border-radius: 50%;
-}
+ width: calc(3.5 * var(--sp));
+ height: calc(3.5 * var(--sp));
+ object-fit: cover;
+ border-radius: 50%;
+ }
@media (min-width: 62.5rem) {
- .node--view-mode-teaser .primary-image img {
- width: var(--grid-col-width);
- height: var(--grid-col-width);
- }
-}
+.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 .primary-image {
- position: absolute;
- inset-block-start: 0;
- inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
- margin: 0;
+.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;
}
-}
+ }
.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);
-}
+ margin: 0;
+ margin-block-end: var(--sp1);
+ color: var(--color-text-neutral-loud);
+ font-size: 1.5rem;
+ line-height: var(--line-height-base);
+ }
@media (min-width: 62.5rem) {
- .node--view-mode-teaser .node__title {
- font-size: var(--sp2);
- line-height: var(--sp3);
+.node--view-mode-teaser .node__title {
+ font-size: var(--sp2);
+ line-height: var(--sp3);
}
-}
+ }
.node--view-mode-teaser .field--tag-ref {
- 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;
-}
+ 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-block-start: var(--sp2);
+.node--view-mode-teaser .field--tag-ref {
+ margin-block-start: var(--sp2);
}
-}
+ }
@media (min-width: 62.5rem) {
- .node--view-mode-teaser {
+.node--view-mode-teaser {
margin-block-end: var(--sp3);
- }
}
+ }
.views-row:last-child .node--view-mode-teaser {
margin-block-end: 0;
diff --git a/core/themes/olivero/css/components/node.css b/core/themes/olivero/css/components/node.css
index e628cb280c..4e421178f4 100644
--- a/core/themes/olivero/css/components/node.css
+++ b/core/themes/olivero/css/components/node.css
@@ -20,15 +20,15 @@
}
.node__meta a {
- font-weight: bold;
-}
+ font-weight: bold;
+ }
@media (min-width: 31.25rem) {
- .node__meta {
+.node__meta {
margin-block-end: var(--sp2);
- }
}
+ }
.node__author-image img {
width: var(--sp2-5);
@@ -39,21 +39,21 @@
}
.node__title a {
- padding-block-end: 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;
+ 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;
@@ -65,10 +65,10 @@
@media (min-width: 62.5rem) {
- .node__content {
+.node__content {
padding-block-end: var(--sp3);
- }
}
+ }
.node--unpublished {
/* There is no variable for the color - #fff4f4. */
diff --git a/core/themes/olivero/css/components/pager.css b/core/themes/olivero/css/components/pager.css
index 07f247bc3b..e28b540080 100644
--- a/core/themes/olivero/css/components/pager.css
+++ b/core/themes/olivero/css/components/pager.css
@@ -36,11 +36,11 @@
@media (min-width: 31.25rem) {
- .pager__item {
+.pager__item {
width: var(--sp3);
height: var(--sp3);
- }
}
+ }
[dir="rtl"] .pager__item--control {
transform: scaleX(-1);
@@ -52,10 +52,10 @@
}
@media (forced-colors: active) {
- .pager__item--control path {
- fill: linktext;
+ .pager__item--control path {
+ fill: linktext;
+ }
}
-}
.pager__link {
display: flex;
diff --git a/core/themes/olivero/css/components/powered-by-block.css b/core/themes/olivero/css/components/powered-by-block.css
index 76caa3ce05..0d5ed33ff1 100644
--- a/core/themes/olivero/css/components/powered-by-block.css
+++ b/core/themes/olivero/css/components/powered-by-block.css
@@ -17,31 +17,31 @@
}
.block-system-powered-by-block a {
- text-decoration: underline;
-}
+ text-decoration: underline;
+ }
.block-system-powered-by-block a:hover,
-.block-system-powered-by-block a:focus {
- text-decoration: none;
-}
+ .block-system-powered-by-block a:focus {
+ text-decoration: none;
+ }
.block-system-powered-by-block .drupal-logo {
- display: inline-block;
- margin-block-start: calc(-1 * var(--sp) / 4);
- margin-inline-start: calc(var(--sp) / 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/core/themes/olivero/css/components/search-results.css b/core/themes/olivero/css/components/search-results.css
index d6ee7ede44..5e3af742f2 100644
--- a/core/themes/olivero/css/components/search-results.css
+++ b/core/themes/olivero/css/components/search-results.css
@@ -20,10 +20,10 @@
@media (min-width: 43.75rem) {
- .search-results {
+.search-results {
margin-block-end: var(--sp3);
- }
}
+ }
.search-result__title {
margin-block: 0;
@@ -35,28 +35,28 @@
}
.search-result__title a {
- padding-block-end: 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;
+ 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 {
+.search-result__title {
margin-block-end: var(--sp1);
font-size: 1.875rem;
line-height: var(--sp3);
- }
}
+ }
[dir="rtl"] .search-result__title a {
background-position: bottom right;
@@ -68,10 +68,10 @@
@media (min-width: 62.5rem) {
- .search-result__snippet {
+.search-result__snippet {
padding-block-end: var(--sp3);
- }
}
+ }
.search-result__meta {
display: flex;
@@ -83,9 +83,9 @@
}
.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. */
@@ -93,22 +93,22 @@
}
.search-results__item:after {
- 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);
-}
+ 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-block-end: 0;
-}
+ margin-block-end: 0;
+ }
@media (min-width: 62.5rem) {
- .search-results__item {
+.search-results__item {
margin-block-end: var(--sp3);
- }
}
+ }
diff --git a/core/themes/olivero/css/components/site-header.css b/core/themes/olivero/css/components/site-header.css
index 767dcfa4eb..f73a89cf5c 100644
--- a/core/themes/olivero/css/components/site-header.css
+++ b/core/themes/olivero/css/components/site-header.css
@@ -21,12 +21,12 @@
@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-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
- }
}
+ }
.site-header__initial {
position: relative;
@@ -44,18 +44,18 @@
}
@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 */
- inset-block-start: calc(var(--drupal-displace-offset-top, 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 {
@@ -73,41 +73,41 @@
@media (min-width: 75rem) {
- html.js body:not(.is-always-mobile-nav) .site-header__inner {
+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 {
+.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 {
+[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;
- }
}
+ }
@media (min-width: 75rem) {
- [dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+[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/core/themes/olivero/css/components/skip-link.css b/core/themes/olivero/css/components/skip-link.css
index 2f557479aa..18fda946e7 100644
--- a/core/themes/olivero/css/components/skip-link.css
+++ b/core/themes/olivero/css/components/skip-link.css
@@ -26,13 +26,13 @@
}
.skip-link:hover {
- text-decoration: underline;
- color: var(--color--white);
-}
+ text-decoration: underline;
+ color: var(--color--white);
+ }
.skip-link:after {
- content: "\0020 ➔";
-}
+ content: "\0020 ➔";
+ }
.skip-link.focusable:focus {
position: absolute !important;
diff --git a/core/themes/olivero/css/components/table.css b/core/themes/olivero/css/components/table.css
index 0e8d015266..a4ff8d67f7 100644
--- a/core/themes/olivero/css/components/table.css
+++ b/core/themes/olivero/css/components/table.css
@@ -26,49 +26,49 @@
}
: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);
-}
+ 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);
+ }
:is(.forum table,.text-content table,.views-table,.draggable-table) tr:last-child td {
- border-block-end: 0;
-}
+ border-block-end: 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;
-}
+ :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;
+ }
: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);
-}
+ 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);
+ }
:is(.forum table,.text-content table,.views-table,.draggable-table) td {
- white-space: normal;
- border-block-end: 2px solid var(--color--gray-65);
-}
+ white-space: normal;
+ border-block-end: 2px solid var(--color--gray-65);
+ }
: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;
-}
+ :is(.forum table,.text-content table,.views-table,.draggable-table) td.checkbox {
+ text-align: center;
+ }
.draggable-table {
width: 100%;
diff --git a/core/themes/olivero/css/components/tabs.css b/core/themes/olivero/css/components/tabs.css
index e4957624a8..61018556f8 100644
--- a/core/themes/olivero/css/components/tabs.css
+++ b/core/themes/olivero/css/components/tabs.css
@@ -30,45 +30,45 @@
}
@media (min-width: 43.75rem) {
- .tabs {
+.tabs {
flex-direction: row;
flex-wrap: wrap;
- }
}
+ }
.tabs__tab {
display: none;
margin: 0;
margin-block-end: calc(-1 * var(--tabs-border-width));
}
.tabs__tab.is-active {
- display: flex;
-}
+ display: flex;
+ }
@media (min-width: 43.75rem) {
- .tabs__tab {
+.tabs__tab {
display: flex;
margin-block-end: 0;
margin-inline-start: calc(-1 * var(--tabs-border-width));
- }
}
+ }
/* Show tabs when JavaScript disabled. */
html:not(.js) .tabs__tab {
- display: flex;
+ display: flex;
}
/* Show tabs when tabs-expanded class is present. */
.tabs.is-expanded .tabs__tab {
- display: flex;
+ 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;
@@ -85,49 +85,49 @@ html:not(.js) .tabs__tab {
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.
*/
-}
+ }
.tabs__link.is-active:after {
- 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);
-}
+ 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) {
- .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 {
+ 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;
+ }
+ }
/* 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. */
.tabs__trigger {
display: flex;
@@ -141,23 +141,23 @@ html:not(.js) .tabs__tab {
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;
-}
+ 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 {
+.tabs__trigger {
display: none;
- }
}
+ }
.tabs__trigger-icon {
position: relative;
display: block;
@@ -166,30 +166,30 @@ html:not(.js) .tabs__trigger {
margin-block-start: calc(-2 * var(--tabs-border-width));
}
.tabs__trigger-icon > span {
- 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);
-}
+ 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) {
- inset-block-start: 0;
-}
+ 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);
-}
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(45deg);
+ }
.tabs__trigger-icon > span:nth-child(2) {
- inset-block-start: calc(50% + 1px);
-}
+ inset-block-start: calc(50% + 1px);
+ }
.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) {
- opacity: 0;
-}
+ opacity: 0;
+ }
.tabs__trigger-icon > span:nth-child(3) {
- inset-block-start: calc(100% + 2px);
-}
+ 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);
-}
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(-45deg);
+ }
diff --git a/core/themes/olivero/css/components/tags.css b/core/themes/olivero/css/components/tags.css
index f549706585..eac1f482ac 100644
--- a/core/themes/olivero/css/components/tags.css
+++ b/core/themes/olivero/css/components/tags.css
@@ -26,15 +26,15 @@
}
.field--tags__label:after {
- content: ":";
-}
+ content: ":";
+ }
@media (min-width: 43.75rem) {
- .field--tags__label {
+.field--tags__label {
line-height: 2;
- }
}
+ }
.field--label-inline .field--tags__label {
padding-block: 0;
@@ -80,10 +80,10 @@
}
.node--view-mode-full .field--tags {
- 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);
-}
+ 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/core/themes/olivero/css/components/text-content.css b/core/themes/olivero/css/components/text-content.css
index 1c5992f169..823d3ca36d 100644
--- a/core/themes/olivero/css/components/text-content.css
+++ b/core/themes/olivero/css/components/text-content.css
@@ -26,133 +26,119 @@
*/
}
-.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;
-}
+.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)), .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);
- text-decoration-color: var(--color--primary-80);
+ .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);
+ text-decoration-color: var(--color--primary-80);
+ }
+ }
+
+.text-content p, .cke_editable p {
+ margin-block-start: var(--sp);
+ margin-block-end: var(--sp);
}
-}
-.text-content p,
-.cke_editable p {
- margin-block-start: var(--sp);
- margin-block-end: var(--sp);
-}
+.text-content p:first-child, .cke_editable p:first-child {
+ margin-block-start: 0;
+ }
-.text-content p:first-child,
-.cke_editable p:first-child {
- margin-block-start: 0;
-}
-
-.text-content p:last-child,
-.cke_editable p:last-child {
- margin-block-end: 0;
-}
+.text-content p:last-child, .cke_editable p:last-child {
+ margin-block-end: 0;
+ }
@media (min-width: 43.75rem) {
- .text-content p,
- .cke_editable p {
- margin-block-start: var(--sp2);
- margin-block-end: var(--sp2);
+.text-content p, .cke_editable p {
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
}
-}
+ }
-.text-content code,
-.cke_editable code {
- background-color: var(--color--gray-100);
-}
-
-.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);
-}
+.text-content code, .cke_editable code {
+ background-color: var(--color--gray-100);
+ }
-.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);
-}
+.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);
+ }
-.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;
-}
+.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);
+ }
-.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: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;
+ }
+
+.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);
+ }
@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(3.5 * var(--sp));
+.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);
- }
}
+ }
/**
* Special colors for footer that has a dark background.
@@ -163,20 +149,20 @@
}
.site-footer .text-content * {
- color: inherit;
-}
+ color: inherit;
+ }
.site-footer .text-content a {
- text-decoration: underline;
- color: var(--color--white);
- box-shadow: none;
-}
+ 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;
-}
+ text-decoration: none;
+ color: var(--color--white);
+ box-shadow: none;
+ }
/**
* Decrease font-size for blockquote placed in sidebar region.
@@ -184,8 +170,8 @@
@media (min-width: 62.5rem) {
- .region--sidebar .text-content blockquote {
+.region--sidebar .text-content blockquote {
font-size: 1.5rem;
line-height: var(--sp2);
- }
}
+ }
diff --git a/core/themes/olivero/css/components/ui-dialog.css b/core/themes/olivero/css/components/ui-dialog.css
index ef0721e67c..0564f1bccd 100644
--- a/core/themes/olivero/css/components/ui-dialog.css
+++ b/core/themes/olivero/css/components/ui-dialog.css
@@ -11,20 +11,20 @@
*/
.ui-dialog .ui-dialog-buttonpane {
- padding-inline-start: 0.2em;
- padding-inline-end: 0.2em;
-}
+ 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;
- 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/core/themes/olivero/css/components/vertical-tabs.css b/core/themes/olivero/css/components/vertical-tabs.css
index 99840b6883..91abc5911c 100644
--- a/core/themes/olivero/css/components/vertical-tabs.css
+++ b/core/themes/olivero/css/components/vertical-tabs.css
@@ -17,10 +17,10 @@
@media (min-width: 62.5rem) {
- .vertical-tabs {
+.vertical-tabs {
display: flex;
- }
}
+ }
.vertical-tabs__menu {
position: relative;
@@ -36,11 +36,11 @@
@media (min-width: 62.5rem) {
- .vertical-tabs__menu {
+.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-block-start: calc(var(--vertical-tabs-menu-border-width) * -1);
@@ -48,18 +48,18 @@
@media (min-width: 62.5rem) {
- .vertical-tabs__panes {
+.vertical-tabs__panes {
width: calc(100% - var(--vertical-tabs-menu-width));
margin-block-start: 0;
- }
}
+ }
@media (min-width: 62.5rem) {
- .vertical-tabs__pane {
+.vertical-tabs__pane {
min-height: 100%;
- }
}
+ }
.vertical-tabs__pane.olivero-details {
margin: 0;
@@ -86,10 +86,10 @@
}
.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);
@@ -97,11 +97,11 @@
@media (min-width: 62.5rem) {
- .vertical-tabs__menu-item.is-selected {
+.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/core/themes/olivero/css/components/wide-image.css b/core/themes/olivero/css/components/wide-image.css
index 78a844ad16..243f7c1c11 100644
--- a/core/themes/olivero/css/components/wide-image.css
+++ b/core/themes/olivero/css/components/wide-image.css
@@ -19,36 +19,36 @@
@media (min-width: 43.75rem) {
- .wide-image {
+.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))));
- }
}
+ }
@media (min-width: 62.5rem) {
- .wide-image {
+.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)));
- }
}
+ }
/* Ensure that image doesn't overlap sidebar. */
@media (min-width: 62.5rem) {
- .sidebar-grid .wide-image {
+.sidebar-grid .wide-image {
width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
- }
}
+ }
@media (min-width: 81.25rem) {
- .sidebar-grid .wide-image {
+.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. */
diff --git a/core/themes/olivero/css/layout/grid.css b/core/themes/olivero/css/layout/grid.css
index 76747f1764..aadb3760cb 100644
--- a/core/themes/olivero/css/layout/grid.css
+++ b/core/themes/olivero/css/layout/grid.css
@@ -20,8 +20,8 @@
}
.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.
@@ -31,19 +31,19 @@
@media (min-width: 43.75rem) {
- .layout--content-narrow .grid-full,
- .layout--pass--content-narrow > * .grid-full {
+.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 {
+.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.
@@ -53,16 +53,16 @@
@media (min-width: 43.75rem) {
- .layout--content-medium .grid-full,
- .layout--pass--content-medium > * .grid-full {
+.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 {
+.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/core/themes/olivero/css/layout/layout-builder-fourcol-section.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
index 46ed0046ad..2ab8ba4d7f 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
@@ -16,61 +16,61 @@
}
.layout--fourcol-section > .layout__region {
- flex: 1 0 100%;
- margin-block-end: 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-block-end: 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;
}
-}
+ }
/* Two column layout. */
@media (min-width: 43.75rem) {
- .layout--fourcol-section > .layout__region--first,
- .layout--fourcol-section > .layout__region--second {
- margin-block-end: var(--grid-gap);
- }
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--second {
+ margin-block-end: var(--grid-gap);
+ }
- .layout--fourcol-section > .layout__region--first,
- .layout--fourcol-section > .layout__region--third {
- margin-inline-end: 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);
+ }
- .layout--fourcol-section > .layout__region--second,
- .layout--fourcol-section > .layout__region--fourth {
- margin-inline-start: 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);
+ }
}
-}
/* 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 {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.75));
+ }
- .layout--fourcol-section > .layout__region--first,
- .layout--fourcol-section > .layout__region--second {
- margin-block-end: 0;
- }
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--second {
+ margin-block-end: 0;
+ }
- .layout--fourcol-section > .layout__region--first {
- margin-inline-end: calc(var(--grid-gap) * 0.5);
- }
+ .layout--fourcol-section > .layout__region--first {
+ margin-inline-end: 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--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);
+ .layout--fourcol-section > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
}
-}
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
index dbd891f118..9dd11e2a2d 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
@@ -16,58 +16,58 @@
}
.layout--threecol-section > .layout__region {
- flex: 1 0 100%;
- margin-block-end: 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-block-end: 0;
+.layout--threecol-section > .layout__region {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
}
-}
+ }
@media (min-width: 62.5rem) {
- .layout--threecol-section > .layout__region--first {
- margin-inline-end: 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-inline: calc(var(--grid-gap) * 0.5);
- }
+ .layout--threecol-section > .layout__region--second {
+ margin-inline: 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 > .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--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/core/themes/olivero/css/layout/layout-builder-twocol-section.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
index 50521de0b4..734e1b142d 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
@@ -16,63 +16,63 @@
}
.layout--twocol-section > .layout__region {
- flex: 1 0 100%;
- margin-block-end: 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-block-end: 0;
+.layout--twocol-section > .layout__region {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
}
-}
+ }
@media (min-width: 43.75rem) {
- .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--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--50-50 > .layout__region--second {
- flex-basis: calc(50% - (var(--grid-gap) * 0.5));
- margin-inline-start: calc(var(--grid-gap) * 0.5);
- }
- .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--50-50 > .layout__region--second {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ .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--33-67 > .layout__region--second {
- flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
- margin-inline-start: calc(var(--grid-gap) * 0.6666);
- }
- .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--33-67 > .layout__region--second {
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-start: calc(var(--grid-gap) * 0.6666);
+ }
+ .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--67-33 > .layout__region--second {
- flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
- margin-inline-start: calc(var(--grid-gap) * 0.3333);
- }
- .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--67-33 > .layout__region--second {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-start: calc(var(--grid-gap) * 0.3333);
+ }
+ .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));
- 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));
- margin-inline-end: 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));
+ margin-inline-end: calc(var(--grid-gap) * 0.75);
+ }
- .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));
+ margin-inline-start: calc(var(--grid-gap) * 0.25);
+ }
}
diff --git a/core/themes/olivero/css/layout/layout-content-medium.css b/core/themes/olivero/css/layout/layout-content-medium.css
index c99f2d9d25..afdddbc000 100644
--- a/core/themes/olivero/css/layout/layout-content-medium.css
+++ b/core/themes/olivero/css/layout/layout-content-medium.css
@@ -18,19 +18,19 @@
@media (min-width: 43.75rem) {
- .layout--content-medium,
- .layout--pass--content-medium > * {
+.layout--content-medium,
+.layout--pass--content-medium > * {
grid-column: 2 / 14;
- }
}
+ }
@media (min-width: 62.5rem) {
- .layout--content-medium,
- .layout--pass--content-medium > * {
+.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
@@ -40,20 +40,20 @@
@media (min-width: 43.75rem) {
- .layout--pass--content-medium > * .layout--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 > * {
- 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--content-medium,
.layout--content-medium .layout--content-medium,
.layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--content-medium .layout--pass--content-medium > * {
- grid-column: 1 / 11;
+ grid-column: 1 / 11;
}
-}
+ }
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.css b/core/themes/olivero/css/layout/layout-content-narrow.css
index 279adb3afd..9fd1bf739d 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.css
@@ -18,19 +18,19 @@
@media (min-width: 43.75rem) {
- .layout--content-narrow,
- .layout--pass--content-narrow > * {
+.layout--content-narrow,
+.layout--pass--content-narrow > * {
grid-column: 2 / 14;
- }
}
+ }
@media (min-width: 62.5rem) {
- .layout--content-narrow,
- .layout--pass--content-narrow > * {
+.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
@@ -43,7 +43,7 @@
@media (min-width: 43.75rem) {
- .layout--content-narrow .layout--content-narrow,
+.layout--content-narrow .layout--content-narrow,
.layout--pass--content-narrow > * .layout--content-narrow,
.layout--content-medium .layout--content-narrow,
.layout--pass--content-medium > * .layout--content-narrow,
@@ -51,13 +51,13 @@
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
- grid-column: 1 / 13;
+ grid-column: 1 / 13;
}
-}
+ }
@media (min-width: 62.5rem) {
- .layout--content-narrow .layout--content-narrow,
+.layout--content-narrow .layout--content-narrow,
.layout--pass--content-narrow > * .layout--content-narrow,
.layout--content-medium .layout--content-narrow,
.layout--pass--content-medium > * .layout--content-narrow,
@@ -65,9 +65,9 @@
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
- grid-column: 1 / 9;
+ grid-column: 1 / 9;
}
-}
+ }
/*
Special grid-breaking treatment for text-content elements that
@@ -76,59 +76,44 @@
@media (min-width: 43.75rem) {
- .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)));
- }
-}
+.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)));
+ }
+ }
@media (min-width: 43.75rem) {
- .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;
- }
-}
+.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;
+ }
+ }
@media (min-width: 43.75rem) {
- .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--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;
+ }
+ }
@media (min-width: 43.75rem) {
- .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);
- }
-}
+.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);
+ }
+ }
@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--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)));
+ }
+ }
/**
* and elements should not break containers and overflow
@@ -136,12 +121,12 @@
*/
.sidebar-grid .layout--content-narrow.text-content blockquote,
-.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;
-}
+ .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/core/themes/olivero/css/layout/layout-discovery-section-layout.css b/core/themes/olivero/css/layout/layout-discovery-section-layout.css
index 384deb4f44..59fc6015c7 100644
--- a/core/themes/olivero/css/layout/layout-discovery-section-layout.css
+++ b/core/themes/olivero/css/layout/layout-discovery-section-layout.css
@@ -16,14 +16,14 @@
@media (min-width: 43.75rem) {
- .layout {
+.layout {
margin-block-end: var(--sp2);
- }
}
+ }
@media (min-width: 62.5rem) {
- .layout {
+.layout {
margin-block-end: var(--sp3);
- }
}
+ }
diff --git a/core/themes/olivero/css/layout/layout-footer.css b/core/themes/olivero/css/layout/layout-footer.css
index 942f970b62..3290214b6a 100644
--- a/core/themes/olivero/css/layout/layout-footer.css
+++ b/core/themes/olivero/css/layout/layout-footer.css
@@ -26,35 +26,32 @@
@media (min-width: 75rem) {
- .site-footer__inner {
+.site-footer__inner {
padding-block: var(--sp4) calc(13 * var(--sp));
- }
}
+ }
-.region--footer_top__inner > *,
-.region--footer_bottom__inner > * {
- margin-block-end: 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-block-end: 0;
+.region--footer_top__inner > *, .region--footer_bottom__inner > * {
+ flex: 1;
+ margin-block-end: 0;
}
- .region--footer_top__inner > *:not(:last-child),
- .region--footer_bottom__inner > *:not(:last-child) {
- margin-inline-end: 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;
- }
}
+ }
diff --git a/core/themes/olivero/css/layout/layout-sidebar.css b/core/themes/olivero/css/layout/layout-sidebar.css
index c033ceeb72..bab3c45159 100644
--- a/core/themes/olivero/css/layout/layout-sidebar.css
+++ b/core/themes/olivero/css/layout/layout-sidebar.css
@@ -11,53 +11,53 @@
*/
.sidebar-grid > .site-main {
- 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 {
- grid-column: 1 / 15;
+.sidebar-grid > .site-main {
+ grid-column: 1 / 15;
}
-}
+ }
@media (min-width: 62.5rem) {
- .sidebar-grid > .site-main {
- display: grid;
- grid-template-columns: repeat(8, minmax(0, 1fr));
- 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 {
- grid-template-columns: repeat(8, minmax(0, 1fr));
- 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 > * {
- 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 {
- grid-column: 1 / 7;
-}
+ grid-column: 1 / 7;
+ }
@media (min-width: 43.75rem) {
- .sidebar-grid .region--sidebar {
- grid-column: 3 / 13;
+.sidebar-grid .region--sidebar {
+ grid-column: 3 / 13;
}
-}
+ }
@media (min-width: 62.5rem) {
- .sidebar-grid .region--sidebar {
- grid-column: 12 / 15;
+.sidebar-grid .region--sidebar {
+ grid-column: 12 / 15;
}
-}
+ }
diff --git a/core/themes/olivero/css/layout/layout-views-grid.css b/core/themes/olivero/css/layout/layout-views-grid.css
index 42c5c2ae63..4091a52547 100644
--- a/core/themes/olivero/css/layout/layout-views-grid.css
+++ b/core/themes/olivero/css/layout/layout-views-grid.css
@@ -41,7 +41,7 @@
}
.views-view-grid--vertical .views-view-grid__item > * {
- padding-block-end: 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/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css
index 81019972b1..6a3d02b44a 100644
--- a/core/themes/olivero/css/layout/layout.css
+++ b/core/themes/olivero/css/layout/layout.css
@@ -21,7 +21,7 @@
}
body.is-fixed .container {
- width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+ width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
}
.page-wrapper {
@@ -43,20 +43,20 @@ body.is-fixed .container {
@media (min-width: 75rem) {
- .layout-main {
+.layout-main {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
- }
}
+ }
@media (min-width: 75rem) {
- .main-content {
+.main-content {
width: calc(100% - var(--content-left));
margin-inline-end: auto;
- }
}
+ }
.main-content__container {
padding-block-start: var(--sp3);
@@ -64,7 +64,7 @@ body.is-fixed .container {
@media (min-width: 43.75rem) {
- .main-content__container {
+.main-content__container {
padding-block-start: var(--sp5);
- }
}
+ }
diff --git a/core/themes/olivero/css/layout/region-content-below.css b/core/themes/olivero/css/layout/region-content-below.css
index ee0321852c..efe77fbe7c 100644
--- a/core/themes/olivero/css/layout/region-content-below.css
+++ b/core/themes/olivero/css/layout/region-content-below.css
@@ -12,36 +12,36 @@
@media (min-width: 43.75rem) {
- .region--content-below {
+.region--content-below {
display: flex;
flex-wrap: wrap;
- }
-
- .region--content-below > * {
- flex-basis: calc(50% - (var(--grid-gap) / 2));
- flex-grow: 1;
- flex-shrink: 0;
- margin-inline-end: var(--grid-gap);
- }
-
- .region--content-below > *:nth-child(2n),
- .region--content-below > *:last-child {
- margin-inline-end: 0;
- }
}
-@media (min-width: 43.75rem) {
- .region--content-below > * {
- flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
- }
-
- .region--content-below > *:nth-child(2n),
- .region--content-below > *:last-child {
- margin-inline-end: var(--grid-gap);
+ .region--content-below > * {
+ flex-basis: calc(50% - (var(--grid-gap) / 2));
+ flex-grow: 1;
+ flex-shrink: 0;
+ margin-inline-end: var(--grid-gap);
+ }
+
+ .region--content-below > *:nth-child(2n),
+ .region--content-below > *:last-child {
+ margin-inline-end: 0;
+ }
}
- .region--content-below > *:nth-child(3n),
- .region--content-below > *:last-child {
- margin-inline-end: 0;
+@media (min-width: 43.75rem) {
+ .region--content-below > * {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+ }
+
+ .region--content-below > *:nth-child(2n),
+ .region--content-below > *:last-child {
+ margin-inline-end: var(--grid-gap);
+ }
+
+ .region--content-below > *:nth-child(3n),
+ .region--content-below > *:last-child {
+ margin-inline-end: 0;
+ }
}
-}
diff --git a/core/themes/olivero/css/layout/region-content.css b/core/themes/olivero/css/layout/region-content.css
index 330cff5bf0..eafb3560fd 100644
--- a/core/themes/olivero/css/layout/region-content.css
+++ b/core/themes/olivero/css/layout/region-content.css
@@ -16,14 +16,14 @@
@media (min-width: 43.75rem) {
- .region--content {
+.region--content {
margin-block-end: var(--sp2);
- }
}
+ }
@media (min-width: 62.5rem) {
- .region--content {
+.region--content {
margin-block-end: var(--sp3);
- }
}
+ }
diff --git a/core/themes/olivero/css/layout/region-hero.css b/core/themes/olivero/css/layout/region-hero.css
index f739ad92bb..d1ddf0d7ec 100644
--- a/core/themes/olivero/css/layout/region-hero.css
+++ b/core/themes/olivero/css/layout/region-hero.css
@@ -11,5 +11,5 @@
*/
.region--hero > *:last-child {
- margin-block-end: 0;
-}
+ margin-block-end: 0;
+ }
diff --git a/core/themes/olivero/css/layout/region-secondary-menu.css b/core/themes/olivero/css/layout/region-secondary-menu.css
index 31d3cd4ee9..e62300669c 100644
--- a/core/themes/olivero/css/layout/region-secondary-menu.css
+++ b/core/themes/olivero/css/layout/region-secondary-menu.css
@@ -17,17 +17,17 @@
}
.region--secondary-menu > * {
- margin-block-end: 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. */
+ /* 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;
+ }
}
- body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav:before {
- content: none;
- }
-}
diff --git a/core/themes/olivero/css/layout/region.css b/core/themes/olivero/css/layout/region.css
index 1caee89f53..17dd87cda3 100644
--- a/core/themes/olivero/css/layout/region.css
+++ b/core/themes/olivero/css/layout/region.css
@@ -16,14 +16,14 @@
@media (min-width: 43.75rem) {
- .region > * {
+.region > * {
margin-block-end: var(--sp2);
- }
}
+ }
@media (min-width: 62.5rem) {
- .region > * {
+.region > * {
margin-block-end: var(--sp3);
- }
}
+ }
diff --git a/core/themes/olivero/css/layout/social-bar.css b/core/themes/olivero/css/layout/social-bar.css
index 4d97c9dd02..a6bf82c75d 100644
--- a/core/themes/olivero/css/layout/social-bar.css
+++ b/core/themes/olivero/css/layout/social-bar.css
@@ -13,12 +13,12 @@
@media (min-width: 75rem) {
- .social-bar {
+.social-bar {
flex-shrink: 0;
width: var(--content-left);
background-color: var(--color--gray-100);
- }
}
+ }
.social-bar__inner {
position: relative;
@@ -29,51 +29,51 @@
@media (min-width: 75rem) {
- .social-bar__inner {
+.social-bar__inner {
position: relative;
width: var(--content-left);
padding-block: calc(5 * var(--sp));
padding-inline-start: 0;
padding-inline-end: 0;
- }
+}
- .social-bar__inner.is-fixed {
- position: fixed;
- inset-block-start: var(--sp6);
- inset-inline-start: 0;
- height: calc(100vh - 6 * var(--sp));
+ .social-bar__inner.is-fixed {
+ position: fixed;
+ inset-block-start: var(--sp6);
+ inset-inline-start: 0;
+ height: calc(100vh - 6 * var(--sp));
+ }
}
-}
.rotate > * {
- margin-block-end: var(--sp2);
-}
+ margin-block-end: var(--sp2);
+ }
@media (min-width: 75rem) {
- .rotate > * {
- display: flex;
- align-items: center;
- margin-block-end: 0;
+.rotate > * {
+ display: flex;
+ align-items: center;
+ margin-block-end: 0;
}
- .rotate > *:not(:first-child) {
- margin-inline-end: var(--sp2);
- }
-}
+ .rotate > *:not(:first-child) {
+ margin-inline-end: var(--sp2);
+ }
+ }
@media (min-width: 75rem) {
- .rotate .contextual {
- inset-inline: 100% auto;
- transform: rotate(90deg); /* LTR */
- transform-origin: top left; /* LTR */
+.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.
@@ -81,15 +81,15 @@
* @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;
- }
-}
+ }
+ [dir="rtl"] .rotate .contextual .trigger {
+ float: right;
+ }
+ }
@media (min-width: 75rem) {
- .rotate {
+.rotate {
position: absolute;
inset-inline-start: 50%;
display: flex;
@@ -97,24 +97,24 @@
width: 100vh;
transform: rotate(-90deg) translateX(-100%); /* LTR */
transform-origin: left; /* LTR */
- }
+}
- @supports (width: max-content) {
+ @supports (width: max-content) {
- .rotate {
+.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/core/themes/olivero/css/layout/views.css b/core/themes/olivero/css/layout/views.css
index a9544b32ab..295552c231 100644
--- a/core/themes/olivero/css/layout/views.css
+++ b/core/themes/olivero/css/layout/views.css
@@ -11,16 +11,16 @@
*/
.view > * {
- margin-block-end: var(--sp2);
-}
+ margin-block-end: var(--sp2);
+ }
.view > *:last-child {
- margin-block-end: 0;
-}
+ margin-block-end: 0;
+ }
@media (min-width: 43.75rem) {
- .view > * {
- margin-block-end: var(--sp3);
+.view > * {
+ margin-block-end: var(--sp3);
}
-}
+ }
diff --git a/core/themes/olivero/css/theme/filter.theme.css b/core/themes/olivero/css/theme/filter.theme.css
index ac53a010e2..30769ddfa5 100644
--- a/core/themes/olivero/css/theme/filter.theme.css
+++ b/core/themes/olivero/css/theme/filter.theme.css
@@ -46,8 +46,8 @@
}
[dir="rtl"] .filter-help {
- float: left;
-}
+ float: left;
+ }
/**
* Compose tips.