71 lines
1.2 KiB
SCSS
71 lines
1.2 KiB
SCSS
|
@import "../../variables/colors";
|
||
|
|
@import "../../variables/sizes";
|
||
|
|
|
||
|
|
// New checkbox input styled
|
||
|
|
//
|
||
|
|
// <div class="Checkbox">
|
||
|
|
// <button class="Checkbox-input"></button>
|
||
|
|
// <label class="Checkbox-label">Checkbox label</label>
|
||
|
|
// </div>
|
||
|
|
//
|
||
|
|
// --------------------------------------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
$check-icon: '\2714'; //✔
|
||
|
|
|
||
|
|
.Checkbox {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Checkbox-input {
|
||
|
|
position: relative;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border: 2px solid $cStructure-mainLine;
|
||
|
|
border-radius: 3px;
|
||
|
|
outline: none;
|
||
|
|
background: white;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-color: #AAA;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.Checkbox-input:focus {
|
||
|
|
border-color: #AAA;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Checkbox-input.is-checked {
|
||
|
|
&::after {
|
||
|
|
content: $check-icon;
|
||
|
|
position: absolute;
|
||
|
|
top: -3px;
|
||
|
|
left: 1px;
|
||
|
|
color: #0090D7;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.Checkbox-label {
|
||
|
|
margin-left: 8px;
|
||
|
|
color: $cTypography-secondary;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Checkbox.is-disabled .Checkbox-input {
|
||
|
|
opacity: 0.4;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-color: $cStructure-mainLine;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
&:focus { border-color: $cStructure-mainLine; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.Checkbox.is-disabled .Checkbox-label {
|
||
|
|
opacity: 0.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Checkbox-strong {
|
||
|
|
color: #2E3C43;
|
||
|
|
}
|