_button.scss
5 years ago
_checkbox.scss
5 years ago
_collapse.scss
5 years ago
_colorpicker.scss
5 years ago
_dimensions.scss
5 years ago
_f-select.scss
5 years ago
_iconpicker.scss
5 years ago
_input.scss
5 years ago
_list-table.scss
5 years ago
_notice.scss
5 years ago
_pagination.scss
5 years ago
_radio.scss
5 years ago
_repeater.scss
5 years ago
_select.scss
5 years ago
_switcher.scss
5 years ago
_tabs.scss
5 years ago
_textarea.scss
5 years ago
_time.scss
5 years ago
_wp-media.scss
5 years ago
_switcher.scss
44 lines
| 1 | $color__switcher-panel-off: #ECECEC; |
| 2 | $color__switcher-panel-on: $color__accent-light; |
| 3 | |
| 4 | $color__switcher-trigger-off: #fff; |
| 5 | $color__switcher-trigger-on: $color__accent; |
| 6 | |
| 7 | .cx-vui-switcher { |
| 8 | width: 36px; |
| 9 | position: relative; |
| 10 | cursor: pointer; |
| 11 | padding: 3px 0; |
| 12 | &__panel { |
| 13 | width: 100%; |
| 14 | height: 12px; |
| 15 | border-radius: 6px; |
| 16 | background: $color__switcher-panel-off; |
| 17 | transition: all 150ms linear; |
| 18 | .cx-vui-switcher--on & { |
| 19 | background: $color__switcher-panel-on; |
| 20 | } |
| 21 | } |
| 22 | &__trigger { |
| 23 | width: 18px; |
| 24 | height: 18px; |
| 25 | left: 0; |
| 26 | top: 50%; |
| 27 | margin-top: -9px; |
| 28 | box-shadow: 0px 1px 4px rgba(35, 40, 45, 0.24); |
| 29 | transition: all 150ms linear; |
| 30 | background: $color__switcher-trigger-off; |
| 31 | border-radius: 100%; |
| 32 | position: absolute; |
| 33 | .cx-vui-switcher--on & { |
| 34 | background: $color__switcher-trigger-on; |
| 35 | left: calc( 100% - 18px ); |
| 36 | } |
| 37 | .cx-vui-switcher--in-focus & { |
| 38 | box-shadow: 0px 1px 4px rgba(35, 40, 45, 0.24), 0 0 0 9px rgba(166,167,168, .2); |
| 39 | } |
| 40 | .cx-vui-switcher--on.cx-vui-switcher--in-focus & { |
| 41 | box-shadow: 0px 1px 4px rgba(35, 40, 45, 0.24), 0 0 0 9px rgba(0,124,186, .2); |
| 42 | } |
| 43 | } |
| 44 | } |