Bootstrap Switches

Bootstrap-Switches.markdown

Bootstrap Switches

Here are some Bootstrap Switches that I created with uilang Enjoy!!!

A Pen by Jeremy Bolding on CodePen.

License.

index.jade

.wrapper
  .container
    h1 Horizontal Switches
    #switch-h1
      #circle-h1
    #switch-h2
      #circle-h2
    #switch-h3
      #circle-h3
    #switch-h4
      #circle-h4
    #switch-h5
      #circle-h5
  hr
  .container
    h1 Vertical Switches
    #switch-v1
      #circle-v1
    #switch-v2
      #circle-v2
    #switch-v3
      #circle-v3
    #switch-v4
      #circle-v4
    #switch-v5
      #circle-v5
code 
  | clicking on "#switch-h1" toggles class "primary" on "#switch-h1"
  | clicking on "#switch-h2" toggles class "success" on "#switch-h2"
  | clicking on "#switch-h3" toggles class "info" on "#switch-h3"
  | clicking on "#switch-h4" toggles class "warning" on "#switch-h4"
  | clicking on "#switch-h5" toggles class "danger" on "#switch-h5"
  
  | clicking on "#switch-v1" toggles class "primary" on "#switch-v1"
  | clicking on "#switch-v2" toggles class "success" on "#switch-v2"
  | clicking on "#switch-v3" toggles class "info" on "#switch-v3"
  | clicking on "#switch-v4" toggles class "warning" on "#switch-v4"
  | clicking on "#switch-v5" toggles class "danger" on "#switch-v5"

script.js

document.addEventListener("DOMContentLoaded",function(){function n(a){var b=a.charAt(0);a=a.split(b);this.clickSelector=a[1];this.classBehavior=a[2].trim().split(" ")[0];this.classValue=a[3];this.targetSelector=a[5]}function f(a,b,c,d){this.clickSelector=a;this.classBehavior="s"==b.charAt(b.length-1)?b.substring(0,b.length-1):b;this.classValue="."==c.charAt(0)?c.substring(1,c.length):c;this.targetSelector=d;this.createEventListener()}for(var g=document.getElementsByTagName("code"),h=g.length,e,k;h--;){var l=
g[h],m=l.textContent.trim();if(0===m.lastIndexOf("clicking on",0)){e=l;k=m;break}}e&&(e.parentNode.removeChild(e),f.prototype.createEventListener=function(){function a(a){switch(b.targetSelector){case "target":case "this":case "it":case "itself":case void 0:a.target.classList[b.classBehavior](b.classValue);break;default:for(var c=document.querySelectorAll(b.targetSelector),d=c.length;d--;)c.item(d).classList[b.classBehavior](b.classValue)}"a"==a.target.nodeName.toLowerCase()&&a.preventDefault()}var b=
this,c=document.querySelectorAll(b.clickSelector),d=c.length;if(1>d)throw Error("There's no element matching your \""+b.clickSelector+'" CSS selector.');for(;d--;)c.item(d).addEventListener("click",a)},k.split("clicking on").forEach(function(a){a&&(a=new n(a.trim()),new f(a.clickSelector,a.classBehavior,a.classValue,a.targetSelector))}))});

style.sass

@import "bourbon"
body
  background: #fff
.wrapper
  display: block
  +size(70% auto)
  margin: 0 20%
  .container:nth-child(2)
    margin: 0 9%
  hr
    margin: 40px auto
    +size(60% 0px)
    border:
      top: 1px solid #888
      bottom: 1px solid #ccc
.container
  h1
    margin: 10px 0
  display: block
  font:
    family: $helvetica
    size: 13px
    weight: 300
  text:
    align: center
    transform: uppercase
  color: #333
@for $i from 1 through 5
  #switch-h#{$i}
    +size(100px 50px)
    +transition(0.4s)
    display: inline-block
    margin: 20px 15px
    border: 2px solid darken(#eaeaeb, 8%)
      radius: 27px
    background: #fafafb
  #switch-v#{$i}
    +size(50px 100px)
    +transition(0.4s)
    display: inline-block
    margin: 20px 15px
    border: 2px solid darken(#eaeaeb, 8%)
      radius: 27px
    background: #fafafb
  #circle-h#{$i}
    +transition(0.4s)
    +transform(translateX(0%))
    +size(50% 50px)
    border-radius: 50%
  #circle-v#{$i}
    +transition(0.4s)
    +transform(translateX(0%))
    +size(50px 50%)
    border-radius: 50%
  #switch-h#{$i}
    #circle-h#{$i}
      background: #eaeaeb
    &.primary
      border-color: darken(#428bca, 8%)
      background: #428bca
      #circle-h#{$i}
        +transform(translateX(100%))
        background: #fff
    &.success
      border-color: darken(#5cb85c, 8%)
      background: #5cb85c
      #circle-h#{$i}
        +transform(translateX(100%))
        background: #fff
    &.info
      border-color: darken(#5bc0de, 8%)
      background: #5bc0de
      #circle-h#{$i}
        +transform(translateX(100%))
        background: #fff
    &.warning
      border-color: darken(#f0ad4e, 8%)
      background: #f0ad4e
      #circle-h#{$i}
        +transform(translate(100%))
        background: #fff
    &.danger
      border-color: darken(#d9534f, 8%)
      background: #d9534f
      #circle-h#{$i}
        +transform(translateX(100%))
        background: #fff
  #switch-v#{$i}
    #circle-v#{$i}
      background: #eaeaeb
    &.primary
      border-color: darken(#428bca, 8%)
      background: #428bca
      #circle-v#{$i}
        +transform(translateY(100%))
        background: #fff
    &.success
      border-color: darken(#5cb85c, 8%)
      background: #5cb85c
      #circle-v#{$i}
        +transform(translateY(100%))
        background: #fff
    &.info
      border-color: darken(#5bc0de, 8%)
      background: #5bc0de
      #circle-v#{$i}
        +transform(translateY(100%))
        background: #fff
    &.warning
      border-color: darken(#f0ad4e, 8%)
      background: #f0ad4e
      #circle-v#{$i}
        +transform(translateY(100%))
        background: #fff
    &.danger
      border-color: darken(#d9534f, 8%)
      background: #d9534f
      #circle-v#{$i}
        +transform(translateY(100%))
        background: #fff