Changed the switch width, paddle width and paddel left to be dynamic.

Fixed the initial value of the paddle's left property.

diff --git a/scss/components/_switch.scss b/scss/components/_switch.scss
index e38a4e13bec1258dbce45ac49d57cdd7a7973b11..331975043f96b91351493ab9cbe83a7c9e9fbc03 100644 (file)
--- a/scss/components/_switch.scss
+++ b/scss/components/_switch.scss
@@ -80,11 +80,16 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
 /// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
 @mixin switch-paddle {
+  $switch-width: $switch-height * 2;
+  $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-left-active: $switch-width - $paddle-width - $switch-paddle-offset;
+
   background: $switch-background;
   cursor: pointer;
   display: block;
   position: relative;
-  width: 4rem;
+  width: $switch-width;
   height: $switch-height;
   transition: $switch-paddle-transition;
   border-radius: $switch-radius;
@@ -104,10 +109,10 @@ $switch-paddle-transition: all 0.25s ease-out !default;
     content: '';
     display: block;
     position: absolute;
-    height: 1.5rem;
-    #{$global-left}: 0.25rem;
-    top: 0.25rem;
-    width: 1.5rem;
+    width: $paddle-width;
+    height: $paddle-height;
+    top: $switch-paddle-offset;
+    #{$global-left}: $switch-paddle-offset;
     transition: $switch-paddle-transition;
     transform: translate3d(0, 0, 0);
     border-radius: $switch-paddle-radius;
@@ -118,7 +123,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
     background: $switch-background-active;
 
     &::after {
-      #{$global-left}: 2.25rem;
+      #{$global-left}: $paddle-left-active;
     }
   }
 
@@ -155,31 +160,32 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
 /// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
 /// @param {Number} $font-size [1rem] - Font size of label text within the switch.
-/// @param {Number} $width [4rem] - Width of the switch body.
-/// @param {Number} $height [2rem] - Height of the switch body.
-/// @param {Number} $paddle-width [1.5rem] - Width of the switch paddle.
+/// @param {Number} $switch-height [2rem] - Height of the switch body.
 /// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
 @mixin switch-size(
   $font-size: 1rem,
-  $width: 4rem,
-  $height: 2rem,
-  $paddle-width: 1.5rem,
+  $switch-height: 2rem,
   $paddle-offset: 0.25rem
 ) {
-  $paddle-height: $height - ($paddle-offset * 2);
-  $paddle-left-active: $width - $paddle-width - $paddle-offset;
 
-  height: $height;
+  $switch-width: $switch-height * 2;
+  $paddle-width: $switch-height - ($paddle-offset * 2);
+  $paddle-height: $switch-height - ($paddle-offset * 2);
+  $paddle-left-active: $switch-width - $paddle-width - $paddle-offset;
+
+  height: $switch-height;
   
   .switch-paddle {
-    width: $width;
-    height: $height;
+    width: $switch-width;
+    height: $switch-height;
     font-size: $font-size;
   }
 
   .switch-paddle::after {
     width: $paddle-width;
     height: $paddle-height;
+    top: $paddle-offset;
+    #{$global-left}: $paddle-offset;
   }
 
   input:checked ~ .switch-paddle::after {
@@ -223,14 +229,14 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
   // Switch sizes
   .switch.tiny {
-    @include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset);
+    @include switch-size(rem-calc(10), $switch-height-tiny, $switch-paddle-offset);
   }
 
   .switch.small {
-    @include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset);
+    @include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset);
   }
 
   .switch.large {
-    @include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset);
+    @include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset);
   }
 }