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

checkbox border-radius

Browse source
This commit is contained in:
Raphael Goetter 2017-10-16 15:50:42 +02:00
parent d2d84ca192
commit ad9d1c1890
4 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
css/knacss-unminified.css
View file

@ -2269,6 +2269,18 @@ button:focus {
/* use .radio class on input type=radio */ /* use .radio class on input type=radio */
/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */ /* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
/* use .switch class on input type=checkbox */ /* use .switch class on input type=checkbox */
.checkbox {
border-radius: 4px;
}
.switch {
border-radius: 3em;
}
.radio {
border-radius: 50%;
}
.switch, .switch,
.checkbox, .checkbox,
.radio { .radio {
@ -2280,7 +2292,6 @@ button:focus {
cursor: pointer; cursor: pointer;
-webkit-box-shadow: inset 0 0 0 1px #333; -webkit-box-shadow: inset 0 0 0 1px #333;
box-shadow: inset 0 0 0 1px #333; box-shadow: inset 0 0 0 1px #333;
border-radius: 3em;
background: #fff; background: #fff;
} }

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

3
sass/_config/_variables.scss
View file

@ -99,7 +99,8 @@ $arrow-color : $black;
// component: checkboxes, radios // component: checkboxes, radios
$checkbox-color : $gray-800; $checkbox-color : $gray-800;
$checkbox-size: 2rem; $checkbox-size: 2rem;
$checkbox-border-radius: 3em; $checkbox-border-radius: 4px;
$switch-border-radius: 3em;
// component: tables // component: tables
$table-border : $gray-500; $table-border : $gray-500;

11
sass/components/_checkbox.scss
View file

@ -9,6 +9,16 @@
// <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label> // <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
// common styles // common styles
.checkbox {
border-radius: $checkbox-border-radius;
}
.switch {
border-radius: $switch-border-radius;
}
.radio {
border-radius: 50%;
}
.switch, .switch,
.checkbox, .checkbox,
.radio { .radio {
@ -17,7 +27,6 @@
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
box-shadow: inset 0 0 0 1px $checkbox-color; box-shadow: inset 0 0 0 1px $checkbox-color;
border-radius: $checkbox-border-radius;
background: #fff; background: #fff;
~ label { ~ label {