37 lines
1.7 KiB
SCSS
37 lines
1.7 KiB
SCSS
/* ----------------------------- */
|
|
/* ==Checkbox */
|
|
/* ----------------------------- */
|
|
/* use .checkbox class on input type=checkbox */
|
|
/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
|
|
|
|
.checkbox {
|
|
@extend .visually-hidden;
|
|
|
|
& ~ label {
|
|
display: flex;
|
|
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;
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 0 0 2px $color-forms inset;
|
|
transition: .25s background-color;
|
|
}
|
|
}
|
|
&:checked ~ label:before {
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
|
|
background-color: $color-forms;
|
|
background-size: 60% 60%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
}
|