195 lines
4.3 KiB
Sass
195 lines
4.3 KiB
Sass
|
$switch-background: $grey-light !default
|
||
|
|
$switch-border: .1rem solid transparent !default
|
||
|
|
$switch-background-active: $primary !default
|
||
|
|
$switch-radius: $radius !default
|
||
|
|
$switch-paddle-background: $white !default
|
||
|
|
$switch-paddle-background-active: $primary !default
|
||
|
|
$switch-paddle-offset: 0.25rem !default
|
||
|
|
$switch-paddle-transition: all 0.25s ease-out !default
|
||
|
|
$switch-focus: 1px dotted $grey-light !default
|
||
|
|
|
||
|
|
=switch-size($size)
|
||
|
|
$switch-height: $size * 1.5
|
||
|
|
$switch-width: $switch-height * 2
|
||
|
|
$paddle-height: $switch-height - ($switch-paddle-offset * 2)
|
||
|
|
$paddle-width: $switch-height - ($switch-paddle-offset * 2)
|
||
|
|
$paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5)
|
||
|
|
|
||
|
|
+ label
|
||
|
|
position: relative
|
||
|
|
display: initial
|
||
|
|
font-size: $size
|
||
|
|
line-height: initial
|
||
|
|
padding-left: $switch-width + .5
|
||
|
|
padding-top: .2rem
|
||
|
|
cursor: pointer
|
||
|
|
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
position: absolute
|
||
|
|
display: block
|
||
|
|
top: 0
|
||
|
|
left: 0
|
||
|
|
width: $switch-width
|
||
|
|
height: $switch-height
|
||
|
|
border: $switch-border
|
||
|
|
border-radius: $switch-radius
|
||
|
|
background: $switch-background
|
||
|
|
content: ''
|
||
|
|
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
display: block
|
||
|
|
position: absolute
|
||
|
|
top: ( $switch-height / 2 ) - ( $paddle-height / 2 )
|
||
|
|
left: $switch-paddle-offset
|
||
|
|
width: $paddle-width
|
||
|
|
height: $paddle-height
|
||
|
|
transform: translate3d(0, 0, 0)
|
||
|
|
border-radius: $switch-radius
|
||
|
|
background: $switch-paddle-background
|
||
|
|
transition: $switch-paddle-transition
|
||
|
|
content: ''
|
||
|
|
|
||
|
|
&.is-rtl
|
||
|
|
+ label
|
||
|
|
padding-left: 0
|
||
|
|
padding-right: $switch-width + .5
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
left: auto
|
||
|
|
right: 0
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
left: auto
|
||
|
|
right: $switch-paddle-offset
|
||
|
|
|
||
|
|
&:checked
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
background: $switch-background-active
|
||
|
|
&::after
|
||
|
|
left: $paddle-active-offest
|
||
|
|
&.is-rtl
|
||
|
|
+ label
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
left: auto
|
||
|
|
right: $paddle-active-offest
|
||
|
|
|
||
|
|
&.is-outlined
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $switch-background
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
background: $switch-background
|
||
|
|
&:checked
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $switch-background-active
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
background: $switch-paddle-background-active
|
||
|
|
|
||
|
|
&.is-thin
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
top: $switch-height / 2.75
|
||
|
|
height: $switch-height / 4
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
box-shadow: 0px 0px 3px $grey
|
||
|
|
|
||
|
|
&.is-rounded
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
border-radius: $radius-large * 4
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
border-radius: 50%
|
||
|
|
|
||
|
|
|
||
|
|
.switch[type="checkbox"]
|
||
|
|
outline: 0
|
||
|
|
user-select: none
|
||
|
|
display: inline-block
|
||
|
|
position: absolute
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
&:focus
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before,
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
outline: $switch-focus
|
||
|
|
|
||
|
|
&[disabled]
|
||
|
|
cursor: not-allowed
|
||
|
|
+ label
|
||
|
|
opacity: 0.5
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
opacity: 0.5
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
opacity: 0.5
|
||
|
|
&:hover
|
||
|
|
cursor: not-allowed
|
||
|
|
|
||
|
|
+switch-size($size-normal)
|
||
|
|
&.is-small
|
||
|
|
+switch-size($size-small)
|
||
|
|
&.is-medium
|
||
|
|
+switch-size($size-medium)
|
||
|
|
&.is-large
|
||
|
|
+switch-size($size-large)
|
||
|
|
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
$color-invert: nth($pair, 2)
|
||
|
|
&.is-#{$name}
|
||
|
|
&:checked
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
background: $color
|
||
|
|
&.is-outlined
|
||
|
|
&:checked
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color !important
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
background: $color
|
||
|
|
&.is-thin
|
||
|
|
&.is-outlined
|
||
|
|
+ label
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
box-shadow: none
|
||
|
|
&.is-unchecked-#{$name}
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
background: $color
|
||
|
|
&.is-outlined
|
||
|
|
+ label
|
||
|
|
&::before,
|
||
|
|
&:before
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color !important
|
||
|
|
&::after,
|
||
|
|
&:after
|
||
|
|
background: $color
|