40 lines
770 B
Sass
40 lines
770 B
Sass
|
// sass ace mode;
|
||
|
|
||
|
@import url(http://fonts.googleapis.com/css?family=Ace:700)
|
||
|
|
||
|
html, body
|
||
|
:background-color #ace
|
||
|
text-align: center
|
||
|
height: 100%
|
||
|
/*;*********;
|
||
|
;comment ;
|
||
|
;*********;
|
||
|
|
||
|
.toggle
|
||
|
$size: 14px
|
||
|
|
||
|
:background url(http://subtlepatterns.com/patterns/dark_stripes.png)
|
||
|
border-radius: 8px
|
||
|
height: $size
|
||
|
|
||
|
&:before
|
||
|
$radius: $size * 0.845
|
||
|
$glow: $size * 0.125
|
||
|
|
||
|
box-shadow: 0 0 $glow $glow / 2 #fff
|
||
|
border-radius: $radius
|
||
|
|
||
|
&:active
|
||
|
~ .button
|
||
|
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4)
|
||
|
~ .label
|
||
|
font-size: 40px
|
||
|
color: rgba(0,0,0,0.45)
|
||
|
|
||
|
&:checked
|
||
|
~ .button
|
||
|
box-shadow: 0 15px 25px -4px #ace
|
||
|
~ .label
|
||
|
font-size: 40px
|
||
|
color: #c9c9c9
|