feat(radio): use mask for radio button svgs (#27)

oruga-ui · May 17, 2024 · 34fad20 · 34fad20
1 parent 5305012
commit 34fad20
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 28 deletions.
diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
@@ -52,25 +52,29 @@ $checkbox-line-height: 1.5 !default;
   &__input {
     width: var(--#{$prefix}checkbox-size, $checkbox-size);
     height: var(--#{$prefix}checkbox-size, $checkbox-size);
-    outline: none;
     margin: 0;
+    outline: none;
     vertical-align: top;
-    background-position: center;
-    background-size: contain;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
     flex-shrink: 0;
     cursor: pointer;
-    background-repeat: no-repeat;
 
     box-shadow: var(--#{$prefix}checkbox-box-shadow, $checkbox-box-shadow);
     background-color: var(
       --#{$prefix}checkbox-background-color,
       $checkbox-background-color
     );
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    transition: background var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
+
     border-radius: var(
       --#{$prefix}checkbox-border-radius,
       $checkbox-border-radius
@@ -88,9 +92,6 @@ $checkbox-line-height: 1.5 !default;
       $checkbox-border-style
     );
 
-    transition: background var(--#{$prefix}transition-duration)
-      var(--#{$prefix}transition-timing);
-
     &--checked {
       background-color: var(
         --#{$prefix}checkbox-active-background-color,

diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
@@ -1,7 +1,7 @@
 @use "sass:list";
 
 /* @docs */
-$radio-active-background-color: var(--#{$prefix}primary) !default;
+$radio-active-background-color: $primary !default;
 $radio-checked-box-shadow-length: 0 0 0.5em !default;
 $radio-checked-box-shadow-opacity: 0.8 !default;
 $radio-box-shadow: $control-box-shadow !default;
@@ -13,18 +13,25 @@ $radio-line-height: 1.25 !default;
 /* @docs */
 
 // filled svg calculation
-@function svg_radio_fill($color, $background-color: "transparent") {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
-  $content: '<g transform="matrix(4.38544,0,0,4.38544,-94.4336,-58.9876)"><path d="M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z" style="fill:#{$color};"/><circle cx="32.84" cy="24.8" r="7.9" style="fill:#{$background-color};"/></g>';
+@function svg_radio_fill() {
+  $start: '<svg width="100%" height="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#e11919" stroke="#000" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+  $content: '<g id="SVGRepo_bgCarrier" stroke-width="0"></g>' +
+    '<g id="SVGRepo_iconCarrier">' +
+    '<path d="M483 260c0-123-100-223-223-223S37 137 37 260s100 223 223 223S483 383 483 260Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:64px"></path>' +
+    '<circle cx="256" cy="256" r="144"></circle>' + "</g>";
+
   $end: "</svg>";
 
   @return svg-encode("#{$start}#{$content}#{$end}");
 }
 
 // empty svg calculation
-@function svg_radio_empty($color) {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
-  $content: '<g transform="matrix(10.1032,0,0,10.1032,-255.068,-313.298)"><circle cx="30.195" cy="35.959" r="4.85" style="fill:#{$color};"/></g>';
+@function svg_radio_empty() {
+  $start: '<svg width="100%" height="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000" stroke="#000" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+  $content: '<g id="SVGRepo_bgCarrier" stroke-width="0"></g>' +
+    '<g id="SVGRepo_iconCarrier">' +
+    '<path d="M483 260c0-123-100-223-223-223S37 137 37 260s100 223 223 223S483 383 483 260Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:64px"></path>' +
+    "</g>";
   $end: "</svg>";
 
   @return svg-encode("#{$start}#{$content}#{$end}");
@@ -39,27 +46,34 @@ $radio-line-height: 1.25 !default;
   margin-right: var(--#{$prefix}radio-margin-sibiling, $radio-margin-sibiling);
 
   &__input {
+    font-size: var(--#{$prefix}radio-font-size, inherit);
     width: var(--#{$prefix}radio-size, $radio-size);
     height: var(--#{$prefix}radio-size, $radio-size);
     margin: 0;
     vertical-align: top;
-    background-position: center;
-    background-size: contain;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
-    border-radius: 50%;
     cursor: pointer;
+    box-shadow: var(--#{$prefix}radio-box-shadow, $radio-box-shadow);
+    border-radius: 50%;
+    background: var(
+      --oruga-radio-active-background-color,
+      $radio-active-background-color
+    );
+    mask-image: url(svg_radio_empty());
+    background-image: none;
+    background-position: center;
+    background-size: contain;
     background-repeat: no-repeat;
+
     transition: background var(--#{$prefix}transition-duration)
       var(--#{$prefix}transition-timing);
-    box-shadow: var(--#{$prefix}radio-box-shadow, $radio-box-shadow);
-    background-image: url(svg_radio_empty($radio-active-background-color));
 
     &--checked {
-      background-image: url(svg_radio_fill($radio-active-background-color));
+      mask-image: url(svg_radio_fill());
     }
   }
 
@@ -71,22 +85,20 @@ $radio-line-height: 1.25 !default;
     opacity: var(--#{$prefix}radio-disabled-opacity, $radio-disabled-opacity);
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      font-size: var(--#{$prefix}radio-font-size-#{$name}, $value);
+      --#{$prefix}radio-font-size: #{$value};
+      --#{$prefix}radio-size: #{$value};
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
-      .o-radio__input {
-        background-image: url(svg_radio_empty($color));
-
-        &--checked {
-          background-image: url(svg_radio_fill($color, $color-invert));
-        }
-      }
+      --oruga-radio-active-background-color: #{$color};
     }
   }
 }