85 lines
No EOL
1.7 KiB
SCSS
85 lines
No EOL
1.7 KiB
SCSS
@import "../../../css/static/mixin";
|
|
@import "../../../css/static/properties";
|
|
|
|
html:root {
|
|
--checkbox-checkmark: #46c0ec;
|
|
|
|
--checkbox-background: #272626;
|
|
--checkbox-disabled-background: #1a1819;
|
|
}
|
|
|
|
.checkbox {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
position: relative;
|
|
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
|
|
overflow: hidden;
|
|
|
|
background-color: var(--checkbox-background);
|
|
border-radius: $border_radius_middle;
|
|
|
|
input {
|
|
position: absolute;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.mark {
|
|
position: absolute;
|
|
opacity: 0;
|
|
|
|
height: .5em;
|
|
width: .8em;
|
|
|
|
margin-left: 0.25em;
|
|
margin-top: .3em;
|
|
|
|
border: none;
|
|
border-bottom: .2em solid var(--checkbox-checkmark);
|
|
border-left: .2em solid var(--checkbox-checkmark);
|
|
|
|
transform: rotateY(0deg) rotate(-45deg); /* needs Y at 0 deg to behave properly*/
|
|
@include transition(.4s);
|
|
}
|
|
|
|
input:checked + .mark {
|
|
opacity: 1;
|
|
}
|
|
|
|
-webkit-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
-moz-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.labelCheckbox {
|
|
@include user-select(none);
|
|
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
|
|
a {
|
|
margin-left: .5em;
|
|
}
|
|
}
|
|
|
|
label.disabled > .checkbox, .checkbox:disabled, .checkbox.disabled {
|
|
&.checkbox, > .checkbox {
|
|
pointer-events: none!important;
|
|
box-shadow: none;
|
|
|
|
border: 1px solid var(--boxed-input-field-border);
|
|
background-color: var(--checkbox-disabled-background);
|
|
}
|
|
} |