72 lines
1.4 KiB
Sass
72 lines
1.4 KiB
Sass
// CUSTOM CHECKBOXES
|
|
// Completely replaces legacy checkbox
|
|
.checkbox [type='checkbox'], #lang-checkbox
|
|
position: fixed
|
|
top: -1px
|
|
left: -1px
|
|
width: 1px
|
|
height: 1px
|
|
overflow: hidden
|
|
display: none
|
|
|
|
.checkbox
|
|
position: relative
|
|
display: inline-block
|
|
|
|
label
|
|
display: block
|
|
height: 20px
|
|
width: 20px
|
|
background-color: #f3f3f3
|
|
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
|
|
|
|
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
|
|
|
|
[disabled] + 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
|