KNACSS/sass/components/_checkbox.scss

59 lines
1.8 KiB
SCSS
Raw Normal View History

/*
* 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;
2022-01-05 17:34:13 +01:00
$checkbox-background: $primary;
$checkbox-size: 2rem;
$checkbox-border-radius: 4px;
/*
* checkbox styles
*/
2017-08-01 09:20:53 +02:00
2017-10-16 15:50:42 +02:00
.checkbox {
border-radius: $checkbox-border-radius;
}
2017-10-16 17:32:26 +02:00
.checkbox {
-webkit-appearance: none;
2017-09-26 11:42:46 +02:00
appearance: none;
width: $checkbox-size;
height: $checkbox-size;
2017-09-26 14:24:12 +02:00
vertical-align: text-bottom;
2022-01-05 17:34:13 +01:00
box-shadow: inset 0 0 0 1px $primary;
background-color: $checkbox-color;
transition: background-color 0.15s;
2017-09-26 11:42:46 +02:00
cursor: pointer;
}
2017-08-01 09:20:53 +02:00
2022-01-24 17:03:36 +01:00
.checkbox + label {
cursor: pointer;
2017-09-26 11:42:46 +02:00
}
2017-08-01 09:20:53 +02:00
.checkbox:disabled {
opacity: 0.6;
2017-09-26 11:42:46 +02:00
}
2022-01-24 17:03:36 +01:00
.checkbox:disabled + label {
opacity: 0.6;
cursor: not-allowed;
2017-09-26 11:42:46 +02:00
}
.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;
2022-01-24 17:03:36 +01:00
}