Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

merge-requests/2108/head
Cristina Chumillas 2022-04-12 16:12:37 +02:00
parent a163e71341
commit ab4a24f902
2 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
core/themes/claro/css/components/details.css
View File

@ -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 {

11
core/themes/claro/css/components/details.pcss.css
View File

@ -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 {