1
  2/**
  3 * Toggle
  4 * --------------------------------------------------
  5 */
  6
  7.item-toggle {
  8  pointer-events: none;
  9}
 10
 11.toggle {
 12  // set the color defaults
 13  @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
 14
 15  position: relative;
 16  display: inline-block;
 17  pointer-events: auto;
 18  margin: -$toggle-hit-area-expansion;
 19  padding: $toggle-hit-area-expansion;
 20
 21  &.dragging {
 22    .handle {
 23      background-color: $toggle-handle-dragging-bg-color !important;
 24    }
 25  }
 26
 27}
 28
 29.toggle {
 30  &.toggle-light  {
 31    @include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
 32  }
 33  &.toggle-stable  {
 34    @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
 35  }
 36  &.toggle-positive  {
 37    @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
 38  }
 39  &.toggle-calm  {
 40    @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
 41  }
 42  &.toggle-assertive  {
 43    @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
 44  }
 45  &.toggle-balanced  {
 46    @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
 47  }
 48  &.toggle-energized  {
 49    @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
 50  }
 51  &.toggle-royal  {
 52    @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
 53  }
 54  &.toggle-dark  {
 55    @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
 56  }
 57}
 58
 59.toggle input {
 60  // hide the actual input checkbox
 61  display: none;
 62}
 63
 64/* the track appearance when the toggle is "off" */
 65.toggle .track {
 66  @include transition-timing-function(ease-in-out);
 67  @include transition-duration($toggle-transition-duration);
 68  @include transition-property((background-color, border));
 69
 70  display: inline-block;
 71  box-sizing: border-box;
 72  width: $toggle-width;
 73  height: $toggle-height;
 74  border: solid $toggle-border-width $toggle-off-border-color;
 75  border-radius: $toggle-border-radius;
 76  background-color: $toggle-off-bg-color;
 77  content: ' ';
 78  cursor: pointer;
 79  pointer-events: none;
 80}
 81
 82/* Fix to avoid background color bleeding */
 83/* (occurred on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */
 84.platform-android4_2 .toggle .track {
 85  -webkit-background-clip: padding-box;
 86}
 87
 88/* the handle (circle) thats inside the toggle's track area */
 89/* also the handle's appearance when it is "off" */
 90.toggle .handle {
 91  @include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
 92  @include transition-property((background-color, transform));
 93  position: absolute;
 94  display: block;
 95  width: $toggle-handle-width;
 96  height: $toggle-handle-height;
 97  border-radius: $toggle-handle-radius;
 98  background-color: $toggle-handle-off-bg-color;
 99  top: $toggle-border-width + $toggle-hit-area-expansion;
100  left: $toggle-border-width + $toggle-hit-area-expansion;
101  box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15);
102
103  &:before {
104    // used to create a larger (but hidden) hit area to slide the handle
105    position: absolute;
106    top: -4px;
107    left: ( ($toggle-handle-width / 2) * -1) - 8;
108    padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
109    content: " ";
110  }
111}
112
113.toggle input:checked + .track .handle {
114  // the handle when the toggle is "on"
115  @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
116  background-color: $toggle-handle-on-bg-color;
117}
118
119.item-toggle.active {
120  box-shadow: none;
121}
122
123.item-toggle,
124.item-toggle.item-complex .item-content {
125  // make sure list item content have enough padding on right to fit the toggle
126  padding-right: ($item-padding * 3) + $toggle-width;
127}
128
129.item-toggle.item-complex {
130  padding-right: 0;
131}
132
133.item-toggle .toggle {
134  // position the toggle to the right within a list item
135  position: absolute;
136  top: ($item-padding / 2) + 2;
137  right: $item-padding;
138  z-index: $z-index-item-toggle;
139}
140
141.toggle input:disabled + .track {
142  opacity: .6;
143}
144
145.toggle-small {
146
147  .track {
148    border: 0;
149    width: 34px;
150    height: 15px;
151    background: #9e9e9e;
152  }
153  input:checked + .track {
154    background: rgba(0,150,137,.5);
155  }
156  .handle {
157    top: 2px;
158    left: 4px;
159    width: 21px;
160    height: 21px;
161    box-shadow: 0 2px 5px rgba(0,0,0,.25);
162  }
163  input:checked + .track .handle {
164    @include translate3d(16px, 0, 0);
165    background: rgb(0,150,137);
166  }
167  &.item-toggle .toggle {
168    top: 19px;
169  }
170
171  .toggle-light  {
172    @include toggle-small-style($toggle-on-light-bg);
173  }
174  .toggle-stable  {
175    @include toggle-small-style($toggle-on-stable-bg);
176  }
177  .toggle-positive  {
178    @include toggle-small-style($toggle-on-positive-bg);
179  }
180  .toggle-calm  {
181    @include toggle-small-style($toggle-on-calm-bg);
182  }
183  .toggle-assertive  {
184    @include toggle-small-style($toggle-on-assertive-bg);
185  }
186  .toggle-balanced  {
187    @include toggle-small-style($toggle-on-balanced-bg);
188  }
189  .toggle-energized  {
190    @include toggle-small-style($toggle-on-energized-bg);
191  }
192  .toggle-royal  {
193    @include toggle-small-style($toggle-on-royal-bg);
194  }
195  .toggle-dark  {
196    @include toggle-small-style($toggle-on-dark-bg);
197  }
198}