110 lines
2.3 KiB
SCSS
110 lines
2.3 KiB
SCSS
// CheckBoxes styles
|
|
// ----------------------------------------------
|
|
|
|
/* SG
|
|
# Forms/Checkbox
|
|
|
|
```
|
|
<div class="u-iBlock">
|
|
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
|
|
<span class="u-iBlock CDB-CheckboxFace"></span>
|
|
<label class="CDB-CheckboxLabel"></label>
|
|
</div>
|
|
<div class="u-iBlock">
|
|
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
|
|
<span class="u-iBlock CDB-CheckboxFace"></span>
|
|
<label class="CDB-CheckboxLabel"></label>
|
|
</div>
|
|
<div class="u-iBlock">
|
|
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
|
|
<span class="u-iBlock CDB-CheckboxFace"></span>
|
|
<label class="CDB-CheckboxLabel"></label>
|
|
</div>
|
|
```
|
|
*/
|
|
|
|
@import '../../cdb-variables/sizes';
|
|
@import '../../cdb-variables/colors';
|
|
|
|
.CDB-Checkbox {
|
|
width: $baseSize * 2;
|
|
height: $baseSize * 2;
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
~ .CDB-CheckboxFace {
|
|
position: relative;
|
|
width: $baseSize * 2;
|
|
height: $baseSize * 2;
|
|
border: 1px solid $cMainLine;
|
|
border-radius: 3px;
|
|
background: $cWhite;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
|
|
&::before,
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 3px;
|
|
width: 2px;
|
|
border-radius: 1px;
|
|
background: $cSecondaryLine;
|
|
content: '';
|
|
}
|
|
|
|
&::before {
|
|
right: $baseSize / 2;
|
|
height: $baseSize;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&::after {
|
|
left: $baseSize / 2;
|
|
height: $baseSize - 2;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
&:checked {
|
|
~ .CDB-CheckboxFace {
|
|
border: 1px solid $cBlue;
|
|
background: $cBlue;
|
|
}
|
|
|
|
~ .CDB-CheckboxFace::before,
|
|
~ .CDB-CheckboxFace::after {
|
|
background: $cWhite;
|
|
}
|
|
|
|
&:hover ~ .CDB-CheckboxFace {
|
|
border: 1px solid $cBlue;
|
|
}
|
|
}
|
|
|
|
&:focus ~ .CDB-CheckboxFace {
|
|
border: 1px solid $cBlue;
|
|
}
|
|
|
|
&:hover ~ .CDB-CheckboxFace {
|
|
border: 1px solid $cHoverLine;
|
|
}
|
|
|
|
&:disabled {
|
|
~ .CDB-CheckboxFace {
|
|
border: 1px solid $cSecondaryLine;
|
|
background: $cThirdBackground;
|
|
}
|
|
|
|
~ .CDB-CheckboxFace::before,
|
|
~ .CDB-CheckboxFace::after {
|
|
background: $cWhite;
|
|
}
|
|
|
|
&:hover ~ .CDB-CheckboxFace {
|
|
border: 1px solid $cSecondaryLine;
|
|
}
|
|
}
|
|
}
|