Commit ab4a24f9 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3269341 by mherchel, KurtTrowbridge: Claro <details> element not... 

Issue #3269341 by mherchel, KurtTrowbridge: Claro <details> element not rendering properly in forced colors
parent a163e713

core/themes/claro/css/components/details.css

+5 −6
Original line number Diff line number Diff line
@@ -169,15 +169,14 @@ 
  }

}



@media screen and (-ms-high-contrast: active) {

@media (forced-colors: active) {

  .claro-details__summary::before {

    width: 0.5625rem;

    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: 0.125rem solid;

    border-bottom-color: transparent;

    border-left-color: transparent;

    border-top: 0.125rem solid;

    border-right: 0.125rem solid;

    background: none;

  }
@@ -291,7 +290,7 @@ 
  transform: rotate(-90deg); /* for LTR and RTL */

}



@media screen and (-ms-high-contrast: active) {

@media (forced-colors: active) {

  .claro-details__summary:hover::before,

  .claro-details__summary:hover:focus::before {

    background: none;
@@ -559,7 +558,7 @@ 
  font-weight: normal;

}



@media screen and (-ms-high-contrast: active) {

@media (forced-colors: active) {

  .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,

  .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,

  .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {

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

+5 −6
Original line number Diff line number Diff line
@@ -155,15 +155,14 @@ 
  }

}



@media screen and (-ms-high-contrast: active) {

@media (forced-colors: active) {

  .claro-details__summary::before {

    width: 0.5625rem;

    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: 0.125rem solid;

    border-bottom-color: transparent;

    border-left-color: transparent;

    border-top: 0.125rem solid;

    border-right: 0.125rem solid;

    background: none;

  }
@@ -272,7 +271,7 @@ 
  transform: rotate(-90deg); /* for LTR and RTL */

}



@media screen and (-ms-high-contrast: active) {

@media (forced-colors: active) {

  .claro-details__summary:hover::before,

  .claro-details__summary:hover:focus::before {

    background: none;
@@ -528,7 +527,7 @@ 
  font-weight: normal;

}



@media screen and (-ms-high-contrast: active) {

@media (forced-colors: active) {

  .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,

  .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,

  .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {