[Upg] toggle switch

public/assets/css/toggle-switch.css

@@ -24,32 +24,32 @@
  */
 @media only screen {
   /* Checkbox switch
-	 */
+   */
   /* Radio switch
-	 */
+   */
   /* Standalone Themes */
   /* Candy Theme
-	 * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
-	 * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
-	 */
+   * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
+   * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
+   */
   /* Android Theme
-	 */
+   */
   /* iOS Theme
-	 */
+   */
   .switch-light {
     display: block;
     height: 30px;
     /* Outline the toggles when the inputs are focused
-	 */
+   */
     position: relative;
     overflow: visible;
     padding: 0;
     margin-left: 100px;
     /* Position the label over all the elements, except the slide-button (<a>)
-	 * Clicking anywhere on the label will change the switch-state
-	 */
+   * Clicking anywhere on the label will change the switch-state
+   */
     /* Don't hide the input from screen-readers and keyboard access
-	 */ }
+   */ }
     .switch-light * {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
@@ -63,7 +63,7 @@
       line-height: 30px;
       vertical-align: middle; }
     .switch-light input:focus ~ a, .switch-light input:focus + label {
-      outline: 1px dotted #888888; }
+      outline: 1px dotted #888; }
     .switch-light label {
       position: relative;
       z-index: 3;
@@ -106,10 +106,10 @@
     display: block;
     height: 30px;
     /* Outline the toggles when the inputs are focused
-	 */
+   */
     position: relative;
     /* For callout panels in foundation
-	 */
+   */
     padding: 0 !important;
     /* Generate styles for the multiple states */ }
     .switch-toggle * {
@@ -125,7 +125,7 @@
       line-height: 30px;
       vertical-align: middle; }
     .switch-toggle input:focus ~ a, .switch-toggle input:focus + label {
-      outline: 1px dotted #888888; }
+      outline: 1px dotted #888; }
     .switch-toggle input {
       position: absolute;
       opacity: 0; }
@@ -174,44 +174,44 @@
   .switch-candy {
     background-color: #2d3035;
     border-radius: 3px;
-    color: white;
+    color: #fff;
     font-weight: bold;
     text-align: center;
     text-shadow: 1px 1px 1px #191b1e;
     box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2); }
     .switch-candy label {
-      color: white;
+      color: #fff;
       -webkit-transition: color 0.2s ease-out;
       -moz-transition: color 0.2s ease-out;
       transition: color 0.2s ease-out; }
     .switch-candy input:checked + label {
-      color: #333333;
+      color: #333;
       text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
     .switch-candy a {
-      border: 1px solid #333333;
+      border: 1px solid #333;
       background-color: #70c66b;
       border-radius: 3px;
       background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
-      background-image: linear-gradient(to  bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
+      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45); }
     .switch-candy > span {
-      color: #333333;
+      color: #333;
       text-shadow: none; }
     .switch-candy span {
-      color: white; }
+      color: #fff; }
     .switch-candy.switch-candy-blue a {
       background-color: #38a3d4; }
     .switch-candy.switch-candy-yellow a {
       background-color: #f5e560; }
   .switch-android {
     background-color: #464747;
     border-radius: 1px;
-    color: white;
+    color: #fff;
     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
     /* Selected ON switch-light
-		 */ }
+     */ }
     .switch-android label {
-      color: white; }
+      color: #fff; }
     .switch-android > span span {
       opacity: 0;
       -webkit-transition: all 0.1s;
@@ -220,11 +220,11 @@
       .switch-android > span span:first-of-type {
         opacity: 1; }
     .switch-android a {
-      background-color: #666666;
+      background-color: #666;
       border-radius: 1px;
       box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0, inset rgba(0, 0, 0, 0.3) 0 -1px 0; }
     .switch-android.switch-light input:checked ~ a {
-      background-color: #0e88b1; }
+      background-color: #0E88B1; }
     .switch-android.switch-light input:checked ~ span span:first-of-type {
       opacity: 0; }
     .switch-android.switch-light input:checked ~ span span:last-of-type {
@@ -237,8 +237,8 @@
     .switch-ios.switch-light a {
       left: 0;
       width: 30px;
-      background-color: white;
-      border: 1px solid lightgrey;
+      background-color: #fff;
+      border: 1px solid #d3d3d3;
       border-radius: 100%;
       -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
@@ -262,7 +262,7 @@
       left: 100px;
       top: 0;
       background-color: #fafafa;
-      border: 1px solid lightgrey;
+      border: 1px solid #d3d3d3;
       border-radius: 30px;
       -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
@@ -278,10 +278,10 @@
       opacity: 0; }
     .switch-ios.switch-light input:checked ~ span span:last-of-type {
       opacity: 1;
-      color: white; }
+      color: #fff; }
   .switch-ios.switch-toggle {
     background-color: #fafafa;
-    border: 1px solid lightgrey;
+    border: 1px solid #d3d3d3;
     border-radius: 30px;
     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0; }
     .switch-ios.switch-toggle a {
@@ -307,4 +307,4 @@
     -webkit-transform: translate3d(0, 0, 0); }
 
   to {
-    -webkit-transform: translate3d(0, 0, 0); } }
+    -webkit-transform: translate3d(0, 0, 0); } }