fix(component): toggle switches

rounded version with labels using icon font and border instead of svg
Orange-OpenSource · Jul 22, 2016 · 6c4add0 · 6c4add0
1 parent 382b27f
commit 6c4add0
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 60 deletions.
diff --git a/docs-orange/_includes/boostwatch/switches.html b/docs-orange/_includes/boostwatch/switches.html
@@ -1,23 +1,41 @@
 <h2 id="switches">Toggle and switches</h2>
 
-<h3>Switch</h3>
+<h3>Switches</h3>
 
-<div class="switch form-group row">
-    <label for="switch" class="form-control-label col-md-4 col-xs-8">WiFi</label>
-    <input id="switch" class="sr-only toggle" type="checkbox">
-    <label for="switch" aria-hidden="true" class="form-control-label col-md-3"></label>
+<div class="form-group row">
+  <label for="checkbox1" class="form-control-label col-md-3 col-xs-8">WiFi</label>
+  <input class="checkbox sr-only" id="checkbox1" type="checkbox" checked/>
+  <label for="checkbox1" class="checkbox-label form-control-label col-xs-3" aria-hidden="true">
+    <span class="on icon-checkbox-tick"></span>
+    <span class="off icon-delete"></span>
+  </label>
 </div>
 
-<div class="switch form-group row">
-    <label for="switch2" class="form-control-label col-md-4 col-xs-8">Bluetooth</label>
-    <input id="switch2" class="sr-only toggle" type="checkbox">
-    <label for="switch2" aria-hidden="true" class="form-control-label col-md-3"></label>
+<div class="form-group row">
+  <label for="checkbox3" class="form-control-label col-md-3 col-xs-8">Bluetooth</label>
+  <input class="checkbox success sr-only" id="checkbox3" type="checkbox"/>
+  <label for="checkbox3" class="checkbox-label form-control-label col-xs-3" aria-hidden="true">
+    <span class="on icon-checkbox-tick"></span>
+    <span class="off icon-delete"></span>
+  </label>
 </div>
 
-<div class="switch form-group row">
-    <label for="switch3" class="form-control-label col-md-4 col-xs-8">Notifications</label>
-    <input id="switch3" class="sr-only toggle" type="checkbox">
-    <label for="switch3" aria-hidden="true" class="form-control-label col-md-3"></label>
+<div class="form-group row">
+  <label for="checkbox2" class="form-control-label col-md-3 col-xs-8">WiFi</label>
+  <input class="checkbox sr-only" id="checkbox2" type="checkbox"/>
+  <label for="checkbox2" class="checkbox-label rounded form-control-label col-xs-3" aria-hidden="true">
+    <span class="on">On</span>
+    <span class="off">Off</span>
+  </label>
+</div>
+
+<div class="form-group row">
+  <label for="checkbox4" class="form-control-label col-md-3 col-xs-8">Bluetooth</label>
+  <input class="checkbox success sr-only" id="checkbox4" type="checkbox" checked/>
+  <label for="checkbox4" class="checkbox-label rounded form-control-label col-xs-3" aria-hidden="true">
+    <span class="on">On</span>
+    <span class="off">Off</span>
+  </label>
 </div>
 
 <h3>3 way toggle</h3>
@@ -46,4 +64,4 @@ <h3>3 way toggle without outline</h3>
   <label class="btn btn-secondary">
     <input type="radio" name="options" id="option3" autocomplete="off"> 3
   </label>
-</div>
+</div>
diff --git a/scss/_custom.scss b/scss/_custom.scss
@@ -331,13 +331,6 @@ $btn-border-radius:              $border-radius;
 $btn-border-radius-lg:           $border-radius-lg;
 $btn-border-radius-sm:           $border-radius-sm;
 
-
-// toggle switches
-
-// $toggle-switch-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Cpath%20d%3D%22M7.732%2015.275l4.3%204.1L22.27%209.64M39.396%209.447l11.208%2011.106m-11.208%200L50.604%209.447%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.999%22%2F%3E%3Cview%20viewBox%3D%220%200%2030%2030%22%2F%3E%3Cview%20viewBox%3D%2230%200%2030%2030%22%2F%3E%3C%2Fsvg%3E");
-
-$toggle-switch-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%20width%3D%2260%22%20height%3D%2230%22%3E%3Cview%20viewBox%3D%220%200%2030%2030%22%2F%3E%3Cview%20viewBox%3D%2230%200%2030%2030%22%2F%3E%3Cpath%20d%3D%22M0%200h60v30H0z%22%2F%3E%3Cpath%20style%3D%22line-height%3Anormal%3Btext-indent%3A0%3Btext-align%3Astart%3Btext-decoration-line%3Anone%3Btext-decoration-style%3Asolid%3Btext-decoration-color%3A%23000000%3Btext-transform%3Anone%3Bblock-progression%3Atb%3Bisolation%3Aauto%3Bmix-blend-mode%3Anormal%22%20d%3D%22M40.452%208.383l-2.11%202.13L42.87%2015l-4.53%204.488%202.112%202.13%204.55-4.51%204.548%204.51%202.11-2.13L47.13%2015l4.53-4.488-2.11-2.13-4.55%204.51-4.548-4.51zM21.236%208.554l-9.203%208.752-3.267-3.116-2.07%202.17%205.333%205.086%2011.273-10.718-2.067-2.174z%22%20color%3D%22%23000%22%20font-family%3D%22sans-serif%22%20white-space%3D%22normal%22%20overflow%3D%22visible%22%20solid-color%3D%22%23000000%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
-
 // Accordions
 
 $accordion-arrow-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%207%22%3E%3Cpath%20d%3D%22M7%200l7%207H0l7-7z%22%2F%3E%3C%2Fsvg%3E");
@@ -578,9 +571,10 @@ $pagination-disabled-border:           #000;
 
 $pagination-icon-prev: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M9%202L7%200%200%207l7%207%202-2-5-5%205-5z%22%2F%3E%3C%2Fsvg%3E") !default;
 $pagination-icon-prev-disabled: url("data:image/svg+xml;charset=utf8, %3Csvg%20viewBox%3D%220%200%209%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%202L7%200%200%207l7%207%202-2-5-5%205-5z%22%20fill%3D%22%23DDD%22%2F%3E%3C%2Fsvg%3E") !default;
+$pagination-icon-prev-active: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M9%202L7%200%200%207l7%207%202-2-5-5%205-5z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") !default;
 $pagination-icon-next: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M0%202l2-2%207%207-7%207-2-2%205-5-5-5z%22%2F%3E%3C%2Fsvg%3E") !default;
 $pagination-icon-next-disabled: url("data:image/svg+xml;charset=utf8, %3Csvg%20viewBox%3D%220%200%209%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%202l2-2%207%207-7%207-2-2%205-5-5-5z%22%20fill%3D%22%23DDD%22%2F%3E%3C%2Fsvg%3E") !default;
-
+$pagination-icon-next-active: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%2014%22%3E%3Cpath%20d%3D%22M0%202l2-2%207%207-7%207-2-2%205-5-5-5z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") !default;
 
 // Jumbotron
 

diff --git a/scss/_o-buttons.scss b/scss/_o-buttons.scss
@@ -402,68 +402,98 @@ fieldset[disabled] a.btn {
   }
 }
 
-// single toggle
+// switches
 
-.switch {
+.checkbox-label,
+.checkbox-label::before,
+.checkbox-label .on,
+.checkbox-label .off {
+  transition: .4s;
+}
 
-  &.form-group {
-    margin-bottom: 0;
-  }
+.checkbox-label {
+  position: relative;
+  display: block;
+  width: 3.75rem;
+  height: 1.875rem;
+  margin: .3125rem 0;
+  background: $gray;
+  border: 2px solid $gray;
 
-  input[type="checkbox"].toggle {
-    width: 1px;
-    height: 1px;
+  &.rounded,
+  &.rounded::before {
+    border-radius: 1.625rem;
   }
 
-  .toggle + label {
-    position: relative;
+  .on {
+    position: absolute;
+    left: .375rem;
+    z-index: 0;
     display: block;
-    cursor: pointer;
-    user-select: none;
-    outline: none;
+    font-weight: bold;
+    line-height: 1.625rem;
+    color: #fff;
+    opacity: 0;
   }
 
-  input.toggle + label {
-    display: inline-block;
-    width: 3.75rem;
-    height: 1.875rem;
-    padding: 0;
-    margin: .3125rem 0;
+  .off {
+    position: absolute;
+    right: .375rem;
+    z-index: 0;
+    display: block;
+    font-weight: bold;
+    line-height: 1.625rem;
+    color: #fff;
+    text-align: right;
+    opacity: 1;
   }
 
-  input.toggle + label::before,
-  input.toggle + label::after {
+  &::before {
     position: absolute;
     top: 0;
-    bottom: 0;
     left: 0;
+    z-index: 1;
     display: block;
+    width: 1.625rem;
+    height: 1.625rem;
     content: "";
+    background: #fff;
   }
+}
 
-  input.toggle + label::before {
-    right: 0;
-    background-color: #000;
-    background-image: $toggle-switch-icon;
+.checkbox {
+  @include focus {
+    + .checkbox-label::before {
+      outline: 1px dotted #fff;
+    }
   }
 
-  input.toggle + label::after {
-    top: 2px;
-    left: 2px;
-    width: 1.75rem;
-    height: 1.625rem;
-    margin-left: 1.75rem;
-    background-color: #fff;
-    transition: margin .4s;
+  &:checked {
+    + .checkbox-label {
+      background: $brand-primary;
+      border-color: $brand-primary;
+      .on {
+        opacity: 1;
+      }
+      .off {
+        opacity: 0;
+      }
+      &::before {
+        left: 1.875rem;
+      }
+    }
   }
 
-  input.toggle:checked + label::after {
-    margin-left: 0;
+  &.success:checked {
+    + .checkbox-label {
+      background: $brand-success;
+      border-color: $brand-success;
+    }
   }
 }
 
-.switch input:focus.toggle + label::after {
-  outline: 1px #fff dotted;
+.form-group .form-control-label.checkbox-label {
+  padding: 0;
 }
 
 // 3 way toggles