Unverified Commit 7a61f4e9 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3312586 by Gauravvvv, smustgrave: Refactor Claro's accordion stylesheet... 

Issue #3312586 by Gauravvvv, smustgrave: Refactor Claro's accordion stylesheet to take advantage of component-level custom properties
parent 60cce592

core/themes/claro/css/components/accordion.css

+21 −10
Original line number Diff line number Diff line
@@ -11,22 +11,31 @@ 
 */



.accordion {

  color: var(--color-text);

  border: var(--details-border-size) solid var(--details-border-color);

  border-radius: var(--details-accordion-border-size-radius);

  background-color: var(--color-white);

  box-shadow: var(--details-box-shadow);

  --accordion-color: var(--color-text);

  --accordion-border-size: var(--details-border-size);

  --accordion-border-color: var(--details-border-color);

  --accordion-border-radius: var(--details-accordion-border-size-radius);

  --accordion-bg-color: var(--color-white);

  --accordion-box-shadow: var(--details-box-shadow);



  color: var(--accordion-color);

  border: var(--accordion-border-size) solid var(--accordion-border-color);

  border-radius: var(--accordion-border-radius);

  background-color: var(--accordion-bg-color);

  box-shadow: var(--accordion-box-shadow);

}



.accordion__item {

  --accordion-item-border-radius: var(--details-accordion-border-size-radius);



  margin: 0 -1px;

  border-radius: 0;

}



.accordion__item:first-child {

  margin-top: -1px;

  border-top-left-radius: var(--details-accordion-border-size-radius);

  border-top-right-radius: var(--details-accordion-border-size-radius);

  border-top-left-radius: var(--accordion-item-border-radius);

  border-top-right-radius: var(--accordion-item-border-radius);

}



.accordion__item + .accordion__item {
@@ -35,12 +44,14 @@ 


.accordion__item:last-child {

  margin-bottom: -1px;

  border-bottom-right-radius: var(--details-accordion-border-size-radius);

  border-bottom-left-radius: var(--details-accordion-border-size-radius);

  border-bottom-right-radius: var(--accordion-item-border-radius);

  border-bottom-left-radius: var(--accordion-item-border-radius);

}



.accordion__item .claro-details__summary .summary {

  --accordion-summary-color: var(--color-gray-800);



  display: block;

  color: var(--color-gray-800);

  color: var(--accordion-summary-color);

  font-weight: normal;

}

core/themes/claro/css/components/accordion.pcss.css

+21 −10
Original line number Diff line number Diff line
@@ -4,21 +4,30 @@ 
 */



.accordion {

  color: var(--color-text);

  border: var(--details-border-size) solid var(--details-border-color);

  border-radius: var(--details-accordion-border-size-radius);

  background-color: var(--color-white);

  box-shadow: var(--details-box-shadow);

  --accordion-color: var(--color-text);

  --accordion-border-size: var(--details-border-size);

  --accordion-border-color: var(--details-border-color);

  --accordion-border-radius: var(--details-accordion-border-size-radius);

  --accordion-bg-color: var(--color-white);

  --accordion-box-shadow: var(--details-box-shadow);



  color: var(--accordion-color);

  border: var(--accordion-border-size) solid var(--accordion-border-color);

  border-radius: var(--accordion-border-radius);

  background-color: var(--accordion-bg-color);

  box-shadow: var(--accordion-box-shadow);

}



.accordion__item {

  --accordion-item-border-radius: var(--details-accordion-border-size-radius);



  margin: 0 -1px;

  border-radius: 0;



  &:first-child {

    margin-top: -1px;

    border-top-left-radius: var(--details-accordion-border-size-radius);

    border-top-right-radius: var(--details-accordion-border-size-radius);

    border-top-left-radius: var(--accordion-item-border-radius);

    border-top-right-radius: var(--accordion-item-border-radius);

  }



  & + .accordion__item {
@@ -27,13 +36,15 @@ 


  &:last-child {

    margin-bottom: -1px;

    border-bottom-right-radius: var(--details-accordion-border-size-radius);

    border-bottom-left-radius: var(--details-accordion-border-size-radius);

    border-bottom-right-radius: var(--accordion-item-border-radius);

    border-bottom-left-radius: var(--accordion-item-border-radius);

  }



  & .claro-details__summary .summary {

    --accordion-summary-color: var(--color-gray-800);



    display: block;

    color: var(--color-gray-800);

    color: var(--accordion-summary-color);

    font-weight: normal;

  }

}