84 lines
1.5 KiB
Sass
84 lines
1.5 KiB
Sass
%switch
|
|
$switch-height: 32px
|
|
$switch-width: 80px
|
|
|
|
$switch-inner-width: 36px
|
|
$switch-inner-heigth: 26px
|
|
|
|
.switch-inner
|
|
display: inline-block
|
|
width: $switch-width
|
|
height: $switch-height
|
|
margin-right: 1em
|
|
padding: 3px 3px 3px 4px
|
|
vertical-align: middle
|
|
overflow: visible
|
|
background-color: darken($pebble-grey, 10)
|
|
border-radius: 2px
|
|
border: none
|
|
cursor: pointer
|
|
span
|
|
width: $switch-inner-width
|
|
height: $switch-inner-heigth
|
|
border-radius: 2px
|
|
background-color: $cement-grey
|
|
color: white
|
|
text-align: center
|
|
font-weight: 300
|
|
font-size: 12px
|
|
line-height: 2.2
|
|
|
|
span
|
|
display: inline-block
|
|
vertical-align: middle
|
|
|
|
.label
|
|
vertical-align: middle
|
|
font-size: $font-size-m
|
|
display: inline-block
|
|
&.label--small .label
|
|
width: 7em
|
|
font-size: 12px
|
|
line-height: 1.3
|
|
|
|
.on
|
|
display: none
|
|
margin-left: 0
|
|
.off
|
|
margin-left: 36px
|
|
|
|
&.active
|
|
.switch-inner
|
|
background-color: darken($seed-green, 10)
|
|
span
|
|
background-color: $turf-green
|
|
.on
|
|
display: inline-block
|
|
.off
|
|
display: none
|
|
|
|
&.disabled
|
|
cursor: default
|
|
pointer-events: none
|
|
opacity: .5
|
|
|
|
|
|
.switch
|
|
@extend %switch
|
|
|
|
.switch--icon
|
|
@extend %switch
|
|
|
|
.on,
|
|
.off
|
|
text-indent: 99%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
background-size: 1.1em
|
|
background-position: 50%
|
|
background-repeat: no-repeat
|
|
.off
|
|
@extend %icon-line-cross-white
|
|
.on
|
|
@extend %icon-line-passed
|