50 lines
1.2 KiB
SCSS
Executable File
50 lines
1.2 KiB
SCSS
Executable File
/**
|
|
* Switch Module
|
|
* Namespace: .switch
|
|
*/
|
|
|
|
/* ----------------------------------------------------------- */
|
|
/* == module */
|
|
/* ----------------------------------------------------------- */
|
|
|
|
.switch[type="checkbox"] {
|
|
position: relative;
|
|
margin-top: -.05em;
|
|
width: 4rem;
|
|
height: 2rem;
|
|
outline: none;
|
|
border: $input-border;
|
|
border-radius: 42rem;
|
|
background-color: white;
|
|
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5);
|
|
transition: .2s;
|
|
|
|
appearance: none;
|
|
}
|
|
|
|
.switch[type="checkbox"]::-ms-check {
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE 8
|
|
}
|
|
|
|
/* Checked state
|
|
-------------------------------------------------------------- */
|
|
|
|
.switch[type="checkbox"]:checked {
|
|
border-color: $color-primary;
|
|
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7);
|
|
}
|
|
|
|
/* Focus state
|
|
-------------------------------------------------------------- */
|
|
|
|
.switch[type="checkbox"]:active,
|
|
.switch[type="checkbox"]:focus {
|
|
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5), $focus-ring;
|
|
}
|
|
|
|
.switch[type="checkbox"]:checked:active,
|
|
.switch[type="checkbox"]:checked:focus {
|
|
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7), $focus-ring;
|
|
}
|