dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

checkbox stylings

Browse source
This commit is contained in:
Raphael Goetter 2017-08-01 09:20:53 +02:00
parent ceed55bc52
commit bddfbb37a3
4 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
sass/_config/_variables.scss
View file

@ -53,7 +53,7 @@ $color-link-hover: $color4;
$brand-primary: $color5; $brand-primary: $color5;
$color-border: $color7; $color-forms: $color7;
$color-burger: $color1; $color-burger: $color1;
// button, badges, alerts color variants list // button, badges, alerts color variants list

6
sass/_library/_utilities.scss
View file

@ -23,9 +23,11 @@
} }
.is-disabled, .is-disabled,
[disabled] { [disabled],
.is-disabled ~ label,
[disabled] ~ label {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed !important;
filter: grayscale(1); filter: grayscale(1);
} }

35
sass/components/checkbox.scss Normal file
View file

@ -0,0 +1,35 @@
/* ----------------------------- */
/* ==Checkbox */
/* ----------------------------- */
/* use .checkbox class on input type=checkbox */
/* recommanded HTML : <input type="checkbox" class="checkbox" id="test1"><label for="test1">click here</label> */
.checkbox {
@extend .visually-hidden;
& ~ label {
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: 6px;
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;
}
}

1
sass/components/forms.scss
View file

@ -21,7 +21,6 @@ fieldset {
label { label {
display: inline-block; display: inline-block;
vertical-align: middle;
cursor: pointer; cursor: pointer;
} }