Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/misc/dialog/off-canvas/css/base.css
View File

@ -29,7 +29,7 @@
padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
color: var(--off-canvas-text-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 {
@ -92,7 +92,7 @@
#drupal-off-canvas-wrapper .links {
margin: 0;
padding: 0;
list-style: none
list-style: none;
}
#drupal-off-canvas-wrapper .links li {

12
core/misc/dialog/off-canvas/css/button.css
View File

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

10
core/misc/dialog/off-canvas/css/details.css
View File

@ -23,7 +23,7 @@
--off-canvas-details-summary-background-color: #333;
--off-canvas-details-summary-background-color-hover: #222;
--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 {
@ -31,10 +31,10 @@
padding: 0 var(--off-canvas-padding);
color: var(--off-canvas-details-text-color);
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));
}
@ -44,7 +44,7 @@
color: var(--off-canvas-details-summary-text-color);
border: var(--off-canvas-details-summary-border);
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 {
@ -59,7 +59,7 @@
#drupal-off-canvas-wrapper summary {
a {
color: var(--off-canvas-details-text-color)
color: var(--off-canvas-details-text-color);
}
a:hover {

62
core/misc/dialog/off-canvas/css/dropbutton.css
View File

@ -20,11 +20,11 @@
--off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
--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-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 {
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.
@ -32,7 +32,7 @@
}
#drupal-off-canvas-wrapper .dropbutton-wrapper.open {
position: relative;
z-index: 100
z-index: 100;
}
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .secondary-action {
visibility: visible;
@ -43,21 +43,18 @@
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-toggle button:before {
transform: translateY(25%) rotate(225deg);
}
#drupal-off-canvas-wrapper .dropbutton-wrapper {
/*
/*
* Styles for single link variant of dropbutton.
*/
}
[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 {
padding-left: 0
padding-left: 0;
}
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
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 {
border: solid 1px var(--off-canvas-dropbutton-border-color);
@ -66,10 +63,10 @@
justify-content: center;
}
[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 {
padding-left: var(--off-canvas-dropbutton-height)
padding-left: var(--off-canvas-dropbutton-height);
}
#drupal-off-canvas-wrapper .dropbutton-widget {
position: relative;
@ -79,16 +76,16 @@
border-radius: var(--off-canvas-dropbutton-border-radius);
}
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
margin-left: 0
margin-left: 0;
}
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
margin-right: 0
margin-right: 0;
}
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
padding-left: 0
padding-left: 0;
}
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
padding-right: 0
padding-right: 0;
}
#drupal-off-canvas-wrapper .dropbutton {
height: var(--off-canvas-dropbutton-height);
@ -97,19 +94,16 @@
list-style: none;
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 {
padding: 0;
border: 0
border: 0;
}
[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
right: 0
right: 0;
}
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
left: 0
left: 0;
}
#drupal-off-canvas-wrapper .dropbutton-toggle button {
position: absolute;
@ -123,7 +117,7 @@
cursor: pointer;
border-color: var(--off-canvas-dropbutton-border-color);
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 {
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
@ -141,20 +135,17 @@
[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);
}
#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 {
margin-right: 2px
margin-right: 2px;
}
[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
margin-left: 2px
margin-left: 2px;
}
#drupal-off-canvas-wrapper .dropbutton-action:first-child {
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 */
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 {
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
@ -168,7 +159,7 @@
padding: 0 0.5625rem;
text-decoration: none;
color: var(--off-canvas-dropbutton-text-color);
font-weight: 600
font-weight: 600;
}
#drupal-off-canvas-wrapper .dropbutton-action a:hover {
color: var(--off-canvas-dropbutton-text-color);
@ -177,17 +168,14 @@
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
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 {
visibility: hidden;
width: calc(100% + var(--off-canvas-dropbutton-height));
margin-top: var(--off-canvas-dropbutton-border-width);
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);
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 {
border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);

48
core/misc/dialog/off-canvas/css/form.css
View File

@ -21,12 +21,12 @@
--drupal-off-canvas-input-text-color: #333;
--drupal-off-canvas-fieldset-background-color: transparent;
--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 {
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 {
@ -78,10 +78,7 @@
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"])) {
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);
}
#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;
}
@ -116,11 +113,11 @@
}
[dir="ltr"] #drupal-off-canvas-wrapper select {
padding-right: 1.25rem
padding-right: 1.25rem;
}
[dir="rtl"] #drupal-off-canvas-wrapper select {
padding-left: 1.25rem
padding-left: 1.25rem;
}
#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-repeat: no-repeat;
background-position: center right 5px; /* LTR */
background-size: 0.75rem
background-size: 0.75rem;
}
[dir="rtl"] #drupal-off-canvas-wrapper select {
@ -141,39 +138,36 @@
@media (forced-colors: active) {
[dir="ltr"] #drupal-off-canvas-wrapper select {
padding-right: 0
padding-right: 0;
}
[dir="rtl"] #drupal-off-canvas-wrapper select {
padding-left: 0
padding-left: 0;
}
#drupal-off-canvas-wrapper select {
-webkit-appearance: revert;
appearance: revert;
background: revert
background: revert;
}
}
#drupal-off-canvas-wrapper {
/*
/*
* 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 {
padding-left: 2.5rem
padding-left: 2.5rem;
}
#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-repeat: no-repeat;
background-position: center right 1px /* LTR */
background-position: center right 1px; /* LTR */
}
#drupal-off-canvas-wrapper .form-autocomplete.ui-autocomplete-loading {
@ -184,10 +178,7 @@
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 {
margin: 0;
@ -195,7 +186,7 @@
list-style: none;
border: var(--drupal-off-canvas-input-border);
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 {
@ -203,7 +194,7 @@
padding: var(--drupal-off-canvas-input-padding);
cursor: pointer;
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 {
@ -216,13 +207,10 @@
outline-offset: -2px;
}
#drupal-off-canvas-wrapper {
/*
/*
* Claro injects a "Loading" autocomplete message that affects the positioning
* of the ui-autocomplete dropdown. We remove this to normalize the markup.
*/
}
#drupal-off-canvas-wrapper .claro-autocomplete__message {
display: none;

43
core/misc/dialog/off-canvas/css/messages.css
View File

@ -20,15 +20,15 @@
--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-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 {
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 {
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 {
@ -36,17 +36,17 @@
margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
padding: calc(2 * var(--off-canvas-vertical-spacing-unit)); /* Room for icon. */
border: solid 1px transparent;
background-color: var(--off-canvas-messages-background-color)
background-color: var(--off-canvas-messages-background-color);
/* Icon. */
}
[dir="ltr"] #drupal-off-canvas-wrapper .messages:before {
left: 0.625rem
left: 0.625rem;
}
[dir="rtl"] #drupal-off-canvas-wrapper .messages:before {
right: 0.625rem
right: 0.625rem;
}
#drupal-off-canvas-wrapper .messages:before {
@ -58,7 +58,7 @@
content: "";
transform: translateY(-50%);
background-repeat: no-repeat;
background-size: contain
background-size: contain;
}
@media (forced-colors: active) {
@ -68,7 +68,7 @@
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain
mask-size: contain;
}
}
@ -76,13 +76,10 @@
margin-top: 0;
}
#drupal-off-canvas-wrapper {
/*
/*
* Some themes (Olivero) insert SVG icon. We use a background icon, so we
* need to remove this.
*/
}
#drupal-off-canvas-wrapper .messages__icon,
#drupal-off-canvas-wrapper .messages__close {
@ -90,11 +87,11 @@
}
[dir="ltr"] #drupal-off-canvas-wrapper .messages__list {
padding-left: 1.25rem
padding-left: 1.25rem;
}
[dir="rtl"] #drupal-off-canvas-wrapper .messages__list {
padding-right: 1.25rem
padding-right: 1.25rem;
}
#drupal-off-canvas-wrapper .messages__list {
@ -106,11 +103,11 @@
}
#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 {
background-image: var(--off-canvas-messages-icon-status)
background-image: var(--off-canvas-messages-icon-status);
}
@media (forced-colors: active) {
@ -118,16 +115,16 @@
#drupal-off-canvas-wrapper .messages--status:before {
background: canvastext;
-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 {
color: var(--off-canvas-messages-text-color-warning)
color: var(--off-canvas-messages-text-color-warning);
}
#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) {
@ -135,16 +132,16 @@
#drupal-off-canvas-wrapper .messages--warning:before {
background: canvastext;
-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 {
color: var(--off-canvas-messages-text-color-error)
color: var(--off-canvas-messages-text-color-error);
}
#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) {
@ -152,6 +149,6 @@
#drupal-off-canvas-wrapper .messages--error:before {
background: canvastext;
-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);
}
}

2
core/misc/dialog/off-canvas/css/reset.css
View File

@ -16,7 +16,7 @@
all: revert;
box-sizing: border-box;
-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,

12
core/misc/dialog/off-canvas/css/table.css
View File

@ -14,7 +14,7 @@
#drupal-off-canvas-wrapper {
--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 {
@ -28,26 +28,26 @@
[dir="ltr"] #drupal-off-canvas-wrapper td,[dir="ltr"]
#drupal-off-canvas-wrapper th {
text-align: left
text-align: left;
}
[dir="rtl"] #drupal-off-canvas-wrapper td,[dir="rtl"]
#drupal-off-canvas-wrapper th {
text-align: right
text-align: right;
}
#drupal-off-canvas-wrapper td,
#drupal-off-canvas-wrapper th {
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 {
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 {
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 {

30
core/misc/dialog/off-canvas/css/tabledrag.css
View File

@ -14,19 +14,14 @@
* @internal
*/
#drupal-off-canvas-wrapper {
/* The draggable <tr> element. */
}
/* The draggable <tr> element. */
#drupal-off-canvas-wrapper .draggable:hover,
#drupal-off-canvas-wrapper .draggable:focus-within {
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 {
cursor: move;
@ -34,7 +29,7 @@
}
#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
* that do not have wrapper elements. Since we use flex to do this, we need
@ -46,7 +41,7 @@
display: flex;
align-items: center;
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 {
@ -64,7 +59,7 @@
}
#drupal-off-canvas-wrapper .tabledrag-handle {
flex-shrink: 0
flex-shrink: 0;
}
#drupal-off-canvas-wrapper .tabledrag-handle:after {
@ -78,7 +73,7 @@
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-repeat: no-repeat;
background-position: center
background-position: center;
}
@media (forced-colors: active) {
@ -90,14 +85,11 @@
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-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 {
all: revert;
@ -125,15 +117,15 @@
}
.touchevents #drupal-off-canvas-wrapper .draggable td {
padding: 0 0.625rem
padding: 0 0.625rem;
}
.touchevents #drupal-off-canvas-wrapper .draggable .menu-item__link {
display: inline-block;
padding: 0.625rem 0
padding: 0.625rem 0;
}
.touchevents #drupal-off-canvas-wrapper a.tabledrag-handle {
width: 2.5rem;
height: 2.75rem
height: 2.75rem;
}

14
core/misc/dialog/off-canvas/css/throbber.css
View File

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

33
core/misc/dialog/off-canvas/css/titlebar.css
View File

@ -16,7 +16,7 @@
--off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
--off-canvas-title-background-color: #2d2d2d;
--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 {
@ -27,17 +27,17 @@
background-color: var(--off-canvas-title-background-color);
font-family: var(--off-canvas-title-font-family);
font-size: var(--off-canvas-title-font-size);
font-weight: bold
font-weight: bold;
/* The pencil icon. */
}
[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
left: 1em
left: 1em;
}
[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
right: 1em
right: 1em;
}
#drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
@ -55,29 +55,26 @@
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center
mask-position: center;
}
@media (forced-colors: active) {
#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 {
left: auto;
right: 0.625rem
right: 0.625rem;
}
[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
right: auto;
left: 0.625rem
left: 0.625rem;
}
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
@ -93,7 +90,7 @@
border: 1px solid transparent;
background-color: transparent;
-webkit-appearance: none;
appearance: none
appearance: none;
}
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:focus {
@ -101,10 +98,7 @@
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:after {
@ -125,10 +119,7 @@
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 {
display: none;

16
core/misc/dialog/off-canvas/css/utility.css
View File

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

14
core/misc/dialog/off-canvas/css/wrapper.css
View File

@ -11,10 +11,10 @@
* @internal
*/
[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 {
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 {
--off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgba(0, 0, 0, 0.3);
@ -25,7 +25,7 @@
overflow: auto;
box-sizing: border-box;
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
@ -34,21 +34,21 @@
}
@media (max-width: 48rem) {
#drupal-off-canvas-wrapper {
width: 100% !important
width: 100% !important;
}
}
/* When off-canvas dialog is at 100% width stop the body from scrolling */
@media (max-width: 48rem) {
body.js-off-canvas-dialog-open {
position: fixed
position: fixed;
}
}
/* This is a page level content wrapper that shrinks when off-canvas is open. */
.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) {
.dialog-off-canvas-main-canvas {
transition: none
transition: none;
}
}

10
core/modules/layout_builder/css/layout-builder.css
View File

@ -36,7 +36,7 @@
.layout-builder__link--add {
color: #686868;
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 {
@ -50,7 +50,7 @@
}
.layout-builder__section {
margin-bottom: 1.5em
margin-bottom: 1.5em;
}
.layout-builder__section .ui-sortable-helper {
@ -98,7 +98,7 @@
border: 1px solid #ccc;
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;
font-size: 1rem
font-size: 1rem;
}
.layout-builder__link--remove:hover {
@ -108,7 +108,7 @@
.layout-builder-block {
padding: 1.5em;
cursor: move;
background-color: #fff
background-color: #fff;
}
.layout-builder-block [tabindex="-1"] {
@ -117,7 +117,7 @@
.layout-builder--content-preview-disabled .layout-builder-block {
margin: 0;
border-bottom: 2px dashed #979797
border-bottom: 2px dashed #979797;
}
/*

46
core/modules/layout_builder/css/off-canvas.css
View File

@ -13,13 +13,13 @@
#drupal-off-canvas-wrapper .layout-selection {
margin: 0;
padding: 0;
list-style: none
list-style: none;
}
#drupal-off-canvas-wrapper .layout-selection li {
position: relative; /* Anchor throbber. */
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 {
@ -27,44 +27,38 @@
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 {
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 0.625rem;
gap: 0.625rem;
padding: 0.625rem;
}
#drupal-off-canvas-wrapper {
/*
/*
* This is the styling of the SVG within the layout selection list.
*/
}
#drupal-off-canvas-wrapper .layout-icon__region {
fill: var(--off-canvas-text-color);
stroke: transparent
stroke: transparent;
}
@media (forced-colors: active) {
#drupal-off-canvas-wrapper .layout-icon__region {
fill: canvastext
fill: canvastext;
}
}
[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 {
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 {
@ -74,7 +68,7 @@
display: block;
padding: 1.5rem; /* Room for icon */
border-bottom: 1px solid #333;
font-size: 1rem
font-size: 1rem;
/* Plus icon. */
}
@ -89,7 +83,7 @@
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-repeat: no-repeat;
background-size: contain
background-size: contain;
}
@media (forced-colors: active) {
@ -101,14 +95,14 @@
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain
mask-size: contain;
}
}
#drupal-off-canvas-wrapper .inline-block-create-button,
#drupal-off-canvas-wrapper .inline-block-list__item {
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 {
@ -122,13 +116,13 @@
#drupal-off-canvas-wrapper .inline-block-list {
margin: 0 0 calc(2 * var(--off-canvas-vertical-spacing-unit));
padding: 0;
list-style: none
list-style: none;
}
#drupal-off-canvas-wrapper .inline-block-list li {
position: relative; /* Anchor throbber. */
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 {
@ -136,10 +130,7 @@
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 {
display: block;
@ -148,10 +139,7 @@
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 {
padding-left: 1.0625rem;

66
core/modules/workspaces/css/workspaces.off-canvas.css
View File

@ -11,7 +11,7 @@
*/
#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) {
@ -20,20 +20,17 @@
display: flex;
align-items: flex-end;
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
* position the close button that is nested within it.
*/
}
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar {
all: revert
all: revert;
}
#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 {
right: 1em
right: 1em;
}
[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 {
@ -59,7 +56,7 @@
}
#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) {
@ -71,7 +68,7 @@
flex-grow: 2;
align-self: stretch;
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;
font-size: 1.125rem;
font-weight: bold;
line-height: 1.2
line-height: 1.2;
}
[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 {
right: 0
right: 0;
}
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
@ -104,36 +101,30 @@
height: 1.25rem;
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-size: contain
background-size: contain;
}
@media (min-width: 47.9375rem) {
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
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 {
display: block;
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 {
display: inline-block;
padding: var(--off-canvas-padding);
font-size: 0.875rem
font-size: 0.875rem;
}
@media (min-width: 47.9375rem) {
@ -142,7 +133,7 @@
grid-row: 1;
grid-column: 2;
justify-self: end;
padding: 0
padding: 0;
}
}
@ -158,13 +149,13 @@
margin: 0;
padding: 0;
list-style: none;
grid-gap: 2px
gap: 2px;
}
@media (min-width: 47.9375rem) {
#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 {
display: grid;
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 {
padding-left: 3.125rem
padding-left: 3.125rem;
}
[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 {
@ -203,7 +191,7 @@
outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
background-color: var(--off-canvas-background-color-light);
font-size: 0.875rem;
font-weight: bold
font-weight: bold;
}
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:hover,
@ -212,11 +200,11 @@
}
[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 {
right: var(--off-canvas-padding)
right: var(--off-canvas-padding);
}
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
@ -241,6 +229,6 @@
@media (max-width: 47.9375rem) {
#drupal-off-canvas-wrapper.workspaces-dialog {
height: 100% !important
height: 100% !important;
}
}

6
core/modules/workspaces/css/workspaces.toolbar.css
View File

@ -51,12 +51,12 @@
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
width: 100%;
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;
text-align: initial
text-align: initial;
}
.toolbar .toolbar-icon-workspace:before {

12
core/package.json
View File

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

6
core/themes/claro/css/base/print.css
View File

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

2
core/themes/claro/css/components/accordion.css
View File

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

18
core/themes/claro/css/components/action-link.css
View File

@ -246,6 +246,8 @@
@media (forced-colors: active) {
.action-link--icon-plus::before {
background: linktext !important;
}
.action-link--icon-plus::before {
-webkit-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");
@ -291,6 +293,8 @@
@media (forced-colors: active) {
.action-link--icon-trash::before {
background: linktext !important;
}
.action-link--icon-trash::before {
-webkit-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");
@ -336,6 +340,8 @@
@media (forced-colors: active) {
.action-link--icon-ex::before {
background: linktext !important;
}
.action-link--icon-ex::before {
-webkit-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");
@ -381,6 +387,8 @@
@media (forced-colors: active) {
.action-link--icon-checkmark::before {
background: linktext !important;
}
.action-link--icon-checkmark::before {
-webkit-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");
@ -426,6 +434,8 @@
@media (forced-colors: active) {
.action-link--icon-cog::before {
background: linktext !important;
}
.action-link--icon-cog::before {
-webkit-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");
@ -471,6 +481,8 @@
@media (forced-colors: active) {
.action-link--icon-show::before {
background: linktext !important;
}
.action-link--icon-show::before {
-webkit-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");
@ -516,6 +528,8 @@
@media (forced-colors: active) {
.action-link--icon-hide::before {
background: linktext !important;
}
.action-link--icon-hide::before {
-webkit-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");
@ -561,6 +575,8 @@
@media (forced-colors: active) {
.action-link--icon-key::before {
background: linktext !important;
}
.action-link--icon-key::before {
-webkit-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");
@ -606,6 +622,8 @@
@media (forced-colors: active) {
.action-link--icon-questionmark::before {
background: linktext !important;
}
.action-link--icon-questionmark::before {
-webkit-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");

8
core/themes/claro/css/components/breadcrumb.css
View File

@ -34,11 +34,11 @@
.breadcrumb__item + .breadcrumb__item::before {
display: inline-block;
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 {
transform: scaleX(-1)
[dir="rtl"] :is(.breadcrumb__item + .breadcrumb__item::before) {
transform: scaleX(-1);
}
@media (forced-colors: active) {
@ -55,7 +55,7 @@
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center
mask-position: center;
}
}

7
core/themes/claro/css/components/button.css
View File

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

8
core/themes/claro/css/components/details.css
View File

@ -49,7 +49,7 @@
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--details-border-size-radius);
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
@ -61,7 +61,7 @@
td .claro-details {
width: min-content;
min-width: 100%
min-width: 100%;
}
.claro-details--accordion-item,
@ -216,7 +216,7 @@ td .claro-details {
/* 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) {
.claro-details__summary::before {
transition: none;
@ -362,7 +362,7 @@ td .claro-details {
/* 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) {
.claro-details__summary::after {
transition: none;

27
core/themes/claro/css/components/dropbutton.css
View File

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

4
core/themes/claro/css/components/form--select.css
View File

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

3
core/themes/claro/css/components/system-admin--modules.css
View File

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

7
core/themes/claro/css/components/tabledrag.css
View File

@ -298,7 +298,7 @@ body.drag {
/* 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) {
.tabledrag-cell-content .tree {
overflow: visible;
@ -315,13 +315,16 @@ body.drag {
* Indentation.
*/
.indentation {
background: none !important;
}
.indentation {
position: relative;
left: calc(var(--space-xs) * -0.5); /* LTR */
float: left; /* LTR */
width: calc(25rem / 16); /* 25px */
height: calc(25rem / 16); /* 25px */
background: none !important;
line-height: 0;
}

8
core/themes/claro/css/components/tables.css
View File

@ -98,7 +98,7 @@ _:-ms-fullscreen, /* Only IE 11 */
content: "";
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-size: contain
background-size: contain;
}
@media (forced-colors: active) {
@ -107,7 +107,7 @@ _:-ms-fullscreen, /* Only IE 11 */
opacity: 1;
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%;
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 {
right: auto;
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) {
@ -132,7 +132,7 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .sortable-heading > a::after {
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%;
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%;
}
}

16
core/themes/claro/css/components/tablesort-indicator.css
View File

@ -19,7 +19,7 @@
margin-top: -0.5rem; /* -8px */
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-size: auto
background-size: auto;
}
@media (forced-colors: active) {
@ -31,7 +31,7 @@
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-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 {
right: auto;
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) {
@ -60,7 +60,7 @@ _:-ms-fullscreen, /* Only IE 11 */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 50%;
mask-position: 0 50%
mask-position: 0 50%;
}
}
@ -76,7 +76,7 @@ _:-ms-fullscreen, /* Only IE 11 */
.tablesort--asc,
[dir="rtl"] .tablesort--asc {
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) {
@ -85,14 +85,14 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .tablesort--asc {
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");
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,
[dir="rtl"] .tablesort--desc {
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) {
@ -101,6 +101,6 @@ _:-ms-fullscreen, /* Only IE 11 */
[dir="rtl"] .tablesort--desc {
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");
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");
}
}

2
core/themes/claro/css/theme/install-page.css
View File

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

23
core/themes/claro/css/theme/media-library.css
View File

@ -801,8 +801,11 @@
}
.media-library-item__edit {
/* !important to override button class border. */
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-repeat: no-repeat;
background-position: center;
@ -820,8 +823,17 @@
.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. */
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-repeat: no-repeat;
background-position: center;
@ -831,8 +843,13 @@
.media-library-item__remove:active,
.media-library-item__remove.button:active,
.media-library-item__remove.button:disabled:active {
/* !important to override button class border. */
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");
}

20
core/themes/olivero/css/base/base.css
View File

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

20
core/themes/olivero/css/components/action-links.css
View File

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

2
core/themes/olivero/css/components/ajax-progress.module.css
View File

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

4
core/themes/olivero/css/components/autocomplete-loading.module.css
View File

@ -43,7 +43,7 @@ html.js .form-autocomplete {
background-color: var(--color--white);
background-image: var(--autocomplete-search-icon-url);
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 {
@ -58,7 +58,7 @@ html.js[dir="rtl"] .form-autocomplete {
background-color: var(--color--white);
background-image: var(--autocomplete-search-icon-url);
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 {

18
core/themes/olivero/css/components/book.css
View File

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

82
core/themes/olivero/css/components/breadcrumb.css
View File

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

37
core/themes/olivero/css/components/button.css
View File

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

2
core/themes/olivero/css/components/cke-dialog.css
View File

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

37
core/themes/olivero/css/components/comments.css
View File

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

52
core/themes/olivero/css/components/content-moderation.css
View File

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

4
core/themes/olivero/css/components/details.css
View File

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

29
core/themes/olivero/css/components/dropbutton.css
View File

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

17
core/themes/olivero/css/components/embedded-media.css
View File

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

8
core/themes/olivero/css/components/feed.css
View File

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

4
core/themes/olivero/css/components/field.css
View File

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

6
core/themes/olivero/css/components/fieldset.css
View File

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

18
core/themes/olivero/css/components/footer.css
View File

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

30
core/themes/olivero/css/components/form-boolean.css
View File

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

29
core/themes/olivero/css/components/form-select.css
View File

@ -58,12 +58,12 @@ select {
font-family: inherit;
font-size: inherit;
-webkit-appearance: none;
appearance: none
appearance: none;
}
select:focus {
border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50)
outline: solid 2px var(--color--primary-50);
}
@supports (outline-style: double) {
@ -72,14 +72,11 @@ select:focus {
border-width: 1px;
outline-width: 6px;
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 {
display: none;
@ -91,7 +88,7 @@ select[disabled] {
}
select.error {
border: solid 2px var(--color--red)
border: solid 2px var(--color--red);
}
select.error:focus {
@ -102,7 +99,7 @@ select[multiple] {
height: auto;
padding: var(--sp0-5);
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 {
@ -113,10 +110,7 @@ select.form-element--small {
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) {
@ -131,7 +125,7 @@ select {
select {
background-image: none;
-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. */
}
@ -139,15 +133,12 @@ select {
select {
-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) {

38
core/themes/olivero/css/components/form-text.css
View File

@ -49,47 +49,47 @@ textarea {
font-family: inherit;
font-size: inherit;
-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);
outline: solid 2px var(--color--primary-50)
outline: solid 2px var(--color--primary-50);
}
@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;
outline-width: 6px;
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;
}
[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);
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 {
border: solid 2px var(--color--red)
.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);
}
[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-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);
}
[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);
}
@ -110,28 +110,26 @@ textarea {
[type="url"],
[type="week"],
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 {
padding-left: 0
padding-left: 0;
}
[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-right: 0
padding-right: 0;
}
[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-right: 0
padding-right: 0;
}
[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-left: 0
padding-left: 0;
}
[type="date"]::-webkit-datetime-edit-fields-wrapper {

8
core/themes/olivero/css/components/form.css
View File

@ -113,7 +113,7 @@ tr .form-item,
/* Use a background image to prevent screen readers from announcing the text. */
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 0.5rem 0.5rem
background-size: 0.5rem 0.5rem;
}
@media screen and (-ms-high-contrast: active) {
@ -121,7 +121,7 @@ tr .form-item,
.form-item__label.form-required::after,
.fieldset__label.form-required::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-size: var(--sp1) var(--sp1);
font-size: var(--font-size-s);
line-height: var(--line-height-s)
line-height: var(--line-height-s);
}
@media screen and (-ms-high-contrast: active) {
.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");
}
}

12
core/themes/olivero/css/components/header-buttons-mobile.css
View File

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

65
core/themes/olivero/css/components/header-navigation.css
View File

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

85
core/themes/olivero/css/components/header-search-narrow.css
View File

@ -27,7 +27,7 @@
margin-left: calc(-1 * var(--sp));
margin-right: calc(-1 * var(--sp));
margin-bottom: var(--sp2);
background: var(--color--black)
background: var(--color--black);
}
.block-search-narrow .search-block-form {
@ -44,19 +44,19 @@
}
[dir="ltr"] .block-search-narrow input[type="search"] {
padding-left: var(--sp)
padding-left: var(--sp);
}
[dir="rtl"] .block-search-narrow input[type="search"] {
padding-right: var(--sp)
padding-right: var(--sp);
}
[dir="ltr"] .block-search-narrow input[type="search"] {
padding-right: var(--sp)
padding-right: var(--sp);
}
[dir="rtl"] .block-search-narrow input[type="search"] {
padding-left: var(--sp)
padding-left: var(--sp);
}
.block-search-narrow input[type="search"] {
@ -75,7 +75,7 @@
box-shadow: none;
font-family: var(--font-serif);
font-size: 1rem;
-webkit-appearance: none
-webkit-appearance: none;
}
.block-search-narrow input[type="search"]::-ms-clear {
@ -86,7 +86,7 @@
.block-search-narrow input[type="search"]:focus {
outline: solid 4px transparent;
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
@ -97,63 +97,63 @@
@media screen and (-ms-high-contrast: active) {
.block-search-narrow input[type="search"]:focus {
border-bottom-width: 5px
border-bottom-width: 5px;
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .block-search-narrow input[type="search"] {
padding-left: var(--sp2)
padding-left: var(--sp2);
}
[dir="rtl"] .block-search-narrow input[type="search"] {
padding-right: var(--sp2)
padding-right: var(--sp2);
}
[dir="ltr"] .block-search-narrow input[type="search"] {
padding-right: var(--sp2)
padding-right: var(--sp2);
}
[dir="rtl"] .block-search-narrow input[type="search"] {
padding-left: var(--sp2)
padding-left: var(--sp2);
}
.block-search-narrow input[type="search"] {
height: calc(4 * var(--sp))
height: calc(4 * var(--sp));
}
}
[dir="ltr"] .block-search-narrow .search-form__submit {
margin-left: 0
margin-left: 0;
}
[dir="rtl"] .block-search-narrow .search-form__submit {
margin-right: 0
margin-right: 0;
}
[dir="ltr"] .block-search-narrow .search-form__submit {
margin-right: 0
margin-right: 0;
}
[dir="rtl"] .block-search-narrow .search-form__submit {
margin-left: 0
margin-left: 0;
}
[dir="ltr"] .block-search-narrow .search-form__submit {
padding-left: 0
padding-left: 0;
}
[dir="rtl"] .block-search-narrow .search-form__submit {
padding-right: 0
padding-right: 0;
}
[dir="ltr"] .block-search-narrow .search-form__submit {
padding-right: 0
padding-right: 0;
}
[dir="rtl"] .block-search-narrow .search-form__submit {
padding-left: 0
padding-left: 0;
}
.block-search-narrow .search-form__submit {
@ -168,7 +168,7 @@
padding-bottom: 0;
cursor: pointer;
border-color: transparent;
background-color: transparent
background-color: transparent;
/*
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 {
left: 0
left: 0;
}
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search {
right: 0
right: 0;
}
.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-repeat: no-repeat;
background-position: center;
background-size: auto
background-size: auto;
}
[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 {
right: 0
right: 0;
}
.block-search-narrow .search-form__submit .icon--search:after {
@ -214,7 +214,7 @@
transition: transform 0.2s;
transform: scaleX(0);
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) {
@ -226,14 +226,14 @@
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center
mask-position: center;
}
}
.block-search-narrow .search-form__submit:focus {
outline: solid 4px transparent;
outline-offset: -4px;
box-shadow: none
box-shadow: none;
}
.block-search-narrow .search-form__submit:focus span:after {
@ -243,7 +243,7 @@
@media screen and (-ms-high-contrast: active) {
.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 {
@ -254,15 +254,12 @@
@media (min-width: 43.75rem) {
.block-search-narrow .search-form__submit {
width: 5rem
width: 5rem;
}
}
@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. */
}
.block-search-narrow .search-form__submit .visually-hidden {
position: static;
overflow: visible;
@ -272,43 +269,37 @@
text-align: center;
}
.block-search-narrow .search-form__submit {
/* Edge's high contrast does show the background image, so we hide it. */
}
.block-search-narrow .search-form__submit .icon--search {
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) {
[dir="ltr"] .block-search-narrow {
margin-left: 0
margin-left: 0;
}
[dir="rtl"] .block-search-narrow {
margin-right: 0
margin-right: 0;
}
[dir="ltr"] .block-search-narrow {
margin-right: 0
margin-right: 0;
}
[dir="rtl"] .block-search-narrow {
margin-left: 0
margin-left: 0;
}
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .block-search-narrow {
display: none
display: none;
}
}

34
core/themes/olivero/css/components/header-search-wide.css
View File

@ -93,7 +93,7 @@
padding-top: 0;
padding-bottom: 0;
transition: all 0.2s;
background: var(--color--black)
background: var(--color--black);
}
.block-search-wide__wrapper.is-active {
@ -133,7 +133,7 @@
box-shadow: none;
font-family: var(--font-serif);
font-size: 2rem;
-webkit-appearance: none
-webkit-appearance: none;
}
.block-search-wide__wrapper input[type="search"]::-ms-clear {
@ -143,7 +143,7 @@
.block-search-wide__wrapper input[type="search"]:focus {
outline: solid 4px transparent;
outline-offset: -4px
outline-offset: -4px;
/*
We normally indicate focus by animating background-image width. This isn't
@ -154,7 +154,7 @@
@media screen and (-ms-high-contrast: active) {
.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;
cursor: pointer;
border-color: transparent;
background-color: transparent
background-color: transparent;
/*
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-repeat: no-repeat;
background-position: center;
background-size: contain
background-size: contain;
}
[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
@ -264,7 +264,7 @@
.block-search-wide__wrapper .search-form__submit:focus {
outline: solid 4px transparent;
outline-offset: -4px;
box-shadow: none
box-shadow: none;
}
.block-search-wide__wrapper .search-form__submit:focus span:after {
@ -274,7 +274,7 @@
@media screen and (-ms-high-contrast: active) {
.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 {
@ -283,10 +283,7 @@
}
@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. */
}
.block-search-wide__wrapper .search-form__submit .visually-hidden {
position: static;
overflow: visible;
@ -296,10 +293,7 @@
text-align: center;
}
.block-search-wide__wrapper .search-form__submit {
/* Edge's high contrast does show the background image, so we hide it. */
}
.block-search-wide__wrapper .search-form__submit .icon--search {
display: none;
}
@ -342,12 +336,12 @@
color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
border: 0;
background: transparent;
-webkit-appearance: none
-webkit-appearance: none;
}
.block-search-wide__button:focus {
position: relative;
outline: 0
outline: 0;
}
.block-search-wide__button:focus:after {
@ -363,7 +357,7 @@
}
.block-search-wide__button[aria-expanded="true"] {
background: var(--color--black)
background: var(--color--black);
}
.block-search-wide__button[aria-expanded="true"]:focus:after {
@ -412,7 +406,7 @@
@media (forced-colors: active) {
.block-search-wide__button {
background: ButtonFace
background: ButtonFace;
}
.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-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0% 0.625rem
background-size: 0% 0.625rem;
}
[dir] .block-search-wide__wrapper input[type="search"]:focus {
@ -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__button {
display: block
display: block;
}
}

58
core/themes/olivero/css/components/header-site-branding.css
View File

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

24
core/themes/olivero/css/components/header-sticky-toggle.css
View File

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

14
core/themes/olivero/css/components/hero.css
View File

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

24
core/themes/olivero/css/components/links.css
View File

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

4
core/themes/olivero/css/components/maintenance-page.css
View File

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

15
core/themes/olivero/css/components/messages.css
View File

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

25
core/themes/olivero/css/components/navigation/menu-sidebar.css
View File

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

44
core/themes/olivero/css/components/navigation/nav-button-mobile.css
View File

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

31
core/themes/olivero/css/components/navigation/nav-primary-button.css
View File

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

26
core/themes/olivero/css/components/navigation/nav-primary-no-js.css
View File

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

33
core/themes/olivero/css/components/navigation/nav-primary-wide.css
View File

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

14
core/themes/olivero/css/components/navigation/nav-primary.css
View File

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

8
core/themes/olivero/css/components/navigation/nav-secondary.css
View File

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

24
core/themes/olivero/css/components/navigation/wide-nav-expand.css
View File

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

58
core/themes/olivero/css/components/node-teaser.css
View File

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

14
core/themes/olivero/css/components/node.css
View File

@ -29,7 +29,7 @@
margin-bottom: var(--sp1);
color: var(--color-text-neutral-soft);
font-size: 0.875rem;
line-height: var(--sp)
line-height: var(--sp);
}
.node__meta a {
@ -39,16 +39,16 @@
@media (min-width: 31.25rem) {
.node__meta {
margin-bottom: var(--sp2)
margin-bottom: var(--sp2);
}
}
[dir="ltr"] .node__author-image img {
margin-right: var(--sp0-5)
margin-right: var(--sp0-5);
}
[dir="rtl"] .node__author-image img {
margin-left: var(--sp0-5)
margin-left: var(--sp0-5);
}
.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-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0 0.1875rem
background-size: 0 0.1875rem;
}
.node__title a:hover,
@ -80,13 +80,13 @@
}
.node__content {
padding-bottom: var(--sp1-5)
padding-bottom: var(--sp1-5);
}
@media (min-width: 62.5rem) {
.node__content {
padding-bottom: var(--sp3)
padding-bottom: var(--sp3);
}
}

4
core/themes/olivero/css/components/pager.css
View File

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

10
core/themes/olivero/css/components/powered-by-block.css
View File

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

36
core/themes/olivero/css/components/search-results.css
View File

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

16
core/themes/olivero/css/components/site-header.css
View File

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

15
core/themes/olivero/css/components/skip-link.css
View File

@ -26,19 +26,19 @@
/* Width of the entire grid maxes out. */
[dir="ltr"] .skip-link {
padding-left: var(--sp)
padding-left: var(--sp);
}
[dir="rtl"] .skip-link {
padding-right: var(--sp)
padding-right: var(--sp);
}
[dir="ltr"] .skip-link {
padding-right: var(--sp)
padding-right: var(--sp);
}
[dir="rtl"] .skip-link {
padding-left: var(--sp)
padding-left: var(--sp);
}
.skip-link {
@ -50,7 +50,7 @@
text-decoration: none;
color: var(--color--white);
outline: 0;
background-color: var(--color--gray-5)
background-color: var(--color--gray-5);
}
.skip-link:hover {
@ -63,7 +63,10 @@
}
.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;
width: 100%;
height: 2.5rem;

108
core/themes/olivero/css/components/table.css
View File

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

107
core/themes/olivero/css/components/tabs.css
View File

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

4
core/themes/olivero/css/components/tags.css
View File

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

56
core/themes/olivero/css/components/text-content.css
View File

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

16
core/themes/olivero/css/components/vertical-tabs.css
View File

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

34
core/themes/olivero/css/components/wide-image.css
View File

@ -24,55 +24,55 @@
/* Width of the entire grid maxes out. */
[dir="ltr"] .wide-image {
margin-left: 0
margin-left: 0;
}
[dir="rtl"] .wide-image {
margin-right: 0
margin-right: 0;
}
[dir="ltr"] .wide-image {
margin-right: 0
margin-right: 0;
}
[dir="rtl"] .wide-image {
margin-left: 0
margin-left: 0;
}
.wide-image {
margin-top: var(--sp0-5);
margin-bottom: var(--sp2)
margin-bottom: var(--sp2);
}
@media (min-width: 43.75rem) {
[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 {
margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
.wide-image {
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
margin-top: var(--sp2);
margin-bottom: var(--sp4)
margin-bottom: var(--sp4);
}
}
@media (min-width: 62.5rem) {
[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 {
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
.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) {
.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) {
.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. */
[dir="ltr"] .layout-builder .wide-image {
margin-left: 0
margin-left: 0;
}
[dir="rtl"] .layout-builder .wide-image {
margin-right: 0
margin-right: 0;
}
[dir="ltr"] .layout-builder .wide-image {
margin-right: 0
margin-right: 0;
}
[dir="rtl"] .layout-builder .wide-image {
margin-left: 0
margin-left: 0;
}
.layout-builder .wide-image {

10
core/themes/olivero/css/layout/grid.css
View File

@ -27,7 +27,7 @@
display: grid;
grid-template-rows: 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. */
}
@ -46,7 +46,7 @@
.layout--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--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--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--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));
}
}

32
core/themes/olivero/css/layout/layout-builder-fourcol-section.css
View File

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

14
core/themes/olivero/css/layout/layout-builder-threecol-section.css
View File

@ -25,12 +25,12 @@
.layout--threecol-section {
display: flex;
flex-wrap: wrap
flex-wrap: wrap;
}
.layout--threecol-section > .layout__region {
flex: 1 0 100%;
margin-bottom: var(--grid-gap)
margin-bottom: var(--grid-gap);
}
@media (min-width: 62.5rem) {
@ -38,16 +38,16 @@
.layout--threecol-section > .layout__region {
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 0
margin-bottom: 0;
}
}
@media (min-width: 62.5rem) {
[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 {
margin-left: calc(var(--grid-gap) * 0.5)
margin-left: calc(var(--grid-gap) * 0.5);
}
.layout--threecol-section > .layout__region--second {
@ -56,11 +56,11 @@
}
[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 {
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--third {

46
core/themes/olivero/css/layout/layout-builder-twocol-section.css
View File

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

14
core/themes/olivero/css/layout/layout-content-medium.css
View File

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

86
core/themes/olivero/css/layout/layout-content-narrow.css
View File

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

6
core/themes/olivero/css/layout/layout-discovery-section-layout.css
View File

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

10
core/themes/olivero/css/layout/layout-footer.css
View File

@ -35,26 +35,26 @@
.site-footer__inner {
padding-top: var(--sp2);
padding-bottom: var(--sp2)
padding-bottom: var(--sp2);
}
@media (min-width: 75rem) {
.site-footer__inner {
padding-top: var(--sp4);
padding-bottom: calc(13 * var(--sp))
padding-bottom: calc(13 * var(--sp));
}
}
.region--footer_top__inner > *, .region--footer_bottom__inner > * {
margin-bottom: var(--sp2)
margin-bottom: var(--sp2);
}
@media (min-width: 43.75rem) {
.region--footer_top__inner > *, .region--footer_bottom__inner > * {
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) {
@ -71,6 +71,6 @@
.region--footer_top__inner,
.region--footer_bottom__inner {
display: flex;
flex-wrap: wrap
flex-wrap: wrap;
}
}

12
core/themes/olivero/css/layout/layout-sidebar.css
View File

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

2
core/themes/olivero/css/layout/layout-views-grid.css
View File

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

16
core/themes/olivero/css/layout/layout.css
View File

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

22
core/themes/olivero/css/layout/region-content-below.css
View File

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

6
core/themes/olivero/css/layout/region-content.css
View File

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

4
core/themes/olivero/css/layout/region-secondary-menu.css
View File

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

6
core/themes/olivero/css/layout/region.css
View File

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

54
core/themes/olivero/css/layout/social-bar.css
View File

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

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