_switches.scss in foundation-rails-5.5.2.0

- old
+ new

@@ -1,10 +1,10 @@
 // Foundation by ZURB
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @name
 // @dependencies _global.scss
 //
@@ -42,76 +42,79 @@
 // $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;
+  margin-bottom: $switch-bottom-margin;
   outline: 0;
+  padding: 0;
+  position: relative;
   -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 
   // Default label styles for type and transition
   label {
+    background: $switch-bg;
+    color: transparent;
+    cursor: pointer;
     display: block;
     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;
-    cursor: pointer;
 
     // Transition for the switch label to follow paddle
     @include single-transition(left, $transition-speed, $transition-ease);
   }
 
   // So that we don't need to recreate the form with any JS, we use the
   // existing checkbox or radio button, but we cleverly position and hide it.
   input {
+    left: 10px;
     opacity: 0;
+    padding:0;
     position: absolute;
     top: 9px;
-    left: 10px;
-    padding:0;
 
     & + label { margin-left: 0; margin-right: 0; }
   }
 
   // The paddle for the switch is created from an after psuedoclass
   // content element. This is sized and positioned, and reacts to
   // the state of the input.
 
   label:after {
+    background: $switch-paddle-bg;
     content: "";
     display: block;
-    background: $switch-paddle-bg;
+    height: $switch-height-med - .5rem;
+    left: .25rem;
     position: absolute;
     top: .25rem;
-    left: .25rem;
-    width: $switch-height-med - 0.5rem;
-    height: $switch-height-med - 0.5rem;
+    width: $switch-height-med - .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);
+    -ms-transform: translate3d(0,0,0);
     -o-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 
   input:checked + label {
     background: $switch-active-color;
   }
 
   input:checked + label:after {
-    left: $switch-height-med + 0.25rem;
+    left: $switch-height-med + .25rem;
   }
 }
 
 // We use this mixin to create the size styles for switches.
 //
@@ -119,20 +122,20 @@
 // $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;
   }
 
   label:after {
-    width: $height - 0.5rem;
-    height: $height - 0.5rem;
+    height: $height - .5rem;
+    width: $height - .5rem;
   }
 
   input:checked + label:after {
-    left: $height + 0.25rem;
+    left: $height + .25rem;
   }
 
 }
 
 // We use this mixin to add color and other fanciness to the switches.