Issue #3261163 by bnjmnm, Spokje, longwave, nod_: Update to PostCSS 8

(cherry picked from commit dd692fba6d)
merge-requests/1766/head^2
catch 2022-09-13 11:31:51 +01:00
parent 21219666eb
commit 01d22dc270
102 changed files with 1535 additions and 1948 deletions

View File

@ -29,7 +29,7 @@
padding: 0 var(--off-canvas-padding) var(--off-canvas-padding); padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
color: var(--off-canvas-text-color); color: var(--off-canvas-text-color);
background-color: var(--off-canvas-background-color); background-color: var(--off-canvas-background-color);
font-family: var(--off-canvas-font-family) font-family: var(--off-canvas-font-family);
} }
#drupal-off-canvas-wrapper *:focus { #drupal-off-canvas-wrapper *:focus {
@ -92,7 +92,7 @@
#drupal-off-canvas-wrapper .links { #drupal-off-canvas-wrapper .links {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none list-style: none;
} }
#drupal-off-canvas-wrapper .links li { #drupal-off-canvas-wrapper .links li {

View File

@ -23,7 +23,7 @@
--off-canvas-primary-button-background-color: #277abd; --off-canvas-primary-button-background-color: #277abd;
--off-canvas-primary-button-background-color-hover: #236aaf; --off-canvas-primary-button-background-color-hover: #236aaf;
--off-canvas-primary-button-text-color: #fff; --off-canvas-primary-button-text-color: #fff;
--off-canvas-primary-button-text-color-hover: #fff --off-canvas-primary-button-text-color-hover: #fff;
} }
#drupal-off-canvas-wrapper .button { #drupal-off-canvas-wrapper .button {
display: inline-block; display: inline-block;
@ -43,7 +43,7 @@
font-weight: var(--off-canvas-button-font-weight); font-weight: var(--off-canvas-button-font-weight);
line-height: normal; line-height: normal;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
#drupal-off-canvas-wrapper .button:hover, #drupal-off-canvas-wrapper .button:hover,
#drupal-off-canvas-wrapper .button:active { #drupal-off-canvas-wrapper .button:active {
@ -64,7 +64,7 @@
#drupal-off-canvas-wrapper .button--primary { #drupal-off-canvas-wrapper .button--primary {
margin-top: 0.9375rem; margin-top: 0.9375rem;
color: var(--off-canvas-primary-button-text-color); color: var(--off-canvas-primary-button-text-color);
background: var(--off-canvas-primary-button-background-color) background: var(--off-canvas-primary-button-background-color);
} }
#drupal-off-canvas-wrapper .button--primary:hover, #drupal-off-canvas-wrapper .button--primary:hover,
#drupal-off-canvas-wrapper .button--primary:active { #drupal-off-canvas-wrapper .button--primary:active {
@ -77,7 +77,7 @@
color: var(--off-canvas-link-color); color: var(--off-canvas-link-color);
border: 0; border: 0;
background: transparent; background: transparent;
font-size: var(--off-canvas-button-font-size) font-size: var(--off-canvas-button-font-size);
} }
#drupal-off-canvas-wrapper button.link:hover, #drupal-off-canvas-wrapper button.link:hover,
#drupal-off-canvas-wrapper button.link:focus { #drupal-off-canvas-wrapper button.link:focus {
@ -88,7 +88,7 @@
text-decoration: none; text-decoration: none;
color: #c72100; color: #c72100;
border-radius: 0; border-radius: 0;
font-weight: 400 font-weight: 400;
} }
#drupal-off-canvas-wrapper .button--danger:hover, #drupal-off-canvas-wrapper .button--danger:hover,
#drupal-off-canvas-wrapper .button--danger:focus, #drupal-off-canvas-wrapper .button--danger:focus,
@ -104,5 +104,5 @@
} }
.no-touchevents #drupal-off-canvas-wrapper .button--small { .no-touchevents #drupal-off-canvas-wrapper .button--small {
padding: 2px 1em; padding: 2px 1em;
font-size: 0.8125rem font-size: 0.8125rem;
} }

View File

@ -23,7 +23,7 @@
--off-canvas-details-summary-background-color: #333; --off-canvas-details-summary-background-color: #333;
--off-canvas-details-summary-background-color-hover: #222; --off-canvas-details-summary-background-color-hover: #222;
--off-canvas-details-summary-text-color: #eee; --off-canvas-details-summary-text-color: #eee;
--off-canvas-details-summary-text-color-hover: #fff --off-canvas-details-summary-text-color-hover: #fff;
} }
#drupal-off-canvas-wrapper details { #drupal-off-canvas-wrapper details {
@ -31,10 +31,10 @@
padding: 0 var(--off-canvas-padding); padding: 0 var(--off-canvas-padding);
color: var(--off-canvas-details-text-color); color: var(--off-canvas-details-text-color);
border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width); border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
background: var(--off-canvas-details-background-color) background: var(--off-canvas-details-background-color);
} }
#drupal-off-canvas-wrapper details + details { :is(#drupal-off-canvas-wrapper details) + details {
margin-top: calc(-1 * var(--off-canvas-details-border-width)); margin-top: calc(-1 * var(--off-canvas-details-border-width));
} }
@ -44,7 +44,7 @@
color: var(--off-canvas-details-summary-text-color); color: var(--off-canvas-details-summary-text-color);
border: var(--off-canvas-details-summary-border); border: var(--off-canvas-details-summary-border);
background-color: var(--off-canvas-details-summary-background-color); background-color: var(--off-canvas-details-summary-background-color);
font-size: var(--off-canvas-details-summary-font-size) font-size: var(--off-canvas-details-summary-font-size);
} }
#drupal-off-canvas-wrapper summary:hover { #drupal-off-canvas-wrapper summary:hover {
@ -59,7 +59,7 @@
#drupal-off-canvas-wrapper summary { #drupal-off-canvas-wrapper summary {
a { a {
color: var(--off-canvas-details-text-color) color: var(--off-canvas-details-text-color);
} }
a:hover { a:hover {

View File

@ -20,11 +20,11 @@
--off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color); --off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
--off-canvas-dropbutton-font-size: 0.75rem; --off-canvas-dropbutton-font-size: 0.75rem;
--off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */ --off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
--off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover) /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */ --off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
} }
#drupal-off-canvas-wrapper .dropbutton-wrapper { #drupal-off-canvas-wrapper .dropbutton-wrapper {
margin-top: var(--off-canvas-vertical-spacing-unit); margin-top: var(--off-canvas-vertical-spacing-unit);
margin-bottom: var(--off-canvas-vertical-spacing-unit) margin-bottom: var(--off-canvas-vertical-spacing-unit);
/* /*
* Styles for when the dropbutton is expanded. * Styles for when the dropbutton is expanded.
@ -32,7 +32,7 @@
} }
#drupal-off-canvas-wrapper .dropbutton-wrapper.open { #drupal-off-canvas-wrapper .dropbutton-wrapper.open {
position: relative; position: relative;
z-index: 100 z-index: 100;
} }
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .secondary-action { #drupal-off-canvas-wrapper .dropbutton-wrapper.open .secondary-action {
visibility: visible; visibility: visible;
@ -43,21 +43,18 @@
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-toggle button:before { #drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-toggle button:before {
transform: translateY(25%) rotate(225deg); transform: translateY(25%) rotate(225deg);
} }
#drupal-off-canvas-wrapper .dropbutton-wrapper { /*
/*
* Styles for single link variant of dropbutton. * Styles for single link variant of dropbutton.
*/ */
}
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget { [dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
padding-left: 0 padding-left: 0;
} }
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child { #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */ border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */
border-radius: var(--off-canvas-dropbutton-border-radius) border-radius: var(--off-canvas-dropbutton-border-radius);
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
border: solid 1px var(--off-canvas-dropbutton-border-color); border: solid 1px var(--off-canvas-dropbutton-border-color);
@ -66,10 +63,10 @@
justify-content: center; justify-content: center;
} }
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-widget { [dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-widget {
padding-right: var(--off-canvas-dropbutton-height) padding-right: var(--off-canvas-dropbutton-height);
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-widget { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-widget {
padding-left: var(--off-canvas-dropbutton-height) padding-left: var(--off-canvas-dropbutton-height);
} }
#drupal-off-canvas-wrapper .dropbutton-widget { #drupal-off-canvas-wrapper .dropbutton-widget {
position: relative; position: relative;
@ -79,16 +76,16 @@
border-radius: var(--off-canvas-dropbutton-border-radius); border-radius: var(--off-canvas-dropbutton-border-radius);
} }
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton { [dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton { [dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
padding-right: 0 padding-right: 0;
} }
#drupal-off-canvas-wrapper .dropbutton { #drupal-off-canvas-wrapper .dropbutton {
height: var(--off-canvas-dropbutton-height); height: var(--off-canvas-dropbutton-height);
@ -97,19 +94,16 @@
list-style: none; list-style: none;
font-size: var(--off-canvas-dropbutton-font-size); font-size: var(--off-canvas-dropbutton-font-size);
} }
#drupal-off-canvas-wrapper { /* This is the button that expands/collapses the secondary options. */
/* This is the button that expands/collapses the secondary options. */
}
#drupal-off-canvas-wrapper .dropbutton-toggle { #drupal-off-canvas-wrapper .dropbutton-toggle {
padding: 0; padding: 0;
border: 0 border: 0;
} }
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-toggle button { [dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
right: 0 right: 0;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
left: 0 left: 0;
} }
#drupal-off-canvas-wrapper .dropbutton-toggle button { #drupal-off-canvas-wrapper .dropbutton-toggle button {
position: absolute; position: absolute;
@ -123,7 +117,7 @@
cursor: pointer; cursor: pointer;
border-color: var(--off-canvas-dropbutton-border-color); border-color: var(--off-canvas-dropbutton-border-color);
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
background: var(--off-canvas-dropbutton-primary-background-color) background: var(--off-canvas-dropbutton-primary-background-color);
} }
#drupal-off-canvas-wrapper .dropbutton-toggle button:focus { #drupal-off-canvas-wrapper .dropbutton-toggle button:focus {
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color); outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
@ -141,20 +135,17 @@
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
} }
#drupal-off-canvas-wrapper { /* This is the first <li> element in the list of actions. */
/* This is the first <li> element in the list of actions. */
}
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-action:first-child { [dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
margin-right: 2px margin-right: 2px;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
margin-left: 2px margin-left: 2px;
} }
#drupal-off-canvas-wrapper .dropbutton-action:first-child { #drupal-off-canvas-wrapper .dropbutton-action:first-child {
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color); border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */ border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */
background: var(--off-canvas-dropbutton-primary-background-color) background: var(--off-canvas-dropbutton-primary-background-color);
} }
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child { [dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color); border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
@ -168,7 +159,7 @@
padding: 0 0.5625rem; padding: 0 0.5625rem;
text-decoration: none; text-decoration: none;
color: var(--off-canvas-dropbutton-text-color); color: var(--off-canvas-dropbutton-text-color);
font-weight: 600 font-weight: 600;
} }
#drupal-off-canvas-wrapper .dropbutton-action a:hover { #drupal-off-canvas-wrapper .dropbutton-action a:hover {
color: var(--off-canvas-dropbutton-text-color); color: var(--off-canvas-dropbutton-text-color);
@ -177,17 +168,14 @@
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color); outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
outline-offset: -1px; /* Overlap parent container by 1px. */ outline-offset: -1px; /* Overlap parent container by 1px. */
} }
#drupal-off-canvas-wrapper { /* These are the <li> elements other than the first. */
/* These are the <li> elements other than the first. */
}
#drupal-off-canvas-wrapper .secondary-action { #drupal-off-canvas-wrapper .secondary-action {
visibility: hidden; visibility: hidden;
width: calc(100% + var(--off-canvas-dropbutton-height)); width: calc(100% + var(--off-canvas-dropbutton-height));
margin-top: var(--off-canvas-dropbutton-border-width); margin-top: var(--off-canvas-dropbutton-border-width);
border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color); border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color); border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
background-color: var(--off-canvas-dropbutton-primary-background-color) background-color: var(--off-canvas-dropbutton-primary-background-color);
} }
#drupal-off-canvas-wrapper .secondary-action:last-child { #drupal-off-canvas-wrapper .secondary-action:last-child {
border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color); border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);

View File

@ -21,12 +21,12 @@
--drupal-off-canvas-input-text-color: #333; --drupal-off-canvas-input-text-color: #333;
--drupal-off-canvas-fieldset-background-color: transparent; --drupal-off-canvas-fieldset-background-color: transparent;
--drupal-off-canvas-fieldset-border-width: 1px; --drupal-off-canvas-fieldset-border-width: 1px;
--drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color) --drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color);
} }
#drupal-off-canvas-wrapper form { #drupal-off-canvas-wrapper form {
padding-top: var(--off-canvas-padding); padding-top: var(--off-canvas-padding);
padding-bottom: var(--off-canvas-padding) padding-bottom: var(--off-canvas-padding);
} }
#drupal-off-canvas-wrapper form > *:first-child { #drupal-off-canvas-wrapper form > *:first-child {
@ -78,10 +78,7 @@
font-weight: bold; font-weight: bold;
} }
#drupal-off-canvas-wrapper { /* Bartik uses the .field-multiple-table CSS class on its tabledrag tables. */
/* Bartik uses the .field-multiple-table CSS class on its tabledrag tables. */
}
#drupal-off-canvas-wrapper :is(.fieldset, fieldset, .draggable-table, .field-multiple-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) { #drupal-off-canvas-wrapper :is(.fieldset, fieldset, .draggable-table, .field-multiple-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */ width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
@ -102,7 +99,7 @@
font-size: var(--drupal-off-canvas-input-font-size); font-size: var(--drupal-off-canvas-input-font-size);
} }
#drupal-off-canvas-wrapper input[type="checkbox"] + label, #drupal-off-canvas-wrapper input[type="radio"] + label { :is(#drupal-off-canvas-wrapper input[type="checkbox"]) + label, :is(#drupal-off-canvas-wrapper input[type="radio"]) + label {
display: inline; display: inline;
} }
@ -116,11 +113,11 @@
} }
[dir="ltr"] #drupal-off-canvas-wrapper select { [dir="ltr"] #drupal-off-canvas-wrapper select {
padding-right: 1.25rem padding-right: 1.25rem;
} }
[dir="rtl"] #drupal-off-canvas-wrapper select { [dir="rtl"] #drupal-off-canvas-wrapper select {
padding-left: 1.25rem padding-left: 1.25rem;
} }
#drupal-off-canvas-wrapper select { #drupal-off-canvas-wrapper select {
@ -131,7 +128,7 @@
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right 5px; /* LTR */ background-position: center right 5px; /* LTR */
background-size: 0.75rem background-size: 0.75rem;
} }
[dir="rtl"] #drupal-off-canvas-wrapper select { [dir="rtl"] #drupal-off-canvas-wrapper select {
@ -141,39 +138,36 @@
@media (forced-colors: active) { @media (forced-colors: active) {
[dir="ltr"] #drupal-off-canvas-wrapper select { [dir="ltr"] #drupal-off-canvas-wrapper select {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] #drupal-off-canvas-wrapper select { [dir="rtl"] #drupal-off-canvas-wrapper select {
padding-left: 0 padding-left: 0;
} }
#drupal-off-canvas-wrapper select { #drupal-off-canvas-wrapper select {
-webkit-appearance: revert; -webkit-appearance: revert;
appearance: revert; appearance: revert;
background: revert background: revert;
} }
} }
#drupal-off-canvas-wrapper { /*
/*
* Autocomplete. * Autocomplete.
*/ */
}
[dir="ltr"] #drupal-off-canvas-wrapper .form-autocomplete { [dir="ltr"] #drupal-off-canvas-wrapper .form-autocomplete {
padding-right: 2.5rem padding-right: 2.5rem;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete { [dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete {
padding-left: 2.5rem padding-left: 2.5rem;
} }
#drupal-off-canvas-wrapper .form-autocomplete { /* Room for icon. */ #drupal-off-canvas-wrapper .form-autocomplete { /* Room for icon. */
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right 1px /* LTR */ background-position: center right 1px; /* LTR */
} }
#drupal-off-canvas-wrapper .form-autocomplete.ui-autocomplete-loading { #drupal-off-canvas-wrapper .form-autocomplete.ui-autocomplete-loading {
@ -184,10 +178,7 @@
background-position: center left 1px; background-position: center left 1px;
} }
#drupal-off-canvas-wrapper { /* This is the background <ul> for the autocomplete dropdown. */
/* This is the background <ul> for the autocomplete dropdown. */
}
#drupal-off-canvas-wrapper .ui-autocomplete { #drupal-off-canvas-wrapper .ui-autocomplete {
margin: 0; margin: 0;
@ -195,7 +186,7 @@
list-style: none; list-style: none;
border: var(--drupal-off-canvas-input-border); border: var(--drupal-off-canvas-input-border);
background-color: var(--drupal-off-canvas-input-background-color); background-color: var(--drupal-off-canvas-input-background-color);
box-shadow: 0 1px 1px 0 var(--off-canvas-background-color) /* Ensure edge is visible if appearing over another form element. */ box-shadow: 0 1px 1px 0 var(--off-canvas-background-color); /* Ensure edge is visible if appearing over another form element. */
} }
#drupal-off-canvas-wrapper .ui-autocomplete a { #drupal-off-canvas-wrapper .ui-autocomplete a {
@ -203,7 +194,7 @@
padding: var(--drupal-off-canvas-input-padding); padding: var(--drupal-off-canvas-input-padding);
cursor: pointer; cursor: pointer;
color: var(--drupal-off-canvas-input-text-color); color: var(--drupal-off-canvas-input-text-color);
font-size: var(--drupal-off-canvas-input-font-size) font-size: var(--drupal-off-canvas-input-font-size);
} }
#drupal-off-canvas-wrapper .ui-autocomplete a:hover { #drupal-off-canvas-wrapper .ui-autocomplete a:hover {
@ -216,13 +207,10 @@
outline-offset: -2px; outline-offset: -2px;
} }
#drupal-off-canvas-wrapper { /*
/*
* Claro injects a "Loading" autocomplete message that affects the positioning * Claro injects a "Loading" autocomplete message that affects the positioning
* of the ui-autocomplete dropdown. We remove this to normalize the markup. * of the ui-autocomplete dropdown. We remove this to normalize the markup.
*/ */
}
#drupal-off-canvas-wrapper .claro-autocomplete__message { #drupal-off-canvas-wrapper .claro-autocomplete__message {
display: none; display: none;

View File

@ -20,15 +20,15 @@
--off-canvas-messages-text-color-error: #a51b00; --off-canvas-messages-text-color-error: #a51b00;
--off-canvas-messages-icon-status: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e"); --off-canvas-messages-icon-status: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");
--off-canvas-messages-icon-warning: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e"); --off-canvas-messages-icon-warning: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");
--off-canvas-messages-icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e") --off-canvas-messages-icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
} }
[dir="ltr"] #drupal-off-canvas-wrapper .messages { [dir="ltr"] #drupal-off-canvas-wrapper .messages {
padding-left: calc(2 * var(--off-canvas-messages-icon-size)) padding-left: calc(2 * var(--off-canvas-messages-icon-size));
} }
[dir="rtl"] #drupal-off-canvas-wrapper .messages { [dir="rtl"] #drupal-off-canvas-wrapper .messages {
padding-right: calc(2 * var(--off-canvas-messages-icon-size)) padding-right: calc(2 * var(--off-canvas-messages-icon-size));
} }
#drupal-off-canvas-wrapper .messages { #drupal-off-canvas-wrapper .messages {
@ -36,17 +36,17 @@
margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit)); margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
padding: calc(2 * var(--off-canvas-vertical-spacing-unit)); /* Room for icon. */ padding: calc(2 * var(--off-canvas-vertical-spacing-unit)); /* Room for icon. */
border: solid 1px transparent; border: solid 1px transparent;
background-color: var(--off-canvas-messages-background-color) background-color: var(--off-canvas-messages-background-color);
/* Icon. */ /* Icon. */
} }
[dir="ltr"] #drupal-off-canvas-wrapper .messages:before { [dir="ltr"] #drupal-off-canvas-wrapper .messages:before {
left: 0.625rem left: 0.625rem;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .messages:before { [dir="rtl"] #drupal-off-canvas-wrapper .messages:before {
right: 0.625rem right: 0.625rem;
} }
#drupal-off-canvas-wrapper .messages:before { #drupal-off-canvas-wrapper .messages:before {
@ -58,7 +58,7 @@
content: ""; content: "";
transform: translateY(-50%); transform: translateY(-50%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain background-size: contain;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -68,7 +68,7 @@
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; -webkit-mask-size: contain;
mask-size: contain mask-size: contain;
} }
} }
@ -76,13 +76,10 @@
margin-top: 0; margin-top: 0;
} }
#drupal-off-canvas-wrapper { /*
/*
* Some themes (Olivero) insert SVG icon. We use a background icon, so we * Some themes (Olivero) insert SVG icon. We use a background icon, so we
* need to remove this. * need to remove this.
*/ */
}
#drupal-off-canvas-wrapper .messages__icon, #drupal-off-canvas-wrapper .messages__icon,
#drupal-off-canvas-wrapper .messages__close { #drupal-off-canvas-wrapper .messages__close {
@ -90,11 +87,11 @@
} }
[dir="ltr"] #drupal-off-canvas-wrapper .messages__list { [dir="ltr"] #drupal-off-canvas-wrapper .messages__list {
padding-left: 1.25rem padding-left: 1.25rem;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .messages__list { [dir="rtl"] #drupal-off-canvas-wrapper .messages__list {
padding-right: 1.25rem padding-right: 1.25rem;
} }
#drupal-off-canvas-wrapper .messages__list { #drupal-off-canvas-wrapper .messages__list {
@ -106,11 +103,11 @@
} }
#drupal-off-canvas-wrapper .messages--status { #drupal-off-canvas-wrapper .messages--status {
color: var(--off-canvas-messages-text-color-status) color: var(--off-canvas-messages-text-color-status);
} }
#drupal-off-canvas-wrapper .messages--status:before { #drupal-off-canvas-wrapper .messages--status:before {
background-image: var(--off-canvas-messages-icon-status) background-image: var(--off-canvas-messages-icon-status);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -118,16 +115,16 @@
#drupal-off-canvas-wrapper .messages--status:before { #drupal-off-canvas-wrapper .messages--status:before {
background: canvastext; background: canvastext;
-webkit-mask-image: var(--off-canvas-messages-icon-status); -webkit-mask-image: var(--off-canvas-messages-icon-status);
mask-image: var(--off-canvas-messages-icon-status) mask-image: var(--off-canvas-messages-icon-status);
} }
} }
#drupal-off-canvas-wrapper .messages--warning { #drupal-off-canvas-wrapper .messages--warning {
color: var(--off-canvas-messages-text-color-warning) color: var(--off-canvas-messages-text-color-warning);
} }
#drupal-off-canvas-wrapper .messages--warning:before { #drupal-off-canvas-wrapper .messages--warning:before {
background-image: var(--off-canvas-messages-icon-warning) background-image: var(--off-canvas-messages-icon-warning);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -135,16 +132,16 @@
#drupal-off-canvas-wrapper .messages--warning:before { #drupal-off-canvas-wrapper .messages--warning:before {
background: canvastext; background: canvastext;
-webkit-mask-image: var(--off-canvas-messages-icon-warning); -webkit-mask-image: var(--off-canvas-messages-icon-warning);
mask-image: var(--off-canvas-messages-icon-warning) mask-image: var(--off-canvas-messages-icon-warning);
} }
} }
#drupal-off-canvas-wrapper .messages--error { #drupal-off-canvas-wrapper .messages--error {
color: var(--off-canvas-messages-text-color-error) color: var(--off-canvas-messages-text-color-error);
} }
#drupal-off-canvas-wrapper .messages--error:before { #drupal-off-canvas-wrapper .messages--error:before {
background-image: var(--off-canvas-messages-icon-error) background-image: var(--off-canvas-messages-icon-error);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -152,6 +149,6 @@
#drupal-off-canvas-wrapper .messages--error:before { #drupal-off-canvas-wrapper .messages--error:before {
background: canvastext; background: canvastext;
-webkit-mask-image: var(--off-canvas-messages-icon-error); -webkit-mask-image: var(--off-canvas-messages-icon-error);
mask-image: var(--off-canvas-messages-icon-error) mask-image: var(--off-canvas-messages-icon-error);
} }
} }

View File

@ -16,7 +16,7 @@
all: revert; all: revert;
box-sizing: border-box; box-sizing: border-box;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.4 line-height: 1.4;
} }
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)):after, #drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)):after,

View File

@ -14,7 +14,7 @@
#drupal-off-canvas-wrapper { #drupal-off-canvas-wrapper {
--off-canvas-table-cell-padding: 2px; --off-canvas-table-cell-padding: 2px;
--off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2) --off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2);
} }
#drupal-off-canvas-wrapper table { #drupal-off-canvas-wrapper table {
@ -28,26 +28,26 @@
[dir="ltr"] #drupal-off-canvas-wrapper td,[dir="ltr"] [dir="ltr"] #drupal-off-canvas-wrapper td,[dir="ltr"]
#drupal-off-canvas-wrapper th { #drupal-off-canvas-wrapper th {
text-align: left text-align: left;
} }
[dir="rtl"] #drupal-off-canvas-wrapper td,[dir="rtl"] [dir="rtl"] #drupal-off-canvas-wrapper td,[dir="rtl"]
#drupal-off-canvas-wrapper th { #drupal-off-canvas-wrapper th {
text-align: right text-align: right;
} }
#drupal-off-canvas-wrapper td, #drupal-off-canvas-wrapper td,
#drupal-off-canvas-wrapper th { #drupal-off-canvas-wrapper th {
padding: var(--off-canvas-table-cell-padding); padding: var(--off-canvas-table-cell-padding);
vertical-align: middle vertical-align: middle;
} }
[dir="ltr"] #drupal-off-canvas-wrapper td:first-child,[dir="ltr"] #drupal-off-canvas-wrapper th:first-child { [dir="ltr"] #drupal-off-canvas-wrapper td:first-child,[dir="ltr"] #drupal-off-canvas-wrapper th:first-child {
padding-left: var(--off-canvas-first-cell-padding-start) padding-left: var(--off-canvas-first-cell-padding-start);
} }
[dir="rtl"] #drupal-off-canvas-wrapper td:first-child,[dir="rtl"] #drupal-off-canvas-wrapper th:first-child { [dir="rtl"] #drupal-off-canvas-wrapper td:first-child,[dir="rtl"] #drupal-off-canvas-wrapper th:first-child {
padding-right: var(--off-canvas-first-cell-padding-start) padding-right: var(--off-canvas-first-cell-padding-start);
} }
#drupal-off-canvas-wrapper td:not(:last-child) td, #drupal-off-canvas-wrapper th:not(:last-child) td { #drupal-off-canvas-wrapper td:not(:last-child) td, #drupal-off-canvas-wrapper th:not(:last-child) td {

View File

@ -14,19 +14,14 @@
* @internal * @internal
*/ */
#drupal-off-canvas-wrapper { /* The draggable <tr> element. */
/* The draggable <tr> element. */
}
#drupal-off-canvas-wrapper .draggable:hover, #drupal-off-canvas-wrapper .draggable:hover,
#drupal-off-canvas-wrapper .draggable:focus-within { #drupal-off-canvas-wrapper .draggable:focus-within {
background-color: var(--off-canvas-background-color-light); background-color: var(--off-canvas-background-color-light);
} }
#drupal-off-canvas-wrapper .draggable { /* Appears when the row is being dragged. */
/* Appears when the row is being dragged. */
}
#drupal-off-canvas-wrapper .draggable.drag { #drupal-off-canvas-wrapper .draggable.drag {
cursor: move; cursor: move;
@ -34,7 +29,7 @@
} }
#drupal-off-canvas-wrapper td { #drupal-off-canvas-wrapper td {
transition: background-color 0.3s ease transition: background-color 0.3s ease;
/* We have to horizontally align all descendent nodes including text nodes /* We have to horizontally align all descendent nodes including text nodes
* that do not have wrapper elements. Since we use flex to do this, we need * that do not have wrapper elements. Since we use flex to do this, we need
@ -46,7 +41,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 3.125rem; min-height: 3.125rem;
grid-gap: var(--off-canvas-table-cell-padding); gap: var(--off-canvas-table-cell-padding);
} }
[dir="ltr"] #drupal-off-canvas-wrapper td abbr { [dir="ltr"] #drupal-off-canvas-wrapper td abbr {
@ -64,7 +59,7 @@
} }
#drupal-off-canvas-wrapper .tabledrag-handle { #drupal-off-canvas-wrapper .tabledrag-handle {
flex-shrink: 0 flex-shrink: 0;
} }
#drupal-off-canvas-wrapper .tabledrag-handle:after { #drupal-off-canvas-wrapper .tabledrag-handle:after {
@ -78,7 +73,7 @@
background-color: transparent; background-color: transparent;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center background-position: center;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -90,14 +85,11 @@
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; -webkit-mask-position: center;
mask-position: center mask-position: center;
} }
} }
#drupal-off-canvas-wrapper { /* Make the "row weight" <select> as small as possible. */
/* Make the "row weight" <select> as small as possible. */
}
#drupal-off-canvas-wrapper .tabledrag-hide select { #drupal-off-canvas-wrapper .tabledrag-hide select {
all: revert; all: revert;
@ -125,15 +117,15 @@
} }
.touchevents #drupal-off-canvas-wrapper .draggable td { .touchevents #drupal-off-canvas-wrapper .draggable td {
padding: 0 0.625rem padding: 0 0.625rem;
} }
.touchevents #drupal-off-canvas-wrapper .draggable .menu-item__link { .touchevents #drupal-off-canvas-wrapper .draggable .menu-item__link {
display: inline-block; display: inline-block;
padding: 0.625rem 0 padding: 0.625rem 0;
} }
.touchevents #drupal-off-canvas-wrapper a.tabledrag-handle { .touchevents #drupal-off-canvas-wrapper a.tabledrag-handle {
width: 2.5rem; width: 2.5rem;
height: 2.75rem height: 2.75rem;
} }

View File

@ -23,34 +23,34 @@
vertical-align: middle; vertical-align: middle;
border: 2px solid var(--off-canvas-text-color); border: 2px solid var(--off-canvas-text-color);
border-top-color: transparent; border-top-color: transparent;
border-radius: 50% border-radius: 50%;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
#drupal-off-canvas-wrapper .ajax-progress, #drupal-off-canvas-wrapper .ajax-progress,
#drupal-off-canvas-wrapper .ajax-progress-throbber { #drupal-off-canvas-wrapper .ajax-progress-throbber {
border-top-color: transparent border-top-color: transparent;
} }
} }
[dir="ltr"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="ltr"] [dir="ltr"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="ltr"]
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="ltr"]
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="ltr"] #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="ltr"]
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="ltr"]
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber { #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
right: 0 right: 0;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="rtl"] [dir="rtl"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="rtl"]
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="rtl"]
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="rtl"] #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="rtl"]
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="rtl"]
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber { #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
left: 0 left: 0;
} }
#drupal-off-canvas-wrapper .layout-selection .ajax-progress, #drupal-off-canvas-wrapper .layout-selection .ajax-progress,
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress, #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber { #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -16,7 +16,7 @@
--off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit)); --off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
--off-canvas-title-background-color: #2d2d2d; --off-canvas-title-background-color: #2d2d2d;
--off-canvas-title-text-color: #fff; --off-canvas-title-text-color: #fff;
--off-canvas-title-font-size: 1rem --off-canvas-title-font-size: 1rem;
} }
#drupal-off-canvas-wrapper .ui-dialog-titlebar { #drupal-off-canvas-wrapper .ui-dialog-titlebar {
@ -27,17 +27,17 @@
background-color: var(--off-canvas-title-background-color); background-color: var(--off-canvas-title-background-color);
font-family: var(--off-canvas-title-font-family); font-family: var(--off-canvas-title-font-family);
font-size: var(--off-canvas-title-font-size); font-size: var(--off-canvas-title-font-size);
font-weight: bold font-weight: bold;
/* The pencil icon. */ /* The pencil icon. */
} }
[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before { [dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
left: 1em left: 1em;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before { [dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
right: 1em right: 1em;
} }
#drupal-off-canvas-wrapper .ui-dialog-titlebar:before { #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
@ -55,29 +55,26 @@
-webkit-mask-size: contain; -webkit-mask-size: contain;
mask-size: contain; mask-size: contain;
-webkit-mask-position: center; -webkit-mask-position: center;
mask-position: center mask-position: center;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
#drupal-off-canvas-wrapper .ui-dialog-titlebar:before { #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
background-color: canvastext background-color: canvastext;
} }
} }
#drupal-off-canvas-wrapper { /* Close button. */
/* Close button. */
}
[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close { [dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
left: auto; left: auto;
right: 0.625rem right: 0.625rem;
} }
[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close { [dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
right: auto; right: auto;
left: 0.625rem left: 0.625rem;
} }
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close { #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
@ -93,7 +90,7 @@
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent; background-color: transparent;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:focus { #drupal-off-canvas-wrapper .ui-dialog-titlebar-close:focus {
@ -101,10 +98,7 @@
outline-offset: 2px; outline-offset: 2px;
} }
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close { /* The plus icon. */
/* The plus icon. */
}
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:before, #drupal-off-canvas-wrapper .ui-dialog-titlebar-close:before,
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:after { #drupal-off-canvas-wrapper .ui-dialog-titlebar-close:after {
@ -125,10 +119,7 @@
transform: translate(-50%, 50%) rotate(45deg); transform: translate(-50%, 50%) rotate(45deg);
} }
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close { /* Hide the default jQuery UI dialog close button. */
/* Hide the default jQuery UI dialog close button. */
}
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon { #drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon {
display: none; display: none;

View File

@ -18,21 +18,27 @@
#drupal-off-canvas-wrapper .visually-hidden { #drupal-off-canvas-wrapper .visually-hidden {
position: absolute !important; position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
word-wrap: normal }
#drupal-off-canvas-wrapper .visually-hidden {
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal;
} }
#drupal-off-canvas-wrapper .visually-hidden.focusable:is(:active, :focus) { #drupal-off-canvas-wrapper .visually-hidden.focusable:is(:active, :focus) {
position: static !important; position: static !important;
overflow: visible;
clip: auto;
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
} }
#drupal-off-canvas-wrapper .visually-hidden.focusable:is(:active, :focus) {
overflow: visible;
clip: auto;
}
#drupal-off-canvas-wrapper .invisible { #drupal-off-canvas-wrapper .invisible {
visibility: hidden; visibility: hidden;
} }

View File

@ -11,10 +11,10 @@
* @internal * @internal
*/ */
[dir="ltr"] #drupal-off-canvas-wrapper { [dir="ltr"] #drupal-off-canvas-wrapper {
border-left: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color) border-left: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
} }
[dir="rtl"] #drupal-off-canvas-wrapper { [dir="rtl"] #drupal-off-canvas-wrapper {
border-right: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color) border-right: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
} }
#drupal-off-canvas-wrapper { #drupal-off-canvas-wrapper {
--off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgba(0, 0, 0, 0.3); --off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgba(0, 0, 0, 0.3);
@ -25,7 +25,7 @@
overflow: auto; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
box-shadow: var(--off-canvas-wrapper-box-shadow) box-shadow: var(--off-canvas-wrapper-box-shadow);
/* /*
* Force the off-canvas dialog to be 100% width at the same breakpoint the * Force the off-canvas dialog to be 100% width at the same breakpoint the
@ -34,21 +34,21 @@
} }
@media (max-width: 48rem) { @media (max-width: 48rem) {
#drupal-off-canvas-wrapper { #drupal-off-canvas-wrapper {
width: 100% !important width: 100% !important;
} }
} }
/* When off-canvas dialog is at 100% width stop the body from scrolling */ /* When off-canvas dialog is at 100% width stop the body from scrolling */
@media (max-width: 48rem) { @media (max-width: 48rem) {
body.js-off-canvas-dialog-open { body.js-off-canvas-dialog-open {
position: fixed position: fixed;
} }
} }
/* This is a page level content wrapper that shrinks when off-canvas is open. */ /* This is a page level content wrapper that shrinks when off-canvas is open. */
.dialog-off-canvas-main-canvas { .dialog-off-canvas-main-canvas {
transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.dialog-off-canvas-main-canvas { .dialog-off-canvas-main-canvas {
transition: none transition: none;
} }
} }

View File

@ -36,7 +36,7 @@
.layout-builder__link--add { .layout-builder__link--add {
color: #686868; color: #686868;
border-bottom: none; border-bottom: none;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e") transparent center left / 1em no-repeat /* LTR */ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e") transparent center left / 1em no-repeat; /* LTR */
} }
[dir="rtl"] .layout-builder__link--add { [dir="rtl"] .layout-builder__link--add {
@ -50,7 +50,7 @@
} }
.layout-builder__section { .layout-builder__section {
margin-bottom: 1.5em margin-bottom: 1.5em;
} }
.layout-builder__section .ui-sortable-helper { .layout-builder__section .ui-sortable-helper {
@ -98,7 +98,7 @@
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 1.625rem; border-radius: 1.625rem;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center center / 1rem 1rem no-repeat; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center center / 1rem 1rem no-repeat;
font-size: 1rem font-size: 1rem;
} }
.layout-builder__link--remove:hover { .layout-builder__link--remove:hover {
@ -108,7 +108,7 @@
.layout-builder-block { .layout-builder-block {
padding: 1.5em; padding: 1.5em;
cursor: move; cursor: move;
background-color: #fff background-color: #fff;
} }
.layout-builder-block [tabindex="-1"] { .layout-builder-block [tabindex="-1"] {
@ -117,7 +117,7 @@
.layout-builder--content-preview-disabled .layout-builder-block { .layout-builder--content-preview-disabled .layout-builder-block {
margin: 0; margin: 0;
border-bottom: 2px dashed #979797 border-bottom: 2px dashed #979797;
} }
/* /*

View File

@ -13,13 +13,13 @@
#drupal-off-canvas-wrapper .layout-selection { #drupal-off-canvas-wrapper .layout-selection {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none list-style: none;
} }
#drupal-off-canvas-wrapper .layout-selection li { #drupal-off-canvas-wrapper .layout-selection li {
position: relative; /* Anchor throbber. */ position: relative; /* Anchor throbber. */
padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)); padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit));
border-bottom: 1px solid var(--off-canvas-border-color) border-bottom: 1px solid var(--off-canvas-border-color);
} }
#drupal-off-canvas-wrapper .layout-selection li:last-child { #drupal-off-canvas-wrapper .layout-selection li:last-child {
@ -27,44 +27,38 @@
border-bottom: none; border-bottom: none;
} }
#drupal-off-canvas-wrapper .layout-selection { /* Horizontally align icon and text. */
/* Horizontally align icon and text. */
}
#drupal-off-canvas-wrapper .layout-selection a { #drupal-off-canvas-wrapper .layout-selection a {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
grid-gap: 0.625rem; gap: 0.625rem;
padding: 0.625rem; padding: 0.625rem;
} }
#drupal-off-canvas-wrapper { /*
/*
* This is the styling of the SVG within the layout selection list. * This is the styling of the SVG within the layout selection list.
*/ */
}
#drupal-off-canvas-wrapper .layout-icon__region { #drupal-off-canvas-wrapper .layout-icon__region {
fill: var(--off-canvas-text-color); fill: var(--off-canvas-text-color);
stroke: transparent stroke: transparent;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
#drupal-off-canvas-wrapper .layout-icon__region { #drupal-off-canvas-wrapper .layout-icon__region {
fill: canvastext fill: canvastext;
} }
} }
[dir="ltr"] #drupal-off-canvas-wrapper .inline-block-create-button { [dir="ltr"] #drupal-off-canvas-wrapper .inline-block-create-button {
padding-left: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2) padding-left: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2);
} }
[dir="rtl"] #drupal-off-canvas-wrapper .inline-block-create-button { [dir="rtl"] #drupal-off-canvas-wrapper .inline-block-create-button {
padding-right: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2) padding-right: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2);
} }
#drupal-off-canvas-wrapper .inline-block-create-button { #drupal-off-canvas-wrapper .inline-block-create-button {
@ -74,7 +68,7 @@
display: block; display: block;
padding: 1.5rem; /* Room for icon */ padding: 1.5rem; /* Room for icon */
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
font-size: 1rem font-size: 1rem;
/* Plus icon. */ /* Plus icon. */
} }
@ -89,7 +83,7 @@
transform: translateY(-50%); transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain background-size: contain;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -101,14 +95,14 @@
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; -webkit-mask-size: contain;
mask-size: contain mask-size: contain;
} }
} }
#drupal-off-canvas-wrapper .inline-block-create-button, #drupal-off-canvas-wrapper .inline-block-create-button,
#drupal-off-canvas-wrapper .inline-block-list__item { #drupal-off-canvas-wrapper .inline-block-list__item {
margin: 0 calc(-1 * var(--off-canvas-padding)); margin: 0 calc(-1 * var(--off-canvas-padding));
color: var(--off-canvas-text-color) color: var(--off-canvas-text-color);
} }
#drupal-off-canvas-wrapper .inline-block-create-button:hover, #drupal-off-canvas-wrapper .inline-block-list__item:hover { #drupal-off-canvas-wrapper .inline-block-create-button:hover, #drupal-off-canvas-wrapper .inline-block-list__item:hover {
@ -122,13 +116,13 @@
#drupal-off-canvas-wrapper .inline-block-list { #drupal-off-canvas-wrapper .inline-block-list {
margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit)); margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit));
padding: 0; padding: 0;
list-style: none list-style: none;
} }
#drupal-off-canvas-wrapper .inline-block-list li { #drupal-off-canvas-wrapper .inline-block-list li {
position: relative; /* Anchor throbber. */ position: relative; /* Anchor throbber. */
margin: 0; margin: 0;
padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)) 0 padding: calc(0.25 * var(--off-canvas-vertical-spacing-unit)) 0;
} }
#drupal-off-canvas-wrapper .inline-block-list li:last-child { #drupal-off-canvas-wrapper .inline-block-list li:last-child {
@ -136,10 +130,7 @@
border-bottom: none; border-bottom: none;
} }
#drupal-off-canvas-wrapper { /* This is the <a> tag. */
/* This is the <a> tag. */
}
#drupal-off-canvas-wrapper .inline-block-list__item { #drupal-off-canvas-wrapper .inline-block-list__item {
display: block; display: block;
@ -148,10 +139,7 @@
border-bottom: 1px solid var(--off-canvas-border-color); border-bottom: 1px solid var(--off-canvas-border-color);
} }
#drupal-off-canvas-wrapper { /* Highlight the active block in the Move Block dialog. */
/* Highlight the active block in the Move Block dialog. */
}
#drupal-off-canvas-wrapper .layout-builder-components-table__block-label--current { #drupal-off-canvas-wrapper .layout-builder-components-table__block-label--current {
padding-left: 1.0625rem; padding-left: 1.0625rem;

View File

@ -11,7 +11,7 @@
*/ */
#drupal-off-canvas-wrapper.workspaces-dialog { #drupal-off-canvas-wrapper.workspaces-dialog {
padding-bottom: calc(var(--off-canvas-padding) / 2) padding-bottom: calc(var(--off-canvas-padding) / 2);
} }
@media (min-width: 47.9375rem) { @media (min-width: 47.9375rem) {
@ -20,20 +20,17 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
width: 100%; width: 100%;
height: 100% height: 100%;
} }
} }
#drupal-off-canvas-wrapper.workspaces-dialog { /**
/**
* The Workspace UI hides the titlebar, but we need to show and correctly * The Workspace UI hides the titlebar, but we need to show and correctly
* position the close button that is nested within it. * position the close button that is nested within it.
*/ */
}
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar { #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar {
all: revert all: revert;
} }
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar:before { #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar:before {
@ -45,11 +42,11 @@
} }
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { [dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
right: 1em right: 1em;
} }
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { [dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
left: 1em left: 1em;
} }
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
@ -59,7 +56,7 @@
} }
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace { #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace {
padding: 0 var(--off-canvas-padding) padding: 0 var(--off-canvas-padding);
} }
@media (min-width: 47.9375rem) { @media (min-width: 47.9375rem) {
@ -71,7 +68,7 @@
flex-grow: 2; flex-grow: 2;
align-self: stretch; align-self: stretch;
order: 1; order: 1;
padding: var(--off-canvas-padding) var(--off-canvas-padding) 0 padding: var(--off-canvas-padding) var(--off-canvas-padding) 0;
} }
} }
@ -86,15 +83,15 @@
color: #fff; color: #fff;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: bold; font-weight: bold;
line-height: 1.2 line-height: 1.2;
} }
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before { [dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
left: 0 left: 0;
} }
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before { [dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
right: 0 right: 0;
} }
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before { #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
@ -104,36 +101,30 @@
height: 1.25rem; height: 1.25rem;
content: ""; content: "";
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;
background-size: contain background-size: contain;
} }
@media (min-width: 47.9375rem) { @media (min-width: 47.9375rem) {
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before { #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
width: 2.5rem; width: 2.5rem;
height: 2.5rem height: 2.5rem;
} }
} }
#drupal-off-canvas-wrapper.workspaces-dialog { /* This is the "Manage workspace" link that appears when you're on a non-default workspace. */
/* This is the "Manage workspace" link that appears when you're on a non-default workspace. */
}
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__manage { #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__manage {
display: block; display: block;
font-size: 0.8125rem; font-size: 0.8125rem;
} }
#drupal-off-canvas-wrapper.workspaces-dialog { /* This is the link to "View all workspaces". */
/* This is the link to "View all workspaces". */
}
#drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces { #drupal-off-canvas-wrapper.workspaces-dialog .all-workspaces {
display: inline-block; display: inline-block;
padding: var(--off-canvas-padding); padding: var(--off-canvas-padding);
font-size: 0.875rem font-size: 0.875rem;
} }
@media (min-width: 47.9375rem) { @media (min-width: 47.9375rem) {
@ -142,7 +133,7 @@
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
justify-self: end; justify-self: end;
padding: 0 padding: 0;
} }
} }
@ -158,13 +149,13 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
grid-gap: 2px gap: 2px;
} }
@media (min-width: 47.9375rem) { @media (min-width: 47.9375rem) {
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul { #drupal-off-canvas-wrapper.workspaces-dialog .workspaces ul {
flex-direction: row flex-direction: row;
} }
} }
@ -177,21 +168,18 @@
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces { #drupal-off-canvas-wrapper.workspaces-dialog .workspaces {
display: grid; display: grid;
flex-grow: 8; flex-grow: 8;
grid-template-columns: 1fr 1fr grid-template-columns: 1fr 1fr;
} }
} }
#drupal-off-canvas-wrapper.workspaces-dialog { /* This is the link to the workspace. */
/* This is the link to the workspace. */
}
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item { [dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
padding-left: 3.125rem padding-left: 3.125rem;
} }
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item { [dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
padding-right: 3.125rem padding-right: 3.125rem;
} }
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item { #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
@ -203,7 +191,7 @@
outline-offset: -2px; /* Ensure focus outline doesn't overflow. */ outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
background-color: var(--off-canvas-background-color-light); background-color: var(--off-canvas-background-color-light);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: bold font-weight: bold;
} }
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:hover, #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:hover,
@ -212,11 +200,11 @@
} }
[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before { [dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
left: var(--off-canvas-padding) left: var(--off-canvas-padding);
} }
[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before { [dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
right: var(--off-canvas-padding) right: var(--off-canvas-padding);
} }
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before { #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
@ -241,6 +229,6 @@
@media (max-width: 47.9375rem) { @media (max-width: 47.9375rem) {
#drupal-off-canvas-wrapper.workspaces-dialog { #drupal-off-canvas-wrapper.workspaces-dialog {
height: 100% !important height: 100% !important;
} }
} }

View File

@ -51,12 +51,12 @@
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item { .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
width: 100%; width: 100%;
margin: 0; margin: 0;
color: inherit color: inherit;
} }
.toolbar-oriented .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item { .toolbar-oriented :is(.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item) {
width: auto; width: auto;
text-align: initial text-align: initial;
} }
.toolbar .toolbar-icon-workspace:before { .toolbar .toolbar-icon-workspace:before {

View File

@ -79,12 +79,12 @@
"mkdirp": "^1.0.4", "mkdirp": "^1.0.4",
"nightwatch": "^2.1.3", "nightwatch": "^2.1.3",
"normalize.css": "8.0.x", "normalize.css": "8.0.x",
"postcss": "^7.0.18", "postcss": "^8.4.16",
"postcss-header": "^2.0.0", "postcss-header": "^3.0.2",
"postcss-import": "^12.0.1", "postcss-import": "^15.0.0",
"postcss-preset-env": "^6.7.0", "postcss-preset-env": "^7.8.1",
"postcss-pxtorem": "^5.1.1", "postcss-pxtorem": "^6.0.0",
"postcss-url": "^8.0.0", "postcss-url": "^10.1.3",
"prettier": "^2.1.2", "prettier": "^2.1.2",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"shepherd.js": "~10.0.1", "shepherd.js": "~10.0.1",

View File

@ -6,13 +6,15 @@
*/ */
@media print { @media print {
* { * {
/* Black prints faster */
/* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
color: #000 !important; color: #000 !important;
background-color: transparent !important; background-color: transparent !important;
box-shadow: none !important; box-shadow: none !important;
text-shadow: none !important; text-shadow: none !important;
} }
* {
/* Black prints faster */
/* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
}
body { body {
padding-top: 0; padding-top: 0;
} }

View File

@ -20,7 +20,7 @@
.accordion__item { .accordion__item {
margin: 0 -1px; margin: 0 -1px;
border-radius: 0 border-radius: 0;
} }
.accordion__item:first-child { .accordion__item:first-child {

View File

@ -246,6 +246,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-plus::before { .action-link--icon-plus::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-plus::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
@ -291,6 +293,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-trash::before { .action-link--icon-trash::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-trash::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
@ -336,6 +340,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-ex::before { .action-link--icon-ex::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-ex::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
@ -381,6 +387,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-checkmark::before { .action-link--icon-checkmark::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-checkmark::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
@ -426,6 +434,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-cog::before { .action-link--icon-cog::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-cog::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
@ -471,6 +481,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-show::before { .action-link--icon-show::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-show::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
@ -516,6 +528,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-hide::before { .action-link--icon-hide::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-hide::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
@ -561,6 +575,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-key::before { .action-link--icon-key::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-key::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
@ -606,6 +622,8 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.action-link--icon-questionmark::before { .action-link--icon-questionmark::before {
background: linktext !important; background: linktext !important;
}
.action-link--icon-questionmark::before {
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");

View File

@ -34,11 +34,11 @@
.breadcrumb__item + .breadcrumb__item::before { .breadcrumb__item + .breadcrumb__item::before {
display: inline-block; display: inline-block;
padding: 0 0.75rem; padding: 0 0.75rem;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e") content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
} }
[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before { [dir="rtl"] :is(.breadcrumb__item + .breadcrumb__item::before) {
transform: scaleX(-1) transform: scaleX(-1);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -55,7 +55,7 @@
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; -webkit-mask-position: center;
mask-position: center mask-position: center;
} }
} }

View File

@ -35,6 +35,10 @@
* dropbutton.css or action-links.css as well. * dropbutton.css or action-links.css as well.
*/ */
.button {
border: 1px solid transparent !important;
}
.button { .button {
display: inline-block; display: inline-block;
margin: var(--space-m) var(--space-s) var(--space-m) 0; /* LTR */ margin: var(--space-m) var(--space-s) var(--space-m) 0; /* LTR */
@ -42,8 +46,7 @@
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
color: var(--button-fg-color); color: var(--button-fg-color); /* 2 */
border: 1px solid transparent !important; /* 2 */
border-radius: var(--button-border-radius-size); border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color); background-color: var(--button-bg-color);
font-size: var(--font-size-base); font-size: var(--font-size-base);

View File

@ -49,7 +49,7 @@
border: var(--details-border-size) solid var(--details-border-color); border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--details-border-size-radius); border-radius: var(--details-border-size-radius);
background-color: var(--color-white); background-color: var(--color-white);
box-shadow: var(--details-box-shadow) box-shadow: var(--details-box-shadow);
/* /*
* The following width and min-width values ensure that the <details> element * The following width and min-width values ensure that the <details> element
@ -61,7 +61,7 @@
td .claro-details { td .claro-details {
width: min-content; width: min-content;
min-width: 100% min-width: 100%;
} }
.claro-details--accordion-item, .claro-details--accordion-item,
@ -216,7 +216,7 @@ td .claro-details {
/* stylelint-disable-next-line unit-allowed-list */ /* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) { @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) { @supports (-webkit-appearance: none) {
.claro-details__summary::before { .claro-details__summary::before {
transition: none; transition: none;
@ -362,7 +362,7 @@ td .claro-details {
/* stylelint-disable-next-line unit-allowed-list */ /* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) { @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) { @supports (-webkit-appearance: none) {
.claro-details__summary::after { .claro-details__summary::after {
transition: none; transition: none;

View File

@ -129,6 +129,10 @@
* Dropbutton toggler. * Dropbutton toggler.
*/ */
.dropbutton__toggle {
border: var(--dropbutton-border-size) solid transparent !important;
}
.dropbutton__toggle { .dropbutton__toggle {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
@ -136,8 +140,7 @@
right: 0; /* LTR */ right: 0; /* LTR */
bottom: 0; bottom: 0;
width: var(--dropbutton-toggle-size); width: var(--dropbutton-toggle-size);
height: var(--dropbutton-toggle-size); height: var(--dropbutton-toggle-size); /* 1 */
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */ border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */
background: var(--button-bg-color); background: var(--button-bg-color);
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */ font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
@ -247,6 +250,10 @@
* Duplicates base button styles. * Duplicates base button styles.
*/ */
.dropbutton__item:first-of-type > * {
border: var(--dropbutton-border-size) solid transparent !important;
}
.dropbutton__item:first-of-type > * { .dropbutton__item:first-of-type > * {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -254,8 +261,7 @@
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
color: var(--button-fg-color); color: var(--button-fg-color); /* 1 */
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: var(--button-border-radius-size); border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color); background-color: var(--button-bg-color);
font-size: var(--dropbutton-font-size); font-size: var(--dropbutton-font-size);
@ -371,13 +377,17 @@
max-width: var(--dropbutton-item-max-width); max-width: var(--dropbutton-item-max-width);
} }
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
border: var(--dropbutton-border-size) solid transparent !important;
}
.dropbutton__item:first-of-type ~ .dropbutton__item > a, .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton__item:first-of-type ~ .dropbutton__item > .button { .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
position: relative; position: relative;
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)); padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
text-decoration: none; text-decoration: none;
color: var(--color-gray-800); color: var(--color-gray-800); /* 1 */
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: var(--dropbutton-border-radius-size); border-radius: var(--dropbutton-border-radius-size);
background: var(--color-white); background: var(--color-white);
box-shadow: 0; box-shadow: 0;
@ -439,6 +449,9 @@
} }
.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus { .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
border-color: var(--color-focus) !important; /* 1 */ border-color: var(--color-focus) !important;
}
.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus { /* 1 */
box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus); box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);
} }

View File

@ -21,13 +21,13 @@
[dir="rtl"] .form-element--type-select { [dir="rtl"] .form-element--type-select {
padding-right: calc(1rem - var(--input-border-size)); padding-right: calc(1rem - var(--input-border-size));
padding-left: calc(2rem - var(--input-border-size)); padding-left: calc(2rem - var(--input-border-size));
background-position: 0 50% background-position: 0 50%;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
[dir="rtl"] .form-element--type-select { [dir="rtl"] .form-element--type-select {
padding-left: var(--input-padding-horizontal) padding-left: var(--input-padding-horizontal);
} }
} }

View File

@ -26,6 +26,9 @@
.modules-table-filter .form-item__description { .modules-table-filter .form-item__description {
position: absolute !important; position: absolute !important;
}
.modules-table-filter .form-item__description {
overflow: hidden; overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
width: 1px; width: 1px;

View File

@ -298,7 +298,7 @@ body.drag {
/* stylelint-disable-next-line unit-allowed-list */ /* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) { @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) { @supports (-webkit-appearance: none) {
.tabledrag-cell-content .tree { .tabledrag-cell-content .tree {
overflow: visible; overflow: visible;
@ -315,13 +315,16 @@ body.drag {
* Indentation. * Indentation.
*/ */
.indentation {
background: none !important;
}
.indentation { .indentation {
position: relative; position: relative;
left: calc(var(--space-xs) * -0.5); /* LTR */ left: calc(var(--space-xs) * -0.5); /* LTR */
float: left; /* LTR */ float: left; /* LTR */
width: calc(25rem / 16); /* 25px */ width: calc(25rem / 16); /* 25px */
height: calc(25rem / 16); /* 25px */ height: calc(25rem / 16); /* 25px */
background: none !important;
line-height: 0; line-height: 0;
} }

View File

@ -98,7 +98,7 @@ _:-ms-fullscreen, /* Only IE 11 */
content: ""; content: "";
opacity: 0.5; opacity: 0.5;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
background-size: contain background-size: contain;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -107,7 +107,7 @@ _:-ms-fullscreen, /* Only IE 11 */
opacity: 1; opacity: 1;
background: linktext; background: linktext;
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50% mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
} }
} }
@ -124,7 +124,7 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .sortable-heading > a::after { [dir="rtl"] .sortable-heading > a::after {
right: auto; right: auto;
left: 1rem; left: 1rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -132,7 +132,7 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .sortable-heading > a::after { [dir="rtl"] .sortable-heading > a::after {
background: linktext; background: linktext;
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50% mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
} }
} }

View File

@ -19,7 +19,7 @@
margin-top: -0.5rem; /* -8px */ margin-top: -0.5rem; /* -8px */
opacity: 0.5; opacity: 0.5;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 0 50%; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 0 50%;
background-size: auto background-size: auto;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -31,7 +31,7 @@
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 0 50%; -webkit-mask-position: 0 50%;
mask-position: 0 50% mask-position: 0 50%;
} }
} }
@ -48,7 +48,7 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .tablesort { [dir="rtl"] .tablesort {
right: auto; right: auto;
left: 1rem; /* 16px */ left: 1rem; /* 16px */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -60,7 +60,7 @@ _:-ms-fullscreen, /* Only IE 11 */
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 0 50%; -webkit-mask-position: 0 50%;
mask-position: 0 50% mask-position: 0 50%;
} }
} }
@ -76,7 +76,7 @@ _:-ms-fullscreen, /* Only IE 11 */
.tablesort--asc, .tablesort--asc,
[dir="rtl"] .tablesort--asc { [dir="rtl"] .tablesort--asc {
opacity: 1; opacity: 1;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e") background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -85,14 +85,14 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .tablesort--asc { [dir="rtl"] .tablesort--asc {
background: linktext; background: linktext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e") mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
} }
} }
.tablesort--desc, .tablesort--desc,
[dir="rtl"] .tablesort--desc { [dir="rtl"] .tablesort--desc {
opacity: 1; opacity: 1;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e") background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -101,6 +101,6 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .tablesort--desc { [dir="rtl"] .tablesort--desc {
background: linktext; background: linktext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e") mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
} }
} }

View File

@ -15,7 +15,7 @@
.install-page { .install-page {
min-height: 100%; min-height: 100%;
background-color: var(--color-gray-100) background-color: var(--color-gray-100);
} }
.install-page h1, .install-page h1,

View File

@ -801,8 +801,11 @@
} }
.media-library-item__edit { .media-library-item__edit {
/* !important to override button class border. */
border: 1px solid var(--color-gray-200) !important; border: 1px solid var(--color-gray-200) !important;
}
.media-library-item__edit {
/* !important to override button class border. */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -820,8 +823,17 @@
.media-library-item__remove.button:disabled:active, .media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover, .media-library-item__remove.button:hover,
.media-library-item__remove.button:focus { .media-library-item__remove.button:focus {
/* !important to override button class border. */
border: 1px solid var(--color-gray-200) !important; border: 1px solid var(--color-gray-200) !important;
}
.media-library-item__remove,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.media-library-item__remove.button:disabled,
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
/* !important to override button class border. */
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -831,8 +843,13 @@
.media-library-item__remove:active, .media-library-item__remove:active,
.media-library-item__remove.button:active, .media-library-item__remove.button:active,
.media-library-item__remove.button:disabled:active { .media-library-item__remove.button:disabled:active {
/* !important to override button class border. */
border-color: var(--color-absolutezero) !important; border-color: var(--color-absolutezero) !important;
}
.media-library-item__remove:active,
.media-library-item__remove.button:active,
.media-library-item__remove.button:disabled:active {
/* !important to override button class border. */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
} }

View File

@ -42,7 +42,7 @@ body {
color: var(--color-text-neutral-medium); color: var(--color-text-neutral-medium);
background-color: var(--color--gray-100); background-color: var(--color--gray-100);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
background-position: top left /* LTR */ background-position: top left; /* LTR */
} }
body.is-fixed { body.is-fixed {
@ -56,7 +56,7 @@ body.is-fixed {
} }
a { a {
color: var(--color-text-primary-medium) color: var(--color-text-primary-medium);
} }
a:hover { a:hover {
@ -87,41 +87,41 @@ audio {
h1 { h1 {
letter-spacing: -0.01em; letter-spacing: -0.01em;
font-size: 1.75rem; font-size: 1.75rem;
line-height: var(--sp2) line-height: var(--sp2);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
h1 { h1 {
font-size: 3.75rem; font-size: 3.75rem;
line-height: var(--sp4) line-height: var(--sp4);
} }
} }
h2 { h2 {
letter-spacing: -0.01em; letter-spacing: -0.01em;
font-size: 1.5rem; font-size: 1.5rem;
line-height: var(--sp2) line-height: var(--sp2);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
h2 { h2 {
font-size: 2.25rem; font-size: 2.25rem;
line-height: var(--sp3) line-height: var(--sp3);
} }
} }
h3 { h3 {
font-size: 1.25rem; font-size: 1.25rem;
line-height: var(--sp1-5) line-height: var(--sp1-5);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
h3 { h3 {
font-size: 1.5rem; font-size: 1.5rem;
line-height: var(--sp2) line-height: var(--sp2);
} }
} }
@ -150,7 +150,7 @@ h6 {
margin-bottom: var(--sp); margin-bottom: var(--sp);
color: var(--color-text-neutral-loud); color: var(--color-text-neutral-loud);
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: bold font-weight: bold;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -162,7 +162,7 @@ h4,
h5, h5,
h6 { h6 {
margin-top: var(--sp2); margin-top: var(--sp2);
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
} }

View File

@ -17,38 +17,38 @@
/* Grid shifts from 6 to 14 columns. */ /* Grid shifts from 6 to 14 columns. */
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .action-links { [dir="ltr"] .action-links {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .action-links { [dir="rtl"] .action-links {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .action-links { [dir="ltr"] .action-links {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .action-links { [dir="rtl"] .action-links {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .action-links { [dir="ltr"] .action-links {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .action-links { [dir="rtl"] .action-links {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .action-links { [dir="ltr"] .action-links {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .action-links { [dir="rtl"] .action-links {
padding-left: 0 padding-left: 0;
} }
.action-links { .action-links {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
list-style: none list-style: none;
} }
.action-links li { .action-links li {
display: inline-block display: inline-block;
} }
.action-links li a { .action-links li a {
color: var(--color-text-primary-medium); color: var(--color-text-primary-medium);

View File

@ -102,7 +102,7 @@
border: 1px solid var(--color--gray-70); border: 1px solid var(--color--gray-70);
border-radius: 3.5rem; border-radius: 3.5rem;
background-color: var(--color--white); background-color: var(--color--white);
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1) /* LTR */ box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
} }
[dir="ltr"] .ajax-progress-fullscreen:before { [dir="ltr"] .ajax-progress-fullscreen:before {

View File

@ -43,7 +43,7 @@ html.js .form-autocomplete {
background-color: var(--color--white); background-color: var(--color--white);
background-image: var(--autocomplete-search-icon-url); background-image: var(--autocomplete-search-icon-url);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right var(--autocomplete-icon-right-offset) center /* LTR */ background-position: right var(--autocomplete-icon-right-offset) center; /* LTR */
} }
html.js .form-autocomplete:disabled { html.js .form-autocomplete:disabled {
@ -58,7 +58,7 @@ html.js[dir="rtl"] .form-autocomplete {
background-color: var(--color--white); background-color: var(--color--white);
background-image: var(--autocomplete-search-icon-url); background-image: var(--autocomplete-search-icon-url);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left var(--autocomplete-icon-right-offset) center background-position: left var(--autocomplete-icon-right-offset) center;
} }
html.js[dir="rtl"] .form-autocomplete:disabled { html.js[dir="rtl"] .form-autocomplete:disabled {

View File

@ -66,20 +66,20 @@
} }
.book-pager__item { .book-pager__item {
display: inline-block display: inline-block;
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.book-pager__item { .book-pager__item {
flex: 0 0 33.33% flex: 0 0 33.33%;
} }
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.book-pager__item--center { .book-pager__item--center {
text-align: center text-align: center;
} }
} }
@ -121,11 +121,11 @@
} }
[dir="ltr"] .book-pager__link--previous:before { [dir="ltr"] .book-pager__link--previous:before {
border-left: solid 3px currentColor; border-left: solid 0.1875rem currentColor;
} }
[dir="rtl"] .book-pager__link--previous:before { [dir="rtl"] .book-pager__link--previous:before {
border-right: solid 3px currentColor; border-right: solid 0.1875rem currentColor;
} }
.book-pager__link--previous:before { .book-pager__link--previous:before {
@ -134,7 +134,7 @@
height: var(--sp0-5); height: var(--sp0-5);
content: ""; content: "";
transform: rotate(-45deg); transform: rotate(-45deg);
border-top: solid 3px currentColor; border-top: solid 0.1875rem currentColor;
} }
[dir="ltr"] .book-pager__link--next:after { [dir="ltr"] .book-pager__link--next:after {
@ -146,11 +146,11 @@
} }
[dir="ltr"] .book-pager__link--next:after { [dir="ltr"] .book-pager__link--next:after {
border-left: solid 3px currentColor; border-left: solid 0.1875rem currentColor;
} }
[dir="rtl"] .book-pager__link--next:after { [dir="rtl"] .book-pager__link--next:after {
border-right: solid 3px currentColor; border-right: solid 0.1875rem currentColor;
} }
.book-pager__link--next:after { .book-pager__link--next:after {
@ -159,7 +159,7 @@
height: var(--sp0-5); height: var(--sp0-5);
content: ""; content: "";
transform: rotate(135deg); transform: rotate(135deg);
border-top: solid 3px currentColor; border-top: solid 0.1875rem currentColor;
} }
[dir="ltr"] .book-navigation__menu { [dir="ltr"] .book-navigation__menu {

View File

@ -27,17 +27,17 @@
position: relative; position: relative;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: bold; font-weight: bold;
line-height: var(--sp1) line-height: var(--sp1);
/* Shadow on the right side of breadcrumbs for narrow screens. */ /* Shadow on the right side of breadcrumbs for narrow screens. */
} }
[dir="ltr"] .breadcrumb:after { [dir="ltr"] .breadcrumb:after {
right: calc(var(--sp1) * -1) right: calc(var(--sp1) * -1);
} }
[dir="rtl"] .breadcrumb:after { [dir="rtl"] .breadcrumb:after {
left: calc(var(--sp1) * -1) left: calc(var(--sp1) * -1);
} }
.breadcrumb:after { .breadcrumb:after {
@ -46,20 +46,20 @@
width: var(--sp3); width: var(--sp3);
height: var(--sp2); height: var(--sp2);
content: ""; content: "";
background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%) /* LTR */ background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.breadcrumb:after { .breadcrumb:after {
content: none content: none;
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.breadcrumb { .breadcrumb {
position: static position: static;
} }
} }
@ -68,27 +68,27 @@
} }
[dir="ltr"] .breadcrumb__content { [dir="ltr"] .breadcrumb__content {
margin-left: calc(var(--sp0-5) * -1) margin-left: calc(var(--sp0-5) * -1);
} }
[dir="rtl"] .breadcrumb__content { [dir="rtl"] .breadcrumb__content {
margin-right: calc(var(--sp0-5) * -1) margin-right: calc(var(--sp0-5) * -1);
} }
[dir="ltr"] .breadcrumb__content { [dir="ltr"] .breadcrumb__content {
margin-right: calc(var(--sp1) * -1) margin-right: calc(var(--sp1) * -1);
} }
[dir="rtl"] .breadcrumb__content { [dir="rtl"] .breadcrumb__content {
margin-left: calc(var(--sp1) * -1) margin-left: calc(var(--sp1) * -1);
} }
[dir="ltr"] .breadcrumb__content { [dir="ltr"] .breadcrumb__content {
padding-left: var(--sp0-5) padding-left: var(--sp0-5);
} }
[dir="rtl"] .breadcrumb__content { [dir="rtl"] .breadcrumb__content {
padding-right: var(--sp0-5) padding-right: var(--sp0-5);
} }
.breadcrumb__content { .breadcrumb__content {
@ -97,50 +97,50 @@
margin-bottom: calc(var(--sp0-5) * -1); margin-bottom: calc(var(--sp0-5) * -1);
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5); padding-bottom: var(--sp0-5);
-webkit-overflow-scrolling: touch -webkit-overflow-scrolling: touch;
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .breadcrumb__content { [dir="ltr"] .breadcrumb__content {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .breadcrumb__content { [dir="rtl"] .breadcrumb__content {
margin-left: 0 margin-left: 0;
} }
} }
[dir="ltr"] .breadcrumb__list { [dir="ltr"] .breadcrumb__list {
margin-left: calc(var(--sp1) * -1) margin-left: calc(var(--sp1) * -1);
} }
[dir="rtl"] .breadcrumb__list { [dir="rtl"] .breadcrumb__list {
margin-right: calc(var(--sp1) * -1) margin-right: calc(var(--sp1) * -1);
} }
[dir="ltr"] .breadcrumb__list { [dir="ltr"] .breadcrumb__list {
margin-right: calc(var(--sp1) * -1) margin-right: calc(var(--sp1) * -1);
} }
[dir="rtl"] .breadcrumb__list { [dir="rtl"] .breadcrumb__list {
margin-left: calc(var(--sp1) * -1) margin-left: calc(var(--sp1) * -1);
} }
[dir="ltr"] .breadcrumb__list { [dir="ltr"] .breadcrumb__list {
padding-left: var(--sp1) padding-left: var(--sp1);
} }
[dir="rtl"] .breadcrumb__list { [dir="rtl"] .breadcrumb__list {
padding-right: var(--sp1) padding-right: var(--sp1);
} }
[dir="ltr"] .breadcrumb__list { [dir="ltr"] .breadcrumb__list {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .breadcrumb__list { [dir="rtl"] .breadcrumb__list {
padding-left: 0 padding-left: 0;
} }
.breadcrumb__list { .breadcrumb__list {
@ -151,62 +151,62 @@
padding-top: 0; padding-top: 0;
padding-bottom: var(--sp1); padding-bottom: var(--sp1);
list-style: none; list-style: none;
white-space: nowrap white-space: nowrap;
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .breadcrumb__list { [dir="ltr"] .breadcrumb__list {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .breadcrumb__list { [dir="rtl"] .breadcrumb__list {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .breadcrumb__list { [dir="ltr"] .breadcrumb__list {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .breadcrumb__list { [dir="rtl"] .breadcrumb__list {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .breadcrumb__list { [dir="ltr"] .breadcrumb__list {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .breadcrumb__list { [dir="rtl"] .breadcrumb__list {
padding-right: 0 padding-right: 0;
} }
.breadcrumb__list { .breadcrumb__list {
overflow: visible; overflow: visible;
padding-bottom: 0; padding-bottom: 0;
white-space: normal white-space: normal;
} }
} }
.breadcrumb__item { .breadcrumb__item {
display: inline-block display: inline-block;
} }
[dir="ltr"] .breadcrumb__item:nth-child(n+2):before { [dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1.25rem margin-right: 1.25rem;
} }
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { [dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
margin-right: 1rem; margin-right: 1rem;
margin-left: 1.25rem margin-left: 1.25rem;
} }
[dir="ltr"] .breadcrumb__item:nth-child(n+2):before { [dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
border-right: 2px solid var(--color--gray-45) border-right: 2px solid var(--color--gray-45);
} }
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before { [dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
border-left: 2px solid var(--color--gray-45) border-left: 2px solid var(--color--gray-45);
} }
.breadcrumb__item:nth-child(n+2):before { .breadcrumb__item:nth-child(n+2):before {
@ -219,21 +219,21 @@
} }
[dir="ltr"] .breadcrumb__item:last-child { [dir="ltr"] .breadcrumb__item:last-child {
margin-right: var(--sp3) margin-right: var(--sp3);
} }
[dir="rtl"] .breadcrumb__item:last-child { [dir="rtl"] .breadcrumb__item:last-child {
margin-left: var(--sp3) margin-left: var(--sp3);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .breadcrumb__item:last-child { [dir="ltr"] .breadcrumb__item:last-child {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .breadcrumb__item:last-child { [dir="rtl"] .breadcrumb__item:last-child {
margin-left: 0 margin-left: 0;
} }
} }
@ -243,7 +243,7 @@
.breadcrumb__link { .breadcrumb__link {
text-decoration: none; text-decoration: none;
color: var(--color-text-primary-medium) color: var(--color-text-primary-medium);
} }
.breadcrumb__link:hover, .breadcrumb__link:hover,

View File

@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .button { [dir="ltr"] .button {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .button { [dir="rtl"] .button {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .button { [dir="ltr"] .button {
margin-right: var(--sp1) margin-right: var(--sp1);
} }
[dir="rtl"] .button { [dir="rtl"] .button {
margin-left: var(--sp1) margin-left: var(--sp1);
} }
.button { .button {
@ -60,7 +60,7 @@
font-weight: 700; font-weight: 700;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased;
} }
.button:hover, .button:hover,
@ -89,13 +89,10 @@
border-color: var(--color--gray-90); border-color: var(--color--gray-90);
} }
.button { /*
/*
IE11 doesn't work properly on button elements so we only do IE11 doesn't work properly on button elements so we only do
inline-flex on modern browsers. inline-flex on modern browsers.
*/ */
}
@supports (display: inline-flex) { @supports (display: inline-flex) {
@ -108,26 +105,26 @@
padding-bottom: 0; padding-bottom: 0;
padding-left: var(--sp1-5); padding-left: var(--sp1-5);
padding-right: var(--sp1-5); padding-right: var(--sp1-5);
line-height: var(--line-height-s) line-height: var(--line-height-s);
} }
} }
/* No margin if is part of a menu. */ /* No margin if is part of a menu. */
[dir="ltr"] .menu .button { [dir="ltr"] .menu .button {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .menu .button { [dir="rtl"] .menu .button {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .menu .button { [dir="ltr"] .menu .button {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .menu .button { [dir="rtl"] .menu .button {
margin-left: 0 margin-left: 0;
} }
.menu .button { .menu .button {
@ -147,7 +144,7 @@
.button--primary { .button--primary {
color: var(--color--white); color: var(--color--white);
background-color: var(--color--primary-40) background-color: var(--color--primary-40);
} }
.button--primary:hover, .button--primary:hover,
@ -170,23 +167,23 @@
.button--icon-back { .button--icon-back {
display: inline-flex; display: inline-flex;
align-items: center align-items: center;
} }
[dir="ltr"] .button--icon-back:before { [dir="ltr"] .button--icon-back:before {
margin-right: 0.5em margin-right: 0.5em;
} }
[dir="rtl"] .button--icon-back:before { [dir="rtl"] .button--icon-back:before {
margin-left: 0.5em margin-left: 0.5em;
} }
[dir="ltr"] .button--icon-back:before { [dir="ltr"] .button--icon-back:before {
border-left: solid 2px currentColor border-left: solid 2px currentColor;
} }
[dir="rtl"] .button--icon-back:before { [dir="rtl"] .button--icon-back:before {
border-right: solid 2px currentColor border-right: solid 2px currentColor;
} }
.button--icon-back:before { .button--icon-back:before {

View File

@ -12,7 +12,7 @@
select.cke_dialog_ui_input_select { select.cke_dialog_ui_input_select {
-webkit-appearance: menulist; -webkit-appearance: menulist;
appearance: menulist appearance: menulist;
} }
select.cke_dialog_ui_input_select::-ms-expand { select.cke_dialog_ui_input_select::-ms-expand {

View File

@ -29,7 +29,7 @@
} }
.comment--level-1 { .comment--level-1 {
border-top: 2px solid var(--color--gray-95) border-top: 2px solid var(--color--gray-95);
} }
.comment--level-1 ~ .comment--level-1 { .comment--level-1 ~ .comment--level-1 {
@ -87,7 +87,7 @@
border-radius: 2px; border-radius: 2px;
background-color: var(--color--primary-40); background-color: var(--color--primary-40);
font-size: 0.6875rem; font-size: 0.6875rem;
line-height: 1.3125rem line-height: 1.3125rem;
} }
[dir="ltr"] .comments__count:after { [dir="ltr"] .comments__count:after {
@ -99,11 +99,11 @@
} }
[dir="ltr"] .comments__count:after { [dir="ltr"] .comments__count:after {
border-right: 8px solid transparent; border-right: 0.5rem solid transparent;
} }
[dir="rtl"] .comments__count:after { [dir="rtl"] .comments__count:after {
border-left: 8px solid transparent; border-left: 0.5rem solid transparent;
} }
.comments__count:after { .comments__count:after {
@ -112,7 +112,7 @@
width: 0; width: 0;
height: 0; height: 0;
content: ""; content: "";
border-top: 7px solid var(--color--primary-40); border-top: 0.4375rem solid var(--color--primary-40);
} }
.comment-form { .comment-form {
@ -137,7 +137,7 @@
.comment { .comment {
position: relative; position: relative;
padding-top: var(--sp2) padding-top: var(--sp2);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -152,7 +152,7 @@
} }
.comment__text-content { .comment__text-content {
font-size: 1rem font-size: 1rem;
} }
.comment__text-content blockquote { .comment__text-content blockquote {
@ -160,10 +160,7 @@
line-height: var(--sp2); line-height: var(--sp2);
} }
.comment__text-content { /* Override for .field:not(:last-child) */
/* Override for .field:not(:last-child) */
}
.comment__text-content:not(:last-child) { .comment__text-content:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
@ -178,7 +175,7 @@
text-decoration: none; text-decoration: none;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: bold; font-weight: bold;
line-height: var(--sp) line-height: var(--sp);
} }
.comment__links-link:hover { .comment__links-link:hover {
@ -206,7 +203,7 @@
width: var(--sp2); width: var(--sp2);
height: var(--sp2); height: var(--sp2);
border-radius: 50%; border-radius: 50%;
background-color: var(--color--gray-95) background-color: var(--color--gray-95);
} }
.add-comment__picture *:not(img), .comment__picture *:not(img) { .add-comment__picture *:not(img), .comment__picture *:not(img) {
@ -218,7 +215,7 @@
.add-comment__picture img, .comment__picture img { .add-comment__picture img, .comment__picture img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover object-fit: cover;
/* @TODO: create image-style for profile's avatar to have image squared by default. */ /* @TODO: create image-style for profile's avatar to have image squared by default. */
} }
@ -233,7 +230,7 @@
/* stylelint-enable csstools/use-logical */ /* stylelint-enable csstools/use-logical */
width: 100%; width: 100%;
height: auto; height: auto;
transform: translate(-50%, -50%) transform: translate(-50%, -50%);
} }
} }
@ -252,7 +249,7 @@
.add-comment__picture, .add-comment__picture,
.comment__picture { .comment__picture {
width: var(--sp3); width: var(--sp3);
height: var(--sp3) height: var(--sp3);
} }
} }
@ -268,7 +265,7 @@
.indented .comment__picture { .indented .comment__picture {
width: var(--sp2); width: var(--sp2);
height: var(--sp2) height: var(--sp2);
} }
} }
@ -288,7 +285,7 @@
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
line-height: var(--sp) line-height: var(--sp);
} }
.comment__author a { .comment__author a {
@ -332,7 +329,7 @@
top: var(--sp2); /* Comment's padding-top */ top: var(--sp2); /* Comment's padding-top */
width: 0; width: 0;
height: 100%; height: 100%;
content: "" content: "";
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -402,7 +399,7 @@
font-weight: 600; font-weight: 600;
line-height: 1.125rem; line-height: 1.125rem;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
.show-hide-btn[aria-expanded="true"]:after { .show-hide-btn[aria-expanded="true"]:after {

View File

@ -24,25 +24,25 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .entity-moderation-form { [dir="ltr"] .entity-moderation-form {
padding-left: var(--sp) padding-left: var(--sp);
} }
[dir="rtl"] .entity-moderation-form { [dir="rtl"] .entity-moderation-form {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="ltr"] .entity-moderation-form { [dir="ltr"] .entity-moderation-form {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="rtl"] .entity-moderation-form { [dir="rtl"] .entity-moderation-form {
padding-left: var(--sp) padding-left: var(--sp);
} }
.entity-moderation-form { .entity-moderation-form {
flex-direction: column; flex-direction: column;
border: 1px solid var(--color--gray-95); border: 1px solid var(--color--gray-95);
background-color: var(--color--gray-100) background-color: var(--color--gray-100);
} }
.entity-moderation-form select, .entity-moderation-form select,
@ -53,103 +53,103 @@
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.entity-moderation-form { .entity-moderation-form {
flex-direction: row flex-direction: row;
} }
} }
[dir="ltr"] .entity-moderation-form__item { [dir="ltr"] .entity-moderation-form__item {
margin-right: var(--sp) margin-right: var(--sp);
} }
[dir="rtl"] .entity-moderation-form__item { [dir="rtl"] .entity-moderation-form__item {
margin-left: var(--sp) margin-left: var(--sp);
} }
.entity-moderation-form__item { .entity-moderation-form__item {
flex-basis: 0 flex-basis: 0;
} }
[dir="ltr"] .entity-moderation-form__item:last-child { [dir="ltr"] .entity-moderation-form__item:last-child {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .entity-moderation-form__item:last-child { [dir="rtl"] .entity-moderation-form__item:last-child {
margin-left: 0 margin-left: 0;
} }
.entity-moderation-form__item:last-child { .entity-moderation-form__item:last-child {
align-self: flex-start align-self: flex-start;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.entity-moderation-form__item:last-child { .entity-moderation-form__item:last-child {
align-self: flex-end align-self: flex-end;
} }
} }
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
margin-right: 0 margin-right: 0;
} }
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: 100% width: 100%;
} }
@supports (width: max-content) { @supports (width: max-content) {
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: max-content width: max-content;
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
margin-left: calc(-2 * (var(--grid-col-width) + var(--grid-gap))) margin-left: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
} }
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
margin-right: calc(-2 * (var(--grid-col-width) + var(--grid-gap))) margin-right: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
} }
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
margin-top: var(--sp2); margin-top: var(--sp2);
margin-bottom: var(--sp4) margin-bottom: var(--sp4);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)) width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
} }
} }
@media (min-width: 90rem) { @media (min-width: 90rem) {
[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form { [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form { [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
margin-right: 0 margin-right: 0;
} }
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form { .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)) width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
} }
} }

View File

@ -150,7 +150,7 @@
/* Details content wrapper */ /* Details content wrapper */
.olivero-details__wrapper { .olivero-details__wrapper {
margin: var(--sp1) margin: var(--sp1);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
@ -173,7 +173,7 @@
.olivero-details__wrapper { .olivero-details__wrapper {
margin-top: var(--sp1-5); margin-top: var(--sp1-5);
margin-bottom: var(--sp1-5) margin-bottom: var(--sp1-5);
} }
} }

View File

@ -18,7 +18,7 @@
--dropbutton--border-radius: var(--border-radius); --dropbutton--border-radius: var(--border-radius);
--dropbutton--font-size: var(--font-size-s); --dropbutton--font-size: var(--font-size-s);
--dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--text-hover-color: var(--color-text-primary-medium) /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ --dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
} }
.dropbutton-wrapper.open { .dropbutton-wrapper.open {
@ -39,7 +39,7 @@
position: relative; position: relative;
width: max-content; width: max-content;
height: var(--dropbutton--height); height: var(--dropbutton--height);
border-radius: var(--dropbutton--border-radius) border-radius: var(--dropbutton--border-radius);
} }
[dir="ltr"] .dropbutton-single .dropbutton-widget { [dir="ltr"] .dropbutton-single .dropbutton-widget {
@ -51,7 +51,7 @@
} }
.dropbutton-wrapper.open .dropbutton-widget { .dropbutton-wrapper.open .dropbutton-widget {
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0 border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
} }
[dir="ltr"] .dropbutton { [dir="ltr"] .dropbutton {
@ -100,7 +100,7 @@
cursor: pointer; cursor: pointer;
border-color: transparent; border-color: transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
background: var(--dropbutton--active-bg-color) background: var(--dropbutton--active-bg-color);
} }
.dropbutton-toggle button:focus { .dropbutton-toggle button:focus {
@ -115,11 +115,11 @@
content: ""; content: "";
transform: translateY(-25%) rotate(45deg); transform: translateY(-25%) rotate(45deg);
border-right: solid 2px var(--dropbutton--outline-color); border-right: solid 2px var(--dropbutton--outline-color);
border-bottom: solid 2px var(--dropbutton--outline-color) border-bottom: solid 2px var(--dropbutton--outline-color);
} }
.dropbutton-wrapper.open .dropbutton-toggle button:before { .dropbutton-wrapper.open :is(.dropbutton-toggle button:before) {
transform: translateY(25%) rotate(225deg) transform: translateY(25%) rotate(225deg);
} }
[dir="rtl"] .dropbutton-toggle button { [dir="rtl"] .dropbutton-toggle button {
@ -139,7 +139,7 @@
.dropbutton-action:first-child { .dropbutton-action:first-child {
border: solid 1px transparent; border: solid 1px transparent;
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */ border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
background: var(--dropbutton--active-bg-color) background: var(--dropbutton--active-bg-color);
} }
[dir="rtl"] .dropbutton-action:first-child { [dir="rtl"] .dropbutton-action:first-child {
@ -154,7 +154,7 @@
padding: 0 0.5625rem; padding: 0 0.5625rem;
text-decoration: none; text-decoration: none;
color: var(--dropbutton--text-color); color: var(--dropbutton--text-color);
font-weight: 600 font-weight: 600;
} }
.dropbutton-action a:hover { .dropbutton-action a:hover {
@ -166,14 +166,11 @@
outline-offset: -1px; /* Overlap parent container by 1px. */ outline-offset: -1px; /* Overlap parent container by 1px. */
} }
.dropbutton-action { /* Special rules if there is only one action. */
/* Special rules if there is only one action. */
}
.dropbutton-single .dropbutton-action:first-child { .dropbutton-single .dropbutton-action:first-child {
border-right: solid 1px transparent; /* LTR */ border-right: solid 1px transparent; /* LTR */
border-radius: var(--dropbutton--border-radius) border-radius: var(--dropbutton--border-radius);
} }
[dir="rtl"] .dropbutton-single .dropbutton-action:first-child { [dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
@ -191,7 +188,7 @@
width: calc(100% + var(--dropbutton--height)); width: calc(100% + var(--dropbutton--height));
border-right: 1px solid var(--dropbutton--active-bg-color); border-right: 1px solid var(--dropbutton--active-bg-color);
border-left: 1px solid var(--dropbutton--active-bg-color); border-left: 1px solid var(--dropbutton--active-bg-color);
background: var(--dropbutton--secondary-bg-color) background: var(--dropbutton--secondary-bg-color);
} }
.secondary-action:last-child { .secondary-action:last-child {
@ -203,5 +200,5 @@
} }
.dropbutton-wrapper.open .secondary-action { .dropbutton-wrapper.open .secondary-action {
visibility: visible visibility: visible;
} }

View File

@ -51,7 +51,7 @@ figcaption {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 0.875rem; font-size: 0.875rem;
font-style: italic; font-style: italic;
line-height: var(--sp) line-height: var(--sp);
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
@ -74,7 +74,7 @@ figcaption {
figcaption { figcaption {
padding-top: var(--sp); padding-top: var(--sp);
padding-bottom: var(--sp) padding-bottom: var(--sp);
} }
} }
@ -98,7 +98,7 @@ figcaption {
float: none; /* Override core's align.module.css. */ float: none; /* Override core's align.module.css. */
max-width: 100%; max-width: 100%;
margin-top: var(--sp3); margin-top: var(--sp3);
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -130,16 +130,13 @@ figcaption {
.align-right { .align-right {
max-width: 50%; max-width: 50%;
margin-top: var(--sp); margin-top: var(--sp);
margin-bottom: var(--sp) margin-bottom: var(--sp);
} }
} }
/* Pull out of grid if nested in content narrow layout. */ /* Pull out of grid if nested in content narrow layout. */
.layout--content-narrow .align-right, /* @todo this can be simplified. */
.layout--pass--content-narrow > * .align-right {
/* @todo this can be simplified. */
}
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -213,7 +210,7 @@ figcaption {
float: none; /* Override core's align.module.css. */ float: none; /* Override core's align.module.css. */
max-width: 100%; max-width: 100%;
margin-top: var(--sp3); margin-top: var(--sp3);
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -245,7 +242,7 @@ figcaption {
.align-left { .align-left {
max-width: 50%; max-width: 50%;
margin-top: var(--sp); margin-top: var(--sp);
margin-bottom: var(--sp) /* Extra right margins in case of aligning next to lists. */ margin-bottom: var(--sp); /* Extra right margins in case of aligning next to lists. */
} }
} }

View File

@ -27,7 +27,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: var(--color-text-neutral-soft) color: var(--color-text-neutral-soft);
} }
.feed-icon:hover { .feed-icon:hover {
@ -42,11 +42,11 @@
} }
[dir="ltr"] .feed-icon__icon { [dir="ltr"] .feed-icon__icon {
margin-left: var(--sp0-5) margin-left: var(--sp0-5);
} }
[dir="rtl"] .feed-icon__icon { [dir="rtl"] .feed-icon__icon {
margin-right: var(--sp0-5) margin-right: var(--sp0-5);
} }
.feed-icon__icon { .feed-icon__icon {
@ -57,7 +57,7 @@
width: var(--sp1-5); width: var(--sp1-5);
height: var(--sp1-5); height: var(--sp1-5);
color: var(--color--white); color: var(--color--white);
background-color: var(--color--primary-50) background-color: var(--color--primary-50);
} }
.feed-icon__icon svg { .feed-icon__icon svg {

View File

@ -28,7 +28,7 @@
} }
.node--view-mode-teaser .field { .node--view-mode-teaser .field {
margin-bottom: var(--sp) margin-bottom: var(--sp);
} }
.node--view-mode-teaser .field:last-child { .node--view-mode-teaser .field:last-child {
@ -38,7 +38,7 @@
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node--view-mode-teaser .field { .node--view-mode-teaser .field {
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
} }

View File

@ -94,7 +94,7 @@ _:-ms-fullscreen,
background-color: var(--color--gray-45); background-color: var(--color--gray-45);
font-size: var(--font-size-l); font-size: var(--font-size-l);
font-weight: 700; font-weight: 700;
line-height: var(--line-height-base) line-height: var(--line-height-base);
} }
.fieldset__legend + * { .fieldset__legend + * {
@ -174,13 +174,13 @@ _:-ms-fullscreen,
background-position: left top; /* LTR */ background-position: left top; /* LTR */
background-size: var(--sp1) var(--sp1); background-size: var(--sp1) var(--sp1);
font-size: var(--font-size-s); font-size: var(--font-size-s);
line-height: var(--line-height-s) line-height: var(--line-height-s);
} }
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.fieldset__error-message { .fieldset__error-message {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E") background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
} }
} }

View File

@ -26,27 +26,27 @@
.site-footer { .site-footer {
position: relative; /* stack above left social bar */ position: relative; /* stack above left social bar */
color: var(--color--gray-65); color: var(--color--gray-65);
background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%) background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);
} }
[dir="ltr"] .site-footer .menu { [dir="ltr"] .site-footer .menu {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .site-footer .menu { [dir="rtl"] .site-footer .menu {
margin-right: 0 margin-right: 0;
} }
.site-footer .menu { .site-footer .menu {
list-style: none list-style: none;
} }
[dir="ltr"] .site-footer .menu ul { [dir="ltr"] .site-footer .menu ul {
margin-left: var(--sp) margin-left: var(--sp);
} }
[dir="rtl"] .site-footer .menu ul { [dir="rtl"] .site-footer .menu ul {
margin-right: var(--sp) margin-right: var(--sp);
} }
.site-footer .menu li { .site-footer .menu li {
@ -54,7 +54,7 @@
} }
.site-footer a { .site-footer a {
color: inherit color: inherit;
} }
.site-footer a:hover { .site-footer a:hover {
@ -63,9 +63,9 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .site-footer { [dir="ltr"] body:not(.is-always-mobile-nav) .site-footer {
border-left: solid var(--content-left) var(--color--black) border-left: solid var(--content-left) var(--color--black);
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .site-footer { [dir="rtl"] body:not(.is-always-mobile-nav) .site-footer {
border-right: solid var(--content-left) var(--color--black) border-right: solid var(--content-left) var(--color--black);
} }
} }

View File

@ -37,12 +37,12 @@ input[type="radio"] {
background-position: 50% 50%; background-position: 50% 50%;
background-size: var(--sp1) var(--sp1); background-size: var(--sp1) var(--sp1);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
input[type="checkbox"]:focus, input[type="radio"]:focus { input[type="checkbox"]:focus, input[type="radio"]:focus {
border: solid 2px var(--color--primary-50); border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50) outline: solid 2px var(--color--primary-50);
} }
@supports (outline-style: double) { @supports (outline-style: double) {
@ -51,7 +51,7 @@ input[type="checkbox"]:focus, input[type="radio"]:focus {
border-width: 1px; border-width: 1px;
outline-width: 6px; outline-width: 6px;
outline-style: double; outline-style: double;
outline-offset: -1px outline-offset: -1px;
} }
} }
@ -60,7 +60,7 @@ input[type="checkbox"]:hover, input[type="radio"]:hover {
} }
input[type="checkbox"][disabled], input[type="radio"][disabled] { input[type="checkbox"][disabled], input[type="radio"][disabled] {
background-color: var(--color--gray-100) background-color: var(--color--gray-100);
} }
input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover { input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover {
@ -75,31 +75,27 @@ input[type="checkbox"]:checked, input[type="radio"]:checked {
border-width: 2px; border-width: 2px;
} }
input[type="checkbox"].error, input[type="radio"].error { input.error[type="checkbox"], input.error[type="radio"] {
border: solid 2px var(--color--red) border: solid 2px var(--color--red);
} }
input[type="checkbox"].error:focus, input[type="radio"].error:focus { input.error[type="checkbox"]:focus, input.error[type="radio"]:focus {
outline-color: var(--color--red); outline-color: var(--color--red);
outline-offset: -2px; outline-offset: -2px;
} }
input[type="checkbox"], /* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */
input[type="radio"] {
/* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */ input.error[type="checkbox"]::-ms-check, input.error[type="radio"]::-ms-check {
}
input[type="checkbox"].error::-ms-check, input[type="radio"].error::-ms-check {
border: 1px solid var(--color--red); border: 1px solid var(--color--red);
} }
[dir="ltr"] input[type="checkbox"] + label,[dir="ltr"] input[type="radio"] + label { [dir="ltr"] input[type="checkbox"] + label,[dir="ltr"] input[type="radio"] + label {
padding-left: var(--sp0-5) padding-left: var(--sp0-5);
} }
[dir="rtl"] input[type="checkbox"] + label,[dir="rtl"] input[type="radio"] + label { [dir="rtl"] input[type="checkbox"] + label,[dir="rtl"] input[type="radio"] + label {
padding-right: var(--sp0-5) padding-right: var(--sp0-5);
} }
input[type="checkbox"] + label, input[type="radio"] + label { input[type="checkbox"] + label, input[type="radio"] + label {
@ -111,7 +107,7 @@ input[type="checkbox"]:checked {
} }
input[type="radio"] { input[type="radio"] {
border-radius: 50% border-radius: 50%;
} }
input[type="radio"]:checked { input[type="radio"]:checked {
@ -126,7 +122,7 @@ input[type="radio"]:focus {
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50);
} }
input[type="radio"].error:focus { input.error[type="radio"]:focus {
outline-color: transparent; outline-color: transparent;
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
} }

View File

@ -58,12 +58,12 @@ select {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
select:focus { select:focus {
border: solid 2px var(--color--primary-50); border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50) outline: solid 2px var(--color--primary-50);
} }
@supports (outline-style: double) { @supports (outline-style: double) {
@ -72,14 +72,11 @@ select:focus {
border-width: 1px; border-width: 1px;
outline-width: 6px; outline-width: 6px;
outline-style: double; outline-style: double;
outline-offset: -1px outline-offset: -1px;
} }
} }
select { /* Hides default chevron within Internet Explorer. */
/* Hides default chevron within Internet Explorer. */
}
select::-ms-expand { select::-ms-expand {
display: none; display: none;
@ -91,7 +88,7 @@ select[disabled] {
} }
select.error { select.error {
border: solid 2px var(--color--red) border: solid 2px var(--color--red);
} }
select.error:focus { select.error:focus {
@ -102,7 +99,7 @@ select[multiple] {
height: auto; height: auto;
padding: var(--sp0-5); padding: var(--sp0-5);
background-image: none; background-image: none;
line-height: 1 /* Needed by non-Chromium based MS Edge browsers. */ line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
} }
select[multiple] option { select[multiple] option {
@ -113,10 +110,7 @@ select.form-element--small {
height: var(--sp2-5); height: var(--sp2-5);
} }
select { /* Necessary to show chevron in forced colors mode in modern browsers. */
/* Necessary to show chevron in forced colors mode in modern browsers. */
}
@media (forced-colors: active) { @media (forced-colors: active) {
@ -131,7 +125,7 @@ select {
select { select {
background-image: none; background-image: none;
-webkit-appearance: listbox; -webkit-appearance: listbox;
appearance: listbox /* Default <select> appearance value for modern browsers. */ appearance: listbox; /* Default <select> appearance value for modern browsers. */
/* Lets browser set <select> appearance to whatever the browser's default is. */ /* Lets browser set <select> appearance to whatever the browser's default is. */
} }
@ -139,15 +133,12 @@ select {
select { select {
-webkit-appearance: revert; -webkit-appearance: revert;
appearance: revert appearance: revert;
} }
} }
} }
select { /* Necessary for Internet Explorer to show chevron. */
/* Necessary for Internet Explorer to show chevron. */
}
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {

View File

@ -49,47 +49,47 @@ textarea {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
[type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus { :is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea):focus {
border: solid 2px var(--color--primary-50); border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50) outline: solid 2px var(--color--primary-50);
} }
@supports (outline-style: double) { @supports (outline-style: double) {
[type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus { :is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea):focus {
border-width: 1px; border-width: 1px;
outline-width: 6px; outline-width: 6px;
outline-style: double; outline-style: double;
outline-offset: -1px outline-offset: -1px;
} }
} }
[type="color"]::-ms-clear, [type="date"]::-ms-clear, [type="datetime-local"]::-ms-clear, [type="email"]::-ms-clear, [type="file"]::-ms-clear, [type="month"]::-ms-clear, [type="number"]::-ms-clear, [type="password"]::-ms-clear, [type="search"]::-ms-clear, [type="tel"]::-ms-clear, [type="text"]::-ms-clear, [type="time"]::-ms-clear, [type="url"]::-ms-clear, [type="week"]::-ms-clear, textarea::-ms-clear { :is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea)::-ms-clear {
display: none; display: none;
} }
[type="color"][disabled], [type="date"][disabled], [type="datetime-local"][disabled], [type="email"][disabled], [type="file"][disabled], [type="month"][disabled], [type="number"][disabled], [type="password"][disabled], [type="search"][disabled], [type="tel"][disabled], [type="text"][disabled], [type="time"][disabled], [type="url"][disabled], [type="week"][disabled], textarea[disabled] { [disabled]:is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea) {
color: var(--color--gray-60); color: var(--color--gray-60);
background-color: var(--color--gray-100); background-color: var(--color--gray-100);
} }
[type="color"].error, [type="date"].error, [type="datetime-local"].error, [type="email"].error, [type="file"].error, [type="month"].error, [type="number"].error, [type="password"].error, [type="search"].error, [type="tel"].error, [type="text"].error, [type="time"].error, [type="url"].error, [type="week"].error, textarea.error { .error:is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea) {
border: solid 2px var(--color--red) border: solid 2px var(--color--red);
} }
[type="color"].error:focus, [type="date"].error:focus, [type="datetime-local"].error:focus, [type="email"].error:focus, [type="file"].error:focus, [type="month"].error:focus, [type="number"].error:focus, [type="password"].error:focus, [type="search"].error:focus, [type="tel"].error:focus, [type="text"].error:focus, [type="time"].error:focus, [type="url"].error:focus, [type="week"].error:focus, textarea.error:focus { .error:is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea):focus {
outline-color: var(--color--red); outline-color: var(--color--red);
outline-offset: -2px; outline-offset: -2px;
} }
[type="color"].error + .ck-editor > .ck-editor__main, [type="date"].error + .ck-editor > .ck-editor__main, [type="datetime-local"].error + .ck-editor > .ck-editor__main, [type="email"].error + .ck-editor > .ck-editor__main, [type="file"].error + .ck-editor > .ck-editor__main, [type="month"].error + .ck-editor > .ck-editor__main, [type="number"].error + .ck-editor > .ck-editor__main, [type="password"].error + .ck-editor > .ck-editor__main, [type="search"].error + .ck-editor > .ck-editor__main, [type="tel"].error + .ck-editor > .ck-editor__main, [type="text"].error + .ck-editor > .ck-editor__main, [type="time"].error + .ck-editor > .ck-editor__main, [type="url"].error + .ck-editor > .ck-editor__main, [type="week"].error + .ck-editor > .ck-editor__main, textarea.error + .ck-editor > .ck-editor__main { .error:is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea) + .ck-editor > .ck-editor__main {
border: solid 2px var(--color--red); border: solid 2px var(--color--red);
} }
[type="color"].form-element--small, [type="date"].form-element--small, [type="datetime-local"].form-element--small, [type="email"].form-element--small, [type="file"].form-element--small, [type="month"].form-element--small, [type="number"].form-element--small, [type="password"].form-element--small, [type="search"].form-element--small, [type="tel"].form-element--small, [type="text"].form-element--small, [type="time"].form-element--small, [type="url"].form-element--small, [type="week"].form-element--small, textarea.form-element--small { .form-element--small:is([type="color"],[type="date"],[type="datetime-local"],[type="email"],[type="file"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],textarea) {
min-height: var(--sp2-5); min-height: var(--sp2-5);
} }
@ -110,28 +110,26 @@ textarea {
[type="url"], [type="url"],
[type="week"], [type="week"],
textarea { textarea {
width: auto width: auto;
} }
} }
[type="date"] { /* Ensure that date field isn't larger than other fields. */
/* Ensure that date field isn't larger than other fields. */
}
[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper { [dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper { [dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper { [dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper { [dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-left: 0 padding-left: 0;
} }
[type="date"]::-webkit-datetime-edit-fields-wrapper { [type="date"]::-webkit-datetime-edit-fields-wrapper {

View File

@ -113,7 +113,7 @@ tr .form-item,
/* Use a background image to prevent screen readers from announcing the text. */ /* Use a background image to prevent screen readers from announcing the text. */
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0.5rem 0.5rem background-size: 0.5rem 0.5rem;
} }
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
@ -121,7 +121,7 @@ tr .form-item,
.form-item__label.form-required::after, .form-item__label.form-required::after,
.fieldset__label.form-required::after, .fieldset__label.form-required::after,
.required-mark::after { .required-mark::after {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A") background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
} }
} }
@ -162,13 +162,13 @@ tr .form-item,
background-position: left top; /* LTR */ background-position: left top; /* LTR */
background-size: var(--sp1) var(--sp1); background-size: var(--sp1) var(--sp1);
font-size: var(--font-size-s); font-size: var(--font-size-s);
line-height: var(--line-height-s) line-height: var(--line-height-s);
} }
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.form-item--error-message { .form-item--error-message {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E") background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
} }
} }

View File

@ -24,35 +24,35 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .mobile-buttons { [dir="ltr"] .mobile-buttons {
margin-left: auto margin-left: auto;
} }
[dir="rtl"] .mobile-buttons { [dir="rtl"] .mobile-buttons {
margin-right: auto margin-right: auto;
} }
.mobile-buttons { .mobile-buttons {
margin-top: var(--sp0-5) margin-top: var(--sp0-5);
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.mobile-buttons { .mobile-buttons {
margin-top: var(--sp2) margin-top: var(--sp2);
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.mobile-buttons { .mobile-buttons {
margin-top: var(--sp4) margin-top: var(--sp4);
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
.mobile-buttons { .mobile-buttons {
margin-top: var(--sp6) margin-top: var(--sp6);
} }
} }

View File

@ -24,27 +24,27 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .header-nav { [dir="ltr"] .header-nav {
left: 100% left: 100%;
} }
[dir="rtl"] .header-nav { [dir="rtl"] .header-nav {
right: 100% right: 100%;
} }
[dir="ltr"] .header-nav { [dir="ltr"] .header-nav {
padding-left: var(--sp) padding-left: var(--sp);
} }
[dir="rtl"] .header-nav { [dir="rtl"] .header-nav {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="ltr"] .header-nav { [dir="ltr"] .header-nav {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="rtl"] .header-nav { [dir="rtl"] .header-nav {
padding-left: var(--sp) padding-left: var(--sp);
} }
.header-nav { .header-nav {
@ -67,12 +67,12 @@
* viewport on short screens. */ * viewport on short screens. */
border-top: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); border-top: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
background-color: var(--color--white); background-color: var(--color--white);
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1) box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
} }
.header-nav.is-active { .header-nav.is-active {
visibility: visible; visibility: visible;
transform: translateX(-100%) /* LTR */ transform: translateX(-100%); /* LTR */
} }
[dir="rtl"] .header-nav.is-active { [dir="rtl"] .header-nav.is-active {
@ -82,44 +82,41 @@
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.header-nav { .header-nav {
border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px)) border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .header-nav { [dir="ltr"] .header-nav {
padding-left: var(--sp3) padding-left: var(--sp3);
} }
[dir="rtl"] .header-nav { [dir="rtl"] .header-nav {
padding-right: var(--sp3) padding-right: var(--sp3);
} }
.header-nav { .header-nav {
padding-bottom: var(--sp3); padding-bottom: var(--sp3);
border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px)) border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.header-nav { .header-nav {
grid-column: 5 / 14 grid-column: 5 / 14;
} }
} }
.header-nav { /*
/*
* Ensure top border has the same color as the background when in forced colors. * Ensure top border has the same color as the background when in forced colors.
*/ */
}
@media (forced-colors: active) { @media (forced-colors: active) {
.header-nav { .header-nav {
border-top-color: canvas border-top-color: canvas;
} }
} }
@ -135,19 +132,19 @@ html.js .header-nav {
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav { [dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav { [dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav { [dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav { [dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
padding-left: 0 padding-left: 0;
} }
body:not(.is-always-mobile-nav) .header-nav { body:not(.is-always-mobile-nav) .header-nav {
@ -166,49 +163,49 @@ body:not(.is-always-mobile-nav) .header-nav {
transition: transform 0.2s; transition: transform 0.2s;
transform: none; transform: none;
border-top: 0; border-top: 0;
box-shadow: none box-shadow: none;
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] body.is-always-mobile-nav .header-nav { [dir="ltr"] body.is-always-mobile-nav .header-nav {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="rtl"] body.is-always-mobile-nav .header-nav { [dir="rtl"] body.is-always-mobile-nav .header-nav {
padding-left: var(--sp) padding-left: var(--sp);
} }
body.is-always-mobile-nav .header-nav { body.is-always-mobile-nav .header-nav {
overflow: auto; overflow: auto;
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
transition: transform 0.2s, visibility 0.2s; transition: transform 0.2s, visibility 0.2s;
border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)) border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
} }
} }
@media (min-width: 90rem) { @media (min-width: 90rem) {
[dir="ltr"] body.is-always-mobile-nav .header-nav { [dir="ltr"] body.is-always-mobile-nav .header-nav {
padding-right: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))) padding-right: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
} }
[dir="rtl"] body.is-always-mobile-nav .header-nav { [dir="rtl"] body.is-always-mobile-nav .header-nav {
padding-left: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))) padding-left: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
} }
body.is-always-mobile-nav .header-nav { body.is-always-mobile-nav .header-nav {
max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap))))) max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
} }
} }
[dir="ltr"] .header-nav-overlay { [dir="ltr"] .header-nav-overlay {
left: 0 left: 0;
} }
[dir="rtl"] .header-nav-overlay { [dir="rtl"] .header-nav-overlay {
right: 0 right: 0;
} }
.header-nav-overlay { .header-nav-overlay {
@ -219,16 +216,16 @@ body.is-always-mobile-nav .header-nav {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
opacity: 0.2; opacity: 0.2;
background: var(--color--gray-5) background: var(--color--gray-5);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
.header-nav-overlay { .header-nav-overlay {
background: canvastext background: canvastext;
} }
} }
.is-overlay-active .header-nav-overlay { .is-overlay-active .header-nav-overlay {
display: block display: block;
} }

View File

@ -27,7 +27,7 @@
margin-left: calc(-1 * var(--sp)); margin-left: calc(-1 * var(--sp));
margin-right: calc(-1 * var(--sp)); margin-right: calc(-1 * var(--sp));
margin-bottom: var(--sp2); margin-bottom: var(--sp2);
background: var(--color--black) background: var(--color--black);
} }
.block-search-narrow .search-block-form { .block-search-narrow .search-block-form {
@ -44,19 +44,19 @@
} }
[dir="ltr"] .block-search-narrow input[type="search"] { [dir="ltr"] .block-search-narrow input[type="search"] {
padding-left: var(--sp) padding-left: var(--sp);
} }
[dir="rtl"] .block-search-narrow input[type="search"] { [dir="rtl"] .block-search-narrow input[type="search"] {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="ltr"] .block-search-narrow input[type="search"] { [dir="ltr"] .block-search-narrow input[type="search"] {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="rtl"] .block-search-narrow input[type="search"] { [dir="rtl"] .block-search-narrow input[type="search"] {
padding-left: var(--sp) padding-left: var(--sp);
} }
.block-search-narrow input[type="search"] { .block-search-narrow input[type="search"] {
@ -75,7 +75,7 @@
box-shadow: none; box-shadow: none;
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 1rem; font-size: 1rem;
-webkit-appearance: none -webkit-appearance: none;
} }
.block-search-narrow input[type="search"]::-ms-clear { .block-search-narrow input[type="search"]::-ms-clear {
@ -86,7 +86,7 @@
.block-search-narrow input[type="search"]:focus { .block-search-narrow input[type="search"]:focus {
outline: solid 4px transparent; outline: solid 4px transparent;
outline-offset: -4px; outline-offset: -4px;
background-size: 100% 0.3125rem background-size: 100% 0.3125rem;
/* /*
We normally indicate focus by animating background-image width. This isn't We normally indicate focus by animating background-image width. This isn't
@ -97,63 +97,63 @@
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.block-search-narrow input[type="search"]:focus { .block-search-narrow input[type="search"]:focus {
border-bottom-width: 5px border-bottom-width: 5px;
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .block-search-narrow input[type="search"] { [dir="ltr"] .block-search-narrow input[type="search"] {
padding-left: var(--sp2) padding-left: var(--sp2);
} }
[dir="rtl"] .block-search-narrow input[type="search"] { [dir="rtl"] .block-search-narrow input[type="search"] {
padding-right: var(--sp2) padding-right: var(--sp2);
} }
[dir="ltr"] .block-search-narrow input[type="search"] { [dir="ltr"] .block-search-narrow input[type="search"] {
padding-right: var(--sp2) padding-right: var(--sp2);
} }
[dir="rtl"] .block-search-narrow input[type="search"] { [dir="rtl"] .block-search-narrow input[type="search"] {
padding-left: var(--sp2) padding-left: var(--sp2);
} }
.block-search-narrow input[type="search"] { .block-search-narrow input[type="search"] {
height: calc(4 * var(--sp)) height: calc(4 * var(--sp));
} }
} }
[dir="ltr"] .block-search-narrow .search-form__submit { [dir="ltr"] .block-search-narrow .search-form__submit {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .block-search-narrow .search-form__submit { [dir="rtl"] .block-search-narrow .search-form__submit {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .block-search-narrow .search-form__submit { [dir="ltr"] .block-search-narrow .search-form__submit {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .block-search-narrow .search-form__submit { [dir="rtl"] .block-search-narrow .search-form__submit {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .block-search-narrow .search-form__submit { [dir="ltr"] .block-search-narrow .search-form__submit {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .block-search-narrow .search-form__submit { [dir="rtl"] .block-search-narrow .search-form__submit {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .block-search-narrow .search-form__submit { [dir="ltr"] .block-search-narrow .search-form__submit {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .block-search-narrow .search-form__submit { [dir="rtl"] .block-search-narrow .search-form__submit {
padding-left: 0 padding-left: 0;
} }
.block-search-narrow .search-form__submit { .block-search-narrow .search-form__submit {
@ -168,7 +168,7 @@
padding-bottom: 0; padding-bottom: 0;
cursor: pointer; cursor: pointer;
border-color: transparent; border-color: transparent;
background-color: transparent background-color: transparent;
/* /*
When in Windows high contrast mode, FF will not output either background When in Windows high contrast mode, FF will not output either background
@ -177,11 +177,11 @@
} }
[dir="ltr"] .block-search-narrow .search-form__submit .icon--search { [dir="ltr"] .block-search-narrow .search-form__submit .icon--search {
left: 0 left: 0;
} }
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search { [dir="rtl"] .block-search-narrow .search-form__submit .icon--search {
right: 0 right: 0;
} }
.block-search-narrow .search-form__submit .icon--search { .block-search-narrow .search-form__submit .icon--search {
@ -194,15 +194,15 @@
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-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-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto background-size: auto;
} }
[dir="ltr"] .block-search-narrow .search-form__submit .icon--search:after { [dir="ltr"] .block-search-narrow .search-form__submit .icon--search:after {
left: 0 left: 0;
} }
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after { [dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {
right: 0 right: 0;
} }
.block-search-narrow .search-form__submit .icon--search:after { .block-search-narrow .search-form__submit .icon--search:after {
@ -214,7 +214,7 @@
transition: transform 0.2s; transition: transform 0.2s;
transform: scaleX(0); transform: scaleX(0);
transform-origin: left; /* LTR */ transform-origin: left; /* LTR */
border-top: solid 5px var(--color--primary-50); border-top: solid 0.3125rem var(--color--primary-50);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -226,14 +226,14 @@
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; -webkit-mask-position: center;
mask-position: center mask-position: center;
} }
} }
.block-search-narrow .search-form__submit:focus { .block-search-narrow .search-form__submit:focus {
outline: solid 4px transparent; outline: solid 4px transparent;
outline-offset: -4px; outline-offset: -4px;
box-shadow: none box-shadow: none;
} }
.block-search-narrow .search-form__submit:focus span:after { .block-search-narrow .search-form__submit:focus span:after {
@ -243,7 +243,7 @@
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.block-search-narrow .search-form__submit:focus { .block-search-narrow .search-form__submit:focus {
border-bottom-width: var(--sp0-5) border-bottom-width: var(--sp0-5);
} }
.block-search-narrow .search-form__submit:focus span:after { .block-search-narrow .search-form__submit:focus span:after {
@ -254,15 +254,12 @@
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.block-search-narrow .search-form__submit { .block-search-narrow .search-form__submit {
width: 5rem width: 5rem;
} }
} }
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.block-search-narrow .search-form__submit {
/* IE11's high contrast show will not show the background image, so we show the text. */ /* IE11's high contrast show will not show the background image, so we show the text. */
}
.block-search-narrow .search-form__submit .visually-hidden { .block-search-narrow .search-form__submit .visually-hidden {
position: static; position: static;
overflow: visible; overflow: visible;
@ -272,43 +269,37 @@
text-align: center; text-align: center;
} }
.block-search-narrow .search-form__submit {
/* Edge's high contrast does show the background image, so we hide it. */ /* Edge's high contrast does show the background image, so we hide it. */
}
.block-search-narrow .search-form__submit .icon--search { .block-search-narrow .search-form__submit .icon--search {
display: none; display: none;
} }
} }
.block-search-narrow { /* 500px is the width of the primary nav at mobile. */
/* 500px is the width of the primary nav at mobile. */
}
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
[dir="ltr"] .block-search-narrow { [dir="ltr"] .block-search-narrow {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .block-search-narrow { [dir="rtl"] .block-search-narrow {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .block-search-narrow { [dir="ltr"] .block-search-narrow {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .block-search-narrow { [dir="rtl"] .block-search-narrow {
margin-left: 0 margin-left: 0;
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .block-search-narrow { body:not(.is-always-mobile-nav) .block-search-narrow {
display: none display: none;
} }
} }

View File

@ -93,7 +93,7 @@
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
transition: all 0.2s; transition: all 0.2s;
background: var(--color--black) background: var(--color--black);
} }
.block-search-wide__wrapper.is-active { .block-search-wide__wrapper.is-active {
@ -133,7 +133,7 @@
box-shadow: none; box-shadow: none;
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 2rem; font-size: 2rem;
-webkit-appearance: none -webkit-appearance: none;
} }
.block-search-wide__wrapper input[type="search"]::-ms-clear { .block-search-wide__wrapper input[type="search"]::-ms-clear {
@ -143,7 +143,7 @@
.block-search-wide__wrapper input[type="search"]:focus { .block-search-wide__wrapper input[type="search"]:focus {
outline: solid 4px transparent; outline: solid 4px transparent;
outline-offset: -4px outline-offset: -4px;
/* /*
We normally indicate focus by animating background-image width. This isn't We normally indicate focus by animating background-image width. This isn't
@ -154,7 +154,7 @@
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.block-search-wide__wrapper input[type="search"]:focus { .block-search-wide__wrapper input[type="search"]:focus {
border-bottom-width: var(--sp0-5) border-bottom-width: var(--sp0-5);
} }
} }
@ -212,7 +212,7 @@
padding-bottom: 0; padding-bottom: 0;
cursor: pointer; cursor: pointer;
border-color: transparent; border-color: transparent;
background-color: transparent background-color: transparent;
/* /*
When in Windows high contrast mode, FF will not output either background When in Windows high contrast mode, FF will not output either background
@ -238,7 +238,7 @@
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-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-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain background-size: contain;
} }
[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search:after { [dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
@ -264,7 +264,7 @@
.block-search-wide__wrapper .search-form__submit:focus { .block-search-wide__wrapper .search-form__submit:focus {
outline: solid 4px transparent; outline: solid 4px transparent;
outline-offset: -4px; outline-offset: -4px;
box-shadow: none box-shadow: none;
} }
.block-search-wide__wrapper .search-form__submit:focus span:after { .block-search-wide__wrapper .search-form__submit:focus span:after {
@ -274,7 +274,7 @@
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.block-search-wide__wrapper .search-form__submit:focus { .block-search-wide__wrapper .search-form__submit:focus {
border-bottom-width: var(--sp0-5) border-bottom-width: var(--sp0-5);
} }
.block-search-wide__wrapper .search-form__submit:focus span:after { .block-search-wide__wrapper .search-form__submit:focus span:after {
@ -283,10 +283,7 @@
} }
@media screen and (-ms-high-contrast: active) { @media screen and (-ms-high-contrast: active) {
.block-search-wide__wrapper .search-form__submit {
/* IE11's high contrast show will not show the background image, so we show the text. */ /* IE11's high contrast show will not show the background image, so we show the text. */
}
.block-search-wide__wrapper .search-form__submit .visually-hidden { .block-search-wide__wrapper .search-form__submit .visually-hidden {
position: static; position: static;
overflow: visible; overflow: visible;
@ -296,10 +293,7 @@
text-align: center; text-align: center;
} }
.block-search-wide__wrapper .search-form__submit {
/* Edge's high contrast does show the background image, so we hide it. */ /* Edge's high contrast does show the background image, so we hide it. */
}
.block-search-wide__wrapper .search-form__submit .icon--search { .block-search-wide__wrapper .search-form__submit .icon--search {
display: none; display: none;
} }
@ -342,12 +336,12 @@
color: var(--color-text-neutral-loud); /* Affects SVG search icon. */ color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
border: 0; border: 0;
background: transparent; background: transparent;
-webkit-appearance: none -webkit-appearance: none;
} }
.block-search-wide__button:focus { .block-search-wide__button:focus {
position: relative; position: relative;
outline: 0 outline: 0;
} }
.block-search-wide__button:focus:after { .block-search-wide__button:focus:after {
@ -363,7 +357,7 @@
} }
.block-search-wide__button[aria-expanded="true"] { .block-search-wide__button[aria-expanded="true"] {
background: var(--color--black) background: var(--color--black);
} }
.block-search-wide__button[aria-expanded="true"]:focus:after { .block-search-wide__button[aria-expanded="true"]:focus:after {
@ -412,7 +406,7 @@
@media (forced-colors: active) { @media (forced-colors: active) {
.block-search-wide__button { .block-search-wide__button {
background: ButtonFace background: ButtonFace;
} }
.block-search-wide__button path { .block-search-wide__button path {
@ -434,7 +428,7 @@ html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom left; /* LTR */ background-position: bottom left; /* LTR */
background-size: 0% 0.625rem background-size: 0% 0.625rem;
} }
[dir] .block-search-wide__wrapper input[type="search"]:focus { [dir] .block-search-wide__wrapper input[type="search"]:focus {
@ -453,6 +447,6 @@ html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
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 { body:not(.is-always-mobile-nav) .block-search-wide__button {
display: block display: block;
} }
} }

View File

@ -25,28 +25,28 @@
[dir="ltr"] .site-branding { [dir="ltr"] .site-branding {
margin-left: calc(-1 * var(--container-padding)); margin-left: calc(-1 * var(--container-padding));
margin-right: var(--sp) margin-right: var(--sp);
} }
[dir="rtl"] .site-branding { [dir="rtl"] .site-branding {
margin-right: calc(-1 * var(--container-padding)); margin-right: calc(-1 * var(--container-padding));
margin-left: var(--sp) margin-left: var(--sp);
} }
[dir="ltr"] .site-branding { [dir="ltr"] .site-branding {
padding-left: var(--container-padding) padding-left: var(--container-padding);
} }
[dir="rtl"] .site-branding { [dir="rtl"] .site-branding {
padding-right: var(--container-padding) padding-right: var(--container-padding);
} }
[dir="ltr"] .site-branding { [dir="ltr"] .site-branding {
padding-right: var(--container-padding) padding-right: var(--container-padding);
} }
[dir="rtl"] .site-branding { [dir="rtl"] .site-branding {
padding-left: var(--container-padding) padding-left: var(--container-padding);
} }
.site-branding { .site-branding {
@ -57,13 +57,13 @@
min-height: var(--sp3); /* Negative margin to break out of .container element. */ min-height: var(--sp3); /* Negative margin to break out of .container element. */
padding-top: 0; padding-top: 0;
padding-bottom: var(--sp0-5); padding-bottom: var(--sp0-5);
background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%) background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.site-branding { .site-branding {
min-height: var(--sp4) min-height: var(--sp4);
} }
} }
@ -72,31 +72,31 @@
.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-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6); min-height: var(--sp6);
padding-bottom: var(--sp) padding-bottom: var(--sp);
} }
} }
@media (min-width: 62.5rem) { @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. */ 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) { @media (min-width: 75rem) {
[dir="ltr"] .site-branding { [dir="ltr"] .site-branding {
margin-left: calc(-1 * var(--container-padding)) margin-left: calc(-1 * var(--container-padding));
} }
[dir="rtl"] .site-branding { [dir="rtl"] .site-branding {
margin-right: calc(-1 * var(--container-padding)) margin-right: calc(-1 * var(--container-padding));
} }
.site-branding { .site-branding {
min-height: var(--site-header-height-wide); min-height: var(--site-header-height-wide);
padding-top: 0; padding-top: 0;
padding-bottom: 0 padding-bottom: 0;
} }
} }
@ -114,7 +114,7 @@
.site-branding__inner { .site-branding__inner {
display: flex; display: flex;
align-items: center align-items: center;
} }
.site-branding__inner a { .site-branding__inner a {
@ -124,64 +124,64 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] .site-branding__inner { [dir="ltr"] .site-branding__inner {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .site-branding__inner { [dir="rtl"] .site-branding__inner {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .site-branding__inner { [dir="ltr"] .site-branding__inner {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .site-branding__inner { [dir="rtl"] .site-branding__inner {
padding-left: 0 padding-left: 0;
} }
.site-branding__inner { .site-branding__inner {
height: var(--header-height-wide-when-fixed); height: var(--header-height-wide-when-fixed);
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5) padding-bottom: var(--sp0-5);
} }
} }
.site-branding__logo { .site-branding__logo {
flex-shrink: 0; flex-shrink: 0;
max-width: 100% max-width: 100%;
} }
.site-branding__logo img { .site-branding__logo img {
width: auto; width: auto;
max-width: 100%; max-width: 100%;
max-height: var(--sp2) max-height: var(--sp2);
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.site-branding__logo img { .site-branding__logo img {
max-height: var(--sp3) max-height: var(--sp3);
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.site-branding__logo img { .site-branding__logo img {
max-height: var(--sp4) max-height: var(--sp4);
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
.site-branding__logo img { .site-branding__logo img {
max-height: calc(var(--header-height-wide-when-fixed) - var(--sp)) max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
} }
} }
.site-branding__text { .site-branding__text {
color: var(--color--white); color: var(--color--white);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: bold font-weight: bold;
} }
.site-branding__text a { .site-branding__text a {
@ -192,7 +192,7 @@
.site-branding__text { .site-branding__text {
font-size: 1.75rem; font-size: 1.75rem;
line-height: 1.75rem line-height: 1.75rem;
} }
} }
@ -201,7 +201,7 @@
.site-branding__text { .site-branding__text {
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: 2rem; font-size: 2rem;
line-height: var(--sp2) line-height: var(--sp2);
} }
} }
@ -211,9 +211,9 @@
} }
[dir="ltr"] .site-branding__logo + .site-branding__text { [dir="ltr"] .site-branding__logo + .site-branding__text {
margin-left: 0.75rem margin-left: 0.75rem;
} }
[dir="rtl"] .site-branding__logo + .site-branding__text { [dir="rtl"] .site-branding__logo + .site-branding__text {
margin-right: 0.75rem margin-right: 0.75rem;
} }

View File

@ -27,7 +27,7 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
.sticky-header-toggle { .sticky-header-toggle {
display: none display: none;
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
@ -43,7 +43,7 @@
opacity: 0; opacity: 0;
border: 0; border: 0;
outline: 0; outline: 0;
background-color: var(--color--primary-50) background-color: var(--color--primary-50);
} }
.sticky-header-toggle:focus { .sticky-header-toggle:focus {
@ -58,14 +58,14 @@
@media (min-width: 75rem) { @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 visibility: visible;
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
body.is-always-mobile-nav .sticky-header-toggle { body.is-always-mobile-nav .sticky-header-toggle {
visibility: hidden visibility: hidden;
} }
} }
@ -75,22 +75,22 @@ body.is-always-mobile-nav .sticky-header-toggle {
height: 1.3125rem; height: 1.3125rem;
transition: opacity 0.2s; transition: opacity 0.2s;
pointer-events: none; pointer-events: none;
transform-style: preserve-3d transform-style: preserve-3d;
} }
.sticky-header-toggle__icon > span { .sticky-header-toggle__icon > span {
display: block; display: block;
height: 0; height: 0;
/* Intentionally not using CSS logical properties. */ /* Intentionally not using CSS logical properties. */
border-top: solid 3px var(--color--white) border-top: solid 3px var(--color--white);
} }
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) { [dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) {
left: 0 left: 0;
} }
[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(1) { [dir="rtl"] .sticky-header-toggle__icon > span:nth-child(1) {
right: 0 right: 0;
} }
.sticky-header-toggle__icon > span:nth-child(1) { .sticky-header-toggle__icon > span:nth-child(1) {
@ -103,11 +103,11 @@ body.is-always-mobile-nav .sticky-header-toggle {
} }
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) { [dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) {
left: 0 left: 0;
} }
[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(2) { [dir="rtl"] .sticky-header-toggle__icon > span:nth-child(2) {
right: 0 right: 0;
} }
.sticky-header-toggle__icon > span:nth-child(2) { .sticky-header-toggle__icon > span:nth-child(2) {
@ -120,11 +120,11 @@ body.is-always-mobile-nav .sticky-header-toggle {
} }
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) { [dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) {
left: 0 left: 0;
} }
[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(3) { [dir="rtl"] .sticky-header-toggle__icon > span:nth-child(3) {
right: 0 right: 0;
} }
.sticky-header-toggle__icon > span:nth-child(3) { .sticky-header-toggle__icon > span:nth-child(3) {

View File

@ -24,27 +24,27 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
.hero__content { .hero__content {
grid-column: 1 / 7 grid-column: 1 / 7;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.hero__content { /* 700px */ .hero__content { /* 700px */
grid-column: 3 / 13 grid-column: 3 / 13;
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.hero__content { .hero__content {
grid-column: 3 / 11 grid-column: 3 / 11;
} }
} }
.hero__img { .hero__img {
grid-column: 1 / 7; grid-column: 1 / 7;
margin-top: var(--sp2); margin-top: var(--sp2);
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
.hero__img img { .hero__img img {
@ -55,7 +55,7 @@
.hero__img { .hero__img {
margin-top: var(--sp3); margin-top: var(--sp3);
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }
@ -64,13 +64,13 @@
.hero__img { .hero__img {
grid-column: 1 / 15; grid-column: 1 / 15;
margin-top: var(--sp4); margin-top: var(--sp4);
margin-bottom: var(--sp4) margin-bottom: var(--sp4);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.hero__img { .hero__img {
grid-column: 2 / 14 grid-column: 2 / 14;
} }
} }

View File

@ -24,54 +24,54 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .links.inline { [dir="ltr"] .links.inline {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .links.inline { [dir="rtl"] .links.inline {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .links.inline { [dir="ltr"] .links.inline {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .links.inline { [dir="rtl"] .links.inline {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .links.inline { [dir="ltr"] .links.inline {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .links.inline { [dir="rtl"] .links.inline {
padding-left: 0 padding-left: 0;
} }
.links.inline { .links.inline {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
list-style: none list-style: none;
} }
.links.inline > * { .links.inline > * {
display: inline display: inline;
} }
[dir="ltr"] .links.inline > *:not(:last-child) { [dir="ltr"] .links.inline > *:not(:last-child) {
padding-right: 1em padding-right: 1em;
} }
[dir="rtl"] .links.inline > *:not(:last-child) { [dir="rtl"] .links.inline > *:not(:last-child) {
padding-left: 1em padding-left: 1em;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .node--type-book .links.inline { [dir="ltr"] .node--type-book .links.inline {
text-align: right text-align: right;
} }
[dir="rtl"] .node--type-book .links.inline { [dir="rtl"] .node--type-book .links.inline {
text-align: left text-align: left;
} }
} }

View File

@ -27,7 +27,7 @@
.maintenance-page .site-header__initial { .maintenance-page .site-header__initial {
flex-shrink: 0; flex-shrink: 0;
width: var(--content-left) width: var(--content-left);
} }
} }
@ -38,7 +38,7 @@
.maintenance-page-icon { .maintenance-page-icon {
display: block; display: block;
margin-top: var(--sp3); margin-top: var(--sp3);
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
.maintenance-page-icon path { .maintenance-page-icon path {

View File

@ -73,17 +73,14 @@
padding-bottom: var(--sp1); padding-bottom: var(--sp1);
color: var(--color--white); color: var(--color--white);
outline: solid 1px transparent; outline: solid 1px transparent;
background-color: var(--color--gray-5) background-color: var(--color--gray-5);
} }
.messages * { .messages * {
color: inherit; color: inherit;
} }
.messages { /* Additional specificity to override contrib modules. */
/* Additional specificity to override contrib modules. */
}
.messages.messages-list__item { .messages.messages-list__item {
background-image: none; background-image: none;
@ -150,7 +147,7 @@
} }
.messages__header { .messages__header {
flex-shrink: 0 flex-shrink: 0;
} }
[dir="ltr"] .messages__header.no-icon { [dir="ltr"] .messages__header.no-icon {
@ -207,7 +204,7 @@
border: 0; border: 0;
background: none; background: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
.messages__close:before, .messages__close:before,
@ -269,11 +266,11 @@
} }
[dir="ltr"] .js-form-managed-file .messages { [dir="ltr"] .js-form-managed-file .messages {
border-left: solid 6px var(--color--red); border-left: solid 0.375rem var(--color--red);
} }
[dir="rtl"] .js-form-managed-file .messages { [dir="rtl"] .js-form-managed-file .messages {
border-right: solid 6px var(--color--red); border-right: solid 0.375rem var(--color--red);
} }
.js-form-managed-file .messages { .js-form-managed-file .messages {

View File

@ -24,7 +24,7 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
.menu--sidebar { .menu--sidebar {
list-style: none list-style: none;
} }
.menu--sidebar .menu { .menu--sidebar .menu {
@ -36,19 +36,19 @@
} }
[dir="ltr"] .menu--sidebar .menu__link { [dir="ltr"] .menu--sidebar .menu__link {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .menu--sidebar .menu__link { [dir="rtl"] .menu--sidebar .menu__link {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .menu--sidebar .menu__link { [dir="ltr"] .menu--sidebar .menu__link {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .menu--sidebar .menu__link { [dir="rtl"] .menu--sidebar .menu__link {
padding-left: 0 padding-left: 0;
} }
.menu--sidebar .menu__link { .menu--sidebar .menu__link {
@ -57,17 +57,17 @@
padding-top: var(--sp0-75); padding-top: var(--sp0-75);
padding-bottom: var(--sp0-75); padding-bottom: var(--sp0-75);
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 1.125rem font-size: 1.125rem;
/* Bottom divider line. */ /* Bottom divider line. */
} }
[dir="ltr"] .menu--sidebar .menu__link:after { [dir="ltr"] .menu--sidebar .menu__link:after {
left: 0 left: 0;
} }
[dir="rtl"] .menu--sidebar .menu__link:after { [dir="rtl"] .menu--sidebar .menu__link:after {
right: 0 right: 0;
} }
.menu--sidebar .menu__link:after { .menu--sidebar .menu__link:after {
@ -82,18 +82,15 @@
.menu--sidebar .menu__link--link { .menu--sidebar .menu__link--link {
text-decoration: none; text-decoration: none;
color: var(--color-text-neutral-loud); color: var(--color-text-neutral-loud);
font-weight: 600 font-weight: 600;
} }
.menu--sidebar .menu__link--link:hover { .menu--sidebar .menu__link--link:hover {
color: var(--color--primary-50); color: var(--color--primary-50);
} }
.menu--sidebar { /* No bottom divider line for last menu item. */
/* No bottom divider line for last menu item. */ :is(.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child,.menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child):after {
}
.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child:after, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child:after {
content: none; content: none;
} }

View File

@ -24,35 +24,35 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .mobile-nav-button { [dir="ltr"] .mobile-nav-button {
margin-left: auto margin-left: auto;
} }
[dir="rtl"] .mobile-nav-button { [dir="rtl"] .mobile-nav-button {
margin-right: auto margin-right: auto;
} }
[dir="ltr"] .mobile-nav-button { [dir="ltr"] .mobile-nav-button {
margin-right: -0.375rem margin-right: -0.375rem;
} }
[dir="rtl"] .mobile-nav-button { [dir="rtl"] .mobile-nav-button {
margin-left: -0.375rem margin-left: -0.375rem;
} }
[dir="ltr"] .mobile-nav-button { [dir="ltr"] .mobile-nav-button {
padding-left: 0.375rem padding-left: 0.375rem;
} }
[dir="rtl"] .mobile-nav-button { [dir="rtl"] .mobile-nav-button {
padding-right: 0.375rem padding-right: 0.375rem;
} }
[dir="ltr"] .mobile-nav-button { [dir="ltr"] .mobile-nav-button {
padding-right: 0.375rem padding-right: 0.375rem;
} }
[dir="rtl"] .mobile-nav-button { [dir="rtl"] .mobile-nav-button {
padding-left: 0.375rem padding-left: 0.375rem;
} }
.mobile-nav-button { .mobile-nav-button {
@ -69,7 +69,7 @@
border: none; border: none;
background: transparent; background: transparent;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none appearance: none;
} }
.mobile-nav-button:focus { .mobile-nav-button:focus {
@ -83,16 +83,16 @@
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
[dir="ltr"] .mobile-nav-button { [dir="ltr"] .mobile-nav-button {
padding-left: var(--sp) padding-left: var(--sp);
} }
[dir="rtl"] .mobile-nav-button { [dir="rtl"] .mobile-nav-button {
padding-right: var(--sp) padding-right: var(--sp);
} }
.mobile-nav-button { .mobile-nav-button {
display: inline-flex; display: inline-flex;
width: auto width: auto;
} }
} }
@ -105,17 +105,17 @@
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
width: 1px; width: 1px;
height: 1px; height: 1px;
word-wrap: normal word-wrap: normal;
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
[dir="ltr"] .mobile-nav-button__label { [dir="ltr"] .mobile-nav-button__label {
margin-right: 0.75rem margin-right: 0.75rem;
} }
[dir="rtl"] .mobile-nav-button__label { [dir="rtl"] .mobile-nav-button__label {
margin-left: 0.75rem margin-left: 0.75rem;
} }
.mobile-nav-button__label { .mobile-nav-button__label {
@ -126,7 +126,7 @@
height: auto; height: auto;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600 font-weight: 600;
} }
} }
@ -135,15 +135,15 @@
display: block; display: block;
width: var(--sp2); width: var(--sp2);
height: 0; height: 0;
border-top: solid 3px var(--color--primary-50) border-top: solid 3px var(--color--primary-50);
} }
[dir="ltr"] .mobile-nav-button__icon:before { [dir="ltr"] .mobile-nav-button__icon:before {
left: 0 left: 0;
} }
[dir="rtl"] .mobile-nav-button__icon:before { [dir="rtl"] .mobile-nav-button__icon:before {
right: 0 right: 0;
} }
.mobile-nav-button__icon:before { .mobile-nav-button__icon:before {
@ -157,11 +157,11 @@
} }
[dir="ltr"] .mobile-nav-button__icon:after { [dir="ltr"] .mobile-nav-button__icon:after {
left: 0 left: 0;
} }
[dir="rtl"] .mobile-nav-button__icon:after { [dir="rtl"] .mobile-nav-button__icon:after {
right: 0 right: 0;
} }
.mobile-nav-button__icon:after { .mobile-nav-button__icon:after {
@ -176,7 +176,7 @@
} }
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon { .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
border-top: 0 border-top: 0;
} }
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:before { .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:before {

View File

@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .primary-nav__button-toggle { [dir="ltr"] .primary-nav__button-toggle {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .primary-nav__button-toggle { [dir="rtl"] .primary-nav__button-toggle {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .primary-nav__button-toggle { [dir="ltr"] .primary-nav__button-toggle {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .primary-nav__button-toggle { [dir="rtl"] .primary-nav__button-toggle {
padding-left: 0 padding-left: 0;
} }
.primary-nav__button-toggle { .primary-nav__button-toggle {
@ -51,7 +51,7 @@
text-indent: -62.4375rem; text-indent: -62.4375rem;
border: 0; border: 0;
background: transparent; background: transparent;
-webkit-appearance: none -webkit-appearance: none;
} }
.primary-nav__button-toggle:focus { .primary-nav__button-toggle:focus {
@ -69,7 +69,7 @@
height: 1rem; height: 1rem;
transition: background-color 0.2s; transition: background-color 0.2s;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 2px border-radius: 2px;
} }
.primary-nav__button-toggle .icon--menu-toggle:before, .primary-nav__button-toggle .icon--menu-toggle:before,
@ -96,12 +96,9 @@
opacity: 0; opacity: 0;
} }
.primary-nav__button-toggle { /* aria-hidden attribute is removed by JS. Button is non-functional
/* aria-hidden attribute is removed by JS. Button is non-functional
until JS is enabled. until JS is enabled.
*/ */
}
.primary-nav__button-toggle[aria-hidden="true"] { .primary-nav__button-toggle[aria-hidden="true"] {
pointer-events: none; pointer-events: none;
@ -109,22 +106,22 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle { [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
margin-right: calc(-1 * var(--sp2)) margin-right: calc(-1 * var(--sp2));
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle { [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
margin-left: calc(-1 * var(--sp2)) margin-left: calc(-1 * var(--sp2));
} }
body:not(.is-always-mobile-nav) .primary-nav__button-toggle { body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
flex-shrink: 0; flex-shrink: 0;
align-self: stretch; align-self: stretch;
width: calc(var(--sp2) + 0.5rem); width: calc(var(--sp2) + 0.5rem);
height: auto; height: auto;
margin-top: 0 margin-top: 0;
} }
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus { body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
border: 0; border: 0;
outline: 0 outline: 0;
} }
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle { body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
@ -141,18 +138,18 @@
} }
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle { [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
left: 0.1875rem left: 0.1875rem;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle { [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
right: 0.1875rem right: 0.1875rem;
} }
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle { body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
width: 1.125rem; width: 1.125rem;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: var(--color--white) background-color: var(--color--white);
} }
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle:before { body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle:before {

View File

@ -28,16 +28,14 @@
--no-js-nav-column-gap: var(--sp2); --no-js-nav-column-gap: var(--sp2);
} }
html:not(.js) { /**
/**
* Mobile styles for primary navigation when JS is disabled. * Mobile styles for primary navigation when JS is disabled.
*/ */
}
@media (max-width: 75rem) { @media (max-width: 75rem) {
html:not(.js) .primary-nav__menu--level-1 { html:not(.js) .primary-nav__menu--level-1 {
column-width: var(--no-js-nav-column-width); column-width: var(--no-js-nav-column-width);
grid-column-gap: var(--no-js-nav-column-gap); column-gap: var(--no-js-nav-column-gap);
} }
html:not(.js) .primary-nav__menu-item { html:not(.js) .primary-nav__menu-item {
@ -85,6 +83,10 @@ html:not(.js) {
padding-left: var(--sp2); padding-left: var(--sp2);
} }
html:not(.js) .header-nav {
border: solid 1px var(--color--gray-95) !important;
}
html:not(.js) .header-nav { html:not(.js) .header-nav {
position: static; position: static;
visibility: visible; visibility: visible;
@ -96,7 +98,6 @@ html:not(.js) {
padding-top: var(--sp2); padding-top: var(--sp2);
padding-bottom: 0; padding-bottom: 0;
transform: none; transform: none;
border: solid 1px var(--color--gray-95) !important;
box-shadow: 0 0 36px var(--color--gray-90); box-shadow: 0 0 36px var(--color--gray-90);
} }
@ -118,15 +119,12 @@ html:not(.js) {
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
html:not(.js) {
/** /**
* Styles for 'always on mobile navigation' when JS is disabled. * Styles for 'always on mobile navigation' when JS is disabled.
*/ */
}
html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 { html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
column-width: var(--no-js-nav-column-width); column-width: var(--no-js-nav-column-width);
grid-column-gap: var(--no-js-nav-column-gap); column-gap: var(--no-js-nav-column-gap);
} }
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item { html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
@ -174,6 +172,10 @@ html:not(.js) {
padding-left: var(--sp2); padding-left: var(--sp2);
} }
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 { html:not(.js) body.is-always-mobile-nav .header-nav {
position: static; position: static;
visibility: visible; visibility: visible;
@ -185,7 +187,6 @@ html:not(.js) {
padding-top: var(--sp2); padding-top: var(--sp2);
padding-bottom: 0; padding-bottom: 0;
transform: none; transform: none;
border: solid 1px var(--color--gray-95) !important;
box-shadow: 0 0 36px var(--color--gray-90); box-shadow: 0 0 36px var(--color--gray-90);
} }
@ -205,25 +206,20 @@ html:not(.js) {
content: none; content: none;
} }
html:not(.js) {
/** /**
* Styles for traditional dropdown primary navigation when JS is disabled. * 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--level-2,
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 { html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
visibility: visible; visibility: visible;
transform: translate(-50%, 0); transform: translate(-50%, 0);
opacity: 1; opacity: 1;
} }
html:not(.js) body:not(.is-always-mobile-nav) {
/* /*
* Cannot combine the focus-within pseudo selector with other selectors, * Cannot combine the focus-within pseudo selector with other selectors,
* because it will break IE11 and earlier versions of MS Edge. * 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--level-2,
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 { html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
visibility: visible; visibility: visible;

View File

@ -25,17 +25,14 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .primary-nav__menu-item { body:not(.is-always-mobile-nav) .primary-nav__menu-item {
flex-wrap: nowrap /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ 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--link,
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink { body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
flex-basis: auto; flex-basis: auto;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children {
/* Remove hover state if submenu exists. */ /* 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 { 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; content: none;
} }
@ -43,12 +40,12 @@
body:not(.is-always-mobile-nav) .primary-nav__menu-link { body:not(.is-always-mobile-nav) .primary-nav__menu-link {
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: 1rem; font-size: 1rem;
line-height: var(--sp1-5) line-height: var(--sp1-5);
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus { body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
position: relative; position: relative;
outline: 0 outline: 0;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus:before { body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus:before {
@ -69,7 +66,7 @@
padding-left: 0.5625rem; padding-left: 0.5625rem;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children { 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 */ overflow: visible; /* Necessary to view icon in IE11 */
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus:before { body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus:before {
@ -80,10 +77,8 @@
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before { body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before {
content: none; content: none;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
/* Chevron icon for desktop navigation. */ /* Chevron icon for desktop navigation. */
}
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after { [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
left: calc(100% - 0.1875rem); left: calc(100% - 0.1875rem);
} }
@ -125,7 +120,7 @@
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner { body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
padding-top: var(--sp2); padding-top: var(--sp2);
padding-bottom: var(--sp2) padding-bottom: var(--sp2);
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after { body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after {
@ -169,7 +164,7 @@
width: max-content; width: max-content;
max-width: 12.5rem; max-width: 12.5rem;
margin-top: 0; margin-top: 0;
margin-bottom: 0 margin-bottom: 0;
} }
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) { [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
@ -228,7 +223,7 @@
border-left: solid 1px transparent; border-left: solid 1px transparent;
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
background: var(--color--white); background: var(--color--white);
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08) 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 { body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
@ -239,7 +234,7 @@
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 { body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
display: block display: block;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus:before { body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus:before {
@ -267,25 +262,22 @@
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner { body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5) padding-bottom: var(--sp0-5);
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after { body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {
transform-origin: left; /* LTR */ transform-origin: left; /* LTR */
border-top-width: 3px border-top-width: 3px;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after { [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {
transform-origin: right; transform-origin: right;
} }
body:not(.is-always-mobile-nav) {
/** /**
* Arrow is placed outside of submenu because the submenu has the * Arrow is placed outside of submenu because the submenu has the
* `overflow: hidden` CSS rule applied. * `overflow: hidden` CSS rule applied.
*/ */
}
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 { body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
position: absolute; position: absolute;
z-index: 105; /* Match level 2 menus. */ z-index: 105; /* Match level 2 menus. */
@ -299,7 +291,7 @@ body:not(.is-always-mobile-nav) {
/* Intentionally not using CSS logical properties. */ /* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent; border-right: solid 10px transparent;
border-bottom: solid 10px var(--color--primary-50); border-bottom: solid 10px var(--color--primary-50);
border-left: solid 10px transparent border-left: solid 10px transparent;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent { body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
@ -308,13 +300,10 @@ body:not(.is-always-mobile-nav) {
opacity: 1; opacity: 1;
} }
body:not(.is-always-mobile-nav) {
/** /**
* When ensuring that long menus don't overflow viewport, we can give a * When ensuring that long menus don't overflow viewport, we can give a
* little extra room when the toolbar is fixed (and is shorter). * little extra room when the toolbar is fixed (and is shorter).
*/ */
}
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 { 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)); 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));
} }

View File

@ -29,7 +29,7 @@
} }
.primary-nav__menu-item { .primary-nav__menu-item {
margin-bottom: var(--sp0-5) margin-bottom: var(--sp0-5);
} }
.primary-nav__menu-item:last-child { .primary-nav__menu-item:last-child {
@ -39,7 +39,7 @@
.primary-nav__menu-item.primary-nav__menu-item--has-children { .primary-nav__menu-item.primary-nav__menu-item--has-children {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between 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--link,
@ -54,7 +54,7 @@
color: var(--color-text-neutral-loud); color: var(--color-text-neutral-loud);
font-size: 1.75rem; font-size: 1.75rem;
font-weight: bold; font-weight: bold;
line-height: var(--sp2) line-height: var(--sp2);
} }
.primary-nav__menu-link:hover { .primary-nav__menu-link:hover {
@ -119,7 +119,7 @@
padding-bottom: 0; padding-bottom: 0;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
background: transparent background: transparent;
/* Plus icon for mobile navigation. */ /* Plus icon for mobile navigation. */
} }
@ -186,7 +186,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5) padding-bottom: var(--sp0-5);
} }
[dir="ltr"] .primary-nav__menu-link-inner:after { [dir="ltr"] .primary-nav__menu-link-inner:after {
@ -211,7 +211,7 @@
} }
.primary-nav__menu-link:hover .primary-nav__menu-link-inner:after { .primary-nav__menu-link:hover .primary-nav__menu-link-inner:after {
transform: scaleX(1) transform: scaleX(1);
} }
/* /*
@ -299,7 +299,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s; transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
opacity: 0 opacity: 0;
} }
.primary-nav__menu--level-2.is-active-menu-parent { .primary-nav__menu--level-2.is-active-menu-parent {

View File

@ -79,7 +79,7 @@
/* @todo should this be scoped to desktop nav? */ /* @todo should this be scoped to desktop nav? */
width: max-content; width: max-content;
max-width: 12.5rem max-width: 12.5rem;
} }
[dir="ltr"] .secondary-nav__menu-item:not(:last-child) { [dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
@ -96,7 +96,7 @@
align-items: center; align-items: center;
height: var(--sp2); height: var(--sp2);
text-decoration: none; text-decoration: none;
color: inherit color: inherit;
} }
.secondary-nav__menu-link:after { .secondary-nav__menu-link:after {
@ -133,7 +133,7 @@
} }
body:not(.is-always-mobile-nav) .secondary-nav { body:not(.is-always-mobile-nav) .secondary-nav {
position: relative; position: relative;
display: flex display: flex;
} }
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before { [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
@ -163,7 +163,7 @@
} }
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus { body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
position: relative; position: relative;
outline: 0 outline: 0;
} }
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before { body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before {

View File

@ -24,7 +24,7 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
.wide-nav-expand { .wide-nav-expand {
display: none display: none;
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
@ -41,7 +41,7 @@
pointer-events: auto; pointer-events: auto;
color: var(--color--white); color: var(--color--white);
border: 0; border: 0;
background-color: var(--color--primary-50) background-color: var(--color--primary-50);
} }
.wide-nav-expand:focus { .wide-nav-expand:focus {
@ -53,14 +53,14 @@
@media (min-width: 75rem) { @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 visibility: visible;
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
body.is-always-mobile-nav .wide-nav-expand { body.is-always-mobile-nav .wide-nav-expand {
visibility: hidden visibility: hidden;
} }
} }
@ -71,22 +71,22 @@ body.is-always-mobile-nav .wide-nav-expand {
transition: opacity 0.2s; transition: opacity 0.2s;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transform-style: preserve-3d transform-style: preserve-3d;
} }
.wide-nav-expand__icon > span { .wide-nav-expand__icon > span {
display: block; display: block;
height: 0; height: 0;
/* Intentionally not using CSS logical properties. */ /* Intentionally not using CSS logical properties. */
border-top: solid 3px currentColor border-top: solid 3px currentColor;
} }
[dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) { [dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) {
left: 0 left: 0;
} }
[dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) { [dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) {
right: 0 right: 0;
} }
.wide-nav-expand__icon > span:nth-child(1) { .wide-nav-expand__icon > span:nth-child(1) {
@ -99,11 +99,11 @@ body.is-always-mobile-nav .wide-nav-expand {
} }
[dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) { [dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) {
left: 0 left: 0;
} }
[dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) { [dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) {
right: 0 right: 0;
} }
.wide-nav-expand__icon > span:nth-child(2) { .wide-nav-expand__icon > span:nth-child(2) {
@ -116,11 +116,11 @@ body.is-always-mobile-nav .wide-nav-expand {
} }
[dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) { [dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) {
left: 0 left: 0;
} }
[dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) { [dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) {
right: 0 right: 0;
} }
.wide-nav-expand__icon > span:nth-child(3) { .wide-nav-expand__icon > span:nth-child(3) {

View File

@ -25,7 +25,7 @@
.node--view-mode-teaser { .node--view-mode-teaser {
position: relative; /* Anchor after pseudo-element. */ position: relative; /* Anchor after pseudo-element. */
margin-bottom: var(--sp1-5) margin-bottom: var(--sp1-5);
} }
.node--view-mode-teaser:after { .node--view-mode-teaser:after {
@ -39,7 +39,7 @@
} }
.node--view-mode-teaser .node__meta { .node--view-mode-teaser .node__meta {
margin-bottom: var(--sp) margin-bottom: var(--sp);
} }
.node--view-mode-teaser .node__meta a { .node--view-mode-teaser .node__meta a {
@ -51,40 +51,40 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin: 0 margin: 0;
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node--view-mode-teaser .node__top-wrapper { .node--view-mode-teaser .node__top-wrapper {
position: relative /* Anchor the image */ position: relative; /* Anchor the image */
} }
} }
[dir="ltr"] .node--view-mode-teaser .primary-image { [dir="ltr"] .node--view-mode-teaser .primary-image {
margin-right: var(--sp1) margin-right: var(--sp1);
} }
[dir="rtl"] .node--view-mode-teaser .primary-image { [dir="rtl"] .node--view-mode-teaser .primary-image {
margin-left: var(--sp1) margin-left: var(--sp1);
} }
.node--view-mode-teaser .primary-image { .node--view-mode-teaser .primary-image {
flex-shrink: 0; flex-shrink: 0;
margin: 0; margin: 0;
margin-bottom: var(--sp1) margin-bottom: var(--sp1);
/* Ensure title does not wrap under image until necessary. */ /* Ensure title does not wrap under image until necessary. */
} }
.node--view-mode-teaser .primary-image + .node__title { :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) { @media (min-width: 62.5rem) {
.node--view-mode-teaser .primary-image + .node__title { :is(.node--view-mode-teaser .primary-image) + .node__title {
flex-basis: auto flex-basis: auto;
} }
} }
@ -96,31 +96,31 @@
width: calc(3.5 * var(--sp)); width: calc(3.5 * var(--sp));
height: calc(3.5 * var(--sp)); height: calc(3.5 * var(--sp));
object-fit: cover; object-fit: cover;
border-radius: 50% border-radius: 50%;
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node--view-mode-teaser .primary-image img { .node--view-mode-teaser .primary-image img {
width: var(--grid-col-width); width: var(--grid-col-width);
height: var(--grid-col-width) height: var(--grid-col-width);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .node--view-mode-teaser .primary-image { [dir="ltr"] .node--view-mode-teaser .primary-image {
left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))) left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
} }
[dir="rtl"] .node--view-mode-teaser .primary-image { [dir="rtl"] .node--view-mode-teaser .primary-image {
right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))) right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
} }
.node--view-mode-teaser .primary-image { .node--view-mode-teaser .primary-image {
position: absolute; position: absolute;
top: 0; top: 0;
margin: 0 margin: 0;
} }
} }
@ -129,47 +129,47 @@
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color-text-neutral-loud); color: var(--color-text-neutral-loud);
font-size: 1.5rem; font-size: 1.5rem;
line-height: var(--line-height-base) line-height: var(--line-height-base);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node--view-mode-teaser .node__title { .node--view-mode-teaser .node__title {
font-size: var(--sp2); font-size: var(--sp2);
line-height: var(--sp3) line-height: var(--sp3);
} }
} }
[dir="ltr"] .node--view-mode-teaser .field--tag-ref { [dir="ltr"] .node--view-mode-teaser .field--tag-ref {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .node--view-mode-teaser .field--tag-ref { [dir="rtl"] .node--view-mode-teaser .field--tag-ref {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .node--view-mode-teaser .field--tag-ref { [dir="ltr"] .node--view-mode-teaser .field--tag-ref {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .node--view-mode-teaser .field--tag-ref { [dir="rtl"] .node--view-mode-teaser .field--tag-ref {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .node--view-mode-teaser .field--tag-ref { [dir="ltr"] .node--view-mode-teaser .field--tag-ref {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .node--view-mode-teaser .field--tag-ref { [dir="rtl"] .node--view-mode-teaser .field--tag-ref {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .node--view-mode-teaser .field--tag-ref { [dir="ltr"] .node--view-mode-teaser .field--tag-ref {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .node--view-mode-teaser .field--tag-ref { [dir="rtl"] .node--view-mode-teaser .field--tag-ref {
padding-left: 0 padding-left: 0;
} }
.node--view-mode-teaser .field--tag-ref { .node--view-mode-teaser .field--tag-ref {
@ -177,20 +177,20 @@
margin-bottom: 0; margin-bottom: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
background-color: transparent background-color: transparent;
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node--view-mode-teaser .field--tag-ref { .node--view-mode-teaser .field--tag-ref {
margin-top: var(--sp2) margin-top: var(--sp2);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node--view-mode-teaser { .node--view-mode-teaser {
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }

View File

@ -29,7 +29,7 @@
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color-text-neutral-soft); color: var(--color-text-neutral-soft);
font-size: 0.875rem; font-size: 0.875rem;
line-height: var(--sp) line-height: var(--sp);
} }
.node__meta a { .node__meta a {
@ -39,16 +39,16 @@
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.node__meta { .node__meta {
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
} }
[dir="ltr"] .node__author-image img { [dir="ltr"] .node__author-image img {
margin-right: var(--sp0-5) margin-right: var(--sp0-5);
} }
[dir="rtl"] .node__author-image img { [dir="rtl"] .node__author-image img {
margin-left: var(--sp0-5) margin-left: var(--sp0-5);
} }
.node__author-image img { .node__author-image img {
@ -67,7 +67,7 @@
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom left; /* LTR */ background-position: bottom left; /* LTR */
background-size: 0 0.1875rem background-size: 0 0.1875rem;
} }
.node__title a:hover, .node__title a:hover,
@ -80,13 +80,13 @@
} }
.node__content { .node__content {
padding-bottom: var(--sp1-5) padding-bottom: var(--sp1-5);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node__content { .node__content {
padding-bottom: var(--sp3) padding-bottom: var(--sp3);
} }
} }

View File

@ -67,14 +67,14 @@
height: var(--sp2-5); height: var(--sp2-5);
cursor: default; cursor: default;
color: var(--color-text-neutral-soft); color: var(--color-text-neutral-soft);
background-color: var(--color--white) background-color: var(--color--white);
} }
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
.pager__item { .pager__item {
width: var(--sp3); width: var(--sp3);
height: var(--sp3) height: var(--sp3);
} }
} }

View File

@ -26,11 +26,11 @@
.block-system-powered-by-block { .block-system-powered-by-block {
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: 0.875rem; font-size: 0.875rem;
line-height: var(--sp) line-height: var(--sp);
} }
.block-system-powered-by-block a { .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:hover,
@ -39,11 +39,11 @@
} }
[dir="ltr"] .block-system-powered-by-block .drupal-logo { [dir="ltr"] .block-system-powered-by-block .drupal-logo {
margin-left: calc(var(--sp) / 4) margin-left: calc(var(--sp) / 4);
} }
[dir="rtl"] .block-system-powered-by-block .drupal-logo { [dir="rtl"] .block-system-powered-by-block .drupal-logo {
margin-right: calc(var(--sp) / 4) margin-right: calc(var(--sp) / 4);
} }
.block-system-powered-by-block .drupal-logo { .block-system-powered-by-block .drupal-logo {
@ -54,7 +54,7 @@
.block-system-powered-by-block svg { .block-system-powered-by-block svg {
width: 0.875rem; /* 14 */ width: 0.875rem; /* 14 */
height: 1.1875rem; /* 19 */ height: 1.1875rem; /* 19 */
vertical-align: top vertical-align: top;
} }
.block-system-powered-by-block svg path { .block-system-powered-by-block svg path {

View File

@ -24,49 +24,49 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .search-results { [dir="ltr"] .search-results {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .search-results { [dir="rtl"] .search-results {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .search-results { [dir="ltr"] .search-results {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .search-results { [dir="rtl"] .search-results {
padding-left: 0 padding-left: 0;
} }
.search-results { .search-results {
margin-bottom: var(--sp2); margin-bottom: var(--sp2);
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
list-style: none list-style: none;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.search-results { .search-results {
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }
[dir="ltr"] .search-result__title { [dir="ltr"] .search-result__title {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .search-result__title { [dir="rtl"] .search-result__title {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .search-result__title { [dir="ltr"] .search-result__title {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .search-result__title { [dir="rtl"] .search-result__title {
margin-left: 0 margin-left: 0;
} }
.search-result__title { .search-result__title {
@ -74,7 +74,7 @@
margin-bottom: 0; margin-bottom: 0;
color: var(--color-text-neutral-loud); color: var(--color-text-neutral-loud);
font-size: 1.25rem; font-size: 1.25rem;
line-height: var(--line-height-base) line-height: var(--line-height-base);
} }
.search-result__title a { .search-result__title a {
@ -85,7 +85,7 @@
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom left; /* LTR */ background-position: bottom left; /* LTR */
background-size: 0 0.1875rem background-size: 0 0.1875rem;
} }
.search-result__title a:hover { .search-result__title a:hover {
@ -97,7 +97,7 @@
.search-result__title { .search-result__title {
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
font-size: 1.875rem; font-size: 1.875rem;
line-height: var(--sp3) line-height: var(--sp3);
} }
} }
@ -106,13 +106,13 @@
} }
.search-result__snippet { .search-result__snippet {
padding-bottom: calc(var(--sp1-5) - 2px) padding-bottom: calc(var(--sp1-5) - 2px);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.search-result__snippet { .search-result__snippet {
padding-bottom: var(--sp3) padding-bottom: var(--sp3);
} }
} }
@ -122,7 +122,7 @@
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color-text-neutral-soft); color: var(--color-text-neutral-soft);
font-size: 0.875rem; font-size: 0.875rem;
line-height: var(--sp) line-height: var(--sp);
} }
.search-result__meta a { .search-result__meta a {
@ -132,7 +132,7 @@
.search-results__item { .search-results__item {
position: relative; /* Anchor after pseudo-element. */ position: relative; /* Anchor after pseudo-element. */
margin-bottom: var(--sp1-5) margin-bottom: var(--sp1-5);
} }
.search-results__item:after { .search-results__item:after {
@ -152,6 +152,6 @@
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.search-results__item { .search-results__item {
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }

View File

@ -29,7 +29,7 @@
* Ensure mobile site header is always above other elements including * Ensure mobile site header is always above other elements including
* contextual links, and Tour. * contextual links, and Tour.
*/ */
z-index: 101 z-index: 101;
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
@ -37,7 +37,7 @@
.site-header { .site-header {
/* Necessary to keep the content from jumping up when header transitions to fixed. */ /* Necessary to keep the content from jumping up when header transitions to fixed. */
min-height: var(--site-header-height-wide); min-height: var(--site-header-height-wide);
border-bottom: solid 1px transparent /* Will show in Windows high contrast mode. */ border-bottom: solid 1px transparent; /* Will show in Windows high contrast mode. */
} }
} }
@ -53,7 +53,7 @@
.site-header__fixable { .site-header__fixable {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
transition: all 0.5s transition: all 0.5s;
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
@ -86,21 +86,21 @@
@media (min-width: 75rem) { @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 transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
} }
} }
@media (min-width: 75rem) { @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 */ box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
} }
} }
@media (min-width: 75rem) { @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) box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
} }
} }
@ -110,14 +110,14 @@ html.js body:not(.is-always-mobile-nav) .site-header__inner {
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 */ transform: translateX(-101%); /* LTR */
opacity: 0 opacity: 0;
} }
} }
@media (min-width: 75rem) { @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%) transform: translateX(101%);
} }
} }

View File

@ -26,19 +26,19 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .skip-link { [dir="ltr"] .skip-link {
padding-left: var(--sp) padding-left: var(--sp);
} }
[dir="rtl"] .skip-link { [dir="rtl"] .skip-link {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="ltr"] .skip-link { [dir="ltr"] .skip-link {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="rtl"] .skip-link { [dir="rtl"] .skip-link {
padding-left: var(--sp) padding-left: var(--sp);
} }
.skip-link { .skip-link {
@ -50,7 +50,7 @@
text-decoration: none; text-decoration: none;
color: var(--color--white); color: var(--color--white);
outline: 0; outline: 0;
background-color: var(--color--gray-5) background-color: var(--color--gray-5);
} }
.skip-link:hover { .skip-link:hover {
@ -63,7 +63,10 @@
} }
.skip-link.focusable:focus { .skip-link.focusable:focus {
position: absolute !important; /* Override position from module file. */ position: absolute !important;
}
.skip-link.focusable:focus { /* Override position from module file. */
z-index: 503; z-index: 503;
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;

View File

@ -35,18 +35,18 @@
border-collapse: collapse; border-collapse: collapse;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 1rem; font-size: 1rem;
line-height: var(--sp1-5) line-height: var(--sp1-5);
} }
[dir="ltr"] .forum table caption,[dir="ltr"] .text-content table caption,[dir="ltr"] .views-table caption,[dir="ltr"] .draggable-table caption { [dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) caption {
text-align: left text-align: left;
} }
[dir="rtl"] .forum table caption,[dir="rtl"] .text-content table caption,[dir="rtl"] .views-table caption,[dir="rtl"] .draggable-table caption { [dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) caption {
text-align: right text-align: right;
} }
.forum table caption, .text-content table caption, .views-table caption, .draggable-table caption { :is(.forum table,.text-content table,.views-table,.draggable-table) caption {
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color-text-neutral-medium); color: var(--color-text-neutral-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
@ -55,92 +55,58 @@
line-height: var(--sp); line-height: var(--sp);
} }
.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td, .draggable-table tr:last-child td { :is(.forum table,.text-content table,.views-table,.draggable-table) tr:last-child td {
border-bottom: 0; border-bottom: 0;
} }
[dir="ltr"] .forum table td,[dir="ltr"] [dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) td,[dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
.forum table th,[dir="ltr"] padding-left: 0;
.text-content table td,[dir="ltr"]
.text-content table th,[dir="ltr"]
.views-table td,[dir="ltr"]
.views-table th,[dir="ltr"]
.draggable-table td,[dir="ltr"]
.draggable-table th {
padding-left: 0
} }
[dir="rtl"] .forum table td,[dir="rtl"] [dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) td,[dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
.forum table th,[dir="rtl"] padding-right: 0;
.text-content table td,[dir="rtl"]
.text-content table th,[dir="rtl"]
.views-table td,[dir="rtl"]
.views-table th,[dir="rtl"]
.draggable-table td,[dir="rtl"]
.draggable-table th {
padding-right: 0
} }
[dir="ltr"] .forum table td,[dir="ltr"] [dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) td,[dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
.forum table th,[dir="ltr"] padding-right: var(--sp1);
.text-content table td,[dir="ltr"]
.text-content table th,[dir="ltr"]
.views-table td,[dir="ltr"]
.views-table th,[dir="ltr"]
.draggable-table td,[dir="ltr"]
.draggable-table th {
padding-right: var(--sp1)
} }
[dir="rtl"] .forum table td,[dir="rtl"] [dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) td,[dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
.forum table th,[dir="rtl"] padding-left: var(--sp1);
.text-content table td,[dir="rtl"]
.text-content table th,[dir="rtl"]
.views-table td,[dir="rtl"]
.views-table th,[dir="rtl"]
.draggable-table td,[dir="rtl"]
.draggable-table th {
padding-left: var(--sp1)
} }
.forum table td, :is(.forum table,.text-content table,.views-table,.draggable-table) td,
.forum table th, :is(.forum table,.text-content table,.views-table,.draggable-table) th {
.text-content table td,
.text-content table th,
.views-table td,
.views-table th,
.draggable-table td,
.draggable-table th {
padding-top: var(--sp1); padding-top: var(--sp1);
padding-bottom: var(--sp1); padding-bottom: var(--sp1);
vertical-align: top; vertical-align: top;
} }
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th { [dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th { [dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th { [dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th { [dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .forum table th,[dir="ltr"] .text-content table th,[dir="ltr"] .views-table th,[dir="ltr"] .draggable-table th { [dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
text-align: left text-align: left;
} }
[dir="rtl"] .forum table th,[dir="rtl"] .text-content table th,[dir="rtl"] .views-table th,[dir="rtl"] .draggable-table th { [dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
text-align: right text-align: right;
} }
.forum table th, .text-content table th, .views-table th, .draggable-table th { :is(.forum table,.text-content table,.views-table,.draggable-table) th {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@ -151,19 +117,13 @@
line-height: var(--sp); line-height: var(--sp);
} }
.forum table td, .text-content table td, .views-table td, .draggable-table td { :is(.forum table,.text-content table,.views-table,.draggable-table) td {
white-space: normal; white-space: normal;
border-bottom: 2px solid var(--color--gray-65); border-bottom: 2px solid var(--color--gray-65);
} }
.forum table th.checkbox, :is(.forum table,.text-content table,.views-table,.draggable-table) th.checkbox,
.forum table td.checkbox, :is(.forum table,.text-content table,.views-table,.draggable-table) td.checkbox {
.text-content table th.checkbox,
.text-content table td.checkbox,
.views-table th.checkbox,
.views-table td.checkbox,
.draggable-table th.checkbox,
.draggable-table td.checkbox {
text-align: center; text-align: center;
} }
@ -182,7 +142,7 @@
.sticky-header { .sticky-header {
z-index: 0; z-index: 0;
margin: 0; margin: 0;
border-bottom: 4px solid var(--color--primary-50); border-bottom: 0.25rem solid var(--color--primary-50);
} }
/* Properly align VBO checkboxes. */ /* Properly align VBO checkboxes. */

View File

@ -21,11 +21,11 @@
/* Breakpoint where tabs switch between vertical and horizontal layouts. */ /* Breakpoint where tabs switch between vertical and horizontal layouts. */
[dir="ltr"] .tabs { [dir="ltr"] .tabs {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .tabs { [dir="rtl"] .tabs {
margin-right: 0 margin-right: 0;
} }
.tabs { .tabs {
@ -48,21 +48,21 @@
width: 100%; width: 100%;
margin: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */ margin: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */
padding: 0; padding: 0;
list-style: none list-style: none;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.tabs { .tabs {
flex-direction: row; flex-direction: row;
flex-wrap: wrap flex-wrap: wrap;
} }
} }
.tabs__tab { .tabs__tab {
display: none; display: none;
margin: 0; margin: 0;
margin-bottom: calc(-1 * var(--tabs-border-width)) margin-bottom: calc(-1 * var(--tabs-border-width));
} }
.tabs__tab.is-active { .tabs__tab.is-active {
@ -72,50 +72,41 @@
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .tabs__tab { [dir="ltr"] .tabs__tab {
margin-left: calc(-1 * var(--tabs-border-width)) margin-left: calc(-1 * var(--tabs-border-width));
} }
[dir="rtl"] .tabs__tab { [dir="rtl"] .tabs__tab {
margin-right: calc(-1 * var(--tabs-border-width)) margin-right: calc(-1 * var(--tabs-border-width));
} }
.tabs__tab { .tabs__tab {
display: flex; display: flex;
margin-bottom: 0 margin-bottom: 0;
} }
} }
.tabs__tab { /* Show tabs when JavaScript disabled. */
/* Show tabs when JavaScript disabled. */
}
html:not(.js) .tabs__tab { html:not(.js) .tabs__tab {
display: flex display: flex;
} }
.tabs__tab { /* Show tabs when tabs-expanded class is present. */
/* Show tabs when tabs-expanded class is present. */
}
.tabs.is-expanded .tabs__tab { .tabs.is-expanded .tabs__tab {
display: flex display: flex;
} }
.tabs__tab { /* Secondary tabs will always be expanded. */
/* Secondary tabs will always be expanded. */
}
.tabs--secondary .tabs__tab { .tabs--secondary .tabs__tab {
display: block display: block;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.tabs--secondary .tabs__tab { .tabs--secondary .tabs__tab {
display: flex display: flex;
} }
} }
@ -134,7 +125,7 @@ html:not(.js) .tabs__tab {
color: var(--tabs-text-color); color: var(--tabs-text-color);
border: var(--tabs-border-width) solid var(--tabs-border-color); border: var(--tabs-border-width) solid var(--tabs-border-color);
background-color: var(--tabs-background-color); background-color: var(--tabs-background-color);
font-size: var(--tabs-font-size) font-size: var(--tabs-font-size);
} }
.tabs__link:hover { .tabs__link:hover {
@ -151,7 +142,7 @@ html:not(.js) .tabs__tab {
.tabs__link.is-active { .tabs__link.is-active {
position: relative; /* Anchor :after pseudo-element. */ position: relative; /* Anchor :after pseudo-element. */
color: var(--tabs-text-color-active); color: var(--tabs-text-color-active);
font-weight: 600 font-weight: 600;
/* /*
* We use :after pseudo-element in place of border so edges do not appear * We use :after pseudo-element in place of border so edges do not appear
@ -160,36 +151,36 @@ html:not(.js) .tabs__tab {
} }
[dir="ltr"] .tabs__link.is-active:after { [dir="ltr"] .tabs__link.is-active:after {
left: calc(-1 * var(--tabs-border-width)) left: calc(-1 * var(--tabs-border-width));
} }
[dir="rtl"] .tabs__link.is-active:after { [dir="rtl"] .tabs__link.is-active:after {
right: calc(-1 * var(--tabs-border-width)) right: calc(-1 * var(--tabs-border-width));
} }
[dir="ltr"] .tabs__link.is-active:after { [dir="ltr"] .tabs__link.is-active:after {
border-left: var(--tabs-active-border-size) solid var(--tabs-highlight-color) border-left: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
} }
[dir="rtl"] .tabs__link.is-active:after { [dir="rtl"] .tabs__link.is-active:after {
border-right: var(--tabs-active-border-size) solid var(--tabs-highlight-color) border-right: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
} }
.tabs__link.is-active:after { .tabs__link.is-active:after {
position: absolute; position: absolute;
top: calc(-1 * var(--tabs-border-width)); top: calc(-1 * var(--tabs-border-width));
height: calc(100% + var(--tabs-border-width) * 2); height: calc(100% + var(--tabs-border-width) * 2);
content: "" content: "";
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .tabs__link.is-active:after { [dir="ltr"] .tabs__link.is-active:after {
border-left: 0 border-left: 0;
} }
[dir="rtl"] .tabs__link.is-active:after { [dir="rtl"] .tabs__link.is-active:after {
border-right: 0 border-right: 0;
} }
.tabs__link.is-active:after { .tabs__link.is-active:after {
@ -197,20 +188,17 @@ html:not(.js) .tabs__tab {
bottom: calc(-1 * var(--tabs-border-width)); bottom: calc(-1 * var(--tabs-border-width));
width: calc(100% + 2 * var(--tabs-border-width)); width: calc(100% + 2 * var(--tabs-border-width));
height: 0; height: 0;
border-top: var(--tabs-active-border-size) solid var(--tabs-highlight-color) border-top: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
} }
} }
.tabs__link { /* No regular borders or background color for secondary tab links. */
/* No regular borders or background color for secondary tab links. */
}
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.tabs--secondary .tabs__link { .tabs--secondary .tabs__link {
border-color: transparent; border-color: transparent;
background-color: transparent background-color: transparent;
} }
} }
@ -218,12 +206,12 @@ html:not(.js) .tabs__tab {
[dir="ltr"] .tabs__trigger { [dir="ltr"] .tabs__trigger {
margin-left: calc(-1 * var(--tabs-border-width)); margin-left: calc(-1 * var(--tabs-border-width));
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .tabs__trigger { [dir="rtl"] .tabs__trigger {
margin-right: calc(-1 * var(--tabs-border-width)); margin-right: calc(-1 * var(--tabs-border-width));
margin-left: 0 margin-left: 0;
} }
.tabs__trigger { .tabs__trigger {
@ -235,7 +223,7 @@ html:not(.js) .tabs__tab {
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
border: solid var(--tabs-border-width) var(--tabs-border-color); border: solid var(--tabs-border-width) var(--tabs-border-color);
background-color: var(--tabs-background-color) background-color: var(--tabs-background-color);
} }
.tabs__trigger:hover { .tabs__trigger:hover {
@ -248,19 +236,16 @@ html:not(.js) .tabs__tab {
outline: none; outline: none;
} }
.tabs__trigger { /* Button will not work when JavaScript is disabled, so we hide it. */
/* Button will not work when JavaScript is disabled, so we hide it. */
}
html:not(.js) .tabs__trigger { html:not(.js) .tabs__trigger {
display: none display: none;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.tabs__trigger { .tabs__trigger {
display: none display: none;
} }
} }
@ -269,15 +254,15 @@ html:not(.js) .tabs__trigger {
display: block; display: block;
width: var(--sp); width: var(--sp);
height: 0.625rem; height: 0.625rem;
margin-top: calc(-2 * var(--tabs-border-width)) margin-top: calc(-2 * var(--tabs-border-width));
} }
[dir="ltr"] .tabs__trigger-icon > span { [dir="ltr"] .tabs__trigger-icon > span {
left: 0 left: 0;
} }
[dir="rtl"] .tabs__trigger-icon > span { [dir="rtl"] .tabs__trigger-icon > span {
right: 0 right: 0;
} }
.tabs__trigger-icon > span { .tabs__trigger-icon > span {
@ -285,31 +270,31 @@ html:not(.js) .tabs__trigger {
display: block; display: block;
width: 100%; width: 100%;
transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration); transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
border-top: solid 2px var(--tabs-highlight-color) border-top: solid 2px var(--tabs-highlight-color);
} }
.tabs__trigger-icon > span:nth-child(1) { .tabs__trigger-icon > span:nth-child(1) {
top: 0 top: 0;
} }
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) { .tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(1)) {
top: calc(50% + 1px); top: calc(50% + 1px);
transform: rotate(45deg) transform: rotate(45deg);
} }
.tabs__trigger-icon > span:nth-child(2) { .tabs__trigger-icon > span:nth-child(2) {
top: calc(50% + 1px) top: calc(50% + 1px);
} }
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) { .tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) {
opacity: 0 opacity: 0;
} }
.tabs__trigger-icon > span:nth-child(3) { .tabs__trigger-icon > span:nth-child(3) {
top: calc(100% + 2px) top: calc(100% + 2px);
} }
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) { .tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(3)) {
top: calc(50% + 1px); top: calc(50% + 1px);
transform: rotate(-45deg) transform: rotate(-45deg);
} }

View File

@ -42,7 +42,7 @@
color: var(--color-text-neutral-soft); color: var(--color-text-neutral-soft);
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-weight: 600; font-weight: 600;
line-height: 1.6 line-height: 1.6;
} }
.field--tags__label:after { .field--tags__label:after {
@ -52,7 +52,7 @@
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.field--tags__label { .field--tags__label {
line-height: 2 line-height: 2;
} }
} }

View File

@ -27,7 +27,7 @@
.cke_editable { .cke_editable {
color: var(--color-text-neutral-medium); color: var(--color-text-neutral-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
line-height: var(--sp1-5) line-height: var(--sp1-5);
/* /*
@todo @todo
@ -44,7 +44,7 @@
-webkit-text-decoration-color: currentColor; -webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor; text-decoration-color: currentColor;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
overflow-wrap: break-word overflow-wrap: break-word;
} }
@supports (box-shadow: none) { @supports (box-shadow: none) {
@ -52,7 +52,7 @@
.text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) { .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); transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
text-decoration: none; text-decoration: none;
box-shadow: inset 0 -2px 0 0 var(--color--primary-50) 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-content a:where(:not(.button)):hover, .cke_editable a:where(:not(.button)):hover {
@ -68,7 +68,7 @@
.text-content p, .cke_editable p { .text-content p, .cke_editable p {
margin-top: var(--sp); margin-top: var(--sp);
margin-bottom: var(--sp) margin-bottom: var(--sp);
} }
.text-content p:first-child, .cke_editable p:first-child { .text-content p:first-child, .cke_editable p:first-child {
@ -83,7 +83,7 @@
.text-content p, .cke_editable p { .text-content p, .cke_editable p {
margin-top: var(--sp2); margin-top: var(--sp2);
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
} }
@ -92,19 +92,19 @@
} }
[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code { [dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
padding-left: var(--sp) padding-left: var(--sp);
} }
[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code { [dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code { [dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code { [dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
padding-left: var(--sp) padding-left: var(--sp);
} }
.text-content pre code, .cke_editable pre code { .text-content pre code, .cke_editable pre code {
@ -116,27 +116,27 @@
} }
[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote { [dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote { [dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote { [dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote { [dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote { [dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
padding-left: var(--sp2) padding-left: var(--sp2);
} }
[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote { [dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
padding-right: var(--sp2) padding-right: var(--sp2);
} }
.text-content blockquote, .cke_editable blockquote { .text-content blockquote, .cke_editable blockquote {
@ -146,15 +146,15 @@
letter-spacing: -0.01em; letter-spacing: -0.01em;
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 1.3125rem; font-size: 1.3125rem;
line-height: var(--sp2) line-height: var(--sp2);
} }
[dir="ltr"] .text-content blockquote:before,[dir="ltr"] .cke_editable blockquote:before { [dir="ltr"] .text-content blockquote:before,[dir="ltr"] .cke_editable blockquote:before {
left: 0 left: 0;
} }
[dir="rtl"] .text-content blockquote:before,[dir="rtl"] .cke_editable blockquote:before { [dir="rtl"] .text-content blockquote:before,[dir="rtl"] .cke_editable blockquote:before {
right: 0 right: 0;
} }
.text-content blockquote:before, .cke_editable blockquote:before { .text-content blockquote:before, .cke_editable blockquote:before {
@ -166,19 +166,19 @@
} }
[dir="ltr"] .text-content blockquote:after,[dir="ltr"] .cke_editable blockquote:after { [dir="ltr"] .text-content blockquote:after,[dir="ltr"] .cke_editable blockquote:after {
left: 0 left: 0;
} }
[dir="rtl"] .text-content blockquote:after,[dir="rtl"] .cke_editable blockquote:after { [dir="rtl"] .text-content blockquote:after,[dir="rtl"] .cke_editable blockquote:after {
right: 0 right: 0;
} }
[dir="ltr"] .text-content blockquote:after,[dir="ltr"] .cke_editable blockquote:after { [dir="ltr"] .text-content blockquote:after,[dir="ltr"] .cke_editable blockquote:after {
margin-left: 0.25rem margin-left: 0.25rem;
} }
[dir="rtl"] .text-content blockquote:after,[dir="rtl"] .cke_editable blockquote:after { [dir="rtl"] .text-content blockquote:after,[dir="rtl"] .cke_editable blockquote:after {
margin-right: 0.25rem margin-right: 0.25rem;
} }
.text-content blockquote:after, .cke_editable blockquote:after { .text-content blockquote:after, .cke_editable blockquote:after {
@ -194,7 +194,7 @@
.text-content blockquote, .cke_editable blockquote { .text-content blockquote, .cke_editable blockquote {
font-size: 2rem; font-size: 2rem;
line-height: var(--sp3) line-height: var(--sp3);
} }
} }
@ -202,7 +202,7 @@
.text-content blockquote, .cke_editable blockquote { .text-content blockquote, .cke_editable blockquote {
font-size: 2.5rem; font-size: 2.5rem;
line-height: calc(3.5 * var(--sp)) line-height: calc(3.5 * var(--sp));
} }
} }
@ -211,7 +211,7 @@
.text-content, .text-content,
.cke_editable { .cke_editable {
font-size: 1.125rem; font-size: 1.125rem;
line-height: var(--sp2) line-height: var(--sp2);
} }
} }
@ -220,7 +220,7 @@
*/ */
.site-footer .text-content { .site-footer .text-content {
color: inherit color: inherit;
} }
.site-footer .text-content * { .site-footer .text-content * {
@ -230,7 +230,7 @@
.site-footer .text-content a { .site-footer .text-content a {
text-decoration: underline; text-decoration: underline;
color: var(--color--white); color: var(--color--white);
box-shadow: none box-shadow: none;
} }
.site-footer .text-content a:hover { .site-footer .text-content a:hover {
@ -247,6 +247,6 @@
.region--sidebar .text-content blockquote { .region--sidebar .text-content blockquote {
font-size: 1.5rem; font-size: 1.5rem;
line-height: var(--sp2) line-height: var(--sp2);
} }
} }

View File

@ -31,7 +31,7 @@
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.vertical-tabs { .vertical-tabs {
display: flex display: flex;
} }
} }
@ -58,33 +58,33 @@
list-style: none; list-style: none;
border-width: var(--vertical-tabs-menu-border-width); border-width: var(--vertical-tabs-menu-border-width);
border-style: solid; border-style: solid;
border-color: var(--color--gray-95) border-color: var(--color--gray-95);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.vertical-tabs__menu { .vertical-tabs__menu {
width: var(--vertical-tabs-menu-width); 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) border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width);
} }
} }
.vertical-tabs__panes { .vertical-tabs__panes {
margin-top: calc(var(--vertical-tabs-menu-border-width) * -1) margin-top: calc(var(--vertical-tabs-menu-border-width) * -1);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.vertical-tabs__panes { .vertical-tabs__panes {
width: calc(100% - var(--vertical-tabs-menu-width)); width: calc(100% - var(--vertical-tabs-menu-width));
margin-top: 0 margin-top: 0;
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.vertical-tabs__pane { .vertical-tabs__pane {
min-height: 100% min-height: 100%;
} }
} }
@ -124,7 +124,7 @@
padding-bottom: var(--sp0-5); padding-bottom: var(--sp0-5);
text-decoration: none; text-decoration: none;
color: var(--color-text-primary-loud); color: var(--color-text-primary-loud);
background-color: var(--color--gray-95) background-color: var(--color--gray-95);
} }
.vertical-tabs__menu-item a:focus, .vertical-tabs__menu-item a:focus,
@ -134,7 +134,7 @@
} }
.vertical-tabs__menu-item.is-selected { .vertical-tabs__menu-item.is-selected {
background-color: var(--color--white) background-color: var(--color--white);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {

View File

@ -24,55 +24,55 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
[dir="ltr"] .wide-image { [dir="ltr"] .wide-image {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .wide-image { [dir="rtl"] .wide-image {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .wide-image { [dir="ltr"] .wide-image {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .wide-image { [dir="rtl"] .wide-image {
margin-left: 0 margin-left: 0;
} }
.wide-image { .wide-image {
margin-top: var(--sp0-5); margin-top: var(--sp0-5);
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .wide-image { [dir="ltr"] .wide-image {
margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))) margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
} }
[dir="rtl"] .wide-image { [dir="rtl"] .wide-image {
margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))) margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
} }
.wide-image { .wide-image {
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
margin-top: var(--sp2); margin-top: var(--sp2);
margin-bottom: var(--sp4) margin-bottom: var(--sp4);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .wide-image { [dir="ltr"] .wide-image {
margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
[dir="rtl"] .wide-image { [dir="rtl"] .wide-image {
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
.wide-image { .wide-image {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)) width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
} }
} }
@ -81,33 +81,33 @@
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.sidebar-grid .wide-image { .sidebar-grid .wide-image {
width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap)) width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
} }
} }
@media (min-width: 81.25rem) { @media (min-width: 81.25rem) {
.sidebar-grid .wide-image { .sidebar-grid .wide-image {
width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap)) width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
} }
} }
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */ /* Ensure that image doesn't overlap layout builder sections when editing layouts. */
[dir="ltr"] .layout-builder .wide-image { [dir="ltr"] .layout-builder .wide-image {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .layout-builder .wide-image { [dir="rtl"] .layout-builder .wide-image {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .layout-builder .wide-image { [dir="ltr"] .layout-builder .wide-image {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .layout-builder .wide-image { [dir="rtl"] .layout-builder .wide-image {
margin-left: 0 margin-left: 0;
} }
.layout-builder .wide-image { .layout-builder .wide-image {

View File

@ -27,7 +27,7 @@
display: grid; display: grid;
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr)); grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
grid-column-gap: var(--grid-gap) grid-column-gap: var(--grid-gap);
/* .grid-full classes nested 3 or more deep go full width. */ /* .grid-full classes nested 3 or more deep go full width. */
} }
@ -46,7 +46,7 @@
.layout--content-narrow .grid-full, .layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full { .layout--pass--content-narrow > * .grid-full {
grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr)) grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
} }
} }
@ -54,7 +54,7 @@
.layout--content-narrow .grid-full, .layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full { .layout--pass--content-narrow > * .grid-full {
grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr)) grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
} }
} }
@ -68,7 +68,7 @@
.layout--content-medium .grid-full, .layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full { .layout--pass--content-medium > * .grid-full {
grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr)) grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
} }
} }
@ -76,6 +76,6 @@
.layout--content-medium .grid-full, .layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full { .layout--pass--content-medium > * .grid-full {
grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr)) grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
} }
} }

View File

@ -25,12 +25,12 @@
.layout--fourcol-section { .layout--fourcol-section {
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap;
} }
.layout--fourcol-section > .layout__region { .layout--fourcol-section > .layout__region {
flex: 1 0 100%; flex: 1 0 100%;
margin-bottom: var(--grid-gap) margin-bottom: var(--grid-gap);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -39,14 +39,11 @@
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); flex-basis: calc(50% - (var(--grid-gap) * 0.5));
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 0 margin-bottom: 0;
} }
} }
.layout--fourcol-section { /* Two column layout. */
/* Two column layout. */
}
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region--first, .layout--fourcol-section > .layout__region--first,
@ -56,29 +53,26 @@
[dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"] [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"]
.layout--fourcol-section > .layout__region--third { .layout--fourcol-section > .layout__region--third {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"] [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"]
.layout--fourcol-section > .layout__region--third { .layout--fourcol-section > .layout__region--third {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
[dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"] [dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"]
.layout--fourcol-section > .layout__region--fourth { .layout--fourcol-section > .layout__region--fourth {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"] [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"]
.layout--fourcol-section > .layout__region--fourth { .layout--fourcol-section > .layout__region--fourth {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
} }
.layout--fourcol-section { /* Four column layout. */
/* Four column layout. */
}
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.layout--fourcol-section > .layout__region { .layout--fourcol-section > .layout__region {
@ -91,11 +85,11 @@
} }
[dir="ltr"] .layout--fourcol-section > .layout__region--first { [dir="ltr"] .layout--fourcol-section > .layout__region--first {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--fourcol-section > .layout__region--first { [dir="rtl"] .layout--fourcol-section > .layout__region--first {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
.layout--fourcol-section > .layout__region--second, .layout--fourcol-section > .layout__region--second,
@ -105,10 +99,10 @@
} }
[dir="ltr"] .layout--fourcol-section > .layout__region--fourth { [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--fourcol-section > .layout__region--fourth { [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
} }

View File

@ -25,12 +25,12 @@
.layout--threecol-section { .layout--threecol-section {
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap;
} }
.layout--threecol-section > .layout__region { .layout--threecol-section > .layout__region {
flex: 1 0 100%; flex: 1 0 100%;
margin-bottom: var(--grid-gap) margin-bottom: var(--grid-gap);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
@ -38,16 +38,16 @@
.layout--threecol-section > .layout__region { .layout--threecol-section > .layout__region {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 0 margin-bottom: 0;
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .layout--threecol-section > .layout__region--first { [dir="ltr"] .layout--threecol-section > .layout__region--first {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--threecol-section > .layout__region--first { [dir="rtl"] .layout--threecol-section > .layout__region--first {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
.layout--threecol-section > .layout__region--second { .layout--threecol-section > .layout__region--second {
@ -56,11 +56,11 @@
} }
[dir="ltr"] .layout--threecol-section > .layout__region--third { [dir="ltr"] .layout--threecol-section > .layout__region--third {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--threecol-section > .layout__region--third { [dir="rtl"] .layout--threecol-section > .layout__region--third {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
.layout--threecol-section--25-50-25 > .layout__region--first, .layout--threecol-section--25-50-25 > .layout__region--first,
.layout--threecol-section--25-50-25 > .layout__region--third { .layout--threecol-section--25-50-25 > .layout__region--third {

View File

@ -25,12 +25,12 @@
.layout--twocol-section { .layout--twocol-section {
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap;
} }
.layout--twocol-section > .layout__region { .layout--twocol-section > .layout__region {
flex: 1 0 100%; flex: 1 0 100%;
margin-bottom: var(--grid-gap) margin-bottom: var(--grid-gap);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
@ -38,111 +38,111 @@
.layout--twocol-section > .layout__region { .layout--twocol-section > .layout__region {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 0 margin-bottom: 0;
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first { [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first { [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
.layout--twocol-section--50-50 > .layout__region--first { .layout--twocol-section--50-50 > .layout__region--first {
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); flex-basis: calc(50% - (var(--grid-gap) * 0.5));
} }
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second { [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
margin-left: calc(var(--grid-gap) * 0.5) margin-left: calc(var(--grid-gap) * 0.5);
} }
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second { [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
margin-right: calc(var(--grid-gap) * 0.5) margin-right: calc(var(--grid-gap) * 0.5);
} }
.layout--twocol-section--50-50 > .layout__region--second { .layout--twocol-section--50-50 > .layout__region--second {
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); flex-basis: calc(50% - (var(--grid-gap) * 0.5));
} }
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first { [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
margin-right: calc(var(--grid-gap) * 0.3333) margin-right: calc(var(--grid-gap) * 0.3333);
} }
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first { [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
margin-left: calc(var(--grid-gap) * 0.3333) margin-left: calc(var(--grid-gap) * 0.3333);
} }
.layout--twocol-section--33-67 > .layout__region--first { .layout--twocol-section--33-67 > .layout__region--first {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333)); flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
} }
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second { [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
margin-left: calc(var(--grid-gap) * 0.6666) margin-left: calc(var(--grid-gap) * 0.6666);
} }
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second { [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
margin-right: calc(var(--grid-gap) * 0.6666) margin-right: calc(var(--grid-gap) * 0.6666);
} }
.layout--twocol-section--33-67 > .layout__region--second { .layout--twocol-section--33-67 > .layout__region--second {
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666)); flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
} }
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first { [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
margin-right: calc(var(--grid-gap) * 0.6666) margin-right: calc(var(--grid-gap) * 0.6666);
} }
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first { [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
margin-left: calc(var(--grid-gap) * 0.6666) margin-left: calc(var(--grid-gap) * 0.6666);
} }
.layout--twocol-section--67-33 > .layout__region--first { .layout--twocol-section--67-33 > .layout__region--first {
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666)); flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
} }
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second { [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
margin-left: calc(var(--grid-gap) * 0.3333) margin-left: calc(var(--grid-gap) * 0.3333);
} }
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second { [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
margin-right: calc(var(--grid-gap) * 0.3333) margin-right: calc(var(--grid-gap) * 0.3333);
} }
.layout--twocol-section--67-33 > .layout__region--second { .layout--twocol-section--67-33 > .layout__region--second {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333)); flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
} }
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first { [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
margin-right: calc(var(--grid-gap) * 0.25) margin-right: calc(var(--grid-gap) * 0.25);
} }
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first { [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
margin-left: calc(var(--grid-gap) * 0.25) margin-left: calc(var(--grid-gap) * 0.25);
} }
.layout--twocol-section--25-75 > .layout__region--first { .layout--twocol-section--25-75 > .layout__region--first {
flex-basis: calc(25% - (var(--grid-gap) * 0.25)); flex-basis: calc(25% - (var(--grid-gap) * 0.25));
} }
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second { [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
margin-left: calc(var(--grid-gap) * 0.75) margin-left: calc(var(--grid-gap) * 0.75);
} }
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second { [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
margin-right: calc(var(--grid-gap) * 0.75) margin-right: calc(var(--grid-gap) * 0.75);
} }
.layout--twocol-section--25-75 > .layout__region--second { .layout--twocol-section--25-75 > .layout__region--second {
flex-basis: calc(75% - (var(--grid-gap) * 0.75)); flex-basis: calc(75% - (var(--grid-gap) * 0.75));
} }
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first { [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
margin-right: calc(var(--grid-gap) * 0.75) margin-right: calc(var(--grid-gap) * 0.75);
} }
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first { [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
margin-left: calc(var(--grid-gap) * 0.75) margin-left: calc(var(--grid-gap) * 0.75);
} }
.layout--twocol-section--75-25 > .layout__region--first { .layout--twocol-section--75-25 > .layout__region--first {
flex-basis: calc(75% - (var(--grid-gap) * 0.75)); flex-basis: calc(75% - (var(--grid-gap) * 0.75));
} }
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second { [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
margin-left: calc(var(--grid-gap) * 0.25) margin-left: calc(var(--grid-gap) * 0.25);
} }
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second { [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
margin-right: calc(var(--grid-gap) * 0.25) margin-right: calc(var(--grid-gap) * 0.25);
} }
.layout--twocol-section--75-25 > .layout__region--second { .layout--twocol-section--75-25 > .layout__region--second {

View File

@ -26,14 +26,14 @@
.layout--content-medium, .layout--content-medium,
.layout--pass--content-medium > * { .layout--pass--content-medium > * {
grid-column: 1 / 7; grid-column: 1 / 7;
width: 100% width: 100%;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.layout--content-medium, .layout--content-medium,
.layout--pass--content-medium > * { .layout--pass--content-medium > * {
grid-column: 2 / 14 grid-column: 2 / 14;
} }
} }
@ -41,7 +41,7 @@
.layout--content-medium, .layout--content-medium,
.layout--pass--content-medium > * { .layout--pass--content-medium > * {
grid-column: 3 / 13 grid-column: 3 / 13;
} }
} }
@ -54,19 +54,19 @@
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.layout--pass--content-medium > * .layout--content-medium, .layout--pass--content-medium > * .layout--content-medium,
.layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--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 > * { .layout--content-medium .layout--pass--content-medium > * {
grid-column: 1 / 13 grid-column: 1 / 13;
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.layout--pass--content-medium > * .layout--content-medium, .layout--pass--content-medium > * .layout--content-medium,
.layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--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 > * { .layout--content-medium .layout--pass--content-medium > * {
grid-column: 1 / 11 grid-column: 1 / 11;
} }
} }

View File

@ -26,14 +26,14 @@
.layout--content-narrow, .layout--content-narrow,
.layout--pass--content-narrow > * { .layout--pass--content-narrow > * {
grid-column: 1 / 7; grid-column: 1 / 7;
width: 100% width: 100%;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.layout--content-narrow, .layout--content-narrow,
.layout--pass--content-narrow > * { .layout--pass--content-narrow > * {
grid-column: 2 / 14 grid-column: 2 / 14;
} }
} }
@ -41,7 +41,7 @@
.layout--content-narrow, .layout--content-narrow,
.layout--pass--content-narrow > * { .layout--pass--content-narrow > * {
grid-column: 3 / 11 grid-column: 3 / 11;
} }
} }
@ -57,28 +57,28 @@
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.layout--content-narrow .layout--content-narrow, .layout--content-narrow .layout--content-narrow,
.layout--content-narrow .layout--pass--content-narrow > *,
.layout--pass--content-narrow > * .layout--content-narrow, .layout--pass--content-narrow > * .layout--content-narrow,
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--content-narrow, .layout--content-medium .layout--content-narrow,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--content-narrow, .layout--pass--content-medium > * .layout--content-narrow,
.layout--content-narrow .layout--pass--content-narrow > *,
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * { .layout--pass--content-medium > * .layout--pass--content-narrow > * {
grid-column: 1 / 13 grid-column: 1 / 13;
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.layout--content-narrow .layout--content-narrow, .layout--content-narrow .layout--content-narrow,
.layout--content-narrow .layout--pass--content-narrow > *,
.layout--pass--content-narrow > * .layout--content-narrow, .layout--pass--content-narrow > * .layout--content-narrow,
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--content-narrow, .layout--content-medium .layout--content-narrow,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--content-narrow, .layout--pass--content-medium > * .layout--content-narrow,
.layout--content-narrow .layout--pass--content-narrow > *,
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * { .layout--pass--content-medium > * .layout--pass--content-narrow > * {
grid-column: 1 / 9 grid-column: 1 / 9;
} }
} }
@ -89,76 +89,76 @@
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before { [dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"] .layout--content-narrow .text-content blockquote:before,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
left: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before { [dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"] .layout--content-narrow .text-content blockquote:before,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
right: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after { [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
left: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after { [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
right: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after { [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"] .layout--content-narrow .text-content blockquote:after,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
margin-left: 2px margin-left: 2px;
} }
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after { [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"] .layout--content-narrow .text-content blockquote:after,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
margin-right: 2px margin-right: 2px;
} }
.layout--content-narrow.text-content blockquote:after, .layout--content-narrow .text-content blockquote:after, .layout--pass--content-narrow > *.text-content blockquote:after, .layout--pass--content-narrow > * .text-content blockquote:after { .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 {
width: var(--sp); width: var(--sp);
height: calc(100% - 2.8125rem) height: calc(100% - 2.8125rem);
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote,[dir="ltr"] .layout--content-narrow .text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote { [dir="ltr"] .layout--content-narrow.text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote,[dir="ltr"] .layout--content-narrow .text-content blockquote,[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .layout--content-narrow.text-content blockquote,[dir="rtl"] .layout--content-narrow .text-content blockquote,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote { [dir="rtl"] .layout--content-narrow.text-content blockquote,[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote,[dir="rtl"] .layout--content-narrow .text-content blockquote,[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote {
padding-right: 0 padding-right: 0;
} }
.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote { .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)); width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
margin-top: var(--sp3); margin-top: var(--sp3);
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre { .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-top: var(--sp3); margin-top: var(--sp3);
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"] .layout--content-narrow .text-content pre,[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,[dir="ltr"] .layout--pass--content-narrow > * .text-content pre { [dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,[dir="ltr"] .layout--content-narrow .text-content pre,[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"] .layout--content-narrow .text-content pre,[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,[dir="rtl"] .layout--pass--content-narrow > * .text-content pre { [dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,[dir="rtl"] .layout--content-narrow .text-content pre,[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap))) margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
} }
.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre { .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)) width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
} }
} }
@ -168,12 +168,12 @@
*/ */
.sidebar-grid .layout--content-narrow.text-content blockquote, .sidebar-grid .layout--content-narrow.text-content blockquote,
.sidebar-grid .layout--content-narrow.text-content pre,
.sidebar-grid .layout--content-narrow .text-content blockquote,
.sidebar-grid .layout--content-narrow .text-content pre,
.sidebar-grid .layout--pass--content-narrow > *.text-content blockquote, .sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
.sidebar-grid .layout--pass--content-narrow > *.text-content pre, .sidebar-grid .layout--content-narrow .text-content blockquote,
.sidebar-grid .layout--pass--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 { .sidebar-grid .layout--pass--content-narrow > * .text-content pre {
width: auto; width: auto;
} }

View File

@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
.layout { .layout {
margin-bottom: var(--sp) margin-bottom: var(--sp);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.layout { .layout {
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.layout { .layout {
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }

View File

@ -35,26 +35,26 @@
.site-footer__inner { .site-footer__inner {
padding-top: var(--sp2); padding-top: var(--sp2);
padding-bottom: var(--sp2) padding-bottom: var(--sp2);
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
.site-footer__inner { .site-footer__inner {
padding-top: var(--sp4); padding-top: var(--sp4);
padding-bottom: calc(13 * var(--sp)) padding-bottom: calc(13 * var(--sp));
} }
} }
.region--footer_top__inner > *, .region--footer_bottom__inner > * { .region--footer_top__inner > *, .region--footer_bottom__inner > * {
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.region--footer_top__inner > *, .region--footer_bottom__inner > * { .region--footer_top__inner > *, .region--footer_bottom__inner > * {
flex: 1; flex: 1;
margin-bottom: 0 margin-bottom: 0;
} }
[dir="ltr"] .region--footer_top__inner > *:not(:last-child),[dir="ltr"] .region--footer_bottom__inner > *:not(:last-child) { [dir="ltr"] .region--footer_top__inner > *:not(:last-child),[dir="ltr"] .region--footer_bottom__inner > *:not(:last-child) {
@ -71,6 +71,6 @@
.region--footer_top__inner, .region--footer_top__inner,
.region--footer_bottom__inner { .region--footer_bottom__inner {
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap;
} }
} }

View File

@ -26,13 +26,13 @@
.sidebar-grid > .site-main { .sidebar-grid > .site-main {
grid-column: 1 / 7; grid-column: 1 / 7;
align-self: flex-start; align-self: flex-start;
-ms-grid-row-align: start -ms-grid-row-align: start;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.sidebar-grid > .site-main { .sidebar-grid > .site-main {
grid-column: 1 / 15 grid-column: 1 / 15;
} }
} }
@ -41,7 +41,7 @@
.sidebar-grid > .site-main { .sidebar-grid > .site-main {
display: grid; display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-columns: repeat(8, minmax(0, 1fr));
grid-column: 3 / 11 grid-column: 3 / 11;
} }
.sidebar-grid > .site-main > .region--content-above, .sidebar-grid > .site-main > .region--content-above,
@ -60,13 +60,13 @@
.sidebar-grid .region--sidebar { .sidebar-grid .region--sidebar {
-ms-grid-row: 2; -ms-grid-row: 2;
grid-column: 1 / 7 grid-column: 1 / 7;
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.sidebar-grid .region--sidebar { .sidebar-grid .region--sidebar {
grid-column: 3 / 13 grid-column: 3 / 13;
} }
} }
@ -74,6 +74,6 @@
.sidebar-grid .region--sidebar { .sidebar-grid .region--sidebar {
-ms-grid-row: 1; -ms-grid-row: 1;
grid-column: 12 / 15 grid-column: 12 / 15;
} }
} }

View File

@ -50,7 +50,7 @@
margin-bottom: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */ margin-bottom: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
column-width: var(--views-grid-item--min-width); column-width: var(--views-grid-item--min-width);
column-count: var(--views-grid--column-count); column-count: var(--views-grid--column-count);
grid-column-gap: var(--views-grid--layout-gap) column-gap: var(--views-grid--layout-gap);
} }
.views-view-grid--vertical .views-view-grid__item > * { .views-view-grid--vertical .views-view-grid__item > * {

View File

@ -27,7 +27,7 @@
width: 100%; width: 100%;
max-width: var(--max-width); max-width: var(--max-width);
padding-left: var(--container-padding); padding-left: var(--container-padding);
padding-right: var(--container-padding) padding-right: var(--container-padding);
/* This fixes an issue where if the toolbar is open in vertical mode, and /* This fixes an issue where if the toolbar is open in vertical mode, and
* the mobile navigation is open, the "close" button gets pushed outside of * the mobile navigation is open, the "close" button gets pushed outside of
@ -35,7 +35,7 @@
} }
body.is-fixed .container { 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 { .page-wrapper {
@ -60,32 +60,32 @@ body.is-fixed .container {
.layout-main { .layout-main {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
flex-wrap: wrap flex-wrap: wrap;
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] .main-content { [dir="ltr"] .main-content {
margin-right: auto margin-right: auto;
} }
[dir="rtl"] .main-content { [dir="rtl"] .main-content {
margin-left: auto margin-left: auto;
} }
.main-content { .main-content {
width: calc(100% - var(--content-left)) width: calc(100% - var(--content-left));
} }
} }
.main-content__container { .main-content__container {
padding-top: var(--sp3) padding-top: var(--sp3);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.main-content__container { .main-content__container {
padding-top: var(--sp5) padding-top: var(--sp5);
} }
} }

View File

@ -27,56 +27,56 @@
.region--content-below { .region--content-below {
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap;
} }
[dir="ltr"] .region--content-below > * { [dir="ltr"] .region--content-below > * {
margin-right: var(--grid-gap) margin-right: var(--grid-gap);
} }
[dir="rtl"] .region--content-below > * { [dir="rtl"] .region--content-below > * {
margin-left: var(--grid-gap) margin-left: var(--grid-gap);
} }
.region--content-below > * { .region--content-below > * {
flex-basis: calc(50% - (var(--grid-gap) / 2)); flex-basis: calc(50% - (var(--grid-gap) / 2));
flex-grow: 1; flex-grow: 1;
flex-shrink: 0 flex-shrink: 0;
} }
[dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"] [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
.region--content-below > *:last-child { .region--content-below > *:last-child {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"] [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"]
.region--content-below > *:last-child { .region--content-below > *:last-child {
margin-left: 0 margin-left: 0;
} }
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.region--content-below > * { .region--content-below > * {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667)) flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
} }
[dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"] [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
.region--content-below > *:last-child { .region--content-below > *:last-child {
margin-right: var(--grid-gap) margin-right: var(--grid-gap);
} }
[dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"] [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"]
.region--content-below > *:last-child { .region--content-below > *:last-child {
margin-left: var(--grid-gap) margin-left: var(--grid-gap);
} }
[dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"] [dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"]
.region--content-below > *:last-child { .region--content-below > *:last-child {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .region--content-below > *:nth-child(3n),[dir="rtl"] [dir="rtl"] .region--content-below > *:nth-child(3n),[dir="rtl"]
.region--content-below > *:last-child { .region--content-below > *:last-child {
margin-left: 0 margin-left: 0;
} }
} }

View File

@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
.region--content { .region--content {
margin-bottom: var(--sp) margin-bottom: var(--sp);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.region--content { .region--content {
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.region--content { .region--content {
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }

View File

@ -26,7 +26,7 @@
.region--secondary-menu { .region--secondary-menu {
display: flex; display: flex;
margin-top: var(--sp2); margin-top: var(--sp2);
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
.region--secondary-menu > * { .region--secondary-menu > * {
@ -36,7 +36,7 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .region--secondary-menu { body:not(.is-always-mobile-nav) .region--secondary-menu {
justify-content: flex-end; justify-content: flex-end;
margin: 0 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. */
} }

View File

@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */ /* Width of the entire grid maxes out. */
.region > * { .region > * {
margin-bottom: var(--sp) margin-bottom: var(--sp);
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
.region > * { .region > * {
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.region > * { .region > * {
margin-bottom: var(--sp3) margin-bottom: var(--sp3);
} }
} }

View File

@ -29,63 +29,63 @@
.social-bar { .social-bar {
flex-shrink: 0; flex-shrink: 0;
width: var(--content-left); width: var(--content-left);
background-color: var(--color--gray-100) background-color: var(--color--gray-100);
} }
} }
[dir="ltr"] .social-bar__inner { [dir="ltr"] .social-bar__inner {
padding-left: var(--sp) padding-left: var(--sp);
} }
[dir="rtl"] .social-bar__inner { [dir="rtl"] .social-bar__inner {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="ltr"] .social-bar__inner { [dir="ltr"] .social-bar__inner {
padding-right: var(--sp) padding-right: var(--sp);
} }
[dir="rtl"] .social-bar__inner { [dir="rtl"] .social-bar__inner {
padding-left: var(--sp) padding-left: var(--sp);
} }
.social-bar__inner { .social-bar__inner {
position: relative; position: relative;
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5) padding-bottom: var(--sp0-5);
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] .social-bar__inner { [dir="ltr"] .social-bar__inner {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .social-bar__inner { [dir="rtl"] .social-bar__inner {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .social-bar__inner { [dir="ltr"] .social-bar__inner {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .social-bar__inner { [dir="rtl"] .social-bar__inner {
padding-left: 0 padding-left: 0;
} }
.social-bar__inner { .social-bar__inner {
position: relative; position: relative;
width: var(--content-left); width: var(--content-left);
padding-top: calc(5 * var(--sp)); padding-top: calc(5 * var(--sp));
padding-bottom: calc(5 * var(--sp)) padding-bottom: calc(5 * var(--sp));
} }
[dir="ltr"] .social-bar__inner.is-fixed { [dir="ltr"] .social-bar__inner.is-fixed {
left: 0 left: 0;
} }
[dir="rtl"] .social-bar__inner.is-fixed { [dir="rtl"] .social-bar__inner.is-fixed {
right: 0 right: 0;
} }
.social-bar__inner.is-fixed { .social-bar__inner.is-fixed {
@ -96,7 +96,7 @@
} }
.rotate > * { .rotate > * {
margin-bottom: var(--sp2) margin-bottom: var(--sp2);
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
@ -104,15 +104,15 @@
.rotate > * { .rotate > * {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0 margin-bottom: 0;
} }
[dir="ltr"] .rotate > *:not(:first-child) { [dir="ltr"] .rotate > *:not(:first-child) {
margin-right: var(--sp2) margin-right: var(--sp2);
} }
[dir="rtl"] .rotate > *:not(:first-child) { [dir="rtl"] .rotate > *:not(:first-child) {
margin-left: var(--sp2) margin-left: var(--sp2);
} }
} }
@ -120,36 +120,36 @@
[dir="ltr"] .rotate .contextual { [dir="ltr"] .rotate .contextual {
left: 100%; left: 100%;
right: auto right: auto;
} }
[dir="rtl"] .rotate .contextual { [dir="rtl"] .rotate .contextual {
right: 100%; right: 100%;
left: auto left: auto;
} }
.rotate .contextual { .rotate .contextual {
transform: rotate(90deg); /* LTR */ transform: rotate(90deg); /* LTR */
transform-origin: top left /* LTR */ transform-origin: top left; /* LTR */
} }
[dir="ltr"] .rotate .contextual .trigger { [dir="ltr"] .rotate .contextual .trigger {
float: left float: left;
} }
[dir="rtl"] .rotate .contextual .trigger { [dir="rtl"] .rotate .contextual .trigger {
float: right float: right;
} }
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] .rotate { [dir="ltr"] .rotate {
left: 50% left: 50%;
} }
[dir="rtl"] .rotate { [dir="rtl"] .rotate {
right: 50% right: 50%;
} }
.rotate { .rotate {
@ -158,13 +158,13 @@
flex-direction: row-reverse; flex-direction: row-reverse;
width: 100vh; width: 100vh;
transform: rotate(-90deg) translateX(-100%); /* LTR */ transform: rotate(-90deg) translateX(-100%); /* LTR */
transform-origin: left /* LTR */ transform-origin: left; /* LTR */
} }
@supports (width: max-content) { @supports (width: max-content) {
.rotate { .rotate {
width: max-content width: max-content;
} }
} }
} }
@ -172,7 +172,7 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="rtl"] .rotate { [dir="rtl"] .rotate {
transform: rotate(90deg) translateX(100%); transform: rotate(90deg) translateX(100%);
transform-origin: right transform-origin: right;
} }
[dir="rtl"] .rotate .contextual { [dir="rtl"] .rotate .contextual {

Some files were not shown because too many files have changed in this diff Show More