Verified Commit 7982e4a2 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3057772 by katherined, sd9121, boulaffasae, bnjmnm, komalkolekar,... 

Issue #3057772 by katherined, sd9121, boulaffasae, bnjmnm, komalkolekar, lauriii, KondratievaS, ckrina, DyanneNova, Ambient.Impact, sirtet, andrewmacpherson, yoroy: Ambiguous icons for collapsing/expanding menu items
parent a677705b

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

+9 −9
Changes for core/themes/claro/css/components/details.css: 9 added lines, 9 removed lines.
Original line number Diff line number Diff line
@@ -149,7 +149,7 @@ rgba(0, 0, 0, 0.1); 
  margin-top: -0.5rem;

  content: "";

  transition: transform 0.12s ease-in 0s;

  transform: rotate(0); /* LTR */

  transform: rotate(90deg); /* LTR */

  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;
@@ -158,7 +158,7 @@ rgba(0, 0, 0, 0.1); 
[dir="rtl"] .claro-details__summary::before {

  right: 0.75rem;

  left: auto;

  transform: rotate(180deg);

  transform: rotate(-270deg);

}



@media (prefers-reduced-motion: reduce) {
@@ -171,16 +171,16 @@ rgba(0, 0, 0, 0.1); 
  .claro-details__summary::before {

    width: 0.5625rem;

    height: 0.5625rem;

    margin-top: -0.28125rem;

    transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s;

    transform: rotate(45deg); /* LTR */

    transform: rotate(135deg); /* LTR */

    border: 0.125rem solid;

    border-width: 0.125rem 0.125rem 0 0;

    border-bottom-color: transparent;

    border-left-color: transparent;

    background: none;

  }



  [dir="rtl"] .claro-details__summary::before {

    transform: rotate(225deg);

    transform: rotate(-225deg);

  }

}
@@ -286,7 +286,7 @@ rgba(0, 0, 0, 0.1); 
}



.claro-details[open] > .claro-details__summary::before {

  transform: rotate(90deg); /* for LTR and RTL */

  transform: rotate(-90deg); /* for LTR and RTL */

}



@media screen and (-ms-high-contrast: active) {
@@ -297,9 +297,9 @@ rgba(0, 0, 0, 0.1); 


  .claro-details[open] > .claro-details__summary::before,

  [dir="rtl"] .claro-details[open] > .claro-details__summary::before {

    margin-top: -0.40625rem;

    margin-top: -0.0625rem;

    margin-right: 0.125rem;

    transform: rotate(135deg); /* for LTR and RTL */

    transform: rotate(-45deg); /* for LTR and RTL */

    background: none;

  }

}

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

+9 −9
Changes for core/themes/claro/css/components/details.pcss.css: 9 added lines, 9 removed lines.
Original line number Diff line number Diff line
@@ -140,7 +140,7 @@ 
  margin-top: calc(var(--space-m) / -2);

  content: "";

  transition: transform var(--details-transform-transition-duration) ease-in 0s;

  transform: rotate(0); /* LTR */

  transform: rotate(90deg); /* LTR */

  text-align: center;

  background-image: url(../../images/icons/545560/chevron-right.svg);

  background-size: contain;
@@ -148,7 +148,7 @@ 
[dir="rtl"] .claro-details__summary::before {

  right: var(--space-s);

  left: auto;

  transform: rotate(180deg);

  transform: rotate(-270deg);

}



@media (prefers-reduced-motion: reduce) {
@@ -161,16 +161,16 @@ 
  .claro-details__summary::before {

    width: 0.5625rem;

    height: 0.5625rem;

    margin-top: calc(0.5625rem / -2);

    transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;

    transform: rotate(45deg); /* LTR */

    transform: rotate(135deg); /* LTR */

    border: 0.125rem solid;

    border-width: 0.125rem 0.125rem 0 0;

    border-bottom-color: transparent;

    border-left-color: transparent;

    background: none;

  }



  [dir="rtl"] .claro-details__summary::before {

    transform: rotate(225deg);

    transform: rotate(-225deg);

  }

}
@@ -271,7 +271,7 @@ 
}



.claro-details[open] > .claro-details__summary::before {

  transform: rotate(90deg); /* for LTR and RTL */

  transform: rotate(-90deg); /* for LTR and RTL */

}



@media screen and (-ms-high-contrast: active) {
@@ -282,9 +282,9 @@ 


  .claro-details[open] > .claro-details__summary::before,

  [dir="rtl"] .claro-details[open] > .claro-details__summary::before {

    margin-top: calc((0.5625rem / -2) - 0.125rem);

    margin-top: calc(0.125rem / -2);

    margin-right: 0.125rem;

    transform: rotate(135deg); /* for LTR and RTL */

    transform: rotate(-45deg); /* for LTR and RTL */

    background: none;

  }

}