ux(): checkbox experiment

public/sass/components/_switch.scss

@@ -40,20 +40,35 @@ $switch-height: 1.5rem;
     color: #fff;
     color: #fff;
     font-size: $font-size-sm;
     font-size: $font-size-sm;
     text-align: center;
     text-align: center;
-    line-height: 2.6rem;
+    line-height: 2.8rem;
+    font-size: 150%;
   }
   }
 
 
   input + label:before {
   input + label:before {
     @include buttonBackground($input-bg, lighten($input-bg, 5%));
     @include buttonBackground($input-bg, lighten($input-bg, 5%));
-    content: attr(data-off);
-    transition: transform 0.5s;
+    //content: attr(data-off);
+    font-family: 'FontAwesome';
+    //content: "\f00c";
+
+    //content: "\f096"; // square-o
+    content: "\f046"; // check-square-o
+    color: darken($text-color-weak, 17%);
+    transition: transform 0.4s;
     backface-visibility: hidden;
     backface-visibility: hidden;
+    text-shadow: 0px 0px 5px rgb(45, 45, 45);
   }
   }
 
 
   input + label:after {
   input + label:after {
-    @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
-    content: attr(data-on);
-    transition: transform 0.5s;
+    @include buttonBackground($input-bg, lighten($input-bg, 5%));
+    //@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+    //content: attr(data-on);
+    //content: "\f00c";
+    content: "\f046"; // check-square-o
+    color: #FF8600;
+    text-shadow: 0px 0px 5px rgb(45, 45, 45);
+
+    font-family: 'FontAwesome';
+    transition: transform 0.4s;
     transform: rotateY(180deg);
     transform: rotateY(180deg);
     backface-visibility: hidden;
     backface-visibility: hidden;
   }
   }