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

Checkbox optimization for Firefox

Browse Source
This commit is contained in:
María Checa 2016-01-28 19:05:42 +01:00
parent ea648f146d
commit 8a7870e59c
1 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/scss/cdb-components/forms/checkbox.scss
View File

@ -5,9 +5,18 @@
# Forms/Checkbox # Forms/Checkbox
``` ```
<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked> <div class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox"> <input type="checkbox" name="vehicle" value="Bike" checked>
<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled> <label></label>
</div>
<div class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Bus">
<label></label>
</div>
<div class="CDB-Checkbox">
<input type="checkbox" name="vehicle" value="Car" disabled>
<label></label>
</div>
``` ```
*/ */
@ -20,9 +29,18 @@
height: $baseSize * 2; height: $baseSize * 2;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box;
display: inline-block;
&::before, input[type="checkbox"] {
&::after { opacity: 0;
z-index: -1;
width: $baseSize * 2;
height: $baseSize * 2;
}
input[type="checkbox"] ~ label::before,
input[type="checkbox"] ~ label::after {
display: block; display: block;
position: absolute; position: absolute;
bottom: 3px; bottom: 3px;
@ -32,13 +50,13 @@
content: ''; content: '';
} }
&::before { input[type="checkbox"] ~ label::before {
right: $baseSize / 2; right: $baseSize / 2;
height: $baseSize; height: $baseSize;
transform: rotate(45deg); transform: rotate(45deg);
} }
&::after { input[type="checkbox"] ~ label::after {
left: $baseSize / 2; left: $baseSize / 2;
height: $baseSize - 2; height: $baseSize - 2;
transform: rotate(-45deg); transform: rotate(-45deg);
@ -52,8 +70,8 @@
border: 1px solid $cBlue; border: 1px solid $cBlue;
} }
&::before, input[type="checkbox"] ~ label::before,
&::after { input[type="checkbox"] ~ label::after {
background: $cWhite; background: $cWhite;
} }
} }
@ -74,8 +92,8 @@
border: 1px solid $cSecondaryLine; border: 1px solid $cSecondaryLine;
} }
&::before, input[type="checkbox"] ~ label::before,
&::after { input[type="checkbox"] ~ label::after {
background: $cWhite; background: $cWhite;
} }
} }