🐛 fix(alert): remplacement des box-shadow en background-image (#742)

- les bordures sont dessinées en background image à la place de box shadow
GouvernementFR · Nov 6, 2023 · 99a255e · 99a255e
1 parent 8fd15f7
commit 99a255e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/component/alert/style/_module.scss b/src/component/alert/style/_module.scss
@@ -3,11 +3,16 @@
 /// @group alert
 ////
 
+@use 'module/spacing';
+
 #{ns(alert)} {
   @include relative();
   @include padding(4v 9v 3v 14v);
   @include set-title-margin(0 0 1v);
   @include set-text-margin(0 0 1v);
+  background-size: 100% 1px, 1px 100%, 100% 1px, spacing.space(10v) 100%;
+  background-position: 0 0, 100% 0, 0 100%, 0 0, 100% 100%;
+  background-repeat: no-repeat, no-repeat no-repeat, no-repeat;
   @include icon-size(md, before);
   @include icon-style(before) {
     @include absolute(0, null, null, 0);

diff --git a/src/component/alert/style/_scheme.scss b/src/component/alert/style/_scheme.scss
@@ -7,26 +7,26 @@
 
 @mixin _alert-scheme($legacy: false) {
   #{ns(alert)} {
-    @include color.box-shadow((plain grey) (background flat grey), (legacy:$legacy), all-1-in left-10v-in);
+    @include color.background-image((border plain grey) (border plain grey) (border plain grey) (border plain grey) (flat grey), (legacy:$legacy));
 
     @include before {
       @include color.text(inverted grey, (legacy:$legacy));
     }
 
     &--info {
-      @include color.box-shadow((plain info) (background flat info), (legacy:$legacy), all-1-in left-10v-in);
+      @include color.background-image((border plain info) (border plain info) (border plain info) (border plain info) (flat info), (legacy:$legacy));
     }
 
     &--error {
-      @include color.box-shadow((plain error) (background flat error), (legacy:$legacy), all-1-in left-10v-in);
+      @include color.background-image((border plain error) (border plain error) (border plain error) (border plain error) (flat error), (legacy:$legacy));
     }
 
     &--success {
-      @include color.box-shadow((plain success) (background flat success), (legacy:$legacy), all-1-in left-10v-in);
+      @include color.background-image((border plain success) (border plain success) (border plain success) (border plain success) (flat success), (legacy:$legacy));
     }
 
     &--warning {
-      @include color.box-shadow((plain warning) (background flat warning), (legacy:$legacy), all-1-in left-10v-in);
+      @include color.background-image((border plain warning) (border plain warning) (border plain warning) (border plain warning) (flat warning), (legacy:$legacy));
     }
   }
 }