KNACSS/sass/components/_checkbox.scss

37 lines
1.7 KiB
SCSS
Raw Normal View History

2017-08-01 09:20:53 +02:00
/* ----------------------------- */
/* ==Checkbox */
/* ----------------------------- */
/* use .checkbox class on input type=checkbox */
2017-08-01 10:02:19 +02:00
/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
2017-08-01 09:20:53 +02:00
.checkbox {
@extend .visually-hidden;
& ~ label {
display: flex;
2017-08-01 09:20:53 +02:00
cursor: pointer;
&:before {
content: "";
display: inline-block;
vertical-align: baseline;
transform: translateY(.2rem);
margin-right: .5rem;
width: 1.1em; height: 1.1em;
border: 0;
background: #fff;
2017-08-01 09:36:57 +02:00
border-radius: $border-radius;
2017-09-08 15:45:48 +02:00
box-shadow: 0 0 0 2px $color-checkbox inset;
2017-08-01 09:20:53 +02:00
transition: .25s background-color;
}
}
&:checked ~ label:before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
2017-09-08 15:45:48 +02:00
background-color: $color-checkbox;
2017-08-01 09:20:53 +02:00
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
}