diff --git a/core/misc/dialog/off-canvas/css/dropbutton.css b/core/misc/dialog/off-canvas/css/dropbutton.css
index 8dc8985ded207767c2c153907986325d7a148931..a8b6d4a32ef6b9713a0f07e99031a24cf2db7324 100644
--- a/core/misc/dialog/off-canvas/css/dropbutton.css
+++ b/core/misc/dialog/off-canvas/css/dropbutton.css
@@ -23,8 +23,7 @@
--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-block: var(--off-canvas-vertical-spacing-unit);
/*
* Styles for when the dropbutton is expanded.
@@ -46,12 +45,9 @@
/*
* Styles for single link variant of dropbutton.
*/
-[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
- padding-right: 0;
-}
-[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
- padding-left: 0;
-}
+#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
+ padding-inline-end: 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);
@@ -62,35 +58,19 @@
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action a {
justify-content: center;
}
-[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-widget {
- padding-right: var(--off-canvas-dropbutton-height);
-}
-[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-widget {
- padding-left: var(--off-canvas-dropbutton-height);
-}
#drupal-off-canvas-wrapper .dropbutton-widget {
position: relative;
width: max-content;
max-width: 100%;
height: var(--off-canvas-dropbutton-height);
+ padding-inline-end: var(--off-canvas-dropbutton-height);
border-radius: var(--off-canvas-dropbutton-border-radius);
}
-[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
- margin-left: 0;
-}
-[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
- margin-right: 0;
-}
-[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton {
- padding-left: 0;
-}
-[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton {
- padding-right: 0;
-}
#drupal-off-canvas-wrapper .dropbutton {
height: var(--off-canvas-dropbutton-height);
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ padding-inline-start: 0;
list-style: none;
font-size: var(--off-canvas-dropbutton-font-size);
}
@@ -99,12 +79,6 @@
padding: 0;
border: 0;
}
-[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
- right: 0;
-}
-[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-toggle button {
- left: 0;
-}
#drupal-off-canvas-wrapper .dropbutton-toggle button {
position: absolute;
top: 0;
@@ -118,6 +92,7 @@
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);
+ inset-inline-end: 0;
}
#drupal-off-canvas-wrapper .dropbutton-toggle button:focus {
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
@@ -136,13 +111,8 @@
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
}
/* This is the first <li> element in the list of actions. */
-[dir="ltr"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
- margin-right: 2px;
-}
-[dir="rtl"] #drupal-off-canvas-wrapper .dropbutton-action:first-child {
- margin-left: 2px;
-}
#drupal-off-canvas-wrapper .dropbutton-action:first-child {
+ margin-inline-end: 2px;
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);
diff --git a/core/misc/dialog/off-canvas/css/form.css b/core/misc/dialog/off-canvas/css/form.css
index 978aed3edff08a9e6a1e6466809122588cda9981..c237f69ae5fe378ef94be02a61472a074841936b 100644
--- a/core/misc/dialog/off-canvas/css/form.css
+++ b/core/misc/dialog/off-canvas/css/form.css
@@ -25,8 +25,7 @@
}
#drupal-off-canvas-wrapper form {
- padding-top: var(--off-canvas-padding);
- padding-bottom: var(--off-canvas-padding);
+ padding-block: var(--off-canvas-padding);
}
#drupal-off-canvas-wrapper form > *:first-child {
@@ -112,17 +111,10 @@
appearance: none; /* Necessary for Safari. */
}
-[dir="ltr"] #drupal-off-canvas-wrapper select {
- padding-right: 1.25rem;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper select {
- padding-left: 1.25rem;
-}
-
#drupal-off-canvas-wrapper select {
-webkit-appearance: none;
appearance: none;
+ padding-inline-end: 1.25rem;
border: var(--drupal-off-canvas-input-border);
border-radius: var(--drupal-off-canvas-input-border-radius);
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");
@@ -137,17 +129,10 @@
@media (forced-colors: active) {
-[dir="ltr"] #drupal-off-canvas-wrapper select {
- padding-right: 0;
- }
-
-[dir="rtl"] #drupal-off-canvas-wrapper select {
- padding-left: 0;
- }
-
#drupal-off-canvas-wrapper select {
-webkit-appearance: revert;
appearance: revert;
+ padding-inline-end: 0;
background: revert;
}
}
@@ -156,15 +141,8 @@
* Autocomplete.
*/
-[dir="ltr"] #drupal-off-canvas-wrapper .form-autocomplete {
- padding-right: 2.5rem;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .form-autocomplete {
- padding-left: 2.5rem;
-}
-
-#drupal-off-canvas-wrapper .form-autocomplete { /* Room for icon. */
+#drupal-off-canvas-wrapper .form-autocomplete {
+ padding-inline-end: 2.5rem; /* 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 */
diff --git a/core/misc/dialog/off-canvas/css/messages.css b/core/misc/dialog/off-canvas/css/messages.css
index 4ca824827606d4c206e2c05715cf4a83ffe1ec3d..f8424752b2880c0c19c76c5bdb4f902fa2955662 100644
--- a/core/misc/dialog/off-canvas/css/messages.css
+++ b/core/misc/dialog/off-canvas/css/messages.css
@@ -23,32 +23,17 @@
--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));
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .messages {
- padding-right: calc(2 * var(--off-canvas-messages-icon-size));
-}
-
#drupal-off-canvas-wrapper .messages {
position: relative; /* Anchor :before pseudo-element. */
margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
- padding: calc(2 * var(--off-canvas-vertical-spacing-unit)); /* Room for icon. */
+ padding: calc(2 * var(--off-canvas-vertical-spacing-unit));
+ padding-inline-start: calc(2 * var(--off-canvas-messages-icon-size)); /* Room for icon. */
border: solid 1px transparent;
background-color: var(--off-canvas-messages-background-color);
/* Icon. */
}
-[dir="ltr"] #drupal-off-canvas-wrapper .messages:before {
- left: 0.625rem;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .messages:before {
- right: 0.625rem;
-}
-
#drupal-off-canvas-wrapper .messages:before {
position: absolute;
top: 50%;
@@ -59,6 +44,7 @@
transform: translateY(-50%);
background-repeat: no-repeat;
background-size: contain;
+ inset-inline-start: 0.625rem;
}
@media (forced-colors: active) {
@@ -86,16 +72,9 @@
display: none;
}
-[dir="ltr"] #drupal-off-canvas-wrapper .messages__list {
- padding-left: 1.25rem;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .messages__list {
- padding-right: 1.25rem;
-}
-
#drupal-off-canvas-wrapper .messages__list {
margin: 0;
+ padding-inline-start: 1.25rem;
}
#drupal-off-canvas-wrapper .messages abbr {
diff --git a/core/misc/dialog/off-canvas/css/table.css b/core/misc/dialog/off-canvas/css/table.css
index eb20a081bc6ad0605b0beb89d587c81fb713e0f3..156b7fb64dec4c9b6e77aa48fc67dfa47904b56e 100644
--- a/core/misc/dialog/off-canvas/css/table.css
+++ b/core/misc/dialog/off-canvas/css/table.css
@@ -26,29 +26,16 @@
border-bottom: 1px solid var(--off-canvas-border-color);
}
-[dir="ltr"] #drupal-off-canvas-wrapper td,[dir="ltr"]
- #drupal-off-canvas-wrapper th {
- text-align: left;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper td,[dir="rtl"]
- #drupal-off-canvas-wrapper th {
- text-align: right;
-}
-
#drupal-off-canvas-wrapper td,
#drupal-off-canvas-wrapper th {
padding: var(--off-canvas-table-cell-padding);
+ text-align: start;
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);
-}
-
-[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);
-}
+#drupal-off-canvas-wrapper td:first-child, #drupal-off-canvas-wrapper th:first-child {
+ padding-inline-start: 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 {
border-bottom: solid 1px var(--off-canvas-border-color);
diff --git a/core/misc/dialog/off-canvas/css/tabledrag.css b/core/misc/dialog/off-canvas/css/tabledrag.css
index f1689205241d5889fc941b95ceb8ca77d62e6ad0..09038d3b40ad534cf0888367e544d52a43a01007 100644
--- a/core/misc/dialog/off-canvas/css/tabledrag.css
+++ b/core/misc/dialog/off-canvas/css/tabledrag.css
@@ -44,17 +44,8 @@
gap: var(--off-canvas-table-cell-padding);
}
-[dir="ltr"] #drupal-off-canvas-wrapper td abbr {
- margin-left: 0;
- margin-right: 0.3125rem;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper td abbr {
- margin-right: 0;
- margin-left: 0.3125rem;
-}
-
#drupal-off-canvas-wrapper td abbr {
+ margin-inline: 0 0.3125rem;
text-decoration: none;
}
@@ -100,16 +91,9 @@
font-size: 0.875rem;
}
-[dir="ltr"] #drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
- text-align: right;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
- text-align: left;
-}
-
#drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
padding-top: 0.625rem;
+ text-align: end;
}
#drupal-off-canvas-wrapper .indentation {
diff --git a/core/misc/dialog/off-canvas/css/throbber.css b/core/misc/dialog/off-canvas/css/throbber.css
index 1f0c9012c4ff59e20435028fc013cff80d39b328..7bb67d3d8f335013f6cb268c3da0c9d6fa238a59 100644
--- a/core/misc/dialog/off-canvas/css/throbber.css
+++ b/core/misc/dialog/off-canvas/css/throbber.css
@@ -34,29 +34,15 @@
}
}
-[dir="ltr"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="ltr"]
- #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="ltr"]
- #drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="ltr"]
- #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
- right: 0;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .layout-selection .ajax-progress,[dir="rtl"]
- #drupal-off-canvas-wrapper .inline-block-list .ajax-progress,[dir="rtl"]
- #drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,[dir="rtl"]
- #drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
- left: 0;
-}
-
#drupal-off-canvas-wrapper .layout-selection .ajax-progress,
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress,
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
position: absolute;
- top: 0;
- bottom: 0;
- margin-top: auto;
- margin-bottom: auto;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-end: 0;
+ margin-block: auto;
}
@keyframes off-canvas-throbber-spin {
diff --git a/core/misc/dialog/off-canvas/css/titlebar.css b/core/misc/dialog/off-canvas/css/titlebar.css
index 9b0d1701a40676816c0e1fd9ae1107d0d5403846..f5f4308ca748053855e549895c5ad8b477ccae39 100644
--- a/core/misc/dialog/off-canvas/css/titlebar.css
+++ b/core/misc/dialog/off-canvas/css/titlebar.css
@@ -32,17 +32,10 @@
/* The pencil icon. */
}
-[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
- left: 1em;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
- right: 1em;
-}
-
#drupal-off-canvas-wrapper .ui-dialog-titlebar:before {
position: absolute;
top: 0;
+ inset-inline-start: 1em;
display: block;
width: 1.25rem;
height: 100%;
@@ -67,19 +60,10 @@
/* Close button. */
-[dir="ltr"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
- left: auto;
- right: 0.625rem;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
- right: auto;
- left: 0.625rem;
-}
-
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
position: absolute;
top: 50%;
+ inset-inline: auto 0.625rem;
overflow: hidden;
width: 1.875rem;
height: 1.875rem;
diff --git a/core/misc/dialog/off-canvas/css/wrapper.css b/core/misc/dialog/off-canvas/css/wrapper.css
index f4bc192cf06adab7ab9e799267609c305f40aa56..92296c72f9f69febefb2e5ed8ac22de65e532304 100644
--- a/core/misc/dialog/off-canvas/css/wrapper.css
+++ b/core/misc/dialog/off-canvas/css/wrapper.css
@@ -10,12 +10,6 @@
*
* @internal
*/
-[dir="ltr"] #drupal-off-canvas-wrapper {
- 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);
-}
#drupal-off-canvas-wrapper {
--off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgba(0, 0, 0, 0.3);
--off-canvas-wrapper-border-color: #2d2d2d;
@@ -25,6 +19,7 @@
overflow: auto;
box-sizing: border-box;
height: 100%;
+ border-inline-start: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
box-shadow: var(--off-canvas-wrapper-box-shadow);
/*
diff --git a/core/modules/layout_builder/css/layout-builder.css b/core/modules/layout_builder/css/layout-builder.css
index 0bed71764e3bdc29e771208da36b8dac1d3886d5..184669f2884fcefb70f9bc9856ae18791569ff2a 100644
--- a/core/modules/layout_builder/css/layout-builder.css
+++ b/core/modules/layout_builder/css/layout-builder.css
@@ -25,15 +25,8 @@
background-color: #f7f7f7;
}
-[dir="ltr"] .layout-builder__link--add {
- padding-left: 1.3em;
-}
-
-[dir="rtl"] .layout-builder__link--add {
- padding-right: 1.3em;
-}
-
.layout-builder__link--add {
+ padding-inline-start: 1.3em;
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 */
@@ -75,16 +68,6 @@
background-color: #eff6fc;
}
-[dir="ltr"] .layout-builder__link--remove {
- margin-left: -0.625rem;
- margin-right: 0.375rem;
-}
-
-[dir="rtl"] .layout-builder__link--remove {
- margin-right: -0.625rem;
- margin-left: 0.375rem;
-}
-
.layout-builder__link--remove {
position: relative;
z-index: 2;
@@ -92,6 +75,7 @@
box-sizing: border-box;
width: 1.625rem;
height: 1.625rem;
+ margin-inline: -0.625rem 0.375rem;
padding: 0;
white-space: nowrap;
text-indent: -624.9375rem;
diff --git a/core/modules/layout_builder/css/off-canvas.css b/core/modules/layout_builder/css/off-canvas.css
index 950a8623e4fa5c3b5b251d2a2e5f034bf530f9e4..5a6419bd6d1b1ceb2bfab2bacd54e3eef5388836 100644
--- a/core/modules/layout_builder/css/off-canvas.css
+++ b/core/modules/layout_builder/css/off-canvas.css
@@ -53,20 +53,13 @@
}
}
-[dir="ltr"] #drupal-off-canvas-wrapper .inline-block-create-button {
- 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);
-}
-
#drupal-off-canvas-wrapper .inline-block-create-button {
--icon-size: 1rem;
position: relative; /* Anchor pseudo-element. */
display: block;
- padding: 1.5rem; /* Room for icon */
+ padding: 1.5rem;
+ padding-inline-start: calc(2 * var(--off-canvas-padding) + var(--icon-size) / 2); /* Room for icon */
border-bottom: 1px solid #333;
font-size: 1rem;
diff --git a/core/modules/workspaces/css/workspaces.off-canvas.css b/core/modules/workspaces/css/workspaces.off-canvas.css
index 653cb4892ec698f459fe4ece3764f09cafc5d606..af07bd3eb78c798665ba5952d82a3ce74a45d503 100644
--- a/core/modules/workspaces/css/workspaces.off-canvas.css
+++ b/core/modules/workspaces/css/workspaces.off-canvas.css
@@ -41,16 +41,9 @@
display: none;
}
-[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
- right: 1em;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
- left: 1em;
-}
-
#drupal-off-canvas-wrapper.workspaces-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
- top: 1em;
+ inset-block-start: 1em;
+ inset-inline-end: 1em;
z-index: 1;
transform: none;
}
@@ -86,16 +79,9 @@
line-height: 1.2;
}
-[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
- left: 0;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
- right: 0;
-}
-
#drupal-off-canvas-wrapper.workspaces-dialog .active-workspace__label:before {
position: absolute;
+ inset-inline-start: 0;
display: block;
width: 1.25rem;
height: 1.25rem;
@@ -174,19 +160,12 @@
/* This is the link to the workspace. */
-[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
- padding-left: 3.125rem;
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
- padding-right: 3.125rem;
-}
-
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item {
position: relative;
display: block;
min-height: 4.6875rem;
- padding-top: var(--off-canvas-padding);
+ padding-block-start: var(--off-canvas-padding);
+ padding-inline-start: 3.125rem;
color: var(--off-canvas-text-color);
outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
background-color: var(--off-canvas-background-color-light);
@@ -199,16 +178,9 @@
background-color: #666;
}
-[dir="ltr"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
- left: var(--off-canvas-padding);
-}
-
-[dir="rtl"] #drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
- right: var(--off-canvas-padding);
-}
-
#drupal-off-canvas-wrapper.workspaces-dialog .workspaces__item:before {
position: absolute;
+ inset-inline-start: var(--off-canvas-padding);
display: block;
width: 1.25rem;
height: 1.25rem;
diff --git a/core/modules/workspaces/css/workspaces.toolbar.css b/core/modules/workspaces/css/workspaces.toolbar.css
index e95d15876e1cada13e2ae7fb2859d8f4dc58f542..32d50ddc3f385d3ea7c1e02607686d620334a208 100644
--- a/core/modules/workspaces/css/workspaces.toolbar.css
+++ b/core/modules/workspaces/css/workspaces.toolbar.css
@@ -21,36 +21,22 @@
background-color: #81c071;
}
-[dir="ltr"] .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
- float: right;
-}
-
-[dir="rtl"] .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
- float: left;
+.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {
+ float: inline-end;
}
@media (min-width: 16.5rem) {
- [dir="ltr"] .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
- float: right;
- }
- [dir="rtl"] .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
- float: left;
+ .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {
+ float: inline-end;
}
}
/* Link within the toolbar tab. */
-[dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
- text-align: left;
-}
-
-[dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
- text-align: right;
-}
-
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
width: 100%;
margin: 0;
+ text-align: start;
color: inherit;
}
@@ -69,32 +55,16 @@
max-width: 8em;
}
- [dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
- padding-left: 2.75em;
- padding-right: 1.3333em;
- }
-
- [dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
- padding-right: 2.75em;
- padding-left: 1.3333em;
- }
-
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
overflow: hidden;
+ padding-inline: 2.75em 1.3333em;
white-space: nowrap;
text-indent: 0;
text-overflow: ellipsis;
}
- [dir="ltr"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
- left: 0.6667em;
- }
-
- [dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
- right: 0.6667em;
- }
-
.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
+ inset-inline-start: 0.6667em;
width: 1.25rem;
background-size: 100% auto;
}
diff --git a/core/package.json b/core/package.json
index 4b457b2f99a4a792842e787d3cc5c910df4166be..c14f58a08c1f7491bd0a7f7ee316189b5b0a6cdb 100644
--- a/core/package.json
+++ b/core/package.json
@@ -109,5 +109,6 @@
"last 1 ChromeAndroid version",
"last 1 Samsung version",
"Firefox ESR"
- ]
+ ],
+ "dependencies": {}
}
diff --git a/core/themes/olivero/css/base/base.css b/core/themes/olivero/css/base/base.css
index 67c53b7f8bed088d40698a15ea3150702f7362b6..d893e313c86b18417ccb1995cf9f780b011f844e 100644
--- a/core/themes/olivero/css/base/base.css
+++ b/core/themes/olivero/css/base/base.css
@@ -146,8 +146,7 @@ h3,
h4,
h5,
h6 {
- margin-top: var(--sp);
- margin-bottom: var(--sp);
+ margin-block: var(--sp);
color: var(--color-text-neutral-loud);
font-family: var(--font-sans);
font-weight: bold;
@@ -161,38 +160,16 @@ h3,
h4,
h5,
h6 {
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
+ margin-block: var(--sp2);
}
}
-[dir="ltr"] ul {
- margin-left: 1.5em;
-}
-
-[dir="rtl"] ul {
- margin-right: 1.5em;
-}
-
-[dir="ltr"] ul {
- margin-right: 0;
-}
-
-[dir="rtl"] ul {
- margin-left: 0;
-}
-
-[dir="ltr"] ul {
- padding-left: 0;
-}
-
-[dir="rtl"] ul {
- padding-right: 0;
-}
-
ul {
- margin-top: 0.25em;
- margin-bottom: 0.25em;
+ margin-block-start: 0.25em;
+ margin-block-end: 0.25em;
+ margin-inline-start: 1.5em;
+ margin-inline-end: 0;
+ padding-inline-start: 0;
list-style-type: disc;
list-style-image: none;
}
diff --git a/core/themes/olivero/css/components/action-links.css b/core/themes/olivero/css/components/action-links.css
index 57f05a1536578958c1f285f6122d58eb250f0c4c..14165dd8e498c4458457d14d4e9545dd22ed748e 100644
--- a/core/themes/olivero/css/components/action-links.css
+++ b/core/themes/olivero/css/components/action-links.css
@@ -16,35 +16,13 @@
/* Grid related breakpoints */
/* Grid shifts from 6 to 14 columns. */
/* Width of the entire grid maxes out. */
-[dir="ltr"] .action-links {
- margin-left: 0;
-}
-[dir="rtl"] .action-links {
- margin-right: 0;
-}
-[dir="ltr"] .action-links {
- margin-right: 0;
-}
-[dir="rtl"] .action-links {
- margin-left: 0;
-}
-[dir="ltr"] .action-links {
- padding-left: 0;
-}
-[dir="rtl"] .action-links {
- padding-right: 0;
-}
-[dir="ltr"] .action-links {
- padding-right: 0;
-}
-[dir="rtl"] .action-links {
- padding-left: 0;
-}
.action-links {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
.action-links li {
diff --git a/core/themes/olivero/css/components/ajax-progress.module.css b/core/themes/olivero/css/components/ajax-progress.module.css
index a0af93cb06fb10cdf23ab38d6d48c0aa340cf4af..fb566a9e290e0e1fbea0c371394e8261028fdbe6 100644
--- a/core/themes/olivero/css/components/ajax-progress.module.css
+++ b/core/themes/olivero/css/components/ajax-progress.module.css
@@ -31,29 +31,15 @@
* Throbber.
*/
-[dir="ltr"] .ajax-progress-throbber {
- margin-left: var(--sp0-5);
-}
-
-[dir="rtl"] .ajax-progress-throbber {
- margin-right: var(--sp0-5);
-}
-
-[dir="ltr"] .ajax-progress-throbber {
- margin-right: var(--sp0-5);
-}
-
-[dir="rtl"] .ajax-progress-throbber {
- margin-left: var(--sp0-5);
-}
-
.ajax-progress-throbber {
position: relative;
display: inline-flex;
align-content: center;
height: 1.125rem;
- margin-top: -0.1875rem;
- margin-bottom: 0;
+ margin-block-start: -0.1875rem;
+ margin-block-end: 0;
+ margin-inline-start: var(--sp0-5);
+ margin-inline-end: var(--sp0-5);
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
@@ -66,16 +52,9 @@
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
}
-[dir="ltr"] .ajax-progress-throbber .message {
- padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] .ajax-progress-throbber .message {
- padding-right: var(--sp0-5);
-}
-
.ajax-progress-throbber .message {
display: inline-block;
+ padding-inline-start: var(--sp0-5);
font-size: var(--font-size-s);
font-weight: 400;
}
@@ -84,18 +63,11 @@
* Full screen throbber.
*/
-[dir="ltr"] .ajax-progress-fullscreen {
- left: 50%;
-}
-
-[dir="rtl"] .ajax-progress-fullscreen {
- right: 50%;
-}
-
.ajax-progress-fullscreen {
position: fixed;
z-index: 1000;
- top: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
width: 3.5rem;
height: 3.5rem;
margin: -1.75rem;
@@ -105,17 +77,10 @@
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
}
-[dir="ltr"] .ajax-progress-fullscreen:before {
- left: 50%;
-}
-
-[dir="rtl"] .ajax-progress-fullscreen:before {
- right: 50%;
-}
-
.ajax-progress-fullscreen:before {
position: absolute;
- top: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
width: 1.75rem;
height: 1.75rem;
margin: -0.875rem;
@@ -144,12 +109,8 @@
* have a large margin set.
*/
-html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber {
- margin-left: 0;
-}
-
-html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber {
- margin-right: 0;
+html.js .button:not(.js-hide) + .ajax-progress-throbber {
+ margin-inline-start: 0;
}
@keyframes olivero-throbber {
diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.css b/core/themes/olivero/css/components/autocomplete-loading.module.css
index a10bd91675cbda21a80ffac757a7a04bf1695900..75da64ce88272321240ad86492d3bd09e3b3b049 100644
--- a/core/themes/olivero/css/components/autocomplete-loading.module.css
+++ b/core/themes/olivero/css/components/autocomplete-loading.module.css
@@ -31,15 +31,8 @@
--autocomplete-icon-right-offset: var(--sp1);
}
-html[dir="ltr"].js .form-autocomplete {
- padding-right: var(--sp3);
-}
-
-html[dir="rtl"].js .form-autocomplete {
- padding-left: var(--sp3);
-}
-
html.js .form-autocomplete {
+ padding-inline-end: var(--sp3);
background-color: var(--color--white);
background-image: var(--autocomplete-search-icon-url);
background-repeat: no-repeat;
diff --git a/core/themes/olivero/css/components/block.css b/core/themes/olivero/css/components/block.css
index 51f9201362c038278b1afb27cc57b27ea82245e0..de2ab639f00ebb914261912a6f94f1a0a2bfc467 100644
--- a/core/themes/olivero/css/components/block.css
+++ b/core/themes/olivero/css/components/block.css
@@ -24,8 +24,7 @@
/* Width of the entire grid maxes out. */
.block__title {
- margin-top: 0;
- margin-bottom: var(--sp);
+ margin-block: 0 var(--sp);
letter-spacing: 0.02em;
color: var(--color-text-neutral-soft);
font-size: var(--font-size-s);
diff --git a/core/themes/olivero/css/components/book.css b/core/themes/olivero/css/components/book.css
index 72851a7272507db68e840fa0600318ea90d9f742..f14c811a2d74586dc70e338acdcb10b2d541e500 100644
--- a/core/themes/olivero/css/components/book.css
+++ b/core/themes/olivero/css/components/book.css
@@ -23,46 +23,17 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .book-pager {
- margin-left: 0;
-}
-
-[dir="rtl"] .book-pager {
- margin-right: 0;
-}
-
-[dir="ltr"] .book-pager {
- margin-right: 0;
-}
-
-[dir="rtl"] .book-pager {
- margin-left: 0;
-}
-
-[dir="ltr"] .book-pager {
- padding-left: 0;
-}
-
-[dir="rtl"] .book-pager {
- padding-right: 0;
-}
-
-[dir="ltr"] .book-pager {
- padding-right: 0;
-}
-
-[dir="rtl"] .book-pager {
- padding-left: 0;
-}
-
.book-pager {
display: flex;
flex-wrap: wrap;
- margin-top: 0 var(--sp);
- padding-top: 0;
- padding-bottom: var(--sp);
+ margin-block-start: 0 var(--sp);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0 var(--sp);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
- border-bottom: solid 1px var(--color--primary-40);
+ border-block-end: solid 1px var(--color--primary-40);
}
.book-pager__item {
@@ -85,21 +56,10 @@
@media (min-width: 31.25rem) {
-[dir="ltr"] .book-pager__item--next {
- margin-left: auto;
- }
-
-[dir="rtl"] .book-pager__item--next {
- margin-right: auto;
- }
-
-[dir="ltr"] .book-pager__item--next {
- text-align: right;
- }
-
-[dir="rtl"] .book-pager__item--next {
- text-align: left;
- }
+.book-pager__item--next {
+ margin-inline-start: auto;
+ text-align: end;
+}
}
.book-pager__link {
@@ -112,117 +72,43 @@
font-weight: 600;
}
-[dir="ltr"] .book-pager__link--previous:before {
- margin-right: 0.25em;
-}
-
-[dir="rtl"] .book-pager__link--previous:before {
- margin-left: 0.25em;
-}
-
-[dir="ltr"] .book-pager__link--previous:before {
- border-left: solid 0.1875rem currentColor;
-}
-
-[dir="rtl"] .book-pager__link--previous:before {
- border-right: solid 0.1875rem currentColor;
-}
-
.book-pager__link--previous:before {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
+ margin-inline-end: 0.25em;
content: "";
transform: rotate(-45deg);
- border-top: solid 0.1875rem currentColor;
+ border-block-start: solid 0.1875rem currentColor;
+ border-inline-start: solid 0.1875rem currentColor;
}
-[dir="ltr"] .book-pager__link--next:after {
- margin-left: 0.25em;
-}
-
-[dir="rtl"] .book-pager__link--next:after {
- margin-right: 0.25em;
-}
-
-[dir="ltr"] .book-pager__link--next:after {
- border-left: solid 0.1875rem currentColor;
-}
-
-[dir="rtl"] .book-pager__link--next:after {
- border-right: solid 0.1875rem currentColor;
-}
-
.book-pager__link--next:after {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
+ margin-inline-start: 0.25em;
content: "";
transform: rotate(135deg);
- border-top: solid 0.1875rem currentColor;
+ border-block-start: solid 0.1875rem currentColor;
+ border-inline-start: solid 0.1875rem currentColor;
}
-[dir="ltr"] .book-navigation__menu {
- margin-left: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
- margin-right: 0;
-}
-
-[dir="ltr"] .book-navigation__menu {
- margin-right: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
- margin-left: 0;
-}
-
-[dir="ltr"] .book-navigation__menu {
- padding-left: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
- padding-right: 0;
-}
-
-[dir="ltr"] .book-navigation__menu {
- padding-right: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
- padding-left: 0;
-}
-
.book-navigation__menu {
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
-[dir="ltr"] .book-navigation__item {
- padding-left: 0;
-}
-
-[dir="rtl"] .book-navigation__item {
- padding-right: 0;
-}
-
-[dir="ltr"] .book-navigation__item {
- padding-right: 0;
-}
-
-[dir="rtl"] .book-navigation__item {
- padding-left: 0;
-}
-
.book-navigation__item {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
diff --git a/core/themes/olivero/css/components/breadcrumb.css b/core/themes/olivero/css/components/breadcrumb.css
index 4e6fe9b39dcdce89284eea26b146a6a92e21f199..761156c871fa0255695d7c8b127e4f70994881dd 100644
--- a/core/themes/olivero/css/components/breadcrumb.css
+++ b/core/themes/olivero/css/components/breadcrumb.css
@@ -32,17 +32,10 @@
/* Shadow on the right side of breadcrumbs for narrow screens. */
}
-[dir="ltr"] .breadcrumb:after {
- right: calc(var(--sp1) * -1);
-}
-
-[dir="rtl"] .breadcrumb:after {
- left: calc(var(--sp1) * -1);
-}
-
.breadcrumb:after {
position: absolute;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-end: calc(var(--sp1) * -1);
width: var(--sp3);
height: var(--sp2);
content: "";
@@ -67,122 +60,46 @@
background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%);
}
-[dir="ltr"] .breadcrumb__content {
- margin-left: calc(var(--sp0-5) * -1);
-}
-
-[dir="rtl"] .breadcrumb__content {
- margin-right: calc(var(--sp0-5) * -1);
-}
-
-[dir="ltr"] .breadcrumb__content {
- margin-right: calc(var(--sp1) * -1);
-}
-
-[dir="rtl"] .breadcrumb__content {
- margin-left: calc(var(--sp1) * -1);
-}
-
-[dir="ltr"] .breadcrumb__content {
- padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] .breadcrumb__content {
- padding-right: var(--sp0-5);
-}
-
.breadcrumb__content {
overflow: auto;
- margin-top: calc(var(--sp0-5) * -1);
- margin-bottom: calc(var(--sp0-5) * -1);
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ margin-block-start: calc(var(--sp0-5) * -1);
+ margin-block-end: calc(var(--sp0-5) * -1);
+ margin-inline-start: calc(var(--sp0-5) * -1);
+ margin-inline-end: calc(var(--sp1) * -1);
+ padding-block-start: var(--sp0-5);
+ padding-block-end: var(--sp0-5);
+ padding-inline-start: var(--sp0-5);
-webkit-overflow-scrolling: touch;
}
@media (min-width: 62.5rem) {
-[dir="ltr"] .breadcrumb__content {
- margin-right: 0;
- }
-
-[dir="rtl"] .breadcrumb__content {
- margin-left: 0;
- }
- }
-
-[dir="ltr"] .breadcrumb__list {
- margin-left: calc(var(--sp1) * -1);
-}
-
-[dir="rtl"] .breadcrumb__list {
- margin-right: calc(var(--sp1) * -1);
-}
-
-[dir="ltr"] .breadcrumb__list {
- margin-right: calc(var(--sp1) * -1);
-}
-
-[dir="rtl"] .breadcrumb__list {
- margin-left: calc(var(--sp1) * -1);
-}
-
-[dir="ltr"] .breadcrumb__list {
- padding-left: var(--sp1);
-}
-
-[dir="rtl"] .breadcrumb__list {
- padding-right: var(--sp1);
-}
-
-[dir="ltr"] .breadcrumb__list {
- padding-right: 0;
-}
-
-[dir="rtl"] .breadcrumb__list {
- padding-left: 0;
+.breadcrumb__content {
+ margin-inline-end: 0;
}
+ }
.breadcrumb__list {
overflow-x: auto;
width: max-content;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: var(--sp1);
+ margin-block: 0;
+ margin-inline-start: calc(var(--sp1) * -1);
+ margin-inline-end: calc(var(--sp1) * -1);
+ padding-block: 0 var(--sp1);
+ padding-inline-start: var(--sp1);
+ padding-inline-end: 0;
list-style: none;
white-space: nowrap;
}
@media (min-width: 62.5rem) {
-[dir="ltr"] .breadcrumb__list {
- margin-left: 0;
- }
-
-[dir="rtl"] .breadcrumb__list {
- margin-right: 0;
- }
-
-[dir="ltr"] .breadcrumb__list {
- margin-right: 0;
- }
-
-[dir="rtl"] .breadcrumb__list {
- margin-left: 0;
- }
-
-[dir="ltr"] .breadcrumb__list {
- padding-left: 0;
- }
-
-[dir="rtl"] .breadcrumb__list {
- padding-right: 0;
- }
-
.breadcrumb__list {
overflow: visible;
- padding-bottom: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block-end: 0;
+ padding-inline-start: 0;
white-space: normal;
}
}
@@ -191,49 +108,25 @@
display: inline-block;
}
-[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
- margin-left: 1rem;
- margin-right: 1.25rem;
-}
-
-[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
- margin-right: 1rem;
- margin-left: 1.25rem;
-}
-
-[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
- border-right: 2px solid var(--color--gray-45);
-}
-
-[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
- border-left: 2px solid var(--color--gray-45);
-}
-
.breadcrumb__item:nth-child(n+2):before {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
+ margin-inline: 1rem 1.25rem;
content: "";
transform: rotate(45deg); /* LTR */
- border-top: 2px solid var(--color--gray-45);
+ border-block-start: 2px solid var(--color--gray-45);
+ border-inline-end: 2px solid var(--color--gray-45);
}
-[dir="ltr"] .breadcrumb__item:last-child {
- margin-right: var(--sp3);
-}
-
-[dir="rtl"] .breadcrumb__item:last-child {
- margin-left: var(--sp3);
-}
+.breadcrumb__item:last-child {
+ margin-inline-end: var(--sp3);
+ }
@media (min-width: 62.5rem) {
-[dir="ltr"] .breadcrumb__item:last-child {
- margin-right: 0;
- }
-
-[dir="rtl"] .breadcrumb__item:last-child {
- margin-left: 0;
+.breadcrumb__item:last-child {
+ margin-inline-end: 0;
}
}
diff --git a/core/themes/olivero/css/components/button.css b/core/themes/olivero/css/components/button.css
index 23f4d1f53fc3db342f4e4b51fa705a5dc3ea6523..d9ed370217445f54f33b24bb04fb7e4c9ce2d7d7 100644
--- a/core/themes/olivero/css/components/button.css
+++ b/core/themes/olivero/css/components/button.css
@@ -23,31 +23,14 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .button {
- margin-left: 0;
-}
-
-[dir="rtl"] .button {
- margin-right: 0;
-}
-
-[dir="ltr"] .button {
- margin-right: var(--sp1);
-}
-
-[dir="rtl"] .button {
- margin-left: var(--sp1);
-}
-
.button {
display: inline-block;
height: var(--sp3);
- margin-top: var(--sp1);
- margin-bottom: var(--sp1);
- padding-top: calc((var(--sp3) - var(--line-height-s)) / 2);
- padding-bottom: calc((var(--sp3) - var(--line-height-s)) / 2);
- padding-left: var(--sp1-5);
- padding-right: var(--sp1-5);
+ margin-block: var(--sp1);
+ margin-inline-start: 0;
+ margin-inline-end: var(--sp1);
+ padding-block: calc((var(--sp3) - var(--line-height-s)) / 2);
+ padding-inline: var(--sp1-5);
cursor: pointer;
text-align: center;
text-decoration: none;
@@ -101,43 +84,24 @@
align-items: center;
/* Top padding accounts for font not being vertically centered within line-height. */
- padding-top: 1px;
- padding-bottom: 0;
- padding-left: var(--sp1-5);
- padding-right: var(--sp1-5);
+ padding-block: 1px 0;
+ padding-inline: var(--sp1-5);
line-height: var(--line-height-s);
}
}
/* No margin if is part of a menu. */
-[dir="ltr"] .menu .button {
- margin-left: 0;
-}
-
-[dir="rtl"] .menu .button {
- margin-right: 0;
-}
-
-[dir="ltr"] .menu .button {
- margin-right: 0;
-}
-
-[dir="rtl"] .menu .button {
- margin-left: 0;
-}
-
.menu .button {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
.button--small {
height: var(--sp2-5);
- padding-top: calc((var(--sp2-5) - var(--line-height-s)) / 2);
- padding-bottom: calc((var(--sp2-5) - var(--line-height-s)) / 2);
- padding-left: var(--sp);
- padding-right: var(--sp);
+ padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
+ padding-inline: var(--sp);
font-size: var(--font-size-base);
line-height: normal;
}
@@ -170,29 +134,15 @@
align-items: center;
}
-[dir="ltr"] .button--icon-back:before {
- margin-right: 0.5em;
-}
-
-[dir="rtl"] .button--icon-back:before {
- margin-left: 0.5em;
-}
-
-[dir="ltr"] .button--icon-back:before {
- border-left: solid 2px currentColor;
-}
-
-[dir="rtl"] .button--icon-back:before {
- border-right: solid 2px currentColor;
-}
-
.button--icon-back:before {
display: block;
width: 0.5em;
height: 0.5em;
+ margin-inline-end: 0.5em;
content: "";
transform: rotate(45deg); /* LTR */
- border-bottom: solid 2px currentColor;
+ border-block-end: solid 2px currentColor;
+ border-inline-start: solid 2px currentColor;
}
[dir="rtl"] .button--icon-back:before {
diff --git a/core/themes/olivero/css/components/comments.css b/core/themes/olivero/css/components/comments.css
index 3f8ff293a96ca77d65ffc819fdc1ac8465b0211d..d286e66e563ed6bb7d269993a3c1a46cac761ae3 100644
--- a/core/themes/olivero/css/components/comments.css
+++ b/core/themes/olivero/css/components/comments.css
@@ -29,59 +29,30 @@
}
.comment--level-1 {
- border-top: 2px solid var(--color--gray-95);
+ border-block-start: 2px solid var(--color--gray-95);
}
.comment--level-1 ~ .comment--level-1 {
- margin-top: var(--sp2);
+ margin-block-start: var(--sp2);
}
.comments__title {
display: flex;
align-items: center;
- margin-top: 0;
-}
-
-[dir="ltr"] .comments__count {
- margin-left: var(--sp);
-}
-
-[dir="rtl"] .comments__count {
- margin-right: var(--sp);
-}
-
-[dir="ltr"] .comments__count {
- margin-right: var(--sp);
-}
-
-[dir="rtl"] .comments__count {
- margin-left: var(--sp);
-}
-
-[dir="ltr"] .comments__count {
- padding-left: 0.3125rem;
-}
-
-[dir="rtl"] .comments__count {
- padding-right: 0.3125rem;
-}
-
-[dir="ltr"] .comments__count {
- padding-right: 0.3125rem;
-}
-
-[dir="rtl"] .comments__count {
- padding-left: 0.3125rem;
+ margin-block-start: 0;
}
.comments__count {
position: relative;
display: inline-block;
min-width: 2.125rem;
- margin-top: 0;
- margin-bottom: var(--sp0-5);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block-start: 0;
+ margin-block-end: var(--sp0-5);
+ margin-inline-start: var(--sp);
+ margin-inline-end: var(--sp);
+ padding-block: 0;
+ padding-inline-start: 0.3125rem;
+ padding-inline-end: 0.3125rem;
text-align: center;
color: var(--color--white);
border-radius: 2px;
@@ -90,65 +61,36 @@
line-height: 1.3125rem;
}
-[dir="ltr"] .comments__count:after {
- left: 0.5rem;
-}
-
-[dir="rtl"] .comments__count:after {
- right: 0.5rem;
-}
-
-[dir="ltr"] .comments__count:after {
- border-right: 0.5rem solid transparent;
-}
-
-[dir="rtl"] .comments__count:after {
- border-left: 0.5rem solid transparent;
-}
-
.comments__count:after {
position: absolute;
- bottom: -0.4375rem;
+ inset-block-end: -0.4375rem;
+ inset-inline-start: 0.5rem;
width: 0;
height: 0;
content: "";
- border-top: 0.4375rem solid var(--color--primary-40);
+ border-block-start: 0.4375rem solid var(--color--primary-40);
+ border-inline-end: 0.5rem solid transparent;
}
.comment-form {
- padding-bottom: var(--sp2);
+ padding-block-end: var(--sp2);
}
-[dir="ltr"] .add-comment__form {
- padding-left: 0;
-}
-
-[dir="rtl"] .add-comment__form {
- padding-right: 0;
-}
-
-[dir="ltr"] .comment {
- padding-left: var(--sp3);
-}
-
-[dir="rtl"] .comment {
- padding-right: var(--sp3);
+.add-comment__form {
+ padding-inline-start: 0;
}
.comment {
position: relative;
- padding-top: var(--sp2);
+ padding-block-start: var(--sp2);
+ padding-inline-start: var(--sp3);
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .comment {
- padding-left: 0;
- }
-
-[dir="rtl"] .comment {
- padding-right: 0;
- }
+.comment {
+ padding-inline-start: 0;
+}
}
.comment__text-content {
@@ -163,12 +105,11 @@
/* Override for .field:not(:last-child) */
.comment__text-content:not(:last-child) {
- margin-bottom: 0;
+ margin-block-end: 0;
}
.comment__links {
- margin-top: var(--sp);
- margin-bottom: 0;
+ margin-block: var(--sp) 0;
}
.comment__links-link {
@@ -183,22 +124,13 @@
}
.add-comment__picture-wrapper {
- top: calc(var(--line-height-base) + var(--sp0-5));
-}
-
-[dir="ltr"] .add-comment__picture,[dir="ltr"]
-.comment__picture {
- left: 0;
-}
-
-[dir="rtl"] .add-comment__picture,[dir="rtl"]
-.comment__picture {
- right: 0;
+ inset-block-start: calc(var(--line-height-base) + var(--sp0-5));
}
.add-comment__picture,
.comment__picture {
position: absolute;
+ inset-inline-start: 0;
overflow: hidden;
width: var(--sp2);
height: var(--sp2);
@@ -236,18 +168,9 @@
@media (min-width: 43.75rem) {
-[dir="ltr"] .add-comment__picture,[dir="ltr"]
-.comment__picture {
- left: calc(-1 * var(--sp5));
- }
-
-[dir="rtl"] .add-comment__picture,[dir="rtl"]
-.comment__picture {
- right: calc(-1 * var(--sp5));
- }
-
.add-comment__picture,
.comment__picture {
+ inset-inline-start: calc(-1 * var(--sp5));
width: var(--sp3);
height: var(--sp3);
}
@@ -255,15 +178,8 @@
@media (min-width: 43.75rem) {
-[dir="ltr"] .indented .comment__picture {
- left: calc(-1 * var(--sp4));
- }
-
-[dir="rtl"] .indented .comment__picture {
- right: calc(-1 * var(--sp4));
- }
-
.indented .comment__picture {
+ inset-inline-start: calc(-1 * var(--sp4));
width: var(--sp2);
height: var(--sp2);
}
@@ -273,15 +189,8 @@
display: inline;
}
-[dir="ltr"] .comment__author {
- margin-right: var(--sp);
-}
-
-[dir="rtl"] .comment__author {
- margin-left: var(--sp);
-}
-
.comment__author {
+ margin-inline-end: var(--sp);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
@@ -300,97 +209,42 @@
line-height: var(--sp);
}
-[dir="ltr"] .indented {
- margin-left: var(--comment-indentation);
-}
-
-[dir="rtl"] .indented {
- margin-right: var(--comment-indentation);
-}
-
-[dir="ltr"] .indented > .comment:not(:last-of-type, .has-children):before {
- left: calc(-1 * var(--comment-indentation) - var(--sp));
-}
-
-[dir="rtl"] .indented > .comment:not(:last-of-type, .has-children):before {
- right: calc(-1 * var(--comment-indentation) - var(--sp));
-}
-
-[dir="ltr"] .indented > .comment:not(:last-of-type, .has-children):before {
- border-left: solid 1px var(--color--gray-95);
-}
-
-[dir="rtl"] .indented > .comment:not(:last-of-type, .has-children):before {
- border-right: solid 1px var(--color--gray-95);
+.indented {
+ margin-inline-start: var(--comment-indentation);
}
.indented > .comment:not(:last-of-type, .has-children):before {
position: absolute;
- top: var(--sp2); /* Comment's padding-top */
+ inset-block-start: var(--sp2);
+ inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */
width: 0;
height: 100%;
content: "";
+ border-inline-start: solid 1px var(--color--gray-95);
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .indented > .comment:not(:last-of-type, .has-children):before {
- left: calc(-1 * var(--comment-indentation--md) + var(--sp));
- }
-
-[dir="rtl"] .indented > .comment:not(:last-of-type, .has-children):before {
- right: calc(-1 * var(--comment-indentation--md) + var(--sp));
+.indented > .comment:not(:last-of-type, .has-children):before {
+ inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp));
}
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .indented {
- margin-left: var(--comment-indentation--md);
- }
-
-[dir="rtl"] .indented {
- margin-right: var(--comment-indentation--md);
- }
- }
-
-[dir="ltr"] .show-hide-btn {
- margin-left: var(--sp3);
-}
-
-[dir="rtl"] .show-hide-btn {
- margin-right: var(--sp3);
-}
-
-[dir="ltr"] .show-hide-btn {
- margin-right: 0;
-}
-
-[dir="rtl"] .show-hide-btn {
- margin-left: 0;
-}
-
-[dir="ltr"] .show-hide-btn {
- padding-left: 0;
-}
-
-[dir="rtl"] .show-hide-btn {
- padding-right: 0;
-}
-
-[dir="ltr"] .show-hide-btn {
- padding-right: 0;
-}
-
-[dir="rtl"] .show-hide-btn {
- padding-left: 0;
+.indented {
+ margin-inline-start: var(--comment-indentation--md);
}
+ }
.show-hide-btn {
- margin-top: var(--sp2);
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block-start: var(--sp2);
+ margin-block-end: 0;
+ margin-inline-start: var(--sp3);
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
color: var(--color-text-neutral-medium);
border: 0;
@@ -412,11 +266,7 @@
@media (min-width: 43.75rem) {
-[dir="ltr"] .show-hide-btn {
- margin-left: 0;
- }
-
-[dir="rtl"] .show-hide-btn {
- margin-right: 0;
- }
+.show-hide-btn {
+ margin-inline-start: 0;
+}
}
diff --git a/core/themes/olivero/css/components/container-inline.module.css b/core/themes/olivero/css/components/container-inline.module.css
index b88a797f7e0c5c0d6a75c4df13193c6bd73d3516..6bc96ebc349a8b0c34887a1e4d63df84ca9e810f 100644
--- a/core/themes/olivero/css/components/container-inline.module.css
+++ b/core/themes/olivero/css/components/container-inline.module.css
@@ -16,12 +16,10 @@
}
.form-items-inline {
- margin-top: -0.125em;
- margin-bottom: -0.125em; /* 2px */
+ margin-block: -0.125em; /* 2px */
}
.form-items-inline > .form-item {
display: inline-block;
- margin-top: 0.125em;
- margin-bottom: 0.125em;
+ margin-block: 0.125em;
}
diff --git a/core/themes/olivero/css/components/content-moderation.css b/core/themes/olivero/css/components/content-moderation.css
index b6fde852a5b456d256f158239449144a8d366138..b7167920443feddf6ae1a75c9c649925155a7e58 100644
--- a/core/themes/olivero/css/components/content-moderation.css
+++ b/core/themes/olivero/css/components/content-moderation.css
@@ -23,24 +23,10 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .entity-moderation-form {
- padding-left: var(--sp);
-}
-
-[dir="rtl"] .entity-moderation-form {
- padding-right: var(--sp);
-}
-
-[dir="ltr"] .entity-moderation-form {
- padding-right: var(--sp);
-}
-
-[dir="rtl"] .entity-moderation-form {
- padding-left: var(--sp);
-}
-
.entity-moderation-form {
flex-direction: column;
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
border: 1px solid var(--color--gray-95);
background-color: var(--color--gray-100);
}
@@ -57,28 +43,14 @@
}
}
-[dir="ltr"] .entity-moderation-form__item {
- margin-right: var(--sp);
-}
-
-[dir="rtl"] .entity-moderation-form__item {
- margin-left: var(--sp);
-}
-
.entity-moderation-form__item {
flex-basis: 0;
-}
-
-[dir="ltr"] .entity-moderation-form__item:last-child {
- margin-right: 0;
-}
-
-[dir="rtl"] .entity-moderation-form__item:last-child {
- margin-left: 0;
+ margin-inline-end: var(--sp);
}
.entity-moderation-form__item:last-child {
align-self: flex-start;
+ margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
@@ -88,16 +60,9 @@
}
}
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: 0;
-}
-
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: 0;
-}
-
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: 100%;
+ margin-inline-start: 0;
}
@supports (width: max-content) {
@@ -109,47 +74,25 @@
@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)));
- }
-
-[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)));
- }
-
.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-block: var(--sp2) var(--sp4);
+ margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
}
}
@media (min-width: 62.5rem) {
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: calc(-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)));
- }
-
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
}
@media (min-width: 90rem) {
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"] .layout--content-medium .entity-moderation-form,[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-left: 0;
- }
-
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"] .layout--content-medium .entity-moderation-form,[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
- margin-right: 0;
- }
-
.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: 0;
}
}
diff --git a/core/themes/olivero/css/components/details.css b/core/themes/olivero/css/components/details.css
index 6d3a625c1cf983247bf9997709b0748f0813de40..6bd0951faaa87c57729af2e9357355ef8dea14bc 100644
--- a/core/themes/olivero/css/components/details.css
+++ b/core/themes/olivero/css/components/details.css
@@ -30,8 +30,7 @@
.olivero-details {
display: block;
- margin-top: var(--sp1);
- margin-bottom: var(--sp1);
+ margin-block: var(--sp1);
color: inherit;
border: var(--details-border-width) solid var(--color--gray-95);
border-radius: var(--border-radius);
@@ -40,26 +39,11 @@
/* Details summary styles */
-[dir="ltr"] .olivero-details__summary {
- padding-left: var(--sp2);
-}
-
-[dir="rtl"] .olivero-details__summary {
- padding-right: var(--sp2);
-}
-
-[dir="ltr"] .olivero-details__summary {
- padding-right: var(--sp1);
-}
-
-[dir="rtl"] .olivero-details__summary {
- padding-left: var(--sp1);
-}
-
.olivero-details__summary {
position: relative;
- padding-top: var(--sp1);
- padding-bottom: var(--sp1);
+ padding-block: var(--sp1);
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp1);
list-style: none;
cursor: pointer;
transition: var(--details-summary-transition);
@@ -75,17 +59,10 @@
/* Arrow icon */
-[dir="ltr"] .olivero-details__summary:before {
- left: var(--sp0-75);
-}
-
-[dir="rtl"] .olivero-details__summary:before {
- right: var(--sp0-75);
-}
-
.olivero-details__summary:before {
position: absolute;
- top: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: var(--sp0-75);
display: block;
width: 0.625rem;
height: 0.625rem;
@@ -103,10 +80,7 @@
.olivero-details__summary:after {
position: absolute;
- top: calc(var(--details-border-width) * -1);
- right: calc(var(--details-border-width) * -1);
- bottom: calc(var(--details-border-width) * -1);
- left: calc(var(--details-border-width) * -1);
+ inset: calc(var(--details-border-width) * -1);
content: "";
pointer-events: none;
opacity: 0;
@@ -143,7 +117,7 @@
/* Rotate arrow icon of the details summary, when details expanded */
.olivero-details[open] > .olivero-details__summary::before {
- margin-top: -2px;
+ margin-block-start: -2px;
transform: translateY(-50%) rotate(135deg);
}
@@ -155,32 +129,18 @@
@media (min-width: 62.5rem) {
-[dir="ltr"] .olivero-details__wrapper {
- margin-left: var(--sp2);
- }
-
-[dir="rtl"] .olivero-details__wrapper {
- margin-right: var(--sp2);
- }
-
-[dir="ltr"] .olivero-details__wrapper {
- margin-right: var(--sp2);
- }
-
-[dir="rtl"] .olivero-details__wrapper {
- margin-left: var(--sp2);
- }
-
.olivero-details__wrapper {
- margin-top: var(--sp1-5);
- margin-bottom: var(--sp1-5);
+ margin-block-start: var(--sp1-5);
+ margin-block-end: var(--sp1-5);
+ margin-inline-start: var(--sp2);
+ margin-inline-end: var(--sp2);
}
}
/* Description */
.olivero-details__description {
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
color: var(--color-text-neutral-medium);
font-size: var(--font-size-xs);
line-height: var(--line-height-s);
diff --git a/core/themes/olivero/css/components/dropbutton.css b/core/themes/olivero/css/components/dropbutton.css
index 9737357c2864a8dbab5755d26a5d6efb9b2c0c60..3e8b819a655ee17546aa4a54c8a7867605284603 100644
--- a/core/themes/olivero/css/components/dropbutton.css
+++ b/core/themes/olivero/css/components/dropbutton.css
@@ -27,70 +27,37 @@
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
}
-[dir="ltr"] .dropbutton-widget {
- padding-right: var(--dropbutton--height);
-}
-
-[dir="rtl"] .dropbutton-widget {
- padding-left: var(--dropbutton--height);
-}
-
.dropbutton-widget {
position: relative;
width: max-content;
height: var(--dropbutton--height);
+ padding-inline-end: var(--dropbutton--height);
border-radius: var(--dropbutton--border-radius);
}
-[dir="ltr"] .dropbutton-single .dropbutton-widget {
- padding-right: 0;
-}
-
-[dir="rtl"] .dropbutton-single .dropbutton-widget {
- padding-left: 0;
+.dropbutton-single .dropbutton-widget {
+ padding-inline-end: 0;
}
.dropbutton-wrapper.open .dropbutton-widget {
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
}
-[dir="ltr"] .dropbutton {
- margin-left: 0;
-}
-
-[dir="rtl"] .dropbutton {
- margin-right: 0;
-}
-
-[dir="ltr"] .dropbutton {
- padding-left: 0;
-}
-
-[dir="rtl"] .dropbutton {
- padding-right: 0;
-}
-
.dropbutton {
height: var(--dropbutton--height);
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ padding-inline-start: 0;
list-style: none;
font-size: var(--dropbutton--font-size);
}
/* This is the button that expands/collapses the secondary options. */
-[dir="ltr"] .dropbutton-toggle button {
- right: 0;
-}
-
-[dir="rtl"] .dropbutton-toggle button {
- left: 0;
-}
-
.dropbutton-toggle button {
position: absolute;
top: 0;
+ inset-inline-end: 0;
display: flex;
align-items: center;
justify-content: center;
@@ -128,15 +95,8 @@
/* This is the first <li> element in the list of actions. */
-[dir="ltr"] .dropbutton-action:first-child {
- margin-right: 2px;
-}
-
-[dir="rtl"] .dropbutton-action:first-child {
- margin-left: 2px;
-}
-
.dropbutton-action:first-child {
+ margin-inline-end: 2px;
border: solid 1px transparent;
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
background: var(--dropbutton--active-bg-color);
diff --git a/core/themes/olivero/css/components/embedded-media.css b/core/themes/olivero/css/components/embedded-media.css
index 0d339ca840b84de4a7804a85107e6a61a41c8e66..9bb2bb60539f9b88db6f879c6da89d853d6229b7 100644
--- a/core/themes/olivero/css/components/embedded-media.css
+++ b/core/themes/olivero/css/components/embedded-media.css
@@ -27,25 +27,10 @@ figure {
background: var(--color--gray-100);
}
-[dir="ltr"] figcaption {
- padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] figcaption {
- padding-right: var(--sp0-5);
-}
-
-[dir="ltr"] figcaption {
- padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] figcaption {
- padding-left: var(--sp0-5);
-}
-
figcaption {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp0-5);
+ padding-inline-end: var(--sp0-5);
color: var(--color-text-neutral-medium);
background: var(--color--gray-100);
font-family: var(--font-serif);
@@ -56,81 +41,30 @@ figcaption {
@media (min-width: 31.25rem) {
-[dir="ltr"] figcaption {
- padding-left: var(--sp);
- }
-
-[dir="rtl"] figcaption {
- padding-right: var(--sp);
- }
-
-[dir="ltr"] figcaption {
- padding-right: var(--sp);
- }
-
-[dir="rtl"] figcaption {
- padding-left: var(--sp);
- }
-
figcaption {
- padding-top: var(--sp);
- padding-bottom: var(--sp);
+ padding-block: var(--sp);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
}
}
-[dir="ltr"] .align-right {
- margin-left: 0;
-}
-
-[dir="rtl"] .align-right {
- margin-right: 0;
-}
-
-[dir="ltr"] .align-right {
- margin-right: 0;
-}
-
-[dir="rtl"] .align-right {
- margin-left: 0;
-}
-
.align-right {
float: none; /* Override core's align.module.css. */
max-width: 100%;
- margin-top: var(--sp3);
- margin-bottom: var(--sp3);
+ margin-block: var(--sp3);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .align-right {
- float: right;
- }
-
-[dir="rtl"] .align-right {
- float: left;
- }
-
-[dir="ltr"] .align-right {
- margin-left: var(--sp);
- }
-
-[dir="rtl"] .align-right {
- margin-right: var(--sp);
- }
-
-[dir="ltr"] .align-right {
- margin-right: 0;
- }
-
-[dir="rtl"] .align-right {
- margin-left: 0;
- }
-
.align-right {
+ float: inline-end;
max-width: 50%;
- margin-top: var(--sp);
- margin-bottom: var(--sp);
+ margin-block-start: var(--sp);
+ margin-block-end: var(--sp);
+ margin-inline-start: var(--sp);
+ margin-inline-end: 0;
}
}
@@ -140,109 +74,54 @@ figcaption {
@media (min-width: 43.75rem) {
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
+.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
- }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
-.layout--pass--content-narrow > * .align-right {
- margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
- }
+ margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+}
}
@media (min-width: 62.5rem) {
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
+.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
- }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
-.layout--pass--content-narrow > * .align-right {
- margin-left: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
- }
+ margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
+}
}
@media (min-width: 75rem) {
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
+.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
- }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
-.layout--pass--content-narrow > * .align-right {
- margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
- }
+ margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+}
}
@media (min-width: 90rem) {
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"]
+.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
- margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
- }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"]
-.layout--pass--content-narrow > * .align-right {
- margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
- }
- }
-
-[dir="ltr"] .align-left {
- margin-left: 0;
-}
-
-[dir="rtl"] .align-left {
- margin-right: 0;
-}
-
-[dir="ltr"] .align-left {
- margin-right: 0;
-}
-
-[dir="rtl"] .align-left {
- margin-left: 0;
+ margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
}
+ }
.align-left {
float: none; /* Override core's align.module.css. */
max-width: 100%;
- margin-top: var(--sp3);
- margin-bottom: var(--sp3);
+ margin-block-start: var(--sp3);
+ margin-block-end: var(--sp3);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .align-left {
- float: left;
- }
-
-[dir="rtl"] .align-left {
- float: right;
- }
-
-[dir="ltr"] .align-left {
- margin-left: 0;
- }
-
-[dir="rtl"] .align-left {
- margin-right: 0;
- }
-
-[dir="ltr"] .align-left {
- margin-right: var(--sp2);
- }
-
-[dir="rtl"] .align-left {
- margin-left: var(--sp2);
- }
-
.align-left {
+ float: inline-start;
max-width: 50%;
- margin-top: var(--sp);
- margin-bottom: var(--sp); /* Extra right margins in case of aligning next to lists. */
+ margin-block-start: var(--sp);
+ margin-block-end: var(--sp);
+ margin-inline-start: 0;
+ margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */
}
}
@@ -250,22 +129,16 @@ figcaption {
@media (min-width: 43.75rem) {
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"]
+.layout--content-narrow .align-left,
.layout--pass--content-narrow > * .align-left {
- margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
- }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"]
-.layout--pass--content-narrow > * .align-left {
- margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
- }
+ margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+}
}
.align-center img,
.align-center video,
.align-center audio {
- margin-left: auto;
- margin-right: auto;
+ margin-inline: auto;
}
.media-oembed-content {
diff --git a/core/themes/olivero/css/components/feed.css b/core/themes/olivero/css/components/feed.css
index 00ff21e6a1497caf7a879a7a12daa192aca83f20..1990007415ebe6a518f8d8eb2e27976abba1b02d 100644
--- a/core/themes/olivero/css/components/feed.css
+++ b/core/themes/olivero/css/components/feed.css
@@ -41,14 +41,6 @@
font-weight: 600;
}
-[dir="ltr"] .feed-icon__icon {
- margin-left: var(--sp0-5);
-}
-
-[dir="rtl"] .feed-icon__icon {
- margin-right: var(--sp0-5);
-}
-
.feed-icon__icon {
display: flex;
flex-shrink: 0;
@@ -56,6 +48,7 @@
justify-content: center;
width: var(--sp1-5);
height: var(--sp1-5);
+ margin-inline-start: var(--sp0-5);
color: var(--color--white);
background-color: var(--color--primary-50);
}
diff --git a/core/themes/olivero/css/components/field.css b/core/themes/olivero/css/components/field.css
index f71f06f92694e3f9333102e8038bc2a4334b6993..87568149cc7687b424b232b10aa12a759aeac54b 100644
--- a/core/themes/olivero/css/components/field.css
+++ b/core/themes/olivero/css/components/field.css
@@ -24,21 +24,21 @@
/* Width of the entire grid maxes out. */
.field:not(:last-child) {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
.node--view-mode-teaser .field {
- margin-bottom: var(--sp);
+ margin-block-end: var(--sp);
}
.node--view-mode-teaser .field:last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
@media (min-width: 62.5rem) {
.node--view-mode-teaser .field {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
}
@@ -46,26 +46,15 @@
font-weight: bold;
}
-[dir="ltr"] .field--label-inline .field__label,[dir="ltr"]
+.field--label-inline .field__label,
.field--label-inline .field__items {
- float: left;
+ float: inline-start;
}
-[dir="rtl"] .field--label-inline .field__label,[dir="rtl"]
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
.field--label-inline .field__items {
- float: right;
-}
-
-[dir="ltr"] .field--label-inline .field__label,[dir="ltr"]
-.field--label-inline > .field__item,[dir="ltr"]
-.field--label-inline .field__items {
- padding-right: 0.5em;
-}
-
-[dir="rtl"] .field--label-inline .field__label,[dir="rtl"]
-.field--label-inline > .field__item,[dir="rtl"]
-.field--label-inline .field__items {
- padding-left: 0.5em;
+ padding-inline-end: 0.5em;
}
.field--label-inline .field__label::after {
diff --git a/core/themes/olivero/css/components/fieldset.css b/core/themes/olivero/css/components/fieldset.css
index 2d61b4ced8b4f24ac21afafccc2974fbe535656f..311d62a482a358cb7193c8500660eb170aa57314 100644
--- a/core/themes/olivero/css/components/fieldset.css
+++ b/core/themes/olivero/css/components/fieldset.css
@@ -23,44 +23,14 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .fieldset {
- margin-left: 0;
-}
-
-[dir="rtl"] .fieldset {
- margin-right: 0;
-}
-
-[dir="ltr"] .fieldset {
- margin-right: 0;
-}
-
-[dir="rtl"] .fieldset {
- margin-left: 0;
-}
-
-[dir="ltr"] .fieldset {
- padding-left: 0;
-}
-
-[dir="rtl"] .fieldset {
- padding-right: 0;
-}
-
-[dir="ltr"] .fieldset {
- padding-right: 0;
-}
-
-[dir="rtl"] .fieldset {
- padding-left: 0;
-}
-
.fieldset {
min-width: 0;
- margin-top: var(--sp1);
- margin-bottom: var(--sp1);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: var(--sp1);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
color: inherit;
border: solid 2px var(--color--gray-45);
border-radius: var(--border-radius);
@@ -106,7 +76,7 @@ _:-ms-fullscreen,
}
.fieldset__legend--composite {
- margin-top: 2px;
+ margin-block-start: 2px;
color: inherit;
}
@@ -118,26 +88,11 @@ _:-ms-fullscreen,
color: inherit;
}
-[dir="ltr"] .fieldset__label {
- padding-left: var(--sp1);
-}
-
-[dir="rtl"] .fieldset__label {
- padding-right: var(--sp1);
-}
-
-[dir="ltr"] .fieldset__label {
- padding-right: var(--sp1);
-}
-
-[dir="rtl"] .fieldset__label {
- padding-left: var(--sp1);
-}
-
.fieldset__label {
display: block;
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp1);
+ padding-inline-end: var(--sp1);
color: var(--color--white);
line-height: var(--line-height-s);
}
@@ -147,8 +102,7 @@ _:-ms-fullscreen,
}
.fieldset__description {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
font-size: var(--font-size-xs);
line-height: var(--line-height-s);
}
@@ -157,17 +111,9 @@ _:-ms-fullscreen,
color: var(--input--disabled-fg-color);
}
-[dir="ltr"] .fieldset__error-message {
- padding-left: var(--sp1-5);
-}
-
-[dir="rtl"] .fieldset__error-message {
- padding-right: var(--sp1-5);
-}
-
.fieldset__error-message {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
+ padding-inline-start: var(--sp1-5);
color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
@@ -193,7 +139,7 @@ _:-ms-fullscreen,
}
.fieldset__legend--invisible ~ .fieldset__wrapper {
- margin-top: 0;
+ margin-block-start: 0;
padding: 0;
}
@@ -203,44 +149,14 @@ _:-ms-fullscreen,
border-bottom-left-radius: var(--border-radius);
}
-[dir="ltr"] .fieldset__wrapper--group {
- margin-left: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper--group {
- margin-right: 0;
-}
-
-[dir="ltr"] .fieldset__wrapper--group {
- margin-right: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper--group {
- margin-left: 0;
-}
-
.fieldset__wrapper--group {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-[dir="ltr"] .fieldset__wrapper > .container-inline {
- padding-left: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper > .container-inline {
- padding-right: 0;
-}
-
-[dir="ltr"] .fieldset__wrapper > .container-inline {
- padding-right: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper > .container-inline {
- padding-left: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
.fieldset__wrapper > .container-inline {
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
diff --git a/core/themes/olivero/css/components/footer.css b/core/themes/olivero/css/components/footer.css
index cbc131e8c1146ce6e63cc8b93375e2caee62b269..35fc39f38a6f91faf3206a9720850f980de96aa8 100644
--- a/core/themes/olivero/css/components/footer.css
+++ b/core/themes/olivero/css/components/footer.css
@@ -29,28 +29,17 @@
background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);
}
-[dir="ltr"] .site-footer .menu {
- margin-left: 0;
-}
-
-[dir="rtl"] .site-footer .menu {
- margin-right: 0;
-}
-
.site-footer .menu {
+ margin-inline-start: 0;
list-style: none;
}
-[dir="ltr"] .site-footer .menu ul {
- margin-left: var(--sp);
-}
-
-[dir="rtl"] .site-footer .menu ul {
- margin-right: var(--sp);
-}
+.site-footer .menu ul {
+ margin-inline-start: var(--sp);
+ }
.site-footer .menu li {
- margin-bottom: var(--sp0-5);
+ margin-block-end: var(--sp0-5);
}
.site-footer a {
@@ -62,10 +51,7 @@
}
@media (min-width: 75rem) {
- [dir="ltr"] body:not(.is-always-mobile-nav) .site-footer {
- border-left: solid var(--content-left) var(--color--black);
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .site-footer {
- border-right: solid var(--content-left) var(--color--black);
+ body:not(.is-always-mobile-nav) .site-footer {
+ border-inline-start: solid var(--content-left) var(--color--black);
}
}
diff --git a/core/themes/olivero/css/components/form-boolean.css b/core/themes/olivero/css/components/form-boolean.css
index 283b73c150f69f469b3e40cbda22f6f14857b9b4..0c6c45a32c2f4ef3944b11a4351570d89faea463 100644
--- a/core/themes/olivero/css/components/form-boolean.css
+++ b/core/themes/olivero/css/components/form-boolean.css
@@ -90,16 +90,9 @@ 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);
-}
-
-[dir="rtl"] input[type="checkbox"] + label,[dir="rtl"] input[type="radio"] + label {
- padding-right: var(--sp0-5);
-}
-
input[type="checkbox"] + label, input[type="radio"] + label {
display: inline-block;
+ padding-inline-start: var(--sp0-5);
}
input[type="checkbox"]:checked {
@@ -128,6 +121,5 @@ input.error[type="radio"]:focus {
}
.form-type-boolean {
- margin-top: var(--sp1);
- margin-bottom: var(--sp1);
+ margin-block: var(--sp1);
}
diff --git a/core/themes/olivero/css/components/form-select.css b/core/themes/olivero/css/components/form-select.css
index 55880c6fdf83fc4346772c1b0088eb437df9d386..f4c27fc9c0c9a8bc68721982eec8214b4d53f1b5 100644
--- a/core/themes/olivero/css/components/form-select.css
+++ b/core/themes/olivero/css/components/form-select.css
@@ -27,27 +27,12 @@
--form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
}
-[dir="ltr"] select {
- padding-left: var(--sp);
-}
-
-[dir="rtl"] select {
- padding-right: var(--sp);
-}
-
-[dir="ltr"] select {
- padding-right: var(--sp3);
-}
-
-[dir="rtl"] select {
- padding-left: var(--sp3);
-}
-
select {
max-width: 100%;
height: var(--sp3);
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp3);
color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius);
@@ -114,15 +99,8 @@ select.form-element--small {
@media (forced-colors: active) {
-[dir="ltr"] select {
- padding-right: var(--sp);
- }
-
-[dir="rtl"] select {
- padding-left: var(--sp);
- }
-
select {
+ padding-inline-end: var(--sp);
background-image: none;
-webkit-appearance: listbox;
appearance: listbox; /* Default <select> appearance value for modern browsers. */
@@ -142,15 +120,8 @@ select {
@media screen and (-ms-high-contrast: active) {
-[dir="ltr"] select {
- padding-right: 0;
- }
-
-[dir="rtl"] select {
- padding-left: 0;
- }
-
select {
+ padding-inline-end: 0;
/* Re-enable default chevron for Internet Explorer. */
}
diff --git a/core/themes/olivero/css/components/form-text.css b/core/themes/olivero/css/components/form-text.css
index 20d31b7d7df3b677575df0948581f001a2d85e0d..49b70ee3963aa6f06666d41b625c48b3fe15f654 100644
--- a/core/themes/olivero/css/components/form-text.css
+++ b/core/themes/olivero/css/components/form-text.css
@@ -116,31 +116,15 @@ textarea {
/* Ensure that date field isn't larger than other fields. */
-[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
- padding-left: 0;
-}
-
-[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
- padding-right: 0;
-}
-
-[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
- padding-right: 0;
-}
-
-[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
- padding-left: 0;
-}
-
[type="date"]::-webkit-datetime-edit-fields-wrapper {
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
[type="file"] {
height: auto;
- padding-top: var(--sp0-75);
- padding-bottom: var(--sp0-75);
+ padding-block: var(--sp0-75);
}
[type="color"] {
diff --git a/core/themes/olivero/css/components/form.css b/core/themes/olivero/css/components/form.css
index a39b8c837d8ec61b8355d53e63d60156034716a5..6146e23d16830343a1e46baaad09f1e1201100bb 100644
--- a/core/themes/olivero/css/components/form.css
+++ b/core/themes/olivero/css/components/form.css
@@ -32,13 +32,11 @@
*/
.form-item {
- margin-top: var(--sp1);
- margin-bottom: var(--sp1);
+ margin-block: var(--sp1);
}
.form-item__label--multiple-value-form {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
@@ -52,8 +50,7 @@
tr .form-item,
.container-inline .form-item {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
}
/**
@@ -62,21 +59,15 @@ tr .form-item,
.form-item__label {
display: block;
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
}
-[dir="ltr"] .container-inline .form-item__label {
- margin-right: 1em;
-}
-
-[dir="rtl"] .container-inline .form-item__label {
- margin-left: 1em;
+.container-inline .form-item__label {
+ margin-inline-end: 1em;
}
.form-item__label--multiple-value-form {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
@@ -106,8 +97,7 @@ tr .form-item,
display: inline-block;
width: 0.5rem;
height: 0.5rem;
- margin-left: 0.3em;
- margin-right: 0.3em;
+ margin-inline: 0.3em;
content: "";
vertical-align: text-top;
/* Use a background image to prevent screen readers from announcing the text. */
@@ -130,32 +120,23 @@ tr .form-item,
*/
.form-item__description {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
max-width: 60ch;
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
.field-multiple-table + .form-item__description {
- margin-top: 0;
+ margin-block-start: 0;
}
/**
* Error message (Inline form errors).
*/
-[dir="ltr"] .form-item--error-message {
- padding-left: var(--sp1-5);
-}
-
-[dir="rtl"] .form-item--error-message {
- padding-right: var(--sp1-5);
-}
-
.form-item--error-message {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
+ padding-inline-start: var(--sp1-5);
color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
@@ -184,14 +165,12 @@ tr .form-item,
display: flex;
flex-wrap: wrap;
align-items: flex-start;
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
}
.form-actions .button,
.form-actions .action-link {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
}
.form-actions .ajax-progress--throbber {
@@ -216,16 +195,10 @@ tr .form-item,
min-width: 1px;
}
-[dir="ltr"] .form-item--editor-format .form-item__label,[dir="ltr"]
-.form-item--editor-format .form-item__prefix,[dir="ltr"]
-.form-item--editor-format .form-item__suffix {
- margin-right: var(--sp0-5);
-}
-
-[dir="rtl"] .form-item--editor-format .form-item__label,[dir="rtl"]
-.form-item--editor-format .form-item__prefix,[dir="rtl"]
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
- margin-left: var(--sp0-5);
+ margin-inline-end: var(--sp0-5);
}
.form-item--editor-format .form-item__description,
diff --git a/core/themes/olivero/css/components/header-buttons-mobile.css b/core/themes/olivero/css/components/header-buttons-mobile.css
index 0d35d56774221641772df911e54ea4e9fc248f14..2309a492a67282cc5ae583eafe9471344f8726b3 100644
--- a/core/themes/olivero/css/components/header-buttons-mobile.css
+++ b/core/themes/olivero/css/components/header-buttons-mobile.css
@@ -23,36 +23,29 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .mobile-buttons {
- margin-left: auto;
-}
-
-[dir="rtl"] .mobile-buttons {
- margin-right: auto;
-}
-
.mobile-buttons {
- margin-top: var(--sp0-5);
+ margin-block-start: var(--sp0-5);
+ margin-inline-start: auto;
}
@media (min-width: 31.25rem) {
.mobile-buttons {
- margin-top: var(--sp2);
+ margin-block-start: var(--sp2);
}
}
@media (min-width: 43.75rem) {
.mobile-buttons {
- margin-top: var(--sp4);
+ margin-block-start: var(--sp4);
}
}
@media (min-width: 75rem) {
.mobile-buttons {
- margin-top: var(--sp6);
+ margin-block-start: var(--sp6);
}
}
diff --git a/core/themes/olivero/css/components/header-navigation.css b/core/themes/olivero/css/components/header-navigation.css
index 578115024b805b872ea45e290c9181b014fa5a6f..c244338a9192ca7565f7aa9e18c389b8866675cf 100644
--- a/core/themes/olivero/css/components/header-navigation.css
+++ b/core/themes/olivero/css/components/header-navigation.css
@@ -23,34 +23,11 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .header-nav {
- left: 100%;
-}
-
-[dir="rtl"] .header-nav {
- right: 100%;
-}
-
-[dir="ltr"] .header-nav {
- padding-left: var(--sp);
-}
-
-[dir="rtl"] .header-nav {
- padding-right: var(--sp);
-}
-
-[dir="ltr"] .header-nav {
- padding-right: var(--sp);
-}
-
-[dir="rtl"] .header-nav {
- padding-left: var(--sp);
-}
-
.header-nav {
position: fixed;
z-index: 501; /* Appear above overlay and contextual links in header. */
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: 100%;
visibility: hidden;
overflow: auto;
/* Ensure that header nav not use additional space and force system branding
@@ -59,13 +36,14 @@
width: 100%;
max-width: var(--mobile-nav-width);
height: 100%;
- padding-top: 0;
- padding-bottom: var(--sp);
+ padding-block: 0 var(--sp);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
/* Create room for the "close" button. We cannot use margin because the
* mobile navigation needs to slide beneath the button, but we also cannot
* use padding because that would enable the button to scroll out of the
* viewport on short screens. */
- border-top: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
+ border-block-start: 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);
}
@@ -88,16 +66,9 @@
@media (min-width: 43.75rem) {
-[dir="ltr"] .header-nav {
- padding-left: var(--sp3);
- }
-
-[dir="rtl"] .header-nav {
- padding-right: var(--sp3);
- }
-
.header-nav {
- padding-bottom: var(--sp3);
+ padding-block-end: var(--sp3);
+ padding-inline-start: var(--sp3);
border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
}
}
@@ -131,22 +102,6 @@ html.js .header-nav {
@media (min-width: 75rem) {
-[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
- padding-left: 0;
- }
-
-[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
- padding-right: 0;
- }
-
-[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
- padding-right: 0;
- }
-
-[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
- padding-left: 0;
- }
-
body:not(.is-always-mobile-nav) .header-nav {
position: static;
display: flex;
@@ -157,29 +112,23 @@ body:not(.is-always-mobile-nav) .header-nav {
justify-content: flex-end;
max-width: none;
height: var(--header-height-wide-when-fixed);
- margin-top: auto;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block-start: auto;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
transition: transform 0.2s;
transform: none;
- border-top: 0;
+ border-block-start: 0;
box-shadow: none;
}
}
@media (min-width: 75rem) {
-[dir="ltr"] body.is-always-mobile-nav .header-nav {
- padding-right: var(--sp);
- }
-
-[dir="rtl"] body.is-always-mobile-nav .header-nav {
- padding-left: var(--sp);
- }
-
body.is-always-mobile-nav .header-nav {
overflow: auto;
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
+ padding-inline-end: var(--sp);
transition: transform 0.2s, visibility 0.2s;
border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
}
@@ -187,31 +136,17 @@ body.is-always-mobile-nav .header-nav {
@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)));
- }
-
-[dir="rtl"] body.is-always-mobile-nav .header-nav {
- 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)))));
+ padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
}
}
-[dir="ltr"] .header-nav-overlay {
- left: 0;
-}
-
-[dir="rtl"] .header-nav-overlay {
- right: 0;
-}
-
.header-nav-overlay {
position: fixed;
z-index: 101;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
display: none;
width: 100%;
height: 100vh;
diff --git a/core/themes/olivero/css/components/header-search-narrow.css b/core/themes/olivero/css/components/header-search-narrow.css
index ab1b1d4b1923c1e5043fc22fd6aac41e59bcf184..3d160b4c59dac947811115afdfd004d89887509d 100644
--- a/core/themes/olivero/css/components/header-search-narrow.css
+++ b/core/themes/olivero/css/components/header-search-narrow.css
@@ -24,9 +24,8 @@
/* Width of the entire grid maxes out. */
.block-search-narrow {
- margin-left: calc(-1 * var(--sp));
- margin-right: calc(-1 * var(--sp));
- margin-bottom: var(--sp2);
+ margin-inline: calc(-1 * var(--sp));
+ margin-block-end: var(--sp2);
background: var(--color--black);
}
@@ -43,27 +42,12 @@
margin: 0;
}
-[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-left: var(--sp);
-}
-
-[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-right: var(--sp);
-}
-
-[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-right: var(--sp);
-}
-
-[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-left: var(--sp);
-}
-
.block-search-narrow input[type="search"] {
width: calc(100% + var(--sp2));
height: calc(3 * var(--sp));
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
transition: background-size 0.4s;
color: var(--color--white);
border: solid 1px transparent;
@@ -103,69 +87,25 @@
@media (min-width: 43.75rem) {
-[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-left: var(--sp2);
- }
-
-[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-right: var(--sp2);
- }
-
-[dir="ltr"] .block-search-narrow input[type="search"] {
- padding-right: var(--sp2);
- }
-
-[dir="rtl"] .block-search-narrow input[type="search"] {
- padding-left: var(--sp2);
- }
-
.block-search-narrow input[type="search"] {
height: calc(4 * var(--sp));
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
}
}
-[dir="ltr"] .block-search-narrow .search-form__submit {
- margin-left: 0;
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
- margin-right: 0;
-}
-
-[dir="ltr"] .block-search-narrow .search-form__submit {
- margin-right: 0;
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
- margin-left: 0;
-}
-
-[dir="ltr"] .block-search-narrow .search-form__submit {
- padding-left: 0;
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
- padding-right: 0;
-}
-
-[dir="ltr"] .block-search-narrow .search-form__submit {
- padding-right: 0;
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
- padding-left: 0;
-}
-
.block-search-narrow .search-form__submit {
position: relative;
overflow: hidden;
align-self: stretch;
width: var(--sp3);
height: auto;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
border-color: transparent;
background-color: transparent;
@@ -176,17 +116,10 @@
*/
}
-[dir="ltr"] .block-search-narrow .search-form__submit .icon--search {
- left: 0;
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit .icon--search {
- right: 0;
-}
-
.block-search-narrow .search-form__submit .icon--search {
position: absolute;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
display: block;
width: 100%; /* Width of the SVG background image. */
height: 100%;
@@ -197,24 +130,17 @@
background-size: auto;
}
-[dir="ltr"] .block-search-narrow .search-form__submit .icon--search:after {
- left: 0;
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {
- right: 0;
-}
-
.block-search-narrow .search-form__submit .icon--search:after {
position: absolute;
- bottom: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left; /* LTR */
- border-top: solid 0.3125rem var(--color--primary-50);
+ border-block-start: solid 0.3125rem var(--color--primary-50);
}
@media (forced-colors: active) {
@@ -279,21 +205,10 @@
@media (min-width: 31.25rem) {
-[dir="ltr"] .block-search-narrow {
- margin-left: 0;
- }
-
-[dir="rtl"] .block-search-narrow {
- margin-right: 0;
- }
-
-[dir="ltr"] .block-search-narrow {
- margin-right: 0;
- }
-
-[dir="rtl"] .block-search-narrow {
- margin-left: 0;
- }
+.block-search-narrow {
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
}
@media (min-width: 75rem) {
diff --git a/core/themes/olivero/css/components/header-search-wide.css b/core/themes/olivero/css/components/header-search-wide.css
index 3000fe9583b3289c6a5f0c184ccc711898fe80b8..768c2f95922028b4d357ee449f7b2bf60cd146b4 100644
--- a/core/themes/olivero/css/components/header-search-wide.css
+++ b/core/themes/olivero/css/components/header-search-wide.css
@@ -29,58 +29,11 @@
position: static;
}
-[dir="ltr"] .block-search-wide__wrapper {
- left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
- right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
- margin-left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
- margin-right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
- margin-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
- margin-left: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
- padding-left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
- padding-right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
- padding-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
- padding-left: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
- border-left: solid var(--content-left) var(--color--gray-20);
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
- border-right: solid var(--content-left) var(--color--gray-20);
-}
-
.block-search-wide__wrapper {
position: absolute;
z-index: 1; /* Ensure left border shows above social region in IE11. */
- top: 100%;
+ inset-block-start: 100%;
+ inset-inline-start: 0;
display: none;
visibility: hidden;
overflow: hidden;
@@ -88,11 +41,14 @@
max-width: var(--max-bg-color);
height: var(--sp8);
max-height: 0;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
transition: all 0.2s;
+ border-inline-start: solid var(--content-left) var(--color--gray-20);
background: var(--color--black);
}
@@ -106,27 +62,12 @@
grid-column: 1 / 14;
}
-[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
- padding-left: var(--sp12);
-}
-
-[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
- padding-right: var(--sp12);
-}
-
-[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
- padding-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
- padding-left: 0;
-}
-
.block-search-wide__wrapper input[type="search"] {
width: calc(100% + var(--sp2));
height: var(--sp8);
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: var(--sp12);
+ padding-inline-end: 0;
transition: background-size 0.4s;
color: var(--color--white);
border: solid 1px transparent;
@@ -168,48 +109,18 @@
margin: 0;
}
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
- margin-left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
- margin-right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
- margin-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
- margin-left: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
- padding-left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
- padding-right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
- padding-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
- padding-left: 0;
-}
-
.block-search-wide__wrapper .search-form__submit {
position: relative;
overflow: hidden;
align-self: stretch;
width: 6.25rem;
height: auto;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
border-color: transparent;
background-color: transparent;
@@ -220,17 +131,10 @@
*/
}
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search {
- right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search {
- left: 0;
-}
-
.block-search-wide__wrapper .search-form__submit .icon--search {
position: absolute;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-end: 0;
display: block;
width: 1.5rem; /* Width of the SVG background image. */
height: 100%;
@@ -241,24 +145,17 @@
background-size: contain;
}
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
- left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
- right: 0;
-}
-
.block-search-wide__wrapper .search-form__submit .icon--search:after {
position: absolute;
- bottom: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left;
- border-top: solid var(--sp0-5) var(--color--primary-50);
+ border-block-start: solid var(--sp0-5) var(--color--primary-50);
}
.block-search-wide__wrapper .search-form__submit:focus {
@@ -299,16 +196,9 @@
}
}
-[dir="ltr"] .block-search-wide__container {
- padding-right: var(--sp2);
-}
-
-[dir="rtl"] .block-search-wide__container {
- padding-left: var(--sp2);
-}
-
.block-search-wide__container {
max-width: var(--max-width);
+ padding-inline-end: var(--sp2);
}
.block-search-wide__grid {
@@ -372,7 +262,7 @@
width: var(--sp1-5);
height: 0;
content: "";
- border-top: solid 2px var(--color--white);
+ border-block-start: solid 2px var(--color--white);
}
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before {
@@ -387,21 +277,10 @@
display: none;
}
-[dir="ltr"] .block-search-wide__button svg {
- margin-left: auto;
-}
-
-[dir="rtl"] .block-search-wide__button svg {
- margin-right: auto;
-}
-
-[dir="ltr"] .block-search-wide__button svg {
- margin-right: auto;
-}
-
-[dir="rtl"] .block-search-wide__button svg {
- margin-left: auto;
-}
+.block-search-wide__button svg {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
@media (forced-colors: active) {
diff --git a/core/themes/olivero/css/components/header-site-branding.css b/core/themes/olivero/css/components/header-site-branding.css
index e87024f87dd22ef0bbced23e38c84b00a40c0b80..42b86c2a83ff2aa62604d62925615909d8a8e7ff 100644
--- a/core/themes/olivero/css/components/header-site-branding.css
+++ b/core/themes/olivero/css/components/header-site-branding.css
@@ -23,40 +23,16 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .site-branding {
- margin-left: calc(-1 * var(--container-padding));
- margin-right: var(--sp);
-}
-
-[dir="rtl"] .site-branding {
- margin-right: calc(-1 * var(--container-padding));
- margin-left: var(--sp);
-}
-
-[dir="ltr"] .site-branding {
- padding-left: var(--container-padding);
-}
-
-[dir="rtl"] .site-branding {
- padding-right: var(--container-padding);
-}
-
-[dir="ltr"] .site-branding {
- padding-right: var(--container-padding);
-}
-
-[dir="rtl"] .site-branding {
- padding-left: var(--container-padding);
-}
-
.site-branding {
display: flex;
flex-shrink: 1;
align-items: flex-end;
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
- min-height: var(--sp3); /* Negative margin to break out of .container element. */
- padding-top: 0;
- padding-bottom: var(--sp0-5);
+ min-height: var(--sp3);
+ margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
+ padding-block: 0 var(--sp0-5);
+ padding-inline-start: var(--container-padding);
+ padding-inline-end: var(--container-padding);
background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
}
@@ -72,7 +48,7 @@
.site-branding {
min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6);
- padding-bottom: var(--sp);
+ padding-block-end: var(--sp);
}
}
@@ -85,18 +61,10 @@
@media (min-width: 75rem) {
-[dir="ltr"] .site-branding {
- margin-left: calc(-1 * var(--container-padding));
- }
-
-[dir="rtl"] .site-branding {
- margin-right: calc(-1 * var(--container-padding));
- }
-
.site-branding {
min-height: var(--site-header-height-wide);
- padding-top: 0;
- padding-bottom: 0;
+ margin-inline-start: calc(-1 * var(--container-padding));
+ padding-block: 0;
}
}
@@ -123,26 +91,11 @@
@media (min-width: 75rem) {
-[dir="ltr"] .site-branding__inner {
- padding-left: 0;
- }
-
-[dir="rtl"] .site-branding__inner {
- padding-right: 0;
- }
-
-[dir="ltr"] .site-branding__inner {
- padding-right: 0;
- }
-
-[dir="rtl"] .site-branding__inner {
- padding-left: 0;
- }
-
.site-branding__inner {
height: var(--header-height-wide-when-fixed);
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
}
@@ -210,10 +163,6 @@
color: var(--color--primary-50);
}
-[dir="ltr"] .site-branding__logo + .site-branding__text {
- margin-left: 0.75rem;
-}
-
-[dir="rtl"] .site-branding__logo + .site-branding__text {
- margin-right: 0.75rem;
+.site-branding__logo + .site-branding__text {
+ margin-inline-start: 0.75rem;
}
diff --git a/core/themes/olivero/css/components/header-sticky-toggle.css b/core/themes/olivero/css/components/header-sticky-toggle.css
index 9901633dfbae2479a9647b26c8ce66d74de83189..40c9d1b1ebf1b52b5653b0e3a4223fc9ea110f9f 100644
--- a/core/themes/olivero/css/components/header-sticky-toggle.css
+++ b/core/themes/olivero/css/components/header-sticky-toggle.css
@@ -85,52 +85,30 @@ body.is-always-mobile-nav .sticky-header-toggle {
border-top: solid 3px var(--color--white);
}
-[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) {
- left: 0;
-}
-
-[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(1) {
- right: 0;
-}
-
.sticky-header-toggle__icon > span:nth-child(1) {
position: absolute;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
background-color: var(--color--white);
}
-[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) {
- left: 0;
-}
-
-[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(2) {
- right: 0;
-}
-
.sticky-header-toggle__icon > span:nth-child(2) {
position: absolute;
- top: 0.5625rem;
+ inset-block-start: 0.5625rem;
+ inset-inline-start: 0;
width: 100%;
height: 0;
transition: opacity 0.2s;
background-color: var(--color--white);
}
-[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) {
- left: 0;
-}
-
-[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(3) {
- right: 0;
-}
-
.sticky-header-toggle__icon > span:nth-child(3) {
position: absolute;
- top: auto;
- bottom: 0;
+ inset-block: auto 0;
+ inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
@@ -144,7 +122,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
- top: 0.5625rem;
+ inset-block-start: 0.5625rem;
transform: rotate(-45deg);
}
@@ -153,6 +131,6 @@ body.is-always-mobile-nav .sticky-header-toggle {
}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
- top: 0.5625rem;
+ inset-block-start: 0.5625rem;
transform: rotate(45deg);
}
diff --git a/core/themes/olivero/css/components/hero.css b/core/themes/olivero/css/components/hero.css
index ca4ed3daa26e4bd6d2824b0a452d9f61ad629383..3e084a404ef628885550f18fb298b29c25a55d42 100644
--- a/core/themes/olivero/css/components/hero.css
+++ b/core/themes/olivero/css/components/hero.css
@@ -43,8 +43,8 @@
.hero__img {
grid-column: 1 / 7;
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
}
.hero__img img {
@@ -54,8 +54,8 @@
@media (min-width: 31.25rem) {
.hero__img {
- margin-top: var(--sp3);
- margin-bottom: var(--sp3);
+ margin-block-start: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
@@ -63,8 +63,8 @@
.hero__img {
grid-column: 1 / 15;
- margin-top: var(--sp4);
- margin-bottom: var(--sp4);
+ margin-block-start: var(--sp4);
+ margin-block-end: var(--sp4);
}
}
diff --git a/core/themes/olivero/css/components/links.css b/core/themes/olivero/css/components/links.css
index 30d4efd84f9323fdf8782a573185e71798b5bb20..3006bcbfbd73d85e12b5374bd22f2b834c9e7c3a 100644
--- a/core/themes/olivero/css/components/links.css
+++ b/core/themes/olivero/css/components/links.css
@@ -23,33 +23,11 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .links.inline {
- margin-left: 0;
-}
-
-[dir="rtl"] .links.inline {
- margin-right: 0;
-}
-
-[dir="ltr"] .links.inline {
- padding-left: 0;
-}
-
-[dir="rtl"] .links.inline {
- padding-right: 0;
-}
-
-[dir="ltr"] .links.inline {
- padding-right: 0;
-}
-
-[dir="rtl"] .links.inline {
- padding-left: 0;
-}
-
.links.inline {
- padding-top: 0;
- padding-bottom: 0;
+ margin-inline-start: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
@@ -57,21 +35,13 @@
display: inline;
}
-[dir="ltr"] .links.inline > *:not(:last-child) {
- padding-right: 1em;
-}
-
-[dir="rtl"] .links.inline > *:not(:last-child) {
- padding-left: 1em;
-}
+.links.inline > *:not(:last-child) {
+ padding-inline-end: 1em;
+ }
@media (min-width: 43.75rem) {
-[dir="ltr"] .node--type-book .links.inline {
- text-align: right;
- }
-
-[dir="rtl"] .node--type-book .links.inline {
- text-align: left;
- }
+.node--type-book .links.inline {
+ text-align: end;
+}
}
diff --git a/core/themes/olivero/css/components/maintenance-page.css b/core/themes/olivero/css/components/maintenance-page.css
index fa385f38fd588805e2d5ebfdbb90b91fd871e66c..5c9e213aef46e97634e90cd2b2590a6292683234 100644
--- a/core/themes/olivero/css/components/maintenance-page.css
+++ b/core/themes/olivero/css/components/maintenance-page.css
@@ -37,8 +37,7 @@
.maintenance-page-icon {
display: block;
- margin-top: var(--sp3);
- margin-bottom: var(--sp3);
+ margin-block: var(--sp3);
}
.maintenance-page-icon path {
diff --git a/core/themes/olivero/css/components/messages.css b/core/themes/olivero/css/components/messages.css
index e5b24f83bd70222e83bbad7868632bcc9fb69611..b362509d1e7a6d73506bb2b78afdeedcd0ab526a 100644
--- a/core/themes/olivero/css/components/messages.css
+++ b/core/themes/olivero/css/components/messages.css
@@ -27,50 +27,19 @@
--messages-icon-size: 2rem;
}
-[dir="ltr"] .messages-list {
- padding-left: 0;
-}
-
-[dir="rtl"] .messages-list {
- padding-right: 0;
-}
-
-[dir="ltr"] .messages-list {
- padding-right: 0;
-}
-
-[dir="rtl"] .messages-list {
- padding-left: 0;
-}
-
.messages-list {
- margin-top: var(--sp1);
- margin-bottom: var(--sp1);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: var(--sp1);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
-[dir="ltr"] .messages {
- padding-left: var(--sp1-5);
-}
-
-[dir="rtl"] .messages {
- padding-right: var(--sp1-5);
-}
-
-[dir="ltr"] .messages {
- padding-right: var(--sp1-5);
-}
-
-[dir="rtl"] .messages {
- padding-left: var(--sp1-5);
-}
-
.messages {
min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
- padding-top: var(--sp1);
- padding-bottom: var(--sp1);
+ padding-block: var(--sp1);
+ padding-inline-start: var(--sp1-5);
+ padding-inline-end: var(--sp1-5);
color: var(--color--white);
outline: solid 1px transparent;
background-color: var(--color--gray-5);
@@ -86,119 +55,56 @@
background-image: none;
}
-[dir="ltr"] .messages__list {
- margin-left: 0;
-}
-
-[dir="rtl"] .messages__list {
- margin-right: 0;
-}
-
-[dir="ltr"] .messages__list {
- margin-right: 0;
-}
-
-[dir="rtl"] .messages__list {
- margin-left: 0;
-}
-
-[dir="ltr"] .messages__list {
- padding-left: 0;
-}
-
-[dir="rtl"] .messages__list {
- padding-right: 0;
-}
-
-[dir="ltr"] .messages__list {
- padding-right: 0;
-}
-
-[dir="rtl"] .messages__list {
- padding-left: 0;
-}
-
.messages__list {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
.messages:not(.hidden) ~ .messages {
- margin-top: var(--sp1);
+ margin-block-start: var(--sp1);
}
.messages__item + .messages__item {
- margin-top: var(--sp0-5);
+ margin-block-start: var(--sp0-5);
}
.messages__container {
display: flex;
}
-[dir="ltr"] .messages__header {
- margin-right: var(--sp1);
-}
-
-[dir="rtl"] .messages__header {
- margin-left: var(--sp1);
-}
-
.messages__header {
flex-shrink: 0;
+ margin-inline-end: var(--sp1);
}
-[dir="ltr"] .messages__header.no-icon {
- margin-right: 0;
-}
-
-[dir="rtl"] .messages__header.no-icon {
- margin-left: 0;
-}
+.messages__header.no-icon {
+ margin-inline-end: 0;
+ }
.messages__content {
overflow: auto; /* Ensure large code blocks can be scrolled to. */
flex: 1;
- padding-top: 0.1875rem;
-}
-
-[dir="ltr"] .messages__button {
- margin-left: var(--sp1);
-}
-
-[dir="rtl"] .messages__button {
- margin-right: var(--sp1);
+ padding-block-start: 0.1875rem;
}
.messages__button {
flex-shrink: 0;
- padding-top: 0.1875rem;
-}
-
-[dir="ltr"] .messages__close {
- padding-left: 0;
-}
-
-[dir="rtl"] .messages__close {
- padding-right: 0;
-}
-
-[dir="ltr"] .messages__close {
- padding-right: 0;
-}
-
-[dir="rtl"] .messages__close {
- padding-left: 0;
+ margin-inline-start: var(--sp1);
+ padding-block-start: 0.1875rem;
}
.messages__close {
position: relative;
width: 1.5625rem;
height: 1.5625rem;
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
vertical-align: top;
border: 0;
@@ -265,14 +171,7 @@
margin: 0;
}
-[dir="ltr"] .js-form-managed-file .messages {
- border-left: solid 0.375rem var(--color--red);
-}
-
-[dir="rtl"] .js-form-managed-file .messages {
- border-right: solid 0.375rem var(--color--red);
-}
-
.js-form-managed-file .messages {
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
+ border-inline-start: solid 0.375rem var(--color--red);
}
diff --git a/core/themes/olivero/css/components/navigation/menu-sidebar.css b/core/themes/olivero/css/components/navigation/menu-sidebar.css
index 6611024408b9ac1295a336c628c12b3dda10d8e9..313169b65c2dbeb375334dad7ccd51840aaf77a9 100644
--- a/core/themes/olivero/css/components/navigation/menu-sidebar.css
+++ b/core/themes/olivero/css/components/navigation/menu-sidebar.css
@@ -35,48 +35,26 @@
margin: 0;
}
-[dir="ltr"] .menu--sidebar .menu__link {
- padding-left: 0;
-}
-
-[dir="rtl"] .menu--sidebar .menu__link {
- padding-right: 0;
-}
-
-[dir="ltr"] .menu--sidebar .menu__link {
- padding-right: 0;
-}
-
-[dir="rtl"] .menu--sidebar .menu__link {
- padding-left: 0;
-}
-
.menu--sidebar .menu__link {
position: relative;
display: block;
- padding-top: var(--sp0-75);
- padding-bottom: var(--sp0-75);
+ padding-block: var(--sp0-75);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
font-family: var(--font-serif);
font-size: 1.125rem;
/* Bottom divider line. */
}
-[dir="ltr"] .menu--sidebar .menu__link:after {
- left: 0;
-}
-
-[dir="rtl"] .menu--sidebar .menu__link:after {
- right: 0;
-}
-
.menu--sidebar .menu__link:after {
position: absolute;
- bottom: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
width: var(--sp4);
height: 0;
content: "";
- border-top: solid 2px var(--color--gray-95);
+ border-block-start: solid 2px var(--color--gray-95);
}
.menu--sidebar .menu__link--link {
diff --git a/core/themes/olivero/css/components/navigation/nav-button-mobile.css b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
index 9171144c077fb4bf0b00e5879ed0a5dbfda694c1..cb6a70c5ef6e78b03086d910d71bf59494db06ac 100644
--- a/core/themes/olivero/css/components/navigation/nav-button-mobile.css
+++ b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
@@ -23,38 +23,6 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .mobile-nav-button {
- margin-left: auto;
-}
-
-[dir="rtl"] .mobile-nav-button {
- margin-right: auto;
-}
-
-[dir="ltr"] .mobile-nav-button {
- margin-right: -0.375rem;
-}
-
-[dir="rtl"] .mobile-nav-button {
- margin-left: -0.375rem;
-}
-
-[dir="ltr"] .mobile-nav-button {
- padding-left: 0.375rem;
-}
-
-[dir="rtl"] .mobile-nav-button {
- padding-right: 0.375rem;
-}
-
-[dir="ltr"] .mobile-nav-button {
- padding-right: 0.375rem;
-}
-
-[dir="rtl"] .mobile-nav-button {
- padding-left: 0.375rem;
-}
-
.mobile-nav-button {
position: relative;
z-index: 505; /* Appear above mobile nav. */
@@ -63,8 +31,11 @@
align-self: center;
width: var(--sp2);
height: var(--sp2);
- padding-top: 0;
- padding-bottom: 0;
+ margin-inline-start: auto;
+ margin-inline-end: -0.375rem;
+ padding-block: 0;
+ padding-inline-start: 0.375rem;
+ padding-inline-end: 0.375rem;
cursor: pointer;
border: none;
background: transparent;
@@ -82,17 +53,10 @@
@media (min-width: 31.25rem) {
-[dir="ltr"] .mobile-nav-button {
- padding-left: var(--sp);
- }
-
-[dir="rtl"] .mobile-nav-button {
- padding-right: var(--sp);
- }
-
.mobile-nav-button {
display: inline-flex;
width: auto;
+ padding-inline-start: var(--sp);
}
}
@@ -110,20 +74,13 @@
@media (min-width: 31.25rem) {
-[dir="ltr"] .mobile-nav-button__label {
- margin-right: 0.75rem;
- }
-
-[dir="rtl"] .mobile-nav-button__label {
- margin-left: 0.75rem;
- }
-
.mobile-nav-button__label {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
+ margin-inline-end: 0.75rem;
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 600;
@@ -138,17 +95,10 @@
border-top: solid 3px var(--color--primary-50);
}
-[dir="ltr"] .mobile-nav-button__icon:before {
- left: 0;
-}
-
-[dir="rtl"] .mobile-nav-button__icon:before {
- right: 0;
-}
-
.mobile-nav-button__icon:before {
position: absolute;
- top: -0.6875rem;
+ inset-block-start: -0.6875rem;
+ inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
@@ -156,18 +106,10 @@
border-top: solid 3px var(--color--primary-50);
}
-[dir="ltr"] .mobile-nav-button__icon:after {
- left: 0;
-}
-
-[dir="rtl"] .mobile-nav-button__icon:after {
- right: 0;
-}
-
.mobile-nav-button__icon:after {
position: absolute;
- top: auto;
- bottom: -0.5rem;
+ inset-block: auto -0.5rem;
+ inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
@@ -180,11 +122,11 @@
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:before {
- top: 0;
+ inset-block-start: 0;
transform: rotate(-45deg);
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:after {
- top: 0;
+ inset-block-start: 0;
transform: rotate(45deg);
}
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-button.css b/core/themes/olivero/css/components/navigation/nav-primary-button.css
index c62a138b447f615541b32faf29bd3a512e81d6f2..462752f685a89c7bc0ab4a470de065eccae676f7 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-button.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-button.css
@@ -23,30 +23,15 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .primary-nav__button-toggle {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__button-toggle {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__button-toggle {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__button-toggle {
- padding-left: 0;
-}
-
.primary-nav__button-toggle {
position: relative;
overflow: hidden;
width: var(--sp2);
height: var(--sp2);
- margin-top: var(--sp0-5); /* Visually align button with menu link text. */
- padding-top: 0;
- padding-bottom: 0;
+ margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
text-indent: -62.4375rem;
border: 0;
@@ -105,18 +90,13 @@
}
@media (min-width: 75rem) {
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
- margin-right: calc(-1 * var(--sp2));
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
- 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-block-start: 0;
+ margin-inline-end: calc(-1 * var(--sp2));
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
@@ -137,15 +117,8 @@
opacity: 0.8;
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
- left: 0.1875rem;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
- right: 0.1875rem;
- }
-
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
+ inset-inline-start: 0.1875rem;
width: 1.125rem;
transform: translateY(-50%);
border-radius: 0.25rem;
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-no-js.css b/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
index 7ad38c9cd3289edbb71c192927c92f63cede9be5..f4a108bc0313a79ab2dfc069e07642ffe3f5c4df 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-no-js.css
@@ -51,38 +51,6 @@
display: none;
}
- html[dir="ltr"]:not(.js) .header-nav {
- margin-left: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- margin-right: var(--sp2);
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- margin-right: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- margin-left: var(--sp2);
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- padding-left: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- padding-right: var(--sp2);
- }
-
- html[dir="ltr"]:not(.js) .header-nav {
- padding-right: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) .header-nav {
- padding-left: var(--sp2);
- }
-
html:not(.js) .header-nav {
border: solid 1px var(--color--gray-95) !important;
}
@@ -93,21 +61,19 @@
flex-basis: 100%;
width: 100%;
max-width: none;
- margin-top: var(--sp2);
- margin-bottom: 0;
- padding-top: var(--sp2);
- padding-bottom: 0;
+ margin-block: var(--sp2) 0;
+ margin-inline-start: var(--sp2);
+ margin-inline-end: var(--sp2);
+ padding-block: var(--sp2) 0;
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
transform: none;
box-shadow: 0 0 36px var(--color--gray-90);
}
- html[dir="ltr"]:not(.js) .primary-nav__menu--level-2 {
- border-left: 0;
- }
-
- html[dir="rtl"]:not(.js) .primary-nav__menu--level-2 {
- border-right: 0;
- }
+ html:not(.js) .primary-nav__menu--level-2 {
+ border-inline-start: 0;
+ }
html:not(.js) .primary-nav__button-toggle {
display: none;
@@ -140,38 +106,6 @@
display: none;
}
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: var(--sp2);
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-right: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- margin-left: var(--sp2);
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: var(--sp2);
- }
-
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-right: var(--sp2);
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
- padding-left: var(--sp2);
- }
-
html:not(.js) body.is-always-mobile-nav .header-nav {
border: solid 1px var(--color--gray-95) !important;
}
@@ -182,21 +116,19 @@
flex-basis: 100%;
width: 100%;
max-width: none;
- margin-top: var(--sp2);
- margin-bottom: 0;
- padding-top: var(--sp2);
- padding-bottom: 0;
+ margin-block: var(--sp2) 0;
+ margin-inline-start: var(--sp2);
+ margin-inline-end: var(--sp2);
+ padding-block: var(--sp2) 0;
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
transform: none;
box-shadow: 0 0 36px var(--color--gray-90);
}
- html[dir="ltr"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
- border-left: 0;
- }
-
- html[dir="rtl"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
- border-right: 0;
- }
+ html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
+ border-inline-start: 0;
+ }
html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
display: none;
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.css
index 11bc11bbf26404c72ef0c48d5f9ffc87e532fdfa..e9ecca5ef0a6c053e8b6ae7f783b4694fb4afd94 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-wide.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.css
@@ -59,14 +59,9 @@
border: solid 2px var(--color--primary-50);
border-radius: 0.25rem;
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-right: 0.5625rem;
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-left: 0.5625rem;
- }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
overflow: visible; /* Necessary to view icon in IE11 */
+ padding-inline-end: 0.5625rem;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus:before {
@@ -79,18 +74,13 @@
}
/* Chevron icon for desktop navigation. */
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
- left: calc(100% - 0.1875rem);
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
- right: calc(100% - 0.1875rem);
- }
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
position: absolute;
- top: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: calc(100% - 0.1875rem);
width: 0.5rem;
height: 0.5rem;
- margin-top: -2px;
+ margin-block-start: -2px;
transform: translateY(-50%) rotate(45deg);
/* Intentionally not using CSS logical properties. */
border-top: 0;
@@ -102,25 +92,10 @@
opacity: 1;
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-left: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-right: 0;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-right: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-left: 0;
- }
-
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
- padding-top: var(--sp2);
- padding-bottom: var(--sp2);
+ padding-block: var(--sp2);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after {
@@ -128,33 +103,10 @@
border-top-width: var(--sp0-5);
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- margin-right: var(--sp);
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
- margin-left: var(--sp);
- }
-
body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
display: flex;
align-items: stretch;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-left: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-right: 0;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-right: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
- margin-left: 0;
+ margin-inline-end: var(--sp);
}
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
@@ -163,41 +115,14 @@
align-items: center;
width: max-content;
max-width: 12.5rem;
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
- margin-right: var(--sp2);
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
- margin-left: var(--sp2);
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- margin-left: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- margin-right: 0;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-left: var(--sp2);
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-right: var(--sp2);
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-right: var(--sp2);
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
- padding-left: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
+ margin-inline-end: var(--sp2);
+ }
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
position: absolute;
@@ -210,9 +135,11 @@
/* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines). */
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));
- margin-top: 0;
- padding-top: calc(3 * var(--sp));
- padding-bottom: calc(3 * var(--sp));
+ margin-block-start: 0;
+ margin-inline-start: 0;
+ padding-block: calc(3 * var(--sp));
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
transition: none;
transform: translate(-50%, -1.25rem);
opacity: 0;
@@ -228,7 +155,7 @@
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible;
- margin-top: 0;
+ margin-block-start: 0;
transform: translate(-50%, 0);
opacity: 1;
}
@@ -244,25 +171,10 @@
transform: none;
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-left: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-right: 0;
- }
-
- [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-right: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-left: 0;
- }
-
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {
diff --git a/core/themes/olivero/css/components/navigation/nav-primary.css b/core/themes/olivero/css/components/navigation/nav-primary.css
index 1b5b88b2dfc606eafdd8cad891ae685e2db5311a..9dbaf9f4f1b63f597f088cf2946b96d8bf2a0e6f 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary.css
@@ -29,11 +29,11 @@
}
.primary-nav__menu-item {
- margin-bottom: var(--sp0-5);
+ margin-block-end: var(--sp0-5);
}
.primary-nav__menu-item:last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
.primary-nav__menu-item.primary-nav__menu-item--has-children {
@@ -66,89 +66,36 @@
outline-offset: 2px;
}
-[dir="ltr"] .primary-nav__menu-link--nolink {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--nolink {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--nolink {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--nolink {
- padding-left: 0;
-}
-
.primary-nav__menu-link--nolink {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
color: var(--color-text-neutral-soft);
font-weight: normal;
}
-[dir="ltr"] .primary-nav__menu-link--button {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--button {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
- padding-left: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--button {
- text-align: left;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
- text-align: right;
-}
-
.primary-nav__menu-link--button {
position: relative;
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
cursor: pointer;
+ text-align: start;
border: 0;
background: transparent;
/* Plus icon for mobile navigation. */
}
-[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-right: var(--sp3);
-}
-
-[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
- padding-left: var(--sp3);
-}
-
-.primary-nav__menu-link--button.primary-nav__menu-link--has-children { /* Ensure text does not overlap icon. */
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children {
+ padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
}
-[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,[dir="ltr"]
- .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
- right: 0.5625rem;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,[dir="rtl"]
- .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
- left: 0.5625rem;
-}
-
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
position: absolute;
- top: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
+ inset-inline-end: 0.5625rem;
+ inset-block-start: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
width: 1.125rem;
height: 0;
content: "";
@@ -165,41 +112,19 @@
opacity: 0;
}
-[dir="ltr"] .primary-nav__menu-link-inner {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link-inner {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link-inner {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link-inner {
- padding-left: 0;
-}
-
.primary-nav__menu-link-inner {
position: relative;
display: inline-flex;
align-items: center;
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
-}
-
-[dir="ltr"] .primary-nav__menu-link-inner:after {
- left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link-inner:after {
- right: 0;
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
.primary-nav__menu-link-inner:after {
position: absolute;
- bottom: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
@@ -218,43 +143,13 @@
Top level specific styles.
*/
-[dir="ltr"] .primary-nav__menu--level-1 {
- margin-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- margin-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
- margin-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- margin-left: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
- padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
- padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
- padding-left: 0;
-}
-
.primary-nav__menu--level-1 {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
.primary-nav__menu-link--level-1 {
@@ -267,65 +162,32 @@
Secondary menu specific styles.
*/
-[dir="ltr"] .primary-nav__menu--level-2 {
- margin-left: calc(-1 * var(--sp));
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- margin-right: calc(-1 * var(--sp));
-}
-
-[dir="ltr"] .primary-nav__menu--level-2 {
- padding-left: var(--sp2-5);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- padding-right: var(--sp2-5);
-}
-
-[dir="ltr"] .primary-nav__menu--level-2 {
- border-left: solid var(--sp) var(--color--primary-50);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- border-right: solid var(--sp) var(--color--primary-50);
-}
-
.primary-nav__menu--level-2 {
visibility: hidden;
overflow: hidden;
flex-basis: 100%;
max-height: 0;
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: calc(-1 * var(--sp));
+ padding-inline-start: var(--sp2-5);
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
opacity: 0;
+ border-inline-start: solid var(--sp) var(--color--primary-50);
}
.primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible;
max-height: none;
- margin-top: var(--sp1-5);
+ margin-block-start: var(--sp1-5);
opacity: 1;
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .primary-nav__menu--level-2 {
- margin-left: calc(-1 * var(--sp3));
- }
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- margin-right: calc(-1 * var(--sp3));
- }
-
-[dir="ltr"] .primary-nav__menu--level-2 {
- padding-left: var(--sp3);
- }
-
-[dir="rtl"] .primary-nav__menu--level-2 {
- padding-right: var(--sp3);
- }
+.primary-nav__menu--level-2 {
+ margin-inline-start: calc(-1 * var(--sp3));
+ padding-inline-start: var(--sp3);
+}
}
/*
diff --git a/core/themes/olivero/css/components/navigation/nav-secondary.css b/core/themes/olivero/css/components/navigation/nav-secondary.css
index 89f88a19241ebf98a7742c2ff665358d08458747..6d8da2f31d6cd469290cc00e4cdefd328540b405 100644
--- a/core/themes/olivero/css/components/navigation/nav-secondary.css
+++ b/core/themes/olivero/css/components/navigation/nav-secondary.css
@@ -29,45 +29,15 @@
font-weight: 600;
}
-[dir="ltr"] .secondary-nav__menu {
- margin-left: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- margin-right: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
- margin-right: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- margin-left: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
- padding-left: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- padding-right: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
- padding-right: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
- padding-left: 0;
-}
-
.secondary-nav__menu {
display: flex;
align-items: center;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
@@ -82,13 +52,9 @@
max-width: 12.5rem;
}
-[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
- margin-right: var(--sp1-5);
-}
-
-[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
- margin-left: var(--sp1-5);
-}
+.secondary-nav__menu-item:not(:last-child) {
+ margin-inline-end: var(--sp1-5);
+ }
.secondary-nav__menu-link {
position: relative;
@@ -119,34 +85,17 @@
}
@media (min-width: 75rem) {
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
- margin-left: var(--sp);
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
- margin-right: var(--sp);
- }
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
- padding-left: var(--sp2);
- }
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
- padding-right: var(--sp2);
- }
body:not(.is-always-mobile-nav) .secondary-nav {
position: relative;
display: flex;
+ margin-inline-start: var(--sp);
+ padding-inline-start: var(--sp2);
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
- left: 0;
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
- right: 0;
- }
-
body:not(.is-always-mobile-nav) .secondary-nav:before {
position: absolute;
- top: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: 0;
width: 2px;
height: var(--sp2);
content: "";
@@ -154,13 +103,9 @@
background-color: var(--color--gray-90);
}
- [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
- margin-right: var(--sp2);
- }
-
- [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
- margin-left: var(--sp2);
- }
+ body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
+ margin-inline-end: var(--sp2);
+ }
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
position: relative;
outline: 0;
diff --git a/core/themes/olivero/css/components/navigation/wide-nav-expand.css b/core/themes/olivero/css/components/navigation/wide-nav-expand.css
index 00003e20bfb0cf4d1ca4f75fdda2053c3c1a2931..1aa3fbda04de8a7626344f2257ecd350cfeb3b29 100644
--- a/core/themes/olivero/css/components/navigation/wide-nav-expand.css
+++ b/core/themes/olivero/css/components/navigation/wide-nav-expand.css
@@ -81,52 +81,30 @@ body.is-always-mobile-nav .wide-nav-expand {
border-top: solid 3px currentColor;
}
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) {
- left: 0;
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) {
- right: 0;
-}
-
.wide-nav-expand__icon > span:nth-child(1) {
position: absolute;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
background-color: currentColor;
}
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) {
- left: 0;
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) {
- right: 0;
-}
-
.wide-nav-expand__icon > span:nth-child(2) {
position: absolute;
- top: 0.5625rem;
+ inset-block-start: 0.5625rem;
+ inset-inline-start: 0;
width: 100%;
height: 0;
transition: opacity 0.2s;
background-color: currentColor;
}
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) {
- left: 0;
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) {
- right: 0;
-}
-
.wide-nav-expand__icon > span:nth-child(3) {
position: absolute;
- top: auto;
- bottom: 0;
+ inset-block: auto 0;
+ inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
@@ -138,7 +116,7 @@ body.is-always-mobile-nav .wide-nav-expand {
}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {
- top: 0.5625rem;
+ inset-block-start: 0.5625rem;
transform: rotate(-45deg);
}
@@ -147,6 +125,6 @@ body.is-always-mobile-nav .wide-nav-expand {
}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {
- top: 0.5625rem;
+ inset-block-start: 0.5625rem;
transform: rotate(45deg);
}
diff --git a/core/themes/olivero/css/components/node-preview-container.css b/core/themes/olivero/css/components/node-preview-container.css
index ccc947bc036d388988a1465463d47a4b1822b283..38961fef7041a9fbe00ee03c4ce1c97bdd7f7f5e 100644
--- a/core/themes/olivero/css/components/node-preview-container.css
+++ b/core/themes/olivero/css/components/node-preview-container.css
@@ -23,25 +23,10 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .node-preview-container {
- padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] .node-preview-container {
- padding-right: var(--sp0-5);
-}
-
-[dir="ltr"] .node-preview-container {
- padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] .node-preview-container {
- padding-left: var(--sp0-5);
-}
-
.node-preview-container {
- padding-top: 0;
- padding-bottom: 0;
+ padding-block: 0;
+ padding-inline-start: var(--sp0-5);
+ padding-inline-end: var(--sp0-5);
background: var(--color--white);
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
}
@@ -60,23 +45,8 @@ body.toolbar-vertical.toolbar-tray-open .node-preview-container {
align-items: center;
}
-[dir="ltr"] .node-preview-backlink {
- margin-left: 0;
-}
-
-[dir="rtl"] .node-preview-backlink {
- margin-right: 0;
-}
-
-[dir="ltr"] .node-preview-backlink {
- margin-right: auto;
-}
-
-[dir="rtl"] .node-preview-backlink {
- margin-left: auto;
-}
-
.node-preview-backlink {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp0-5);
+ margin-inline-start: 0;
+ margin-inline-end: auto;
}
diff --git a/core/themes/olivero/css/components/node-teaser.css b/core/themes/olivero/css/components/node-teaser.css
index 52b69e3e3a34394bffa46dccda163b0a4976dba3..e2bd5e64ed684e5a3e3e08e09afd03443fad81c8 100644
--- a/core/themes/olivero/css/components/node-teaser.css
+++ b/core/themes/olivero/css/components/node-teaser.css
@@ -25,12 +25,12 @@
.node--view-mode-teaser {
position: relative; /* Anchor after pseudo-element. */
- margin-bottom: var(--sp1-5);
+ margin-block-end: var(--sp1-5);
}
.node--view-mode-teaser:after {
position: absolute;
- bottom: 0;
+ inset-block-end: 0;
width: var(--sp3);
height: 0;
content: "";
@@ -39,7 +39,7 @@
}
.node--view-mode-teaser .node__meta {
- margin-bottom: var(--sp);
+ margin-block-end: var(--sp);
}
.node--view-mode-teaser .node__meta a {
@@ -61,18 +61,11 @@
}
}
-[dir="ltr"] .node--view-mode-teaser .primary-image {
- margin-right: var(--sp1);
-}
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
- margin-left: var(--sp1);
-}
-
.node--view-mode-teaser .primary-image {
flex-shrink: 0;
margin: 0;
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
+ margin-inline-end: var(--sp1);
/* Ensure title does not wrap under image until necessary. */
}
@@ -109,24 +102,17 @@
@media (min-width: 62.5rem) {
-[dir="ltr"] .node--view-mode-teaser .primary-image {
- 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))));
- }
-
.node--view-mode-teaser .primary-image {
position: absolute;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
margin: 0;
}
}
.node--view-mode-teaser .node__title {
margin: 0;
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
color: var(--color-text-neutral-loud);
font-size: 1.5rem;
line-height: var(--line-height-base);
@@ -140,60 +126,31 @@
}
}
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- margin-left: 0;
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- margin-right: 0;
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- margin-right: 0;
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- margin-left: 0;
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- padding-left: 0;
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- padding-right: 0;
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
- padding-right: 0;
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
- padding-left: 0;
-}
-
.node--view-mode-teaser .field--tag-ref {
- margin-top: var(--sp1);
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block-start: var(--sp1);
+ margin-block-end: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
background-color: transparent;
}
@media (min-width: 62.5rem) {
.node--view-mode-teaser .field--tag-ref {
- margin-top: var(--sp2);
+ margin-block-start: var(--sp2);
}
}
@media (min-width: 62.5rem) {
.node--view-mode-teaser {
- margin-bottom: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
.views-row:last-child .node--view-mode-teaser {
- margin-bottom: 0;
+ margin-block-end: 0;
}
diff --git a/core/themes/olivero/css/components/node.css b/core/themes/olivero/css/components/node.css
index 93acf6b393775f878da4085d109c762048b8d2cb..ce6a64e2184f011ed0edcf77dfb454025db4c95c 100644
--- a/core/themes/olivero/css/components/node.css
+++ b/core/themes/olivero/css/components/node.css
@@ -26,7 +26,7 @@
.node__meta {
display: flex;
align-items: center;
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
color: var(--color-text-neutral-soft);
font-size: 0.875rem;
line-height: var(--sp);
@@ -39,27 +39,20 @@
@media (min-width: 31.25rem) {
.node__meta {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
}
-[dir="ltr"] .node__author-image img {
- margin-right: var(--sp0-5);
-}
-
-[dir="rtl"] .node__author-image img {
- margin-left: var(--sp0-5);
-}
-
.node__author-image img {
width: var(--sp2-5);
height: var(--sp2-5);
+ margin-inline-end: var(--sp0-5);
object-fit: cover;
border-radius: 50%;
}
.node__title a {
- padding-bottom: 0.1875rem;
+ padding-block-end: 0.1875rem;
transition: background-size 0.2s, color 0.2s;
text-decoration: none;
color: var(--color-text-neutral-loud);
@@ -80,13 +73,13 @@
}
.node__content {
- padding-bottom: var(--sp1-5);
+ padding-block-end: var(--sp1-5);
}
@media (min-width: 62.5rem) {
.node__content {
- padding-bottom: var(--sp3);
+ padding-block-end: var(--sp3);
}
}
diff --git a/core/themes/olivero/css/components/pager.css b/core/themes/olivero/css/components/pager.css
index ba92996478f2bed109d061f18575023d8d1c784f..b0d26ab46c21d2f222e0d41c2546982351f7f55e 100644
--- a/core/themes/olivero/css/components/pager.css
+++ b/core/themes/olivero/css/components/pager.css
@@ -23,38 +23,15 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .pager__items {
- margin-left: 0;
-}
-
-[dir="rtl"] .pager__items {
- margin-right: 0;
-}
-
-[dir="ltr"] .pager__items {
- padding-left: 0;
-}
-
-[dir="rtl"] .pager__items {
- padding-right: 0;
-}
-
-[dir="ltr"] .pager__items {
- padding-right: 0;
-}
-
-[dir="rtl"] .pager__items {
- padding-left: 0;
-}
-
.pager__items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
font-weight: bold;
}
diff --git a/core/themes/olivero/css/components/powered-by-block.css b/core/themes/olivero/css/components/powered-by-block.css
index d480cc3cba0262ff19c3d0026ee7303fb5f2f2e0..90e3c450418308e03fcea389a35504e9ee9cf046 100644
--- a/core/themes/olivero/css/components/powered-by-block.css
+++ b/core/themes/olivero/css/components/powered-by-block.css
@@ -38,17 +38,10 @@
text-decoration: none;
}
-[dir="ltr"] .block-system-powered-by-block .drupal-logo {
- margin-left: calc(var(--sp) / 4);
-}
-
-[dir="rtl"] .block-system-powered-by-block .drupal-logo {
- margin-right: calc(var(--sp) / 4);
-}
-
.block-system-powered-by-block .drupal-logo {
display: inline-block;
- margin-top: calc(-1 * var(--sp) / 4);
+ margin-block-start: calc(-1 * var(--sp) / 4);
+ margin-inline-start: calc(var(--sp) / 4);
}
.block-system-powered-by-block svg {
diff --git a/core/themes/olivero/css/components/progress.css b/core/themes/olivero/css/components/progress.css
index 3719bf22ba27118e740da50edab58292c83255fb..3c1b43f5234f4da4f24c38a45f9665da94cad7f9 100644
--- a/core/themes/olivero/css/components/progress.css
+++ b/core/themes/olivero/css/components/progress.css
@@ -35,10 +35,6 @@
background-color: var(--color--primary-40);
}
-[dir="ltr"] .progress__percentage {
- margin-left: 1rem;
-}
-
-[dir="rtl"] .progress__percentage {
- margin-right: 1rem;
+.progress__percentage {
+ margin-inline-start: 1rem;
}
diff --git a/core/themes/olivero/css/components/search-results.css b/core/themes/olivero/css/components/search-results.css
index 553922c9cd95fbbd3fcb50efd8316d70c0f55af0..6927cf61cd107ee8228324195c53729b5a154bda 100644
--- a/core/themes/olivero/css/components/search-results.css
+++ b/core/themes/olivero/css/components/search-results.css
@@ -23,62 +23,32 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .search-results {
- padding-left: 0;
-}
-
-[dir="rtl"] .search-results {
- padding-right: 0;
-}
-
-[dir="ltr"] .search-results {
- padding-right: 0;
-}
-
-[dir="rtl"] .search-results {
- padding-left: 0;
-}
-
.search-results {
- margin-bottom: var(--sp2);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block-end: var(--sp2);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
@media (min-width: 43.75rem) {
.search-results {
- margin-bottom: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
-[dir="ltr"] .search-result__title {
- margin-left: 0;
-}
-
-[dir="rtl"] .search-result__title {
- margin-right: 0;
-}
-
-[dir="ltr"] .search-result__title {
- margin-right: 0;
-}
-
-[dir="rtl"] .search-result__title {
- margin-left: 0;
-}
-
.search-result__title {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
color: var(--color-text-neutral-loud);
font-size: 1.25rem;
line-height: var(--line-height-base);
}
.search-result__title a {
- padding-bottom: 0.1875rem;
+ padding-block-end: 0.1875rem;
transition: background-size 0.2s, color 0.2s;
text-decoration: none;
background-color: transparent;
@@ -95,7 +65,7 @@
@media (min-width: 62.5rem) {
.search-result__title {
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
font-size: 1.875rem;
line-height: var(--sp3);
}
@@ -106,20 +76,20 @@
}
.search-result__snippet {
- padding-bottom: calc(var(--sp1-5) - 2px);
+ padding-block-end: calc(var(--sp1-5) - 2px);
}
@media (min-width: 62.5rem) {
.search-result__snippet {
- padding-bottom: var(--sp3);
+ padding-block-end: var(--sp3);
}
}
.search-result__meta {
display: flex;
align-items: center;
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
color: var(--color-text-neutral-soft);
font-size: 0.875rem;
line-height: var(--sp);
@@ -132,12 +102,12 @@
.search-results__item {
position: relative; /* Anchor after pseudo-element. */
- margin-bottom: var(--sp1-5);
+ margin-block-end: var(--sp1-5);
}
.search-results__item:after {
position: absolute;
- bottom: 0;
+ inset-block-end: 0;
width: var(--sp3);
height: 0;
content: "";
@@ -146,12 +116,12 @@
}
.search-results__item:last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
@media (min-width: 62.5rem) {
.search-results__item {
- margin-bottom: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
diff --git a/core/themes/olivero/css/components/site-header.css b/core/themes/olivero/css/components/site-header.css
index aa79fa0e6eb3313013ef7c080597384644269098..b240a0adb238cbcda5205ab194f0c7fca1c8f3a9 100644
--- a/core/themes/olivero/css/components/site-header.css
+++ b/core/themes/olivero/css/components/site-header.css
@@ -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-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
}
}
@@ -66,7 +66,7 @@
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
position: fixed;
z-index: 102; /* Appear above body content that is position: relative */
- top: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4));
+ inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4));
max-width: var(--max-bg-color);
}
}
diff --git a/core/themes/olivero/css/components/skip-link.css b/core/themes/olivero/css/components/skip-link.css
index d8970830188a1fcb76aecbdcfa8f4d0db7e08b3a..23a52b2087d06ca3a6525e0ff0116b4494c9d703 100644
--- a/core/themes/olivero/css/components/skip-link.css
+++ b/core/themes/olivero/css/components/skip-link.css
@@ -25,28 +25,13 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .skip-link {
- padding-left: var(--sp);
-}
-
-[dir="rtl"] .skip-link {
- padding-right: var(--sp);
-}
-
-[dir="ltr"] .skip-link {
- padding-right: var(--sp);
-}
-
-[dir="rtl"] .skip-link {
- padding-left: var(--sp);
-}
-
.skip-link {
display: block;
width: 100%;
max-width: var(--max-bg-color);
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
text-decoration: none;
color: var(--color--white);
outline: 0;
diff --git a/core/themes/olivero/css/components/table.css b/core/themes/olivero/css/components/table.css
index 31e06ae21deba4826819f16ec810e9c043e40d9c..9dbf7460412658154f06d1549f10f27edc0a3459 100644
--- a/core/themes/olivero/css/components/table.css
+++ b/core/themes/olivero/css/components/table.css
@@ -27,8 +27,8 @@
.text-content table,
.views-table,
.draggable-table {
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
border-spacing: 0;
color: var(--color-text-neutral-medium);
border: 0;
@@ -38,16 +38,9 @@
line-height: var(--sp1-5);
}
-[dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) caption {
- text-align: left;
-}
-
-[dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) caption {
- text-align: right;
-}
-
:is(.forum table,.text-content table,.views-table,.draggable-table) caption {
- margin-bottom: var(--sp1);
+ margin-block-end: var(--sp1);
+ text-align: start;
color: var(--color-text-neutral-medium);
font-family: var(--font-serif);
font-size: 0.875rem;
@@ -56,62 +49,25 @@
}
:is(.forum table,.text-content table,.views-table,.draggable-table) tr:last-child td {
- border-bottom: 0;
+ border-block-end: 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"] :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"] :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"] :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);
-}
-
: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);
+ padding-block: var(--sp1);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp1);
vertical-align: top;
}
-[dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
- margin-left: 0;
-}
-
-[dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
- margin-right: 0;
-}
-
-[dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
- margin-right: 0;
-}
-
-[dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
- margin-left: 0;
-}
-
-[dir="ltr"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
- text-align: left;
-}
-
-[dir="rtl"] :is(.forum table,.text-content table,.views-table,.draggable-table) th {
- text-align: right;
-}
-
:is(.forum table,.text-content table,.views-table,.draggable-table) th {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ text-align: start;
letter-spacing: 0.02em;
color: var(--color-text-neutral-loud);
- border-bottom: 2px solid var(--color--primary-50);
+ border-block-end: 2px solid var(--color--primary-50);
font-family: var(--font-sans);
font-size: 0.875rem;
line-height: var(--sp);
@@ -119,7 +75,7 @@
:is(.forum table,.text-content table,.views-table,.draggable-table) td {
white-space: normal;
- border-bottom: 2px solid var(--color--gray-65);
+ border-block-end: 2px solid var(--color--gray-65);
}
:is(.forum table,.text-content table,.views-table,.draggable-table) th.checkbox,
@@ -142,7 +98,7 @@
.sticky-header {
z-index: 0;
margin: 0;
- border-bottom: 0.25rem solid var(--color--primary-50);
+ border-block-end: 0.25rem solid var(--color--primary-50);
}
/* Properly align VBO checkboxes. */
diff --git a/core/themes/olivero/css/components/tabledrag.css b/core/themes/olivero/css/components/tabledrag.css
index c41780a73680b042421841f2d4015af3d57668a0..363cbfe05a9a6a8e6d314ac5356ff4172fa60353 100644
--- a/core/themes/olivero/css/components/tabledrag.css
+++ b/core/themes/olivero/css/components/tabledrag.css
@@ -45,12 +45,8 @@ a.tabledrag-handle,
height: 2.25rem;
}
-[dir="ltr"] .draggable a.tabledrag-handle {
- margin-left: 0;
-}
-
-[dir="rtl"] .draggable a.tabledrag-handle {
- margin-right: 0;
+.draggable a.tabledrag-handle {
+ margin-inline-start: 0;
}
a.tabledrag-handle .handle {
@@ -65,25 +61,10 @@ a.tabledrag-handle .handle {
background-position: 50% 5px;
}
-[dir="ltr"] .touchevents .draggable td {
- padding-left: 0;
-}
-
-[dir="rtl"] .touchevents .draggable td {
- padding-right: 0;
-}
-
-[dir="ltr"] .touchevents .draggable td {
- padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] .touchevents .draggable td {
- padding-left: var(--sp0-5);
-}
-
.touchevents .draggable td {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp0-5);
}
.touchevents .draggable .menu-item__link {
diff --git a/core/themes/olivero/css/components/tabs.css b/core/themes/olivero/css/components/tabs.css
index ae09700fcf4601de709e4267000ea5c829dbdc3e..9a7427d9e5edcc9e4e593746c0dca188496fc18f 100644
--- a/core/themes/olivero/css/components/tabs.css
+++ b/core/themes/olivero/css/components/tabs.css
@@ -20,14 +20,6 @@
/* Breakpoint where tabs switch between vertical and horizontal layouts. */
-[dir="ltr"] .tabs {
- margin-left: 0;
-}
-
-[dir="rtl"] .tabs {
- margin-right: 0;
-}
-
.tabs {
--tabs-height: var(--sp3);
--tabs-padding-inline: var(--sp1-5);
@@ -46,7 +38,8 @@
display: flex;
flex-direction: column;
width: 100%;
- margin: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */
+ margin: 0;
+ margin-inline-start: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */
padding: 0;
list-style: none;
}
@@ -62,7 +55,7 @@
.tabs__tab {
display: none;
margin: 0;
- margin-bottom: calc(-1 * var(--tabs-border-width));
+ margin-block-end: calc(-1 * var(--tabs-border-width));
}
.tabs__tab.is-active {
@@ -71,17 +64,10 @@
@media (min-width: 43.75rem) {
-[dir="ltr"] .tabs__tab {
- margin-left: calc(-1 * var(--tabs-border-width));
- }
-
-[dir="rtl"] .tabs__tab {
- margin-right: calc(-1 * var(--tabs-border-width));
- }
-
.tabs__tab {
display: flex;
- margin-bottom: 0;
+ margin-block-end: 0;
+ margin-inline-start: calc(-1 * var(--tabs-border-width));
}
}
@@ -115,10 +101,8 @@ html:not(.js) .tabs__tab {
flex-grow: 1;
align-items: center;
height: var(--tabs-height);
- padding-top: 0;
- padding-bottom: 0;
- padding-left: var(--tabs-padding-inline);
- padding-right: var(--tabs-padding-inline);
+ padding-block: 0;
+ padding-inline: var(--tabs-padding-inline);
transition: background-color var(--tabs-transition-duration);
text-decoration: none;
letter-spacing: var(--tabs-letter-spacing);
@@ -150,45 +134,23 @@ html:not(.js) .tabs__tab {
*/
}
-[dir="ltr"] .tabs__link.is-active:after {
- left: calc(-1 * var(--tabs-border-width));
-}
-
-[dir="rtl"] .tabs__link.is-active:after {
- 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);
-}
-
-[dir="rtl"] .tabs__link.is-active:after {
- border-right: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
-}
-
.tabs__link.is-active:after {
position: absolute;
- top: calc(-1 * var(--tabs-border-width));
+ inset-block-start: calc(-1 * var(--tabs-border-width));
+ inset-inline-start: calc(-1 * var(--tabs-border-width));
height: calc(100% + var(--tabs-border-width) * 2);
content: "";
+ border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .tabs__link.is-active:after {
- border-left: 0;
- }
-
-[dir="rtl"] .tabs__link.is-active:after {
- border-right: 0;
- }
-
.tabs__link.is-active:after {
- top: auto;
- bottom: calc(-1 * var(--tabs-border-width));
+ inset-block: auto 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-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+ border-inline-start: 0;
}
}
@@ -204,23 +166,13 @@ html:not(.js) .tabs__tab {
/* Button that opens and closes primary tabs at narrow viewports. */
-[dir="ltr"] .tabs__trigger {
- margin-left: calc(-1 * var(--tabs-border-width));
- margin-right: 0;
-}
-
-[dir="rtl"] .tabs__trigger {
- margin-right: calc(-1 * var(--tabs-border-width));
- margin-left: 0;
-}
-
.tabs__trigger {
display: flex;
align-items: center;
justify-content: center;
width: var(--tabs-height);
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
+ margin-inline: calc(-1 * var(--tabs-border-width)) 0;
cursor: pointer;
border: solid var(--tabs-border-width) var(--tabs-border-color);
background-color: var(--tabs-background-color);
@@ -254,36 +206,29 @@ html:not(.js) .tabs__trigger {
display: block;
width: var(--sp);
height: 0.625rem;
- margin-top: calc(-2 * var(--tabs-border-width));
-}
-
-[dir="ltr"] .tabs__trigger-icon > span {
- left: 0;
-}
-
-[dir="rtl"] .tabs__trigger-icon > span {
- right: 0;
+ margin-block-start: calc(-2 * var(--tabs-border-width));
}
.tabs__trigger-icon > span {
position: absolute;
+ inset-inline-start: 0;
display: block;
width: 100%;
transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
- border-top: solid 2px var(--tabs-highlight-color);
+ border-block-start: solid 2px var(--tabs-highlight-color);
}
.tabs__trigger-icon > span:nth-child(1) {
- top: 0;
+ inset-block-start: 0;
}
.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(1)) {
- top: calc(50% + 1px);
+ inset-block-start: calc(50% + 1px);
transform: rotate(45deg);
}
.tabs__trigger-icon > span:nth-child(2) {
- top: calc(50% + 1px);
+ inset-block-start: calc(50% + 1px);
}
.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) {
@@ -291,10 +236,10 @@ html:not(.js) .tabs__trigger {
}
.tabs__trigger-icon > span:nth-child(3) {
- top: calc(100% + 2px);
+ inset-block-start: calc(100% + 2px);
}
.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(3)) {
- top: calc(50% + 1px);
+ inset-block-start: calc(50% + 1px);
transform: rotate(-45deg);
}
diff --git a/core/themes/olivero/css/components/tags.css b/core/themes/olivero/css/components/tags.css
index 83b1694b418631ba314c2a157b7deb3e96dff913..2e3f52ee9e62a1e180bc1275ac99245858ce6743 100644
--- a/core/themes/olivero/css/components/tags.css
+++ b/core/themes/olivero/css/components/tags.css
@@ -28,16 +28,9 @@
font-family: var(--font-sans);
}
-[dir="ltr"] .field--tags__label {
- margin-right: calc(var(--sp1-5) - (var(--sp0-5) / 2));
-}
-
-[dir="rtl"] .field--tags__label {
- margin-left: calc(var(--sp1-5) - (var(--sp0-5) / 2));
-}
-
.field--tags__label {
margin: 0;
+ margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2));
letter-spacing: 0.02em;
color: var(--color-text-neutral-soft);
font-size: var(--font-size-s);
@@ -56,89 +49,29 @@
}
}
-[dir="ltr"] .field--label-inline .field--tags__label {
- padding-left: 0;
-}
-
-[dir="rtl"] .field--label-inline .field--tags__label {
- padding-right: 0;
-}
-
-[dir="ltr"] .field--label-inline .field--tags__label {
- padding-right: 0;
-}
-
-[dir="rtl"] .field--label-inline .field--tags__label {
- padding-left: 0;
-}
-
.field--label-inline .field--tags__label {
- padding-top: 0;
- padding-bottom: 0;
-}
-
-[dir="ltr"] .field--tags__items {
- margin-left: calc((var(--sp0-5) / 2) * -1);
-}
-
-[dir="rtl"] .field--tags__items {
- margin-right: calc((var(--sp0-5) / 2) * -1);
-}
-
-[dir="ltr"] .field--tags__items {
- margin-right: calc((var(--sp0-5) / 2) * -1);
-}
-
-[dir="rtl"] .field--tags__items {
- margin-left: calc((var(--sp0-5) / 2) * -1);
-}
-
-[dir="ltr"] .field--tags__items {
- padding-left: 0;
-}
-
-[dir="rtl"] .field--tags__items {
- padding-right: 0;
-}
-
-[dir="ltr"] .field--tags__items {
- padding-right: 0;
-}
-
-[dir="rtl"] .field--tags__items {
- padding-left: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
.field--tags__items {
display: flex;
flex-wrap: wrap;
- margin-top: calc((var(--sp0-5) / 2) * -1);
- margin-bottom: calc((var(--sp0-5) / 2) * -1);
- padding-top: 0;
- padding-bottom: 0;
+ margin-block: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-start: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-end: calc((var(--sp0-5) / 2) * -1);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
list-style: none;
}
-[dir="ltr"] .field--tags__item {
- margin-left: calc(var(--sp0-5) / 2);
-}
-
-[dir="rtl"] .field--tags__item {
- margin-right: calc(var(--sp0-5) / 2);
-}
-
-[dir="ltr"] .field--tags__item {
- margin-right: calc(var(--sp0-5) / 2);
-}
-
-[dir="rtl"] .field--tags__item {
- margin-left: calc(var(--sp0-5) / 2);
-}
-
.field--tags__item {
display: flex;
- margin-top: calc(var(--sp0-5) / 2);
- margin-bottom: calc(var(--sp0-5) / 2);
+ margin-block: calc(var(--sp0-5) / 2);
+ margin-inline-start: calc(var(--sp0-5) / 2);
+ margin-inline-end: calc(var(--sp0-5) / 2);
}
.field--tags__item:nth-last-child(n+2):after {
@@ -159,26 +92,11 @@
line-height: 1.5;
}
-[dir="ltr"] .node--view-mode-full .field--tags {
- padding-left: var(--sp2);
-}
-
-[dir="rtl"] .node--view-mode-full .field--tags {
- padding-right: var(--sp2);
-}
-
-[dir="ltr"] .node--view-mode-full .field--tags {
- padding-right: var(--sp2);
-}
-
-[dir="rtl"] .node--view-mode-full .field--tags {
- padding-left: var(--sp2);
-}
-
.node--view-mode-full .field--tags {
- margin-top: var(--sp4);
- margin-bottom: var(--sp4);
- padding-top: var(--sp1-5);
- padding-bottom: var(--sp1-5);
+ margin-block-start: var(--sp4);
+ margin-block-end: var(--sp4);
+ padding-block: var(--sp1-5);
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
background-color: var(--color--gray-100);
}
diff --git a/core/themes/olivero/css/components/text-content.css b/core/themes/olivero/css/components/text-content.css
index 8485936113e8ccb5e4798cba5ec8cb109819986c..225793ff118eb9888510e3ae756cfbf97d64f1b6 100644
--- a/core/themes/olivero/css/components/text-content.css
+++ b/core/themes/olivero/css/components/text-content.css
@@ -65,23 +65,23 @@
}
.text-content p, .cke_editable p {
- margin-top: var(--sp);
- margin-bottom: var(--sp);
+ margin-block-start: var(--sp);
+ margin-block-end: var(--sp);
}
.text-content p:first-child, .cke_editable p:first-child {
- margin-top: 0;
+ margin-block-start: 0;
}
.text-content p:last-child, .cke_editable p:last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
@media (min-width: 43.75rem) {
.text-content p, .cke_editable p {
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
}
}
@@ -89,101 +89,43 @@
background-color: var(--color--gray-100);
}
-[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
- padding-left: var(--sp);
-}
-
-[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
- padding-right: var(--sp);
-}
-
-[dir="ltr"] .text-content pre code,[dir="ltr"] .cke_editable pre code {
- padding-right: var(--sp);
-}
-
-[dir="rtl"] .text-content pre code,[dir="rtl"] .cke_editable pre code {
- padding-left: var(--sp);
-}
-
.text-content pre code, .cke_editable pre code {
display: block;
overflow: auto;
- padding-top: var(--sp);
- padding-bottom: var(--sp);
+ padding-block: var(--sp);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
color: var(--color-text-neutral-soft);
}
-[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
- margin-left: 0;
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
- margin-right: 0;
-}
-
-[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
- margin-right: 0;
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
- margin-left: 0;
-}
-
-[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {
- padding-left: var(--sp2);
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"] .cke_editable blockquote {
- padding-right: var(--sp2);
-}
-
.text-content blockquote, .cke_editable blockquote {
position: relative;
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
+ margin-block: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-inline-start: var(--sp2);
letter-spacing: -0.01em;
font-family: var(--font-serif);
font-size: 1.3125rem;
line-height: var(--sp2);
}
-[dir="ltr"] .text-content blockquote:before,[dir="ltr"] .cke_editable blockquote:before {
- left: 0;
-}
-
-[dir="rtl"] .text-content blockquote:before,[dir="rtl"] .cke_editable blockquote:before {
- right: 0;
-}
-
.text-content blockquote:before, .cke_editable blockquote:before {
position: absolute;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
content: "\201C";
color: var(--color--primary-60);
font-size: 3.375rem;
}
-[dir="ltr"] .text-content blockquote:after,[dir="ltr"] .cke_editable blockquote:after {
- left: 0;
-}
-
-[dir="rtl"] .text-content blockquote:after,[dir="rtl"] .cke_editable blockquote:after {
- right: 0;
-}
-
-[dir="ltr"] .text-content blockquote:after,[dir="ltr"] .cke_editable blockquote:after {
- margin-left: 0.25rem;
-}
-
-[dir="rtl"] .text-content blockquote:after,[dir="rtl"] .cke_editable blockquote:after {
- margin-right: 0.25rem;
-}
-
.text-content blockquote:after, .cke_editable blockquote:after {
position: absolute;
- bottom: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
width: var(--sp0-5);
height: calc(100% - 1.875rem);
+ margin-inline-start: 0.25rem;
content: "";
background: var(--color--gray-100);
}
diff --git a/core/themes/olivero/css/components/vertical-tabs.css b/core/themes/olivero/css/components/vertical-tabs.css
index dbf7407866e1be59c6a91ca8cabe7ed5f644ad72..56116a605d6bc75277fa07d6d6753ab11fc8c55f 100644
--- a/core/themes/olivero/css/components/vertical-tabs.css
+++ b/core/themes/olivero/css/components/vertical-tabs.css
@@ -35,26 +35,12 @@
}
}
-[dir="ltr"] .vertical-tabs__menu {
- margin-left: 0;
-}
-
-[dir="rtl"] .vertical-tabs__menu {
- margin-right: 0;
-}
-
-[dir="ltr"] .vertical-tabs__menu {
- margin-right: 0;
-}
-
-[dir="rtl"] .vertical-tabs__menu {
- margin-left: 0;
-}
-
.vertical-tabs__menu {
position: relative;
align-self: flex-start;
margin: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
list-style: none;
border-width: var(--vertical-tabs-menu-border-width);
border-style: solid;
@@ -70,14 +56,14 @@
}
.vertical-tabs__panes {
- margin-top: calc(var(--vertical-tabs-menu-border-width) * -1);
+ margin-block-start: 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-block-start: 0;
}
}
@@ -99,29 +85,14 @@
}
.vertical-tabs__menu-item:nth-child(n+2) {
- border-top: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
-}
-
-[dir="ltr"] .vertical-tabs__menu-item a {
- padding-left: var(--sp0-75);
-}
-
-[dir="rtl"] .vertical-tabs__menu-item a {
- padding-right: var(--sp0-75);
-}
-
-[dir="ltr"] .vertical-tabs__menu-item a {
- padding-right: var(--sp0-75);
-}
-
-[dir="rtl"] .vertical-tabs__menu-item a {
- padding-left: var(--sp0-75);
+ border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
}
.vertical-tabs__menu-item a {
display: block;
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp0-75);
+ padding-inline-end: var(--sp0-75);
text-decoration: none;
color: var(--color-text-primary-loud);
background-color: var(--color--gray-95);
@@ -139,21 +110,10 @@
@media (min-width: 62.5rem) {
-[dir="ltr"] .vertical-tabs__menu-item.is-selected {
- margin-right: calc(var(--vertical-tabs-menu-border-width) * -1);
- }
-
-[dir="rtl"] .vertical-tabs__menu-item.is-selected {
- margin-left: calc(var(--vertical-tabs-menu-border-width) * -1);
- }
-
-[dir="ltr"] .vertical-tabs__menu-item.is-selected {
- padding-right: var(--vertical-tabs-menu-border-width);
- }
-
-[dir="rtl"] .vertical-tabs__menu-item.is-selected {
- padding-left: var(--vertical-tabs-menu-border-width);
- }
+.vertical-tabs__menu-item.is-selected {
+ margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1);
+ padding-inline-end: var(--vertical-tabs-menu-border-width);
+}
}
.vertical-tabs__menu-item.is-selected a {
diff --git a/core/themes/olivero/css/components/wide-image.css b/core/themes/olivero/css/components/wide-image.css
index f13c1b94ce9538e509e23288a63afc3109d27900..d745c4889e7cc6af3ff8a4262498ee37d2b14f73 100644
--- a/core/themes/olivero/css/components/wide-image.css
+++ b/core/themes/olivero/css/components/wide-image.css
@@ -23,56 +23,27 @@
/* Width of the entire grid maxes out. */
-[dir="ltr"] .wide-image {
- margin-left: 0;
-}
-
-[dir="rtl"] .wide-image {
- margin-right: 0;
-}
-
-[dir="ltr"] .wide-image {
- margin-right: 0;
-}
-
-[dir="rtl"] .wide-image {
- margin-left: 0;
-}
-
.wide-image {
- margin-top: var(--sp0-5);
- margin-bottom: var(--sp2);
+ margin-block-start: var(--sp0-5);
+ margin-block-end: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
-[dir="ltr"] .wide-image {
- margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
- }
-
-[dir="rtl"] .wide-image {
- 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-block: var(--sp2) var(--sp4);
+ margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
@media (min-width: 62.5rem) {
-[dir="ltr"] .wide-image {
- 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)));
- }
-
.wide-image {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
}
@@ -94,22 +65,8 @@
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
-[dir="ltr"] .layout-builder .wide-image {
- margin-left: 0;
-}
-
-[dir="rtl"] .layout-builder .wide-image {
- margin-right: 0;
-}
-
-[dir="ltr"] .layout-builder .wide-image {
- margin-right: 0;
-}
-
-[dir="rtl"] .layout-builder .wide-image {
- margin-left: 0;
-}
-
.layout-builder .wide-image {
max-width: 100%;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
}
diff --git a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
index 008fea1358c8070be4c4de94460c0c4e0937c529..916ce5ab72378a0daebc6b43522b3ccee64f7261 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
@@ -30,7 +30,7 @@
.layout--fourcol-section > .layout__region {
flex: 1 0 100%;
- margin-bottom: var(--grid-gap);
+ margin-block-end: var(--grid-gap);
}
@media (min-width: 43.75rem) {
@@ -39,7 +39,7 @@
flex-basis: calc(50% - (var(--grid-gap) * 0.5));
flex-grow: 0;
flex-shrink: 0;
- margin-bottom: 0;
+ margin-block-end: 0;
}
}
@@ -48,28 +48,18 @@
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region--first,
.layout--fourcol-section > .layout__region--second {
- margin-bottom: var(--grid-gap);
+ margin-block-end: var(--grid-gap);
}
- [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"]
- .layout--fourcol-section > .layout__region--third {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
-
- [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"]
+ .layout--fourcol-section > .layout__region--first,
.layout--fourcol-section > .layout__region--third {
- 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-inline-end: calc(var(--grid-gap) * 0.5);
+ }
- [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"]
+ .layout--fourcol-section > .layout__region--second,
.layout--fourcol-section > .layout__region--fourth {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
}
/* Four column layout. */
@@ -81,28 +71,19 @@
.layout--fourcol-section > .layout__region--first,
.layout--fourcol-section > .layout__region--second {
- margin-bottom: 0;
+ margin-block-end: 0;
}
- [dir="ltr"] .layout--fourcol-section > .layout__region--first {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
-
- [dir="rtl"] .layout--fourcol-section > .layout__region--first {
- margin-left: calc(var(--grid-gap) * 0.5);
- }
+ .layout--fourcol-section > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
.layout--fourcol-section > .layout__region--second,
.layout--fourcol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap) * 0.5);
- margin-right: calc(var(--grid-gap) * 0.5);
+ margin-inline: calc(var(--grid-gap) * 0.5);
}
- [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
- margin-left: calc(var(--grid-gap) * 0.5);
- }
-
- [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
+ .layout--fourcol-section > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
}
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
index c8a3b229ba2080b3372f3cf568089d2069797b50..2c2c955bfacd31098c98405eade0b51833f0e35a 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
@@ -30,7 +30,7 @@
.layout--threecol-section > .layout__region {
flex: 1 0 100%;
- margin-bottom: var(--grid-gap);
+ margin-block-end: var(--grid-gap);
}
@media (min-width: 62.5rem) {
@@ -38,30 +38,22 @@
.layout--threecol-section > .layout__region {
flex-grow: 0;
flex-shrink: 0;
- margin-bottom: 0;
+ margin-block-end: 0;
}
}
@media (min-width: 62.5rem) {
- [dir="ltr"] .layout--threecol-section > .layout__region--first {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
- [dir="rtl"] .layout--threecol-section > .layout__region--first {
- margin-left: calc(var(--grid-gap) * 0.5);
- }
+ .layout--threecol-section > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
.layout--threecol-section > .layout__region--second {
- margin-left: calc(var(--grid-gap) * 0.5);
- margin-right: calc(var(--grid-gap) * 0.5);
+ margin-inline: calc(var(--grid-gap) * 0.5);
}
- [dir="ltr"] .layout--threecol-section > .layout__region--third {
- margin-left: calc(var(--grid-gap) * 0.5);
- }
-
- [dir="rtl"] .layout--threecol-section > .layout__region--third {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
+ .layout--threecol-section > .layout__region--third {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
.layout--threecol-section--25-50-25 > .layout__region--first,
.layout--threecol-section--25-50-25 > .layout__region--third {
flex-basis: calc(25% - (var(--grid-gap) * 0.5));
diff --git a/core/themes/olivero/css/layout/layout-builder-twocol-section.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
index efebd15417555d43638f6afa7a0ef40426051f34..c930143aee76d1a662dc1558407e93ba58ec74bb 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
@@ -30,7 +30,7 @@
.layout--twocol-section > .layout__region {
flex: 1 0 100%;
- margin-bottom: var(--grid-gap);
+ margin-block-end: var(--grid-gap);
}
@media (min-width: 43.75rem) {
@@ -38,114 +38,54 @@
.layout--twocol-section > .layout__region {
flex-grow: 0;
flex-shrink: 0;
- margin-bottom: 0;
+ margin-block-end: 0;
}
}
@media (min-width: 43.75rem) {
- [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
- [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
- margin-left: calc(var(--grid-gap) * 0.5);
- }
.layout--twocol-section--50-50 > .layout__region--first {
flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
}
- [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-left: calc(var(--grid-gap) * 0.5);
- }
-
- [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
- margin-right: calc(var(--grid-gap) * 0.5);
- }
-
.layout--twocol-section--50-50 > .layout__region--second {
flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
}
- [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-right: calc(var(--grid-gap) * 0.3333);
- }
- [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
- margin-left: calc(var(--grid-gap) * 0.3333);
- }
.layout--twocol-section--33-67 > .layout__region--first {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-end: calc(var(--grid-gap) * 0.3333);
}
- [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-left: calc(var(--grid-gap) * 0.6666);
- }
-
- [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
- margin-right: calc(var(--grid-gap) * 0.6666);
- }
-
.layout--twocol-section--33-67 > .layout__region--second {
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-start: calc(var(--grid-gap) * 0.6666);
}
- [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
- 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);
- }
.layout--twocol-section--67-33 > .layout__region--first {
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-end: calc(var(--grid-gap) * 0.6666);
}
- [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
- 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);
- }
-
.layout--twocol-section--67-33 > .layout__region--second {
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-start: calc(var(--grid-gap) * 0.3333);
}
- [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-right: calc(var(--grid-gap) * 0.25);
- }
- [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
- margin-left: calc(var(--grid-gap) * 0.25);
- }
.layout--twocol-section--25-75 > .layout__region--first {
flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-end: calc(var(--grid-gap) * 0.25);
}
- [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
- 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);
- }
-
.layout--twocol-section--25-75 > .layout__region--second {
flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-start: calc(var(--grid-gap) * 0.75);
}
- [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-right: calc(var(--grid-gap) * 0.75);
- }
- [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
- margin-left: calc(var(--grid-gap) * 0.75);
- }
.layout--twocol-section--75-25 > .layout__region--first {
flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-end: calc(var(--grid-gap) * 0.75);
}
- [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
- 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);
- }
-
.layout--twocol-section--75-25 > .layout__region--second {
flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-start: calc(var(--grid-gap) * 0.25);
}
}
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.css b/core/themes/olivero/css/layout/layout-content-narrow.css
index 68f0dadeb3771e13749c3b30ad80e4f70a9933e7..7e147bcb1faec86f330534bd16d444d20d27593a 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.css
@@ -89,76 +89,42 @@
@media (min-width: 43.75rem) {
-[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--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)));
- }
+.layout--content-narrow.text-content blockquote:before, .layout--pass--content-narrow > *.text-content blockquote:before, .layout--content-narrow .text-content blockquote:before, .layout--pass--content-narrow > * .text-content blockquote:before {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ }
}
@media (min-width: 43.75rem) {
-[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--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--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--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--pass--content-narrow > *.text-content blockquote:after, .layout--content-narrow .text-content blockquote:after, .layout--pass--content-narrow > * .text-content blockquote:after {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
width: var(--sp);
height: calc(100% - 2.8125rem);
+ margin-inline-start: 2px;
}
}
@media (min-width: 43.75rem) {
-[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--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--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-block: var(--sp3);
+ padding-inline-start: 0;
}
}
@media (min-width: 43.75rem) {
.layout--content-narrow.text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > * .text-content pre {
- margin-top: var(--sp3);
- margin-bottom: var(--sp3);
+ margin-block: var(--sp3);
}
}
@media (min-width: 62.5rem) {
-[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--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--pass--content-narrow > *.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > * .text-content pre {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
}
diff --git a/core/themes/olivero/css/layout/layout-discovery-section-layout.css b/core/themes/olivero/css/layout/layout-discovery-section-layout.css
index 43450fbfd48e5b474a5971c81192b16ef4302aec..28ae2d7139953b563876020b7ad013f7496a2437 100644
--- a/core/themes/olivero/css/layout/layout-discovery-section-layout.css
+++ b/core/themes/olivero/css/layout/layout-discovery-section-layout.css
@@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */
.layout {
- margin-bottom: var(--sp);
+ margin-block-end: var(--sp);
}
@media (min-width: 43.75rem) {
.layout {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
}
@media (min-width: 62.5rem) {
.layout {
- margin-bottom: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
diff --git a/core/themes/olivero/css/layout/layout-footer.css b/core/themes/olivero/css/layout/layout-footer.css
index 4cc41086ad34952b1ec96104248d74109757430e..67e2da8ef91b91a5217c50e7df3973e049ee319c 100644
--- a/core/themes/olivero/css/layout/layout-footer.css
+++ b/core/themes/olivero/css/layout/layout-footer.css
@@ -34,36 +34,30 @@
}
.site-footer__inner {
- padding-top: var(--sp2);
- padding-bottom: var(--sp2);
+ padding-block: var(--sp2);
}
@media (min-width: 75rem) {
.site-footer__inner {
- padding-top: var(--sp4);
- padding-bottom: calc(13 * var(--sp));
+ padding-block: var(--sp4) calc(13 * var(--sp));
}
}
.region--footer_top__inner > *, .region--footer_bottom__inner > * {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
@media (min-width: 43.75rem) {
.region--footer_top__inner > *, .region--footer_bottom__inner > * {
flex: 1;
- margin-bottom: 0;
+ margin-block-end: 0;
}
- [dir="ltr"] .region--footer_top__inner > *:not(:last-child),[dir="ltr"] .region--footer_bottom__inner > *:not(:last-child) {
- margin-right: var(--sp2);
- }
-
- [dir="rtl"] .region--footer_top__inner > *:not(:last-child),[dir="rtl"] .region--footer_bottom__inner > *:not(:last-child) {
- margin-left: var(--sp2);
- }
+ .region--footer_top__inner > *:not(:last-child), .region--footer_bottom__inner > *:not(:last-child) {
+ margin-inline-end: var(--sp2);
+ }
}
@media (min-width: 43.75rem) {
diff --git a/core/themes/olivero/css/layout/layout-views-grid.css b/core/themes/olivero/css/layout/layout-views-grid.css
index a58052405539f4efce294559c066b90ad55fc2c0..2b20fe359cc29aee9ef8973f829388a3dc313346 100644
--- a/core/themes/olivero/css/layout/layout-views-grid.css
+++ b/core/themes/olivero/css/layout/layout-views-grid.css
@@ -47,14 +47,14 @@
}
.views-view-grid--vertical {
- margin-bottom: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
+ margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
column-width: var(--views-grid-item--min-width);
column-count: var(--views-grid--column-count);
column-gap: var(--views-grid--layout-gap);
}
.views-view-grid--vertical .views-view-grid__item > * {
- padding-bottom: var(--views-grid--layout-gap);
+ padding-block-end: var(--views-grid--layout-gap);
page-break-inside: avoid;
break-inside: avoid;
}
diff --git a/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css
index 58ce897d3f8aa30ad40f248f03b61350207b876e..a38c4d12aff5a4f4ca3be1eb39799e0a8881e283 100644
--- a/core/themes/olivero/css/layout/layout.css
+++ b/core/themes/olivero/css/layout/layout.css
@@ -26,8 +26,7 @@
.container {
width: 100%;
max-width: var(--max-width);
- padding-left: var(--container-padding);
- padding-right: var(--container-padding);
+ padding-inline: var(--container-padding);
/* This fixes an issue where if the toolbar is open in vertical mode, and
* the mobile navigation is open, the "close" button gets pushed outside of
@@ -66,26 +65,19 @@ body.is-fixed .container {
@media (min-width: 75rem) {
-[dir="ltr"] .main-content {
- margin-right: auto;
- }
-
-[dir="rtl"] .main-content {
- margin-left: auto;
- }
-
.main-content {
width: calc(100% - var(--content-left));
+ margin-inline-end: auto;
}
}
.main-content__container {
- padding-top: var(--sp3);
+ padding-block-start: var(--sp3);
}
@media (min-width: 43.75rem) {
.main-content__container {
- padding-top: var(--sp5);
+ padding-block-start: var(--sp5);
}
}
diff --git a/core/themes/olivero/css/layout/region-content-below.css b/core/themes/olivero/css/layout/region-content-below.css
index 67dfb3e378205d003da6ad53ab7c2791446d852d..de5c9a6fe1802e19611059b20f13a11a5e7e9b79 100644
--- a/core/themes/olivero/css/layout/region-content-below.css
+++ b/core/themes/olivero/css/layout/region-content-below.css
@@ -30,29 +30,17 @@
flex-wrap: wrap;
}
- [dir="ltr"] .region--content-below > * {
- margin-right: var(--grid-gap);
-}
-
- [dir="rtl"] .region--content-below > * {
- margin-left: var(--grid-gap);
-}
-
.region--content-below > * {
flex-basis: calc(50% - (var(--grid-gap) / 2));
flex-grow: 1;
flex-shrink: 0;
+ margin-inline-end: var(--grid-gap);
}
- [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
+ .region--content-below > *:nth-child(2n),
.region--content-below > *:last-child {
- margin-right: 0;
-}
-
- [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"]
- .region--content-below > *:last-child {
- margin-left: 0;
-}
+ margin-inline-end: 0;
+ }
}
@media (min-width: 43.75rem) {
@@ -60,23 +48,13 @@
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
}
- [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"]
+ .region--content-below > *:nth-child(2n),
.region--content-below > *:last-child {
- 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-inline-end: var(--grid-gap);
+ }
- [dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"]
+ .region--content-below > *:nth-child(3n),
.region--content-below > *:last-child {
- margin-right: 0;
-}
-
- [dir="rtl"] .region--content-below > *:nth-child(3n),[dir="rtl"]
- .region--content-below > *:last-child {
- margin-left: 0;
-}
+ margin-inline-end: 0;
+ }
}
diff --git a/core/themes/olivero/css/layout/region-content.css b/core/themes/olivero/css/layout/region-content.css
index 6765571f63a6f0f984801c12a02466045c615faf..1fd9391f106e71fd4b90694d2e80d3b2c0988162 100644
--- a/core/themes/olivero/css/layout/region-content.css
+++ b/core/themes/olivero/css/layout/region-content.css
@@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */
.region--content {
- margin-bottom: var(--sp);
+ margin-block-end: var(--sp);
}
@media (min-width: 43.75rem) {
.region--content {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
}
@media (min-width: 62.5rem) {
.region--content {
- margin-bottom: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
diff --git a/core/themes/olivero/css/layout/region-hero.css b/core/themes/olivero/css/layout/region-hero.css
index 86b1c6866de6affd2a55b1549a18c2d775b7e1d0..45812544c0959294f3feb39a07483fbeabba8629 100644
--- a/core/themes/olivero/css/layout/region-hero.css
+++ b/core/themes/olivero/css/layout/region-hero.css
@@ -24,5 +24,5 @@
/* Width of the entire grid maxes out. */
.region--hero > *:last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
diff --git a/core/themes/olivero/css/layout/region-secondary-menu.css b/core/themes/olivero/css/layout/region-secondary-menu.css
index 1a89f5a8d30cff7d3f3bb5536f46f10b236a38a8..8d0219f3c9858b8002d1fcd13c3c4f9461d9f1ae 100644
--- a/core/themes/olivero/css/layout/region-secondary-menu.css
+++ b/core/themes/olivero/css/layout/region-secondary-menu.css
@@ -25,12 +25,12 @@
.region--secondary-menu {
display: flex;
- margin-top: var(--sp2);
- margin-bottom: var(--sp2);
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
}
.region--secondary-menu > * {
- margin-bottom: 0;
+ margin-block-end: 0;
}
@media (min-width: 75rem) {
diff --git a/core/themes/olivero/css/layout/region.css b/core/themes/olivero/css/layout/region.css
index 55138d93f17feb29519e3ec953999b18796ffbb6..1d06929baf43c94c78da0db0e5035a30bb7a87fb 100644
--- a/core/themes/olivero/css/layout/region.css
+++ b/core/themes/olivero/css/layout/region.css
@@ -24,19 +24,19 @@
/* Width of the entire grid maxes out. */
.region > * {
- margin-bottom: var(--sp);
+ margin-block-end: var(--sp);
}
@media (min-width: 43.75rem) {
.region > * {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
}
@media (min-width: 62.5rem) {
.region > * {
- margin-bottom: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
diff --git a/core/themes/olivero/css/layout/social-bar.css b/core/themes/olivero/css/layout/social-bar.css
index 71687b4ec71b458ae424765af0a0f1c71294a23f..a908d6d3a9e1d5ee001910f58ee94ae5c8d78fe7 100644
--- a/core/themes/olivero/css/layout/social-bar.css
+++ b/core/themes/olivero/css/layout/social-bar.css
@@ -33,70 +33,33 @@
}
}
-[dir="ltr"] .social-bar__inner {
- padding-left: var(--sp);
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-right: var(--sp);
-}
-
-[dir="ltr"] .social-bar__inner {
- padding-right: var(--sp);
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-left: var(--sp);
-}
-
.social-bar__inner {
position: relative;
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
}
@media (min-width: 75rem) {
-[dir="ltr"] .social-bar__inner {
- padding-left: 0;
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-right: 0;
-}
-
-[dir="ltr"] .social-bar__inner {
- padding-right: 0;
-}
-
-[dir="rtl"] .social-bar__inner {
- padding-left: 0;
-}
-
.social-bar__inner {
position: relative;
width: var(--content-left);
- padding-top: calc(5 * var(--sp));
- padding-bottom: calc(5 * var(--sp));
-}
-
- [dir="ltr"] .social-bar__inner.is-fixed {
- left: 0;
-}
-
- [dir="rtl"] .social-bar__inner.is-fixed {
- right: 0;
+ padding-block: calc(5 * var(--sp));
+ padding-inline-start: 0;
+ padding-inline-end: 0;
}
.social-bar__inner.is-fixed {
position: fixed;
- top: var(--sp6);
+ inset-block-start: var(--sp6);
+ inset-inline-start: 0;
height: calc(100vh - 6 * var(--sp));
}
}
.rotate > * {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
@media (min-width: 75rem) {
@@ -104,56 +67,32 @@
.rotate > * {
display: flex;
align-items: center;
- margin-bottom: 0;
+ margin-block-end: 0;
}
- [dir="ltr"] .rotate > *:not(:first-child) {
- margin-right: var(--sp2);
-}
-
- [dir="rtl"] .rotate > *:not(:first-child) {
- margin-left: var(--sp2);
-}
+ .rotate > *:not(:first-child) {
+ margin-inline-end: var(--sp2);
+ }
}
@media (min-width: 75rem) {
-[dir="ltr"] .rotate .contextual {
- left: 100%;
- right: auto;
-}
-
-[dir="rtl"] .rotate .contextual {
- right: 100%;
- left: auto;
-}
-
.rotate .contextual {
+ inset-inline: 100% auto;
transform: rotate(90deg); /* LTR */
transform-origin: top left; /* LTR */
}
- [dir="ltr"] .rotate .contextual .trigger {
- float: left;
-}
-
- [dir="rtl"] .rotate .contextual .trigger {
- float: right;
-}
+ .rotate .contextual .trigger {
+ float: inline-start;
+ }
}
@media (min-width: 75rem) {
-[dir="ltr"] .rotate {
- left: 50%;
-}
-
-[dir="rtl"] .rotate {
- right: 50%;
-}
-
.rotate {
position: absolute;
+ inset-inline-start: 50%;
display: flex;
flex-direction: row-reverse;
width: 100vh;
diff --git a/core/themes/olivero/css/layout/views.css b/core/themes/olivero/css/layout/views.css
index 135d635753dcd7df648470888f3e0f389d16a2f9..5dd4c1867225bf0cf6c023fc741ab032364af01a 100644
--- a/core/themes/olivero/css/layout/views.css
+++ b/core/themes/olivero/css/layout/views.css
@@ -24,16 +24,16 @@
/* Width of the entire grid maxes out. */
.view > * {
- margin-bottom: var(--sp2);
+ margin-block-end: var(--sp2);
}
.view > *:last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
@media (min-width: 43.75rem) {
.view > * {
- margin-bottom: var(--sp3);
+ margin-block-end: var(--sp3);
}
}
diff --git a/core/themes/olivero/css/theme/filter.theme.css b/core/themes/olivero/css/theme/filter.theme.css
index c7987c77565d0c3e3ce80655af8052c4117fd917..132478f0ab91786a99980a7a8f788d9dacf6269d 100644
--- a/core/themes/olivero/css/theme/filter.theme.css
+++ b/core/themes/olivero/css/theme/filter.theme.css
@@ -28,7 +28,7 @@
*/
.text-full > .form-item {
- margin-bottom: 0;
+ margin-block-end: 0;
}
.form-element--editor-format {
@@ -36,25 +36,16 @@
}
.filter-wrapper {
- margin-top: var(--sp1);
- margin-bottom: var(--sp0-5);
+ margin-block: var(--sp1) var(--sp0-5);
}
.filter-wrapper .form-item {
margin: 0;
}
-[dir="ltr"] .filter-help {
- float: right;
-}
-
-[dir="rtl"] .filter-help {
- float: left;
-}
-
.filter-help {
- padding-top: var(--sp0-5);
- padding-bottom: var(--sp0-5);
+ float: inline-end;
+ padding-block: var(--sp0-5);
font-size: var(--font-size-xxs);
}
@@ -65,8 +56,7 @@
*/
.compose-tips__item {
- margin-top: var(--sp1-5);
- margin-bottom: var(--sp1-5);
+ margin-block: var(--sp1-5);
}
/**
@@ -74,14 +64,13 @@
*/
.filter-guidelines__item {
- margin-top: var(--sp1);
+ margin-block-start: var(--sp1);
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
.filter-guidelines p {
- margin-top: var(--sp0-25);
- margin-bottom: 0;
+ margin-block: var(--sp0-25) 0;
}
/**
@@ -92,16 +81,14 @@
*/
.filter-tips--long {
- margin-bottom: var(--sp1-5);
+ margin-block-end: var(--sp1-5);
}
.filter-tips__item,
.filter-tips--long p {
- margin-top: var(--sp0-75);
- margin-bottom: var(--sp0-75);
+ margin-block: var(--sp0-75);
}
.filter-tips__item--short {
- margin-top: var(--sp0-25);
- margin-bottom: 0;
+ margin-block: var(--sp0-25) 0;
}
diff --git a/core/yarn.lock b/core/yarn.lock
index ed0d03c15fe5d288060fd26af850cab154814084..06b94528b5dad260867d1f38cfa8e84c13eca1f0 100644
--- a/core/yarn.lock
+++ b/core/yarn.lock
@@ -1376,15 +1376,10 @@ camelcase@^6.0.0, camelcase@^6.2.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
-caniuse-lite@^1.0.30001370:
- version "1.0.30001390"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz#158a43011e7068ef7fc73590e9fd91a7cece5e7f"
- integrity sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==
-
-caniuse-lite@^1.0.30001394:
- version "1.0.30001397"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001397.tgz#010d9d56e3b8abcd8df261d0a94b22426271a15f"
- integrity sha512-SW9N2TbCdLf0eiNDRrrQXx2sOkaakNZbCjgNpPyMJJbiOrU5QzMIrXOVMRM1myBXTD5iTkdrtU/EguCrBocHlA==
+caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001394:
+ version "1.0.30001412"
+ resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001412.tgz"
+ integrity sha512-+TeEIee1gS5bYOiuf+PS/kp2mrXic37Hl66VY6EAfxasIk5fELTktK2oOezYed12H8w7jt3s512PpulQidPjwA==
chai-nightwatch@0.5.3:
version "0.5.3"