Rev 182 | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 179 | espaco | 1 | body { |
| 2 | .ui-toggleswitch { |
||
| 3 | position: relative; |
||
| 4 | display: inline-block; |
||
| 5 | width: 3rem; |
||
| 6 | height: 1.75rem; |
||
| 7 | |||
| 8 | .ui-toggleswitch-slider { |
||
| 9 | position: absolute; |
||
| 10 | cursor: pointer; |
||
| 11 | top: 0; |
||
| 12 | left: 0; |
||
| 13 | right: 0; |
||
| 14 | bottom: 0; |
||
| 15 | background: $inputSwitchOffBg; |
||
| 16 | transition: $transition; |
||
| 17 | border-radius: $inputSwitchBorderRadius; |
||
| 18 | } |
||
| 19 | |||
| 20 | .ui-toggleswitch-slider:before { |
||
| 21 | position: absolute; |
||
| 22 | content: ""; |
||
| 23 | top: 50%; |
||
| 24 | background: $inputSwitchHandleOffBg; |
||
| 25 | width: 1.250rem; |
||
| 26 | height: 1.250rem; |
||
| 27 | left: .25rem; |
||
| 28 | margin-top: -1 * 1.250rem / 2; |
||
| 29 | border-radius: $inputSwitchHandleBorderRadius; |
||
| 30 | transition: transform $transitionDuration; |
||
| 31 | } |
||
| 32 | |||
| 33 | &.ui-toggleswitch-checked { |
||
| 34 | .ui-toggleswitch-slider:before { |
||
| 35 | transform: translateX(1.250rem); |
||
| 36 | } |
||
| 37 | } |
||
| 38 | |||
| 39 | &.ui-toggleswitch-focus { |
||
| 40 | .ui-toggleswitch-slider { |
||
| 41 | @include focused(); |
||
| 42 | } |
||
| 43 | } |
||
| 44 | |||
| 45 | &.ui-toggleswitch-checked { |
||
| 46 | .ui-toggleswitch-slider { |
||
| 47 | background: $inputSwitchOnBg; |
||
| 48 | |||
| 49 | &:before { |
||
| 50 | background: $inputSwitchHandleOnBg; |
||
| 51 | } |
||
| 52 | } |
||
| 53 | } |
||
| 54 | } |
||
| 55 | } |