167 lines
4.4 KiB
Sass
Executable File
167 lines
4.4 KiB
Sass
Executable File
// CSS TOGGLE SWITCHES (Ionuț Colceriu)
|
|
// Licensed under Unlicense
|
|
// https://github.com/ghinda/css-toggle-switch
|
|
|
|
//Hide by default
|
|
.switch .slide-button, .toggle p span
|
|
display: none
|
|
.switch
|
|
background-color: darken($bg-content-color,15%)
|
|
border-radius: 3px
|
|
label
|
|
padding: 0
|
|
cursor: pointer
|
|
//Toggle Switches
|
|
//We can't test for a specific feature, so we only target browsers with support for media queries.
|
|
//Position the label over all the elements, except the slide-button
|
|
//Clicking anywhere on the label will change the switch-state
|
|
// Don't hide the input from screen-readers and keyboard access
|
|
@media only screen
|
|
// Checkbox
|
|
.toggle
|
|
position: relative
|
|
padding: 0
|
|
margin-left: 100px
|
|
label
|
|
position: relative
|
|
z-index: 3
|
|
display: block
|
|
width: 100%
|
|
input
|
|
position: absolute
|
|
opacity: 0
|
|
z-index: 5
|
|
p
|
|
position: absolute
|
|
left: -100px
|
|
width: 100%
|
|
margin: 0
|
|
padding-right: 100px
|
|
text-align: left
|
|
p span
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
z-index: 5
|
|
display: block
|
|
width: 50%
|
|
margin-left: 100px
|
|
text-align: center
|
|
&:last-child
|
|
left: 50%
|
|
.slide-button
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
z-index: 4
|
|
display: block
|
|
width: 50%
|
|
height: 100%
|
|
padding: 0
|
|
// Radio Switch
|
|
.switch
|
|
position: relative
|
|
padding: 0
|
|
input
|
|
position: absolute
|
|
opacity: 0
|
|
label
|
|
position: relative
|
|
z-index: 2
|
|
float: left
|
|
width: 50%
|
|
height: 100%
|
|
margin: 0
|
|
text-align: center
|
|
.slide-button
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
padding: 0
|
|
z-index: 1
|
|
width: 50%
|
|
height: 100%
|
|
input:last-of-type:checked ~ .slide-button
|
|
left: 50%
|
|
// Switch with 3 items
|
|
&.switch-three label, &.switch-three .slide-button
|
|
width: 33.3%
|
|
&.switch-three input:checked:nth-of-type(2) ~ .slide-button
|
|
left: 33.3%
|
|
&.switch-three input:checked:last-of-type ~ .slide-button
|
|
left: 66.6%
|
|
// Switch with 4 items
|
|
&.switch-four label, &.switch-four .slide-button
|
|
width: 25%
|
|
&.switch-four input:checked:nth-of-type(2) ~ .slide-button
|
|
left: 25%
|
|
&.switch-four input:checked:nth-of-type(3) ~ .slide-button
|
|
left: 50%
|
|
&.switch-four input:checked:last-of-type ~ .slide-button
|
|
left: 75%
|
|
// Switch with 5 items
|
|
&.switch-five label, &.switch-five .slide-button
|
|
width: 20%
|
|
&.switch-five input:checked:nth-of-type(2) ~ .slide-button
|
|
left: 20%
|
|
&.switch-five input:checked:nth-of-type(3) ~ .slide-button
|
|
left: 40%
|
|
&.switch-five input:checked:nth-of-type(4) ~ .slide-button
|
|
left: 60%
|
|
&.switch-five input:checked:last-of-type ~ .slide-button
|
|
left: 80%
|
|
// Shared
|
|
.toggle, .switch
|
|
display: block
|
|
height: $input-height-base
|
|
.switch *, .toggle *
|
|
-webkit-box-sizing: border-box
|
|
-moz-box-sizing: border-box
|
|
-ms-box-sizing: border-box
|
|
-o-box-sizing: border-box
|
|
box-sizing: border-box
|
|
.switch .slide-button, .toggle .slide-button
|
|
display: block
|
|
-webkit-transition: all 0.3s ease-out
|
|
-moz-transition: all 0.3s ease-out
|
|
-ms-transition: all 0.3s ease-out
|
|
-o-transition: all 0.3s ease-out
|
|
transition: all 0.3s ease-out
|
|
.toggle label, .toggle p, .switch label
|
|
line-height: $input-height-base
|
|
vertical-align: middle
|
|
.toggle input:checked ~ .slide-button
|
|
right: 50%
|
|
// Outline the toggles when the inputs are focused
|
|
.toggle input:focus ~ .slide-button, .switch input:focus + label
|
|
outline: 1px dotted #888
|
|
// Bugfix for older Webkit, including mobile Webkit. Adapted from:
|
|
// http://css-tricks.com/webkit-sibling-bug/
|
|
.switch, .toggle
|
|
-webkit-animation: bugfix infinite 1s
|
|
//@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }
|
|
|
|
// Prestashop Theme
|
|
.prestashop-switch
|
|
min-width: 150px
|
|
color: #666
|
|
text-align: center
|
|
border-radius: 3px
|
|
@include box-shadow(rgba(black,0.2) 0 2px 5px 1px inset)
|
|
label
|
|
padding-top: 0!important
|
|
font-weight: 500
|
|
input:checked + label
|
|
color: #333
|
|
@include text-shadow(rgba(white,0.7) 1px 1px 0)
|
|
.slide-button
|
|
position: relative
|
|
margin-right: 3px
|
|
border-color: darken($bg-content-color,20%)
|
|
color: lighten($bg-content-color,50%)
|
|
@include background(linear-gradient(top,$bg-content-color, darken($bg-content-color,10%)))
|
|
@include box-shadow(rgba(white,1) 0 0 0 1px inset)
|
|
p
|
|
color: #333
|
|
span
|
|
color: #fff |