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

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

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

@@ -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;
   }
 }