1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- .btnswitch
- display flex
- align-items center
- &__text
- margin-left 10px
-
- .switch
- position relative
- display inline-block
- width 60px
- height 34px
-
- .switch input
- display none
-
- .slider
- position absolute
- cursor pointer
- top 0
- left 0
- right 0
- bottom 0
- background-color #ccc
- -webkit-transition .4s
- transition .4s
-
- .slider:before
- position absolute
- content ""
- height 26px
- width 26px
- left 4px
- bottom 4px
- background-color white
- -webkit-transition .4s
- transition .4s
-
- input:checked + .slider
- background-color blue
-
- input:focus + .slider
- box-shadow 0 0 1px thirdColor
-
- input:checked + .slider:before
- -webkit-transform translateX(26px)
- -ms-transform translateX(26px)
- transform translateX(26px)
-
- /* Rounded sliders */
- .slider.round
- border-radius 34px
-
- .slider.round:before
- border-radius: 50%
-
|