_switches.scss in foundation-rails-5.5.0.0

- old
+ new

@@ -41,16 +41,23 @@
 // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
 // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
 @mixin switch-base(
   $transition-speed:$switch-paddle-transition-speed,
   $transition-ease:$switch-paddle-transition-ease) {
- 
 
+  padding: 0;
+  border: none;
+  position: relative;
+  outline: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+
   // Default label styles for type and transition
   label {
     display: block;
-    margin-bottom: $switch-height-med / 2;
+    margin-bottom: ($switch-height-med / 2);
     position: relative;
     color: transparent;
     background: $switch-bg;
     text-indent: 100%;
     width: $switch-height-med * 2; height: $switch-height-med;
@@ -78,19 +85,24 @@
 
   label:after {
     content: "";
     display: block;
     background: $switch-paddle-bg;
-    position: absolute; top: .25rem; left: .25rem;
-    width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
+    position: absolute;
+    top: .25rem;
+    left: .25rem;
+    width: $switch-height-med - 0.5rem;
+    height: $switch-height-med - 0.5rem;
 
     -webkit-transition: left $transition-speed $transition-ease;
     -moz-transition: left $transition-speed $transition-ease;
+    -o-transition: translate3d(0,0,0);
     transition: left $transition-speed $transition-ease;
 
     -webkit-transform: translate3d(0,0,0);
     -moz-transform: translate3d(0,0,0);
+    -o-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 
   input:checked + label {
     background: $switch-active-color;
@@ -107,15 +119,17 @@
 // $font-size - Font size of text in switch. Default: $switch-font-size-med.
 // $line-height - Line height of switch. Default: 2.3rem.
 @mixin switch-size($height: $switch-height-med) {
 
   label {
-    width: $height * 2; height: $height;
+    width: $height * 2;
+    height: $height;
   }
 
   label:after {
-    width: $height - 0.5rem; height: $height - 0.5rem;
+    width: $height - 0.5rem;
+    height: $height - 0.5rem;
   }
 
   input:checked + label:after {
     left: $height + 0.25rem;
   }
@@ -129,10 +143,11 @@
 // $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
 // $radius - Radius to apply to switch. Default: false.
 // $base-style - Apply base styles? Default: true.
 @mixin switch-style(
   $paddle-bg:$switch-paddle-bg,
+  $active-color:$switch-active-color,
   $radius:false,
   $base-style:true) {
 
   @if $base-style {
 
@@ -144,11 +159,11 @@
     label:after {
       background: $paddle-bg;
     }
 
     input:checked + label {
-      background: $switch-active-color;
+      background: $active-color;
     }
   }
 
   // Setting up the radius for switches
   @if $radius == true {
@@ -184,17 +199,14 @@
   $transition-ease: $switch-paddle-transition-ease,
   $height: $switch-height-med,
   $paddle-bg: $switch-paddle-bg,
   $active-color: $switch-active-color,
   $radius:false,
-    $base-style:true) {
-    padding: 0;
-    border: none;
-    position: relative;
+  $base-style:true) {
     @include switch-base($transition-speed, $transition-ease);
     @include switch-size($height);
-    @include switch-style($paddle-bg, $radius, $base-style);
+    @include switch-style($paddle-bg, $active-color, $radius, $base-style);
 }
 
 @include exports("switch") {
   @if $include-html-form-classes {
       .switch {
@@ -208,10 +220,10 @@
 
         // Tiny radio switches
         &.tiny { @include switch-size($switch-height-tny); }
 
         // Add a radius to the switch
-        &.radius { 
+        &.radius {
           label { @include radius(4px); }
           label:after { @include radius(3px); }
         }
 
         // Make the switch completely round, like a pill