103 lines
No EOL
1.9 KiB
CSS
103 lines
No EOL
1.9 KiB
CSS
.switch-1 {
|
|
width: 18px
|
|
}
|
|
|
|
.switch-3 {
|
|
width: 63px
|
|
}
|
|
|
|
.switch-toggle {
|
|
height: 18px;
|
|
position: relative;
|
|
display: inline;
|
|
padding: 0!important;
|
|
cursor: normal;
|
|
-moz-user-select: none
|
|
}
|
|
|
|
.switch-toggle *,
|
|
.switch-toggle *:before,
|
|
.switch-toggle *:after {
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.switch-toggle input {
|
|
position: absolute;
|
|
left: 0;
|
|
opacity: 0
|
|
}
|
|
|
|
.switch-toggle input+label {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: inline;
|
|
margin: 0
|
|
}
|
|
|
|
.switch-toggle a {
|
|
display: inline;
|
|
transition: all .1s ease-out;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0;
|
|
z-index: 1;
|
|
width: 10px;
|
|
height: 100%
|
|
}
|
|
|
|
.switch-toggle.switch-1 label:nth-child(2),
|
|
.switch-toggle.switch-1 label:nth-child(2)~a {
|
|
width: 100%
|
|
}
|
|
|
|
.switch-toggle.switch-3 label,
|
|
.switch-toggle.switch-3 a {
|
|
width: 33.33%
|
|
}
|
|
|
|
.switch-toggle.switch-3 label~input:checked:nth-child(3)+label~a {
|
|
left: 33.33%
|
|
}
|
|
|
|
.switch-toggle.switch-3 label~input:checked:nth-child(5)+label~a {
|
|
left: 66.66%
|
|
}
|
|
|
|
.switch-toggle.switch-candy {
|
|
background-color: transparent;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2)
|
|
}
|
|
|
|
.switch-toggle.switch-candy.switch-1 label {
|
|
color: transparent;
|
|
font-size: 16px;
|
|
text-shadow: 1px 1px 1px transparent
|
|
}
|
|
|
|
.switch-toggle.switch-candy.switch-3 label {
|
|
color: transparent;
|
|
font-size: 17px;
|
|
text-shadow: 1px 1px 1px transparent
|
|
}
|
|
|
|
.switch-candy a {
|
|
border: 1px solid #333;
|
|
border-radius: 3px;
|
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent)
|
|
}
|
|
|
|
.switch-toggle.switch-1 input:nth-child(1):not(:checked)~a,
|
|
.switch-toggle.switch-3 input:nth-child(1):checked~a {
|
|
background-color: #ff6347
|
|
}
|
|
|
|
.switch-toggle.switch-3 input:nth-child(3):checked~a {
|
|
background-color: #f3f338
|
|
}
|
|
|
|
.switch-toggle.switch-1 input:nth-child(1):checked~a,
|
|
.switch-toggle.switch-3 input:nth-child(5):checked~a {
|
|
background-color: #98fb98
|
|
} |