Issue #3303544 by Gauravvvv, Aditya4478, finnsky, Stanzin, vsujeetkumar,...

Issue #3303544 by Gauravvvv, Aditya4478, finnsky, Stanzin, vsujeetkumar, Santosh_Verma, Sakthivel M, Nitin shrivastava, lauriii, smustgrave, sasanikolic: Refactor Claro's details stylesheet

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);

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);

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");

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);