refactor(checkbox): checkbox déssiné en background-image & legacy fix

GouvernementFR · May 22, 2023 · 1a5d50e · 1a5d50e
1 parent bd53b49
commit 1a5d50e
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 24 deletions.
diff --git a/module/color/mixin/_data-uri-svg.scss b/module/color/mixin/_data-uri-svg.scss
@@ -25,7 +25,7 @@
   $light: result.get($light-colors, $value);
   $light: specificity.important($light, $important);
 
-  @if $legacy {
+  @if $legacy and $prop != false {
     @include legacy.is(ie11) {
       #{$prop}: #{url(utilities.data-uri(string.encode-svg($light, true), svg))};
     }
@@ -41,6 +41,8 @@
       --data-uri-svg: #{url(utilities.data-uri(string.encode-svg($dark, false), svg))};
     }
 
-    #{$prop}: var(--data-uri-svg);
+    @if $prop != false {
+      #{$prop}: var(--data-uri-svg);
+    }
   }
 }
diff --git a/src/component/checkbox/deprecated/style/_module.scss b/src/component/checkbox/deprecated/style/_module.scss
@@ -18,3 +18,9 @@
     }
   }
 }
+
+#{ns-group(checkbox)} {
+  input[type='checkbox'] {
+    margin-top: spacing.space(3v);
+  }
+}
diff --git a/src/component/checkbox/index.scss b/src/component/checkbox/index.scss
@@ -7,3 +7,4 @@
 @import '../../scheme/index';
 @import '../form/index';
 @import 'style/setting';
+@import 'style/tool';
diff --git a/src/component/checkbox/legacy.scss b/src/component/checkbox/legacy.scss
@@ -11,5 +11,6 @@
 
 @import 'index';
 @import 'style/scheme';
+@import 'style/legacy';
 
 @include _checkbox-scheme(true);
diff --git a/src/component/checkbox/style/_legacy.scss b/src/component/checkbox/style/_legacy.scss
@@ -0,0 +1,15 @@
+////
+/// Checkbox legacy
+/// @group checkbox
+////
+
+@use 'module/selector';
+@use 'module/legacy';
+
+@include legacy.is(ie11) {
+  #{selector.ns(checkbox-group)} {
+    input[type="checkbox"] {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/component/checkbox/style/_module.scss b/src/component/checkbox/style/_module.scss
@@ -4,8 +4,9 @@
 ////
 
 @use 'module/spacing';
+@use 'module/selector';
 
-#{ns(checkbox-group)} {
+#{selector.ns(checkbox-group)} {
   @include relative;
 
   input[type="checkbox"] {
@@ -19,8 +20,9 @@
       -webkit-tap-highlight-color: transparent;
       @include display-flex(row, center, flex-start, wrap);
       @include margin-left(8v);
+      --data-uri-svg: none;
 
-      #{ns(hint-text)} {
+      #{selector.ns(hint-text)} {
         @include margin(0);
         @include size(100%);
       }
@@ -32,10 +34,10 @@
         @include absolute(0, null, null, -8v);
         @include size(6v, 6v);
         @include margin-right(2v);
-        background-size: spacing.space(4v);
-        background-position: center;
-        background-repeat: no-repeat;
         border-radius: spacing.space(1v);
+        background-size: spacing.space(1v 1v), spacing.space(calc(100% - 1v) 1px), spacing.space(1v 1v), spacing.space(1px calc(100% - 2v)), spacing.space(1v 1v), spacing.space(calc(100% - 2v) 1px), spacing.space(1v 1v), spacing.space(1px calc(100% - 2v)), spacing.space(4v);
+		    background-position: 0 0, spacing.space(1v) 0, 100% 0, 0 spacing.space(1v), 100% 100%, calc(100% - spacing.space(1v)) 100%, 0 100%, 100% spacing.space(1v), center;
+		    background-repeat: no-repeat;
         // transition: background-color 0.1s, color 0.1s;
       }
     }
@@ -70,7 +72,7 @@
     }
   }
 
-  #{ns(message)} {
+  #{selector.ns(message)} {
     &:first-child {
       @include margin-top(2v);
     }

diff --git a/src/component/checkbox/style/_scheme.scss b/src/component/checkbox/style/_scheme.scss
@@ -5,37 +5,39 @@
 
 @use 'module/color';
 @use 'module/disabled';
+@use 'module/selector';
 
 @mixin _checkbox-scheme($legacy: false) {
-  #{ns(checkbox-group)} {
+  #{selector.ns(checkbox-group)} {
     input[type="checkbox"] {
       + label {
         @include before {
-          @include color.box-shadow(action-high blue-france, (legacy:$legacy));
+          @include color.background-image(border action-high blue-france, (), checkbox-background-image());
         }
       }
 
       &:checked {
         + label {
           @include before {
-            @include color.background(active blue-france, (legacy:$legacy));
-            @include color.data-uri-svg(inverted grey, (legacy: $legacy), $checkbox-svg);
+            @include color.background(active blue-france);
+            @include color.data-uri-svg(inverted grey, (), $checkbox-svg, false);
           }
         }
       }
 
       @include disabled.selector {
         & + label {
           @include before {
-            @include disabled.colors((legacy: $legacy, box-shadow: true));
+            @include disabled.colors();
+            @include color.background-image(disabled grey, (), checkbox-background-image());
           }
         }
 
         &:checked {
           & + label {
             @include before {
-              @include disabled.colors((legacy: $legacy, text: true, background: true));
-              @include color.data-uri-svg(text disabled grey, (legacy: $legacy), $checkbox-svg);
+              @include disabled.colors((background: true));
+              @include color.data-uri-svg(text disabled grey, (), $checkbox-svg, false);
             }
           }
         }
@@ -47,12 +49,12 @@
         @include color.text(default error, (legacy:$legacy));
 
         @include before {
-          @include color.box-shadow(border plain error, (legacy:$legacy));
+          @include color.background-image(border plain error, (), checkbox-background-image());
         }
       }
 
       @include before {
-        @include color.box-shadow(plain error, (legacy:$legacy), left-2-in);
+        @include color.background(border plain error, (legacy:$legacy));
       }
     }
 
@@ -61,35 +63,35 @@
         @include color.text(default success, (legacy:$legacy));
 
         @include before {
-          @include color.box-shadow(border plain success, (legacy:$legacy));
+          @include color.background-image(border plain success, (), checkbox-background-image());
         }
       }
 
       @include before {
-        @include color.box-shadow(plain success, (legacy:$legacy), left-2-in);
+        @include color.background(border plain success, (legacy:$legacy));
       }
     }
   }
 
-  #{ns(fieldset)} {
+  #{selector.ns(fieldset)} {
     &--error {
-      #{ns(checkbox-group)} {
+      #{selector.ns(checkbox-group)} {
         input[type="checkbox"] {
           + label {
             @include before {
-              @include color.box-shadow(border plain error, (legacy:$legacy));
+              @include color.background-image(border plain error, (), checkbox-background-image());
             }
           }
         }
       }
     }
 
     &--valid {
-      #{ns(checkbox-group)} {
+      #{selector.ns(checkbox-group)} {
         input[type="checkbox"] {
           + label {
             @include before {
-              @include color.box-shadow(border plain success, (legacy:$legacy));
+              @include color.background-image(border plain success, (), checkbox-background-image());
             }
           }
         }

diff --git a/src/component/checkbox/style/_tool.scss b/src/component/checkbox/style/_tool.scss
@@ -0,0 +1,9 @@
+////
+/// Radio Tool
+/// @group radio
+////
+
+@function checkbox-background-image() {
+  $data: 'radial-gradient(at 5px 4px, transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), radial-gradient(at 5px calc(100% - 4px), transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), var(--data-uri-svg)';
+  @return $data;
+}