cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Checkbox adapted for Firefox

Browse Source
This commit is contained in:
María Checa
2016-01-29 12:09:32 +01:00
parent 8a7870e59c
commit e356aee9fe
1 changed files with 76 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/forms/checkbox.scss
+76 -64
View File
@@ -5,17 +5,18 @@
# Forms/Checkbox # Forms/Checkbox
``` ```
<div class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Bike" checked> <div class="u-iBlock CDB-CheckboxContainer">
<label></label> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
<label class="CDB-CheckboxLabel"></label>
</div> </div>
<div class="CDB-Checkbox"> <div class="u-iBlock CDB-CheckboxContainer">
<input type="checkbox" name="vehicle" value="Bus"> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
<label></label> <label class="CDB-CheckboxLabel"></label>
</div> </div>
<div class="CDB-Checkbox"> <div class="u-iBlock CDB-CheckboxContainer">
<input type="checkbox" name="vehicle" value="Car" disabled> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
<label></label> <label class="CDB-CheckboxLabel"></label>
</div> </div>
``` ```
*/ */
@@ -23,78 +24,89 @@
@import '../../cdb-variables/sizes'; @import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Checkbox { .CDB-CheckboxContainer {
position: relative; position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 3px;
box-sizing: border-box;
display: inline-block;
input[type="checkbox"] {
opacity: 0;
z-index: -1;
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
}
input[type="checkbox"] ~ label::before, .CDB-Checkbox {
input[type="checkbox"] ~ label::after { width: $baseSize * 2;
display: block; height: $baseSize * 2;
opacity: 0;
position: absolute; position: absolute;
bottom: 3px; z-index: 1;
width: 2px;
border-radius: 1px;
background: $cSecondaryLine;
content: '';
}
input[type="checkbox"] ~ label::before { &:checked {
right: $baseSize / 2; ~ .CDB-CheckboxLabel {
height: $baseSize; border: 1px solid $cBlue;
transform: rotate(45deg); background: $cBlue;
}
input[type="checkbox"] ~ label::after { &::before,
left: $baseSize / 2; &::after {
height: $baseSize - 2; background: $cWhite;
transform: rotate(-45deg); }
} }
&:checked { &:hover ~ .CDB-CheckboxLabel {
border: 1px solid $cBlue; border: 1px solid $cBlue;
background: $cBlue; }
}
&:hover { &:focus ~ .CDB-CheckboxLabel {
border: 1px solid $cBlue; border: 1px solid $cBlue;
} }
input[type="checkbox"] ~ label::before, &:hover ~ .CDB-CheckboxLabel {
input[type="checkbox"] ~ label::after { border: 1px solid $cHoverLine;
background: $cWhite; }
&:disabled {
~ .CDB-CheckboxLabel {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before,
&::after {
background: $cWhite;
}
}
&:hover ~ .CDB-CheckboxLabel {
border: 1px solid $cSecondaryLine;
}
} }
} }
&:focus { .CDB-CheckboxLabel {
border: 1px solid $cBlue; position: absolute;
} width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
&:hover { &::before,
border: 1px solid $cHoverLine; &::after {
} display: block;
position: absolute;
&:disabled { bottom: 3px;
border: 1px solid $cSecondaryLine; width: 2px;
background: $cThirdBackground; border-radius: 1px;
background: $cSecondaryLine;
&:hover { content: '';
border: 1px solid $cSecondaryLine;
} }
input[type="checkbox"] ~ label::before, &::before {
input[type="checkbox"] ~ label::after { right: $baseSize / 2;
background: $cWhite; height: $baseSize;
transform: rotate(45deg);
}
&::after {
left: $baseSize / 2;
height: $baseSize - 2;
transform: rotate(-45deg);
} }
} }
} }