365 lines
7.8 KiB
Sass
365 lines
7.8 KiB
Sass
$checkbox-radius: $radius !default
|
|
$checkbox-border: .1rem solid $grey-lighter !default
|
|
$checkbox-block-background: $white-ter !default
|
|
$checkbox-checked-width: .1rem !default
|
|
$checkradio-focus: 1px dotted $grey-light !default
|
|
$checkradio-top-offset: 0rem !default
|
|
|
|
=checkbox-size($size)
|
|
$newSize: $size * 1.5
|
|
$height: $newSize / 2.5
|
|
$width: $newSize / 4
|
|
|
|
+ label
|
|
font-size: $size
|
|
// line-height: $newSize
|
|
padding-left: $size * 2
|
|
&::before,
|
|
&:before
|
|
width: $newSize
|
|
height: $newSize
|
|
&::after,
|
|
&:after
|
|
width: $width
|
|
height: $height
|
|
top: ( ( $newSize / 2 ) - ( $height / 2 ) ) * 0.9
|
|
left: $height
|
|
|
|
&.is-block
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
width: 1.25 * $size
|
|
height: 1.25 * $size
|
|
left: .175rem
|
|
top: .175rem
|
|
&::after,
|
|
&:after
|
|
top: .2rem + $size * 0.125
|
|
left: .2rem + $size * 0.45
|
|
|
|
&.is-rtl
|
|
+ label
|
|
padding-left: 0
|
|
padding-right: $size * 2
|
|
&::after,
|
|
&:after
|
|
left: auto
|
|
right: $height
|
|
|
|
// Use a mixin to define all ratios in the same spot
|
|
=radio-size($size)
|
|
$newSize: $size * 1.5
|
|
$height: $newSize
|
|
$width: $newSize
|
|
|
|
+ label
|
|
font-size: $size
|
|
line-height: $newSize
|
|
padding-left: $size * 2
|
|
&::before,
|
|
&:before,
|
|
&::after,
|
|
&:after
|
|
width: $width
|
|
height: $height
|
|
&.is-rtl
|
|
+ label
|
|
padding-right: $size * 2
|
|
|
|
.is-checkradio[type="radio"],
|
|
.is-checkradio[type="checkbox"]
|
|
outline: 0
|
|
user-select: none
|
|
display: inline-block
|
|
position: absolute
|
|
opacity: 0
|
|
|
|
+ label
|
|
position: relative
|
|
display: initial
|
|
cursor: pointer
|
|
vertical-align: middle
|
|
margin: .5em
|
|
padding: .2rem .5rem .2rem 0
|
|
border-radius: $checkbox-radius
|
|
&:first-of-type
|
|
margin-left: 0
|
|
|
|
&:hover
|
|
&::before,
|
|
&:before
|
|
animation-duration: 0.4s
|
|
animation-fill-mode: both
|
|
animation-name: hover-color
|
|
|
|
&::before,
|
|
&:before
|
|
position: absolute
|
|
left: 0
|
|
top: $checkradio-top-offset
|
|
content: ''
|
|
border: $checkbox-border
|
|
|
|
&::after,
|
|
&:after
|
|
position: absolute
|
|
display: none
|
|
content: ''
|
|
top: $checkradio-top-offset
|
|
|
|
&.is-rtl
|
|
+ label
|
|
margin-right: 0rem
|
|
margin-left: 0.5rem
|
|
&::before,
|
|
&:before
|
|
left: auto
|
|
right: 0
|
|
|
|
&:focus
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
outline: $checkradio-focus
|
|
|
|
&:hover:not([disabled])
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: $primary !important
|
|
|
|
&:checked
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border: $checkbox-border
|
|
&[disabled]
|
|
cursor: not-allowed
|
|
+ label
|
|
opacity: 0.5
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
animation-name: none
|
|
&::after,
|
|
&:after
|
|
display: inline-block
|
|
|
|
&[disabled]
|
|
cursor: not-allowed
|
|
+ label
|
|
opacity: 0.5
|
|
cursor: not-allowed
|
|
&:hover,
|
|
&:before,
|
|
&::before,
|
|
&::after,
|
|
&:after
|
|
cursor: not-allowed
|
|
|
|
&:hover
|
|
cursor: not-allowed
|
|
&::before,
|
|
&:before
|
|
animation-name: none
|
|
|
|
&::before,
|
|
&:before
|
|
cursor: not-allowed
|
|
|
|
&::after,
|
|
&:after
|
|
cursor: not-allowed
|
|
|
|
&.has-no-border
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border: none !important
|
|
|
|
&.is-block
|
|
display: none !important
|
|
+ label
|
|
width: 100% !important
|
|
background: $checkbox-block-background
|
|
color: findColorInvert( $checkbox-block-background )
|
|
padding-right: .75em
|
|
&:hover:not([disabled])
|
|
+ label
|
|
background: darken($checkbox-block-background, 5%)
|
|
|
|
|
|
.is-checkradio[type="checkbox"]
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-radius: $checkbox-radius
|
|
|
|
&::after,
|
|
&:after
|
|
box-sizing: border-box
|
|
transform: translateY($checkradio-top-offset) rotate(45deg)
|
|
border-width: $checkbox-checked-width
|
|
border-style: solid
|
|
border-color: $primary
|
|
border-top: 0
|
|
border-left: 0
|
|
|
|
&.is-circle
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-radius: 50%
|
|
|
|
+checkbox-size($size-normal)
|
|
&.is-small
|
|
+checkbox-size($size-small)
|
|
&.is-medium
|
|
+checkbox-size($size-medium)
|
|
&.is-large
|
|
+checkbox-size($size-large)
|
|
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}
|
|
&.has-background-color
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: transparent !important
|
|
background-color: $color !important
|
|
&:hover:not([disabled])
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: $color !important
|
|
&:checked
|
|
+ label
|
|
&::after,
|
|
&:after
|
|
border-color: $color !important
|
|
&.has-background-color
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: transparent !important
|
|
background-color: $color !important
|
|
&::after,
|
|
&:after
|
|
border-color: $color-invert !important
|
|
background-color: $color !important
|
|
&.is-block
|
|
&:hover:not([disabled])
|
|
+ label
|
|
&::after,
|
|
&:after,
|
|
&::before,
|
|
&:before
|
|
border-color: $color !important
|
|
&:checked
|
|
+ label
|
|
color: $color-invert
|
|
border-color: $color !important
|
|
background: $color
|
|
&::after,
|
|
&:after
|
|
border-color: $color-invert !important
|
|
&:hover:not([disabled])
|
|
+ label
|
|
background: darken($color, 5%)
|
|
&::after,
|
|
&:after,
|
|
&::before,
|
|
&:before
|
|
border-color: darken($color-invert, 5%) !important
|
|
|
|
&:indeterminate
|
|
+ label
|
|
&::after,
|
|
&:after
|
|
display: inline-block
|
|
transform: rotate(90deg)
|
|
border-bottom: none
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}
|
|
+ label
|
|
&::after,
|
|
&:after
|
|
border-color: $color
|
|
|
|
.is-checkradio[type="radio"]
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-radius: 50%
|
|
&::after,
|
|
&:after
|
|
border-radius: 50%
|
|
background: $primary
|
|
left: 0
|
|
transform: scale(0.5)
|
|
|
|
&:checked
|
|
&.has-background-color
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: $text !important
|
|
background-color: $text !important
|
|
&::after,
|
|
&:after
|
|
border-color: $text !important
|
|
background-color: $text !important
|
|
|
|
&.is-rtl
|
|
+ label
|
|
padding-left: 0
|
|
&::after,
|
|
&:after
|
|
left: auto
|
|
right: 0
|
|
|
|
+radio-size($size-normal)
|
|
&.is-small
|
|
+radio-size($size-small)
|
|
&.is-medium
|
|
+radio-size($size-medium)
|
|
&.is-large
|
|
+radio-size($size-large)
|
|
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}
|
|
&.has-background-color
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: $color !important
|
|
background-color: $color !important
|
|
&:hover:not([disabled])
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: $color !important
|
|
&:checked
|
|
+ label
|
|
&::after,
|
|
&:after
|
|
border-color: $color !important
|
|
background-color: $color !important
|
|
&.has-background-color
|
|
+ label
|
|
&::before,
|
|
&:before
|
|
border-color: $color !important
|
|
background-color: $color !important
|
|
&::after,
|
|
&:after
|
|
border-color: $color-invert !important
|
|
background-color: $color-invert !important
|