diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 327c8b9ba971037df6bc152b63df99fec0f9086b..285ad935e9829cd7e138107ac4166d7d52379663 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -162,7 +162,6 @@
/*
* Details.
*/
- --details-bg-color: rgba(243, 244, 249, 0.4);
--details-border-color: var(--color-gray-100);
--details-summary-shadow-color: var(--color-focus);
--details-summary-focus-border-size: var(--focus-border-size);
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 0db1ec674afea277a764f0aacac94ba561642cf0..3bfbb4f07fa138fb199e220858986838f76784ab 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -156,7 +156,6 @@
/*
* Details.
*/
- --details-bg-color: rgba(243, 244, 249, 0.4);
--details-border-color: var(--color-gray-100);
--details-summary-shadow-color: var(--color-focus);
--details-summary-focus-border-size: var(--focus-border-size);
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 2a1935a5ce319f9b70effe7555538588a522564e..0ec13ef256cfa50733d9ca0b6ec983958ea2aef8 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -43,8 +43,7 @@
.claro-details {
display: block;
- margin-top: var(--space-m);
- margin-bottom: var(--space-m);
+ margin-block: var(--space-m);
color: var(--color-text);
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--details-border-size-radius);
@@ -66,8 +65,7 @@ td .claro-details {
.claro-details--accordion-item,
.claro-details--vertical-tabs-item {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
border-radius: 0;
box-shadow: none;
}
@@ -89,7 +87,8 @@ td .claro-details {
.claro-details__summary {
position: relative;
box-sizing: border-box;
- padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
+ padding-block: var(--space-m);
+ padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
list-style: none;
cursor: pointer;
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
@@ -102,28 +101,17 @@ td .claro-details {
line-height: var(--space-m);
}
-[dir="rtl"] .claro-details__summary {
- padding-right: var(--details-desktop-wrapper-padding-start);
- padding-left: var(--space-m);
-}
-
/* Modifiers */
.claro-details__summary--accordion,
.claro-details__summary--accordion-item,
.claro-details__summary--vertical-tabs-item {
- padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
+ padding-block: var(--summary-accordion-padding-vertical);
+ padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
background: var(--color-white);
line-height: var(--summary-accordion-line-height);
}
-[dir="rtl"] .claro-details__summary--accordion,
-[dir="rtl"] .claro-details__summary--accordion-item,
-[dir="rtl"] .claro-details__summary--vertical-tabs-item {
- padding-right: var(--details-desktop-wrapper-padding-start);
- padding-left: var(--space-l);
-}
-
/**
* Accordion list items must not have border radius except they are the first
* or the last ones.
@@ -155,23 +143,21 @@ td .claro-details {
.claro-details__summary::before {
position: absolute;
- top: 50%;
- left: var(--space-s); /* LTR */
+ inset-block-start: 50%;
+ inset-inline-start: var(--space-s);
display: inline-block;
width: var(--space-m);
height: var(--space-m);
- margin-top: calc(var(--space-m) / -2);
+ margin-block-start: calc(var(--space-m) / -2);
content: "";
transition: transform var(--details-transform-transition-duration) ease-in 0s;
- transform: rotate(90deg); /* LTR */
+ transform: rotate(90deg);
text-align: center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
background-size: contain;
}
[dir="rtl"] .claro-details__summary::before {
- right: var(--space-s);
- left: auto;
transform: rotate(-270deg);
}
@@ -189,11 +175,10 @@ td .claro-details {
transform var(--details-transform-transition-duration) ease-in 0s,
margin var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(135deg); /* LTR */
- border-top: 0.125rem solid;
- border-right: 0.125rem solid;
+ border-block-start: 0.125rem solid;
+ border-inline-end: 0.125rem solid;
background: none;
}
-
[dir="rtl"] .claro-details__summary::before {
transform: rotate(-225deg);
}
@@ -232,10 +217,7 @@ td .claro-details {
.claro-details__summary::after {
position: absolute;
- top: -1px;
- right: -1px;
- bottom: -1px;
- left: -1px;
+ inset: -1px;
content: "";
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
@@ -312,8 +294,8 @@ td .claro-details {
.claro-details[open] > .claro-details__summary::before,
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
- margin-top: calc(0.125rem / -2);
- margin-right: 0.125rem;
+ margin-block-start: calc(0.125rem / -2);
+ margin-inline-end: 0.125rem;
transform: rotate(-45deg); /* for LTR and RTL */
background: none;
}
@@ -322,7 +304,7 @@ td .claro-details {
.claro-details[open] > .claro-details__summary--accordion,
.claro-details[open] > .claro-details__summary--accordion-item,
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--details-box-shadow);
}
.claro-details__summary:hover {
@@ -347,9 +329,9 @@ td .claro-details {
box-shadow: none;
}
-[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
-[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
-[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
+[dir="rtl"] :is([open] > .claro-details__summary--accordion:not(:focus, :active)::after),
+[dir="rtl"] :is([open] > .claro-details__summary--accordion-item:not(:focus, :active)::after),
+[dir="rtl"] :is([open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after) {
border-width: 0 var(--details-summary-focus-border-size) 0 0;
}
@@ -454,7 +436,7 @@ td .claro-details {
/* Description. */
.claro-details__description {
- margin-bottom: var(--space-m);
+ margin-block-end: var(--space-m);
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
@@ -475,8 +457,7 @@ td .claro-details {
display: inline-block;
width: 0.4375rem;
height: 0.4375rem;
- margin-right: 0.3em;
- margin-left: 0.3em;
+ margin-inline: 0.3em;
content: "";
vertical-align: super;
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23e00'/%3e%3c/svg%3e");
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 9a9453334339d5322e27b721bb3ecdd4e398b56a..7e7afd803f06de7ec005c7c84f4e10381db588ea 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -36,8 +36,7 @@
.claro-details {
display: block;
- margin-top: var(--space-m);
- margin-bottom: var(--space-m);
+ margin-block: var(--space-m);
color: var(--color-text);
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--details-border-size-radius);
@@ -58,8 +57,7 @@
.claro-details--accordion-item,
.claro-details--vertical-tabs-item {
- margin-top: 0;
- margin-bottom: 0;
+ margin-block: 0;
border-radius: 0;
box-shadow: none;
}
@@ -81,7 +79,8 @@
.claro-details__summary {
position: relative;
box-sizing: border-box;
- padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
+ padding-block: var(--space-m);
+ padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
list-style: none;
cursor: pointer;
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
@@ -92,25 +91,16 @@
background-color: transparent;
line-height: var(--space-m);
}
-[dir="rtl"] .claro-details__summary {
- padding-right: var(--details-desktop-wrapper-padding-start);
- padding-left: var(--space-m);
-}
/* Modifiers */
.claro-details__summary--accordion,
.claro-details__summary--accordion-item,
.claro-details__summary--vertical-tabs-item {
- padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
+ padding-block: var(--summary-accordion-padding-vertical);
+ padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
background: var(--color-white);
line-height: var(--summary-accordion-line-height);
}
-[dir="rtl"] .claro-details__summary--accordion,
-[dir="rtl"] .claro-details__summary--accordion-item,
-[dir="rtl"] .claro-details__summary--vertical-tabs-item {
- padding-right: var(--details-desktop-wrapper-padding-start);
- padding-left: var(--space-l);
-}
/**
* Accordion list items must not have border radius except they are the first
@@ -141,23 +131,22 @@
.claro-details__summary::before {
position: absolute;
- top: 50%;
- left: var(--space-s); /* LTR */
+ inset-block-start: 50%;
+ inset-inline-start: var(--space-s);
display: inline-block;
width: var(--space-m);
height: var(--space-m);
- margin-top: calc(var(--space-m) / -2);
+ margin-block-start: calc(var(--space-m) / -2);
content: "";
transition: transform var(--details-transform-transition-duration) ease-in 0s;
- transform: rotate(90deg); /* LTR */
+ transform: rotate(90deg);
text-align: center;
background-image: url(../../images/icons/545560/chevron-right.svg);
background-size: contain;
-}
-[dir="rtl"] .claro-details__summary::before {
- right: var(--space-s);
- left: auto;
- transform: rotate(-270deg);
+
+ @nest [dir="rtl"] & {
+ transform: rotate(-270deg);
+ }
}
@media (prefers-reduced-motion: reduce) {
@@ -172,13 +161,13 @@
height: 0.5625rem;
transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(135deg); /* LTR */
- border-top: 0.125rem solid;
- border-right: 0.125rem solid;
+ border-block-start: 0.125rem solid;
+ border-inline-end: 0.125rem solid;
background: none;
- }
- [dir="rtl"] .claro-details__summary::before {
- transform: rotate(-225deg);
+ @nest [dir="rtl"] & {
+ transform: rotate(-225deg);
+ }
}
}
@@ -212,10 +201,7 @@
*/
.claro-details__summary::after {
position: absolute;
- top: -1px;
- right: -1px;
- bottom: -1px;
- left: -1px;
+ inset: -1px;
content: "";
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
@@ -290,8 +276,8 @@
.claro-details[open] > .claro-details__summary::before,
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
- margin-top: calc(0.125rem / -2);
- margin-right: 0.125rem;
+ margin-block-start: calc(0.125rem / -2);
+ margin-inline-end: 0.125rem;
transform: rotate(-45deg); /* for LTR and RTL */
background: none;
}
@@ -300,7 +286,7 @@
.claro-details[open] > .claro-details__summary--accordion,
.claro-details[open] > .claro-details__summary--accordion-item,
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--details-box-shadow);
}
.claro-details__summary:hover {
@@ -322,11 +308,10 @@
border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
box-shadow: none;
-}
-[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
-[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
-[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
- border-width: 0 var(--details-summary-focus-border-size) 0 0;
+
+ @nest [dir="rtl"] & {
+ border-width: 0 var(--details-summary-focus-border-size) 0 0;
+ }
}
.claro-details__summary:focus::after,
@@ -424,7 +409,7 @@
/* Description. */
.claro-details__description {
- margin-bottom: var(--space-m);
+ margin-block-end: var(--space-m);
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
@@ -444,8 +429,7 @@
display: inline-block;
width: 0.4375rem;
height: 0.4375rem;
- margin-right: 0.3em;
- margin-left: 0.3em;
+ margin-inline: 0.3em;
content: "";
vertical-align: super;
background-image: url(../../images/core/ee0000/required.svg);