switch.css.scss in flashgrid-1.0.14

- old
+ new

@@ -2,30 +2,39 @@
 ==================================================
 #Switch */
 
 /* #Switch
 ================================================== */
-.switch input[type=radio],
-.switch input[type=checkbox] { display: none; }
+.switch input[type='radio'],
+.switch input[type='checkbox'] {
+  left: 0;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  position: absolute !important;
+  top: 0;
+  z-index: -1;
+}
 .switch {
-  background: rgba(58,144,216,1); 
+  background: rgba(236,238,241,1);
   border-radius: 500px;
-  color: rgba(255,255,255,1);
+  color: rgba(43,50,53,1);
   cursor: pointer;
   display: inline-block;
-  font-size: 11px;
+  font-size: 12px;
   -webkit-font-smoothing: antialiased;
   font-weight: bold;
-  line-height: 11px;
+  line-height: 12px;
   margin-top: -2px;
   min-width: 64px;
   overflow: hidden;
   padding: 4px 0;
   position: relative;
   text-align: center;
   text-rendering: geometricPrecision;
   text-transform: uppercase;
+  -webkit-transition: all 0.5s ease-in-out;
+          transition: all 0.5s ease-in-out;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   vertical-align: middle;
@@ -60,14 +69,30 @@
   z-index: 1;
 }
 .switch > div {
   display: inline-block;
   position: relative;
+  -webkit-transform: translate3d(0,0,0);
+          transform: translate3d(0,0,0);
   top: 0;
   width: 150%;
 }
-.switch > div.switch-off { left: -50%; }
-.switch > div.switch-on { left: 0%; }
-.switch > div.switch-animate {
-  -webkit-transition: left 0.5s;
-          transition: left 0.5s;
+.switch.switch-on > div { margin-left: 0; }
+.switch.switch-off > div { margin-left: -50%; }
+.switch.switch-on.switch-black,
+.switch.switch-on.switch-blue,
+.switch.switch-on.switch-green,
+.switch.switch-on.switch-red   { color: rgba(255,255,255,1); }
+.switch.switch-on.switch-black { background: rgba(71,74,84,1); }
+.switch.switch-on.switch-blue  { background: rgba(58,144,216,1); }
+.switch.switch-on.switch-green { background: rgba(122,179,23,1); }
+.switch.switch-on.switch-red   { background: rgba(254,79,50,1); }
+.switch.switch-animate > div {
+  -webkit-transition: margin-left 0.5s;
+          transition: margin-left 0.5s;
+}
+.switch.switch-disabled,
+.switch.switch-readonly {
+  cursor: default !important;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
 }
\ No newline at end of file