fix: division, styles

justboil · Feb 4, 2022 · efaed11 · efaed11
1 parent 0c1e162
commit efaed11
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 70 deletions.
diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -14,7 +14,7 @@
     $encoded:'';
     $slice: 2000;
     $index: 0;
-    $loops: ceil(str-length($svg)/$slice);
+    $loops: ceil(divide(str-length($svg), $slice));
     @for $i from 1 through $loops {
         $chunk: str-slice($svg, $index, $index + $slice - 1);
         // Encode

diff --git a/scss/_switch.scss b/scss/_switch.scss
@@ -5,29 +5,26 @@
   align-items: center;
   position: relative;
   margin-right: 0.5em;
-
   & + .switch:last-child {
     margin-right: 0;
   }
-
   input[type=checkbox] {
     position: absolute;
     left: 0;
     opacity: 0;
     outline: none;
     z-index: -1;
-
     + .check {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       width: $switch-width;
-      height: #{$switch-width / 2 + $switch-padding};
+      height: #{$switch-width * 0.5 + $switch-padding};
       padding: $switch-padding;
       background: $grey-light;
       border-radius: $radius;
       transition: background $speed-slow $easing, box-shadow $speed-slow $easing;
-      @each $name, $pair in $colors {
+      @each $name, $pair in $switch-colors {
         $color: nth($pair, 1);
         &.is-#{$name}-passive, &:hover {
           background: $color;
@@ -36,179 +33,147 @@
           background: 'pink';
         }
       }
-
       &:before {
         content: "";
         display: block;
         border-radius: $radius;
-        width: #{($switch-width - $switch-padding * 2) / 2};
-        height: #{($switch-width - $switch-padding * 2) / 2};
+        width: #{($switch-width - $switch-padding * 2) * 0.5};
+        height: #{($switch-width - $switch-padding * 2) * 0.5};
         background: $background;
         transition: transform $speed-slow $easing;
         will-change: transform;
         transform-origin: left;
-        @if $switch-knob-has-shadows == 1 {
-          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-        }
       }
-
       &.is-elastic:before {
         transform: scaleX(1.5);
         border-radius: $radius;
       }
     }
-
     &:checked + .check {
       background: $switch-active-background-color;
-      @each $name, $pair in $colors {
+      @each $name, $pair in $switch-colors {
         $color: nth($pair, 1);
         &.is-#{$name} {
           background: $color;
         }
       }
-
       &:before {
         transform: translate3d(100%, 0, 0);
       }
-
       &.is-elastic:before {
         // Might be a little offset if base font is not 16px
         transform: translate3d(50%, 0, 0) scaleX(1.5);
       }
     }
-
     &:focus, &:active {
       outline: none;
-
       + .check {
-        @if $switch-has-shadows == 1 {
-          box-shadow: 0 0 0.5em rgba($grey, 0.6);
-        }
-        @each $name, $pair in $colors {
+        @each $name, $pair in $switch-colors {
           $color: nth($pair, 1);
-          @if $switch-has-shadows == 1 {
-            &.is-#{$name}-passive {
-              box-shadow: 0 0 0.5em rgba($color, 0.8);
-            }
-          }
         }
       }
-
       &:checked + .check {
-        @if $switch-has-shadows == 1 {
-          box-shadow: 0 0 0.5em rgba($switch-active-background-color, 0.8);
-        }
-        @each $name, $pair in $colors {
+        @each $name, $pair in $switch-colors {
           $color: nth($pair, 1);
-          @if $switch-has-shadows == 1 {
-            &.is-#{$name} {
-              box-shadow: 0 0 0.5em rgba($color, 0.8);
-            }
-          }
         }
       }
     }
   }
 
-  .control-label {
-    padding-left: 0.5em;
+  &.has-left-label {
+    flex-direction: row-reverse;
+    .control-label {
+      padding-right: $control-padding-horizontal;
+    }
+  }
+
+  &:not(.has-left-label) {
+    .control-label {
+      padding-left: $control-padding-horizontal;
+    }
   }
 
   &:hover {
     input[type=checkbox] + .check {
       background: rgba($grey-light, 0.9);
-      @each $name, $pair in $colors {
+      @each $name, $pair in $switch-colors {
         $color: nth($pair, 1);
         &.is-#{$name}-passive {
           background: rgba($color, 0.9);
         }
       }
     }
-
     input[type=checkbox]:checked + .check {
       background: rgba($switch-active-background-color, 0.9);
-      @each $name, $pair in $colors {
+      @each $name, $pair in $switch-colors {
         $color: nth($pair, 1);
         &.is-#{$name} {
           background: rgba($color, 0.9);
         }
       }
     }
   }
-
   &.is-rounded {
     input[type=checkbox] {
       + .check {
         border-radius: $radius-rounded;
-
         &:before {
           border-radius: $radius-rounded;
         }
       }
-
       &.is-elastic:before {
         transform: scaleX(1.5);
         border-radius: $radius-rounded;
       }
     }
   }
-
   &.is-outlined {
     input[type=checkbox] {
       + .check {
         background: transparent;
         border: .1rem solid $grey-light;
-        padding: $switch-outlined-padding;
-        @each $name, $pair in $colors {
+        @each $name, $pair in $switch-colors {
           $color: nth($pair, 1);
           &.is-#{$name}-passive {
             border: .1rem solid rgba($color, 0.9);
-
             &:before {
               background: $color
             }
-
             &:hover {
               border-color: rgba($color, 0.9);
             }
           }
         }
-
         &:before {
           background: $grey-light;
         }
       }
-
       &:checked + .check {
         border-color: $switch-active-background-color;
-        @each $name, $pair in $colors {
+        @each $name, $pair in $switch-colors {
           $color: nth($pair, 1);
           &.is-#{$name} {
             background: transparent;
             border-color: $color;
-
             &:before {
               background: $color;
             }
           }
         }
-
         &:before {
           background: $switch-active-background-color;
         }
       }
     }
-
     &:hover {
       input[type=checkbox] + .check {
         background: transparent;
         border-color: rgba($grey-light, 0.9);
       }
-
       input[type=checkbox]:checked + .check {
         background: transparent;
         border-color: rgba($switch-active-background-color, 0.9);
-        @each $name, $pair in $colors {
+        @each $name, $pair in $switch-colors {
           $color: nth($pair, 1);
           &.is-#{$name} {
             border-color: rgba($color, 0.9);
@@ -217,19 +182,15 @@
       }
     }
   }
-
   &.is-small {
     @include control-small;
   }
-
-  &.is-medium {
+  &.is-medium{
     @include control-medium;
   }
-
   &.is-large {
     @include control-large;
   }
-
   &[disabled] {
     opacity: 0.5;
     cursor: not-allowed;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1,14 +1,9 @@
 @import "node_modules/bulma/sass/utilities/all";
 
 $speed-slow: 150ms !default;
-$speed-slower: 250ms !default;
 
 $switch-width-number: 2.75 !default;
 $switch-width: $switch-width-number * 1em !default;
 $switch-padding: 0.2em !default;
-$switch-outlined-padding: 0.1em !default;
 $switch-active-background-color: $primary !default;
-
-/* Box-shadow */
-$switch-has-shadows: 0 !default;
-$switch-knob-has-shadows: 0 !default;
+$switch-colors: $colors !default;