108 lines
2.2 KiB
Sass
108 lines
2.2 KiB
Sass
// CUSTOM CHECKBOXES
|
|
// Completely replaces legacy checkbox
|
|
.checkbox [type='checkbox'], .radiobox [type='radio'], #lang-checkbox
|
|
position: fixed
|
|
top: -1px
|
|
left: -1px
|
|
width: 1px
|
|
height: 1px
|
|
overflow: hidden
|
|
display: none
|
|
|
|
.checkbox, .radiobox
|
|
position: relative
|
|
display: inline-block
|
|
|
|
label
|
|
display: block
|
|
height: 20px
|
|
width: 20px
|
|
background-color: var(--color-grey-lighter)
|
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
|
border: 2px solid var(--color-primary)
|
|
border-radius: 4px
|
|
color: white
|
|
cursor: pointer
|
|
|
|
&.radiobox label
|
|
border-radius: 10px
|
|
|
|
|
|
&.checkbox
|
|
label::before,
|
|
label::after
|
|
position: absolute
|
|
display: block
|
|
top: 12px
|
|
left: 8px
|
|
height: 2px
|
|
width: 8px
|
|
background-color: var(--color-font)
|
|
|
|
\:checked + label
|
|
background-color: var(--color-primary)
|
|
|
|
[type='checkbox']:focus + label
|
|
border-color: #3273dc
|
|
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
|
|
outline: 0
|
|
|
|
\:checked + label::before,
|
|
:checked + label::after
|
|
content: ''
|
|
|
|
\:checked + label::before
|
|
background-color: white
|
|
transform: rotate(45deg)
|
|
left: 2px
|
|
top: 11px
|
|
|
|
\:checked + label::after
|
|
background-color: white
|
|
transform: rotate(-45deg)
|
|
top: 9px
|
|
width: 12px
|
|
left: 7px
|
|
|
|
&.radiobox
|
|
label::before
|
|
position: absolute
|
|
display: block
|
|
top: 6.5px
|
|
left: 6.5px
|
|
height: 7px
|
|
width: 7px
|
|
border-radius: 3.5px
|
|
background-color: var(--color-font)
|
|
|
|
\:checked + label
|
|
background-color: var(--color-primary)
|
|
|
|
[type='radio']:focus + label
|
|
border-color: #3273dc
|
|
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
|
|
outline: 0
|
|
|
|
\:checked + label::before
|
|
content: ''
|
|
|
|
\:checked + label::before
|
|
background-color: white
|
|
|
|
[disabled] + label, [readonly] + label
|
|
pointer-events: none
|
|
border: none
|
|
opacity: 0.6
|
|
filter: grayscale(1)
|
|
|
|
// special treatment for checkboxes in table headers
|
|
th .checkbox
|
|
margin-right: 7px
|
|
vertical-align: bottom
|
|
|
|
th .checkbox:only-child
|
|
margin: 0
|
|
|
|
.checkbox-only
|
|
width: 36px
|