UNPKG

@ismailarilik/angular-bootstrap-toggle-switch

Version:

Toggle Switches for AngularJS (and optionally Bootstrap). Based off [Bootstrap switch](http://www.larentis.eu/switch/) by Matt Lartentis and forked from [cgarvis](https://github.com/cgarvis/angular-toggle-switch).

92 lines (77 loc) 1.69 kB
// out: angular-toggle-switch.css // Opacity .opacity-bs3(@opacity) { opacity: @opacity; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; } .ats-switch { border: 1px solid; cursor: pointer; display: inline-block; text-align: left; overflow: hidden; line-height: 8px; min-width: 100px; &.disabled { .opacity-bs3(.5); cursor: default !important; .switch-left, .switch-right, .knob { cursor: default !important; } } span { cursor: pointer; display: inline-block; float: left; height: 100%; line-height: 20px; padding: 4px; text-align: center; width: 33%; white-space: nowrap; box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } > div { position: relative; width: 150%; } .knob { background: red; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background-color: #f5f5f5; width: 34%; z-index: 100; } .switch-on { left: 0%; } .switch-off { left: -50% } .swtich-left, .switch-right { z-index: 1; } .switch-left { color: #fff; background: #005fcc; } .switch-right { color: #333; background: #f0f0f0; } .switch-animate { transition: left 0.5s; -o-transition: left 0.5s; -moz-transition: left 0.5s; -webkit-transition: left 0.5s; } }