You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.9 KiB
94 lines
2.9 KiB
// Variables
|
|
//------------------------------------------------------
|
|
$toggle-height: 32px !default;
|
|
$toggle-checkbox-opacity: 0 !default;
|
|
|
|
$toggle-transition-value: all .25s ease-in-out !default;
|
|
|
|
$toggle-default-background-color: $white !default;
|
|
$toggle-checked-background-color: $grass-light !default;
|
|
$toggle-disabled-background-color: $lightgray-dark !default;
|
|
|
|
$toggle-handle-width: 50px !default;
|
|
$toggle-handle-height: 32px !default;
|
|
$toggle-handle-radius: 19px !default;
|
|
|
|
$toggle-control-width: 30px !default;
|
|
$toggle-control-height: 30px !default;
|
|
$toggle-control-radius: 30px !default;
|
|
|
|
$toggle-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%) !default;
|
|
$toggle-control-shadow: inset 0 0 0 1px lighten($mediumgray-dark, 5%), 1px 1px 1px lighten($mediumgray-dark, 10%) !default;
|
|
$toggle-checked-shadow: inset 0 0 0 1px $lightgray-light, 1px 1px 1px lighten($mediumgray-dark, 10%) !default;
|
|
|
|
// Exports
|
|
//------------------------------------------------------
|
|
|
|
@include exports("toggle") {
|
|
|
|
/**
|
|
* toggle
|
|
* --------------------------------------------------
|
|
*/
|
|
.toggle {
|
|
height: $toggle-height;
|
|
|
|
& input[type="checkbox"],
|
|
& input[type="radio"] {
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-indent: -100000px;
|
|
@include opacity($opacity: $toggle-checkbox-opacity, $filter: true);
|
|
}
|
|
|
|
& .handle {
|
|
display: block;
|
|
position: relative;
|
|
top: -20px;
|
|
left: 0;
|
|
width: $toggle-handle-width;
|
|
height: $toggle-handle-height;
|
|
background-color: $toggle-default-background-color;
|
|
@include radius($value: $toggle-handle-radius);
|
|
@include box-shadow($value:$toggle-shadow);
|
|
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
display: block;
|
|
width: $toggle-control-width;
|
|
height: $toggle-control-height;
|
|
@include radius($value: $toggle-control-radius);
|
|
@include transition($toggle-transition-value);
|
|
background-color: $toggle-default-background-color;
|
|
@include box-shadow($value:$toggle-control-shadow);
|
|
}
|
|
|
|
}
|
|
& input[type="checkbox"]:disabled + .handle,
|
|
& input[type="radio"]:disabled + .handle,
|
|
& input[type="checkbox"]:disabled + .handle:before,
|
|
& input[type="radio"]:disabled + .handle:before,
|
|
& input[type="checkbox"]:disabled + .handle:after,
|
|
& input[type="radio"]:disabled + .handle:after {
|
|
@include opacity($opacity: 60, $filter: true);
|
|
background-color: $toggle-disabled-background-color;
|
|
}
|
|
|
|
& input[type="checkbox"]:checked + .handle:before,
|
|
& input[type="radio"]:checked + .handle:before {
|
|
width: $toggle-handle-width;
|
|
background-color: $toggle-checked-background-color;
|
|
}
|
|
& input[type="checkbox"]:checked + .handle:after,
|
|
& input[type="radio"]:checked + .handle:after {
|
|
left: 20px;
|
|
@include box-shadow($value:$toggle-checked-shadow);
|
|
}
|
|
}
|
|
}
|
|
|