Verified Commit d8e3d8c9 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

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
parent e3a964b0

core/themes/claro/css/base/variables.css

+0 −1
Original line number Diff line number Diff line
@@ -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

+0 −1
Original line number Diff line number Diff line
@@ -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

+21 −40
Original line number Diff line number Diff line
@@ -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

+26 −42
Original line number Diff line number Diff line
@@ -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,24 +131,23 @@ 


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



  @nest [dir="rtl"] & {

    transform: rotate(-270deg);

  }

}



@media (prefers-reduced-motion: reduce) {

  .claro-details__summary::before {
@@ -172,15 +161,15 @@ 
    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 {

    @nest [dir="rtl"] & {

      transform: rotate(-225deg);

    }

  }

}



/**

 * Safari (at least version 12.1) cannot handle our details marker
@@ -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,12 +308,11 @@ 
  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 {



  @nest [dir="rtl"] & {

    border-width: 0 var(--details-summary-focus-border-size) 0 0;

  }

}



.claro-details__summary:focus::after,

.claro-details__summary:active::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);