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

checkbox and radio colors

This commit is contained in:
Raphael Goetter 2017-09-08 15:45:48 +02:00
parent 031be14b1d
commit 9ae188d731
3 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sass/_config/_variables.scss
View File

@ -54,6 +54,9 @@ $color-forms : $color-gray3;
// quotes
$color-quote : $color-gray5;
// checkboxes, radios
$color-checkbox : $color-gray3;
// buttons, badges, alerts color variants list
// name - background-color - color - border
$variants-list: (

4
sass/components/_checkbox.scss
View File

@ -21,13 +21,13 @@
border: 0;
background: #fff;
border-radius: $border-radius;
box-shadow: 0 0 0 2px $color-forms inset;
box-shadow: 0 0 0 2px $color-checkbox inset;
transition: .25s background-color;
}
}
&:checked ~ label:before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
background-color: $color-forms;
background-color: $color-checkbox;
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;

4
sass/components/_radio.scss
View File

@ -21,13 +21,13 @@
border: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px $color-forms inset;
box-shadow: 0 0 0 2px $color-checkbox inset;
transition: .25s background;
}
}
&:checked ~ label:before {
background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
background-color: $color-forms;
background-color: $color-checkbox;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;