Onionr/static-data/www/shared/node_modules/bulma-switch/dist/css/bulma-switch.sass

195 lines
4.3 KiB
Sass
Raw Permalink Normal View History

2020-02-09 09:11:41 +00:00
$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