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

switches design

This commit is contained in:
Raphael Goetter 2017-10-16 17:32:26 +02:00
parent 31940244a9
commit 1a05e71249
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/knacss-unminified.css
View File

@ -496,7 +496,7 @@ body {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4; line-height: 1.3;
} }
@media (min-width: 480px) { @media (min-width: 480px) {
@ -602,7 +602,7 @@ details,
figure { figure {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.4; line-height: 1.3;
} }
/* Avoid top margins on first content element */ /* Avoid top margins on first content element */
@ -2319,8 +2319,8 @@ button:focus {
width: 4rem; width: 4rem;
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
padding-left: 0.5rem; padding-left: 0.66667rem;
padding-right: 0.5rem; padding-right: 0.66667rem;
font-size: 60%; font-size: 60%;
-webkit-box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333; -webkit-box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333; box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
@ -2331,11 +2331,12 @@ button:focus {
} }
.switch::before, .switch::after { .switch::before, .switch::after {
font-weight: bold;
color: #fff; color: #fff;
} }
.switch::before { .switch::before {
content: "off"; content: "✕";
float: right; float: right;
} }
@ -2345,7 +2346,7 @@ button:focus {
} }
.switch:checked::before { .switch:checked::before {
content: "on"; content: "✓";
float: left; float: left;
} }

2
css/knacss.css
View File

File diff suppressed because one or more lines are too long

11
sass/components/_checkbox.scss
View File

@ -12,9 +12,11 @@
.checkbox { .checkbox {
border-radius: $checkbox-border-radius; border-radius: $checkbox-border-radius;
} }
.switch { .switch {
border-radius: $switch-border-radius; border-radius: $switch-border-radius;
} }
.radio { .radio {
border-radius: 50%; border-radius: 50%;
} }
@ -43,22 +45,23 @@
width: $checkbox-size *2; width: $checkbox-size *2;
height: $checkbox-size; height: $checkbox-size;
line-height: $checkbox-size; line-height: $checkbox-size;
padding-left: $checkbox-size /4; padding-left: $checkbox-size /3;
padding-right: $checkbox-size /4; padding-right: $checkbox-size /3;
font-size: 60%; font-size: 60%;
box-shadow: inset -#{$checkbox-size} 0 0 $checkbox-color, inset 0 0 0 1px $checkbox-color; box-shadow: inset -#{$checkbox-size} 0 0 $checkbox-color, inset 0 0 0 1px $checkbox-color;
transition: box-shadow .15s; transition: box-shadow .15s;
&::before, &::after { &::before, &::after {
font-weight: bold;
color: #fff; color: #fff;
} }
&::before { &::before {
content: "off"; content: "✕";
float: right; float: right;
} }
&:checked { &:checked {
box-shadow: inset #{$checkbox-size} 0 0 $color-success, inset 0 0 0 1px $color-success; box-shadow: inset #{$checkbox-size} 0 0 $color-success, inset 0 0 0 1px $color-success;
&::before { &::before {
content: "on"; content: "✓";
float: left; float: left;
} }
} }