diff options
| author | Cristina Chumillas <ckrina@1206650.no-reply.drupal.org> | 2022-04-12 16:20:02 +0200 |
|---|---|---|
| committer | Lauri Eskola <lauri.eskola@acquia.com> | 2022-04-22 15:19:13 +0300 |
| commit | 4630d6ff36b76d795d7962e6cb15a1cda530e145 (patch) | |
| tree | 6e1d1afd708f4be120629756b9943eeb298427fa | |
| parent | e45b373b8322daf0c335463dfc835fa227d4b5ef (diff) | |
| download | drupal-4630d6ff36b76d795d7962e6cb15a1cda530e145.tar.gz drupal-4630d6ff36b76d795d7962e6cb15a1cda530e145.zip | |
Issue #3269341 by mherchel, KurtTrowbridge: Claro <details> element not rendering properly in forced colors
(cherry picked from commit a64c04c2771f41bd659046f9431de1e074dbb835)
| -rw-r--r-- | core/themes/claro/css/components/details.css | 11 | ||||
| -rw-r--r-- | core/themes/claro/css/components/details.pcss.css | 11 |
2 files changed, 10 insertions, 12 deletions
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css index cc0808bcd0b3..0bb98c790691 100644 --- a/core/themes/claro/css/components/details.css +++ b/core/themes/claro/css/components/details.css @@ -164,15 +164,14 @@ } } -@media screen and (-ms-high-contrast: active) { +@media (-ms-high-contrast: active), (forced-colors: active) { .claro-details__summary::before { width: 0.5625rem; height: 0.5625rem; transition: transform 0.12s ease-in 0s, margin 0.12s 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; } @@ -286,7 +285,7 @@ transform: rotate(-90deg); /* for LTR and RTL */ } -@media screen and (-ms-high-contrast: active) { +@media (-ms-high-contrast: active), (forced-colors: active) { .claro-details__summary:hover::before, .claro-details__summary:hover:focus::before { background: none; @@ -554,7 +553,7 @@ font-weight: normal; } -@media screen and (-ms-high-contrast: active) { +@media (-ms-high-contrast: active), (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 { diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css index d34e44d9075f..6e1e5dc73378 100644 --- a/core/themes/claro/css/components/details.pcss.css +++ b/core/themes/claro/css/components/details.pcss.css @@ -157,15 +157,14 @@ } } -@media screen and (-ms-high-contrast: active) { +@media (-ms-high-contrast: active), (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; } @@ -274,7 +273,7 @@ transform: rotate(-90deg); /* for LTR and RTL */ } -@media screen and (-ms-high-contrast: active) { +@media (-ms-high-contrast: active), (forced-colors: active) { .claro-details__summary:hover::before, .claro-details__summary:hover:focus::before { background: none; @@ -530,7 +529,7 @@ font-weight: normal; } -@media screen and (-ms-high-contrast: active) { +@media (-ms-high-contrast: active), (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 { |