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

View file

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