60 lines
1.8 KiB
SCSS
Executable File
60 lines
1.8 KiB
SCSS
Executable File
/*
|
|
* component checkbox
|
|
*/
|
|
/*
|
|
* HTML template example:
|
|
* <input type="checkbox" class="checkbox" id="c1">
|
|
* <label for="c1">click here</label>
|
|
*/
|
|
|
|
/*
|
|
* checkbox variables (you can change them)
|
|
*/
|
|
|
|
$checkbox-color: $white;
|
|
$checkbox-background: $color-alpha;
|
|
$checkbox-size: 2rem;
|
|
$checkbox-border-radius: 4px;
|
|
|
|
/*
|
|
* checkbox styles
|
|
*/
|
|
|
|
.checkbox {
|
|
border-radius: $checkbox-border-radius;
|
|
}
|
|
|
|
.checkbox {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: $checkbox-size;
|
|
height: $checkbox-size;
|
|
vertical-align: text-bottom;
|
|
outline: 0;
|
|
box-shadow: inset 0 0 0 1px $color-alpha;
|
|
background-color: $checkbox-color;
|
|
transition: background-color 0.15s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox + label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.checkbox:disabled + label {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.checkbox:checked {
|
|
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
|
|
background-size: 60% 60%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: $checkbox-background;
|
|
}
|