Merge pull request auth0#43 from auth0/ui-switch-labeled

Added labeled switches in different sizes.

Author: Cherna

landing/styles/inc/playground.styl

@@ -87,6 +87,3 @@
   #modal-component,
   #ui-switch-component
     padding: 40px;
-
-    > * + *
-      margin-left: 20px;

lib/ui-switch/demo.jade

@@ -1,3 +1,5 @@
+<!-- Normal UI switch -->
+
 .ui-switch
   input(type="checkbox")
   label.status
@@ -13,3 +15,83 @@
 .ui-switch
   input(type="checkbox" disabled)
   label.status
+
+br
+
+<!-- Labeled UI switch sm -->
+
+.ui-switch.ui-switch-labeled.ui-switch-sm
+  input(type="checkbox")
+  label(data-label-true="True", data-label-false="False").status
+  
+.ui-switch.ui-switch-labeled.ui-switch-sm
+  input(type="checkbox" checked)
+  label(data-label-true="True", data-label-false="False").status
+
+.ui-switch.ui-switch-labeled.ui-switch-sm
+  input(type="checkbox" checked disabled)
+  label(data-label-true="True", data-label-false="False").status
+
+.ui-switch.ui-switch-labeled.ui-switch-sm
+  input(type="checkbox" disabled)
+  label(data-label-true="True", data-label-false="False").status
+
+br
+
+<!-- Labeled UI switch md -->
+
+.ui-switch.ui-switch-labeled.ui-switch-md
+  input(type="checkbox")
+  label(data-label-true="Authorized", data-label-false="Unauthorized").status
+  
+.ui-switch.ui-switch-labeled.ui-switch-md
+  input(type="checkbox" checked)
+  label(data-label-true="Authorized", data-label-false="Unauthorized").status
+
+.ui-switch.ui-switch-labeled.ui-switch-md
+  input(type="checkbox" checked disabled)
+  label(data-label-true="Authorized", data-label-false="Unauthorized").status
+
+.ui-switch.ui-switch-labeled.ui-switch-md
+  input(type="checkbox" disabled)
+  label(data-label-true="Authorized", data-label-false="Unauthorized").status
+
+br
+
+<!-- Labeled UI switch lg -->
+
+.ui-switch.ui-switch-labeled.ui-switch-lg
+  input(type="checkbox")
+  label(data-label-true="Authorized safely", data-label-false="Unauthorized safely").status
+  
+.ui-switch.ui-switch-labeled.ui-switch-lg
+  input(type="checkbox" checked)
+  label(data-label-true="Authorized safely", data-label-false="Unauthorized safely").status
+
+.ui-switch.ui-switch-labeled.ui-switch-lg
+  input(type="checkbox" checked disabled)
+  label(data-label-true="Authorized safely", data-label-false="Unauthorized safely").status
+
+.ui-switch.ui-switch-labeled.ui-switch-lg
+  input(type="checkbox" disabled)
+  label(data-label-true="Authorized safely", data-label-false="Unauthorized safely").status
+
+br
+
+<!-- Labeled UI switch xl -->
+
+.ui-switch.ui-switch-labeled.ui-switch-xl
+  input(type="checkbox")
+  label(data-label-true="Authorized very easily", data-label-false="Unauthorized very easily").status
+  
+.ui-switch.ui-switch-labeled.ui-switch-xl
+  input(type="checkbox" checked)
+  label(data-label-true="Authorized very easily", data-label-false="Unauthorized very easily").status
+
+.ui-switch.ui-switch-labeled.ui-switch-xl
+  input(type="checkbox" checked disabled)
+  label(data-label-true="Authorized very easily", data-label-false="Unauthorized very easily").status
+
+.ui-switch.ui-switch-labeled.ui-switch-xl
+  input(type="checkbox" disabled)
+  label(data-label-true="Authorized very easily", data-label-false="Unauthorized very easily").status

lib/ui-switch/index.styl

@@ -49,3 +49,51 @@
       transition: transform 100ms ease;
       border-radius: 50%;
       transform: translate(-5%, -5%);
+
+// Labeled switches
+.ui-switch.ui-switch-labeled
+  .status
+    &:before
+      z-index 10
+    &:after
+      content attr(data-label-false)
+      font-size 12px
+      position absolute
+      left calc(50% + 11px)
+      top 50%
+      transform: translate(-50%, -50%);
+      z-index 0
+      white-space nowrap
+  
+  input[type="checkbox"]
+    &:checked + .status:after
+      content attr(data-label-true)
+      left calc(50% - 11px)
+  
+  &.ui-switch-sm
+    width 90px
+    
+    input[type="checkbox"]
+      &:checked + .status:before
+        transform: translate(58px, -5%);
+      
+  &.ui-switch-md
+    width 120px
+  
+    input[type="checkbox"]
+      &:checked + .status:before
+        transform: translate(88px, -5%);
+  
+  &.ui-switch-lg
+    width 160px
+  
+    input[type="checkbox"]
+      &:checked + .status:before
+        transform: translate(128px, -5%);
+  
+  &.ui-switch-xl
+    width 200px
+  
+    input[type="checkbox"]
+      &:checked + .status:before
+        transform: translate(168px, -5%);