fix(accordion, transcription, translate): modifie apparence du bouton

GouvernementFR · Jun 20, 2023 · 1a663ec · 1a663ec
1 parent 1c01df7
commit 1a663ec
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 30 deletions.
diff --git a/module/animate/_index.scss b/module/animate/_index.scss
@@ -0,0 +1 @@
+@forward 'mixin/caret';
diff --git a/module/animate/mixin/_caret.scss b/module/animate/mixin/_caret.scss
@@ -0,0 +1,11 @@
+@mixin caret() {
+  &::after {
+    transition: transform 0.3s;
+  }
+
+  &[aria-expanded='true'] {
+    &::after {
+      transform: rotate(-180deg);
+    }
+  }
+}
diff --git a/src/component/accordion/style/_legacy.scss b/src/component/accordion/style/_legacy.scss
@@ -17,10 +17,12 @@
     @include enable-list-style-legacy;
 
     &__btn {
-      @include icon-legacy(add-line, sm);
+      @include icon-legacy(arrow-down-s-line, sm);
 
       &[aria-expanded="true"] {
-        @include icon-image-legacy(subtract-line);
+        @include after {
+          transform: rotate(-180deg);
+        }
       }
     }
   }

diff --git a/src/component/accordion/style/_module.scss b/src/component/accordion/style/_module.scss
@@ -3,6 +3,8 @@
 /// @group accordion
 ////
 
+@use 'module/animate';
+
 #{ns(accordion)} {
   position: relative;
 
@@ -22,21 +24,18 @@
   &__btn {
     @include _build-link-base;
     @include _link-display(flex);
-    @include nest-accordion-button(add-line);
+    @include font-weight('medium');
+    @include nest-accordion-button(arrow-down-s-line);
     @include size(100%);
     text-align: left;
     @include margin(0);
-
+    @include animate.caret();
+
     @include after {
       @include margin-right(0);
       @include margin-left(auto);
     }
 
-    &[aria-expanded="true"] {
-      @include font-weight('bold');
-      @include icon-image(subtract-line, after);
-    }
-
     @include padding(3v 0);
     @include padding(3v 4v, md);
   }

diff --git a/src/component/accordion/style/_scheme.scss b/src/component/accordion/style/_scheme.scss
@@ -12,11 +12,7 @@
     }
 
     &__btn {
-      @include color.text(action-high grey, (legacy:$legacy));
-
-      &[aria-expanded="true"] {
-        @include color.text(active grey, (legacy:$legacy));
-      }
+      @include color.text(action-high blue-france, (legacy:$legacy));
     }
   }
 }
diff --git a/src/component/transcription/style/_legacy.scss b/src/component/transcription/style/_legacy.scss
@@ -11,10 +11,12 @@
 
     &__btn {
       @include icon-legacy(align-left, sm, before);
-      @include icon-legacy(add-line, sm, after);
+      @include icon-legacy(arrow-down-s-line, sm, after);
 
       &[aria-expanded="true"] {
-        @include icon-image-legacy(subtract-line);
+        @include after {
+          transform: rotate(-180deg);
+        }
       }
     }
 

diff --git a/src/component/transcription/style/_module.scss b/src/component/transcription/style/_module.scss
@@ -4,6 +4,7 @@
 ////
 
 @use 'module/media-query';
+@use 'module/animate';
 
 #{ns(transcription)} {
   position: relative;
@@ -17,7 +18,8 @@
   &__btn {
     @include _build-link-base;
     @include _link-display(flex);
-    @include nest-transcription-button(add-line);
+    @include font-weight('medium');
+    @include nest-transcription-button(arrow-down-s-line);
     @include size(100%);
     text-align: left;
     @include margin(0);
@@ -29,10 +31,7 @@
     @include icon(align-left, sm, before) {
       @include margin-right(2v);
     }
-
-    &[aria-expanded='true'] {
-      @include icon-image(subtract-line, after);
-    }
+    @include animate.caret();
   }
 
   &__content {

diff --git a/src/component/translate/style/_legacy.scss b/src/component/translate/style/_legacy.scss
@@ -9,7 +9,7 @@
   #{ns(translate)} {
     #{ns(translate)} &__btn {
       @include icon-legacy(translate-2, sm, before);
-      @include icon-legacy(arrow-down-s-fill, sm, after);
+      @include icon-legacy(arrow-down-s-line, sm, after);
     }
   }
 }
diff --git a/src/component/translate/style/_module.scss b/src/component/translate/style/_module.scss
@@ -3,6 +3,8 @@
 /// @group header
 ////
 
+@use 'module/animate';
+
 #{ns(translate)} {
   --rows: 8;
   position: relative;
@@ -15,18 +17,12 @@
     @include width(100%);
     @include width(auto, lg);
     @include margin-bottom(4v, lg);
+    @include animate.caret();
 
-    @include icon(arrow-down-s-fill, sm, after) {
+    @include icon(arrow-down-s-line, sm, after) {
       @include margin-left(auto);
       @include margin-left(1v, lg);
       @include margin-right(-1v, lg);
-      transition: transform 0.3s;
-    }
-
-    &[aria-expanded=true] {
-      @include after {
-        transform: rotate(-180deg);
-      }
     }
 
     @include respond-from(lg) {