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

Checkboxes and radios improvements

Browse Source
This commit is contained in:
María Checa 2016-02-02 12:11:08 +01:00
parent fe2439a98b
commit 83984f6bca
3 changed files with 125 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,15 +7,15 @@
``` ```
<div class="u-iBlock"> <div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
<span class="u-iBlock CDB-CheckboxFace"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
</div> </div>
<div class="u-iBlock"> <div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus"> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
<span class="u-iBlock CDB-CheckboxFace"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
</div> </div>
<div class="u-iBlock"> <div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
<span class="u-iBlock CDB-CheckboxFace"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
</div> </div>
``` ```
*/ */
@ -30,8 +30,9 @@
position: absolute; position: absolute;
vertical-align: middle; vertical-align: middle;
z-index: 1; z-index: 1;
}
~ .CDB-CheckboxFace { .CDB-Checkbox-face {
position: relative; position: relative;
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
@ -65,43 +66,35 @@
} }
} }
&:checked { .CDB-Checkbox:checked + .CDB-Checkbox-face {
~ .CDB-CheckboxFace {
border: 1px solid $cBlue; border: 1px solid $cBlue;
background: $cBlue; background: $cBlue;
}
~ .CDB-CheckboxFace::before, &::before,
~ .CDB-CheckboxFace::after { &::after {
background: $cWhite; background: $cWhite;
} }
&:hover ~ .CDB-CheckboxFace {
border: 1px solid $cBlue;
}
} }
&:focus ~ .CDB-CheckboxFace { .CDB-Checkbox:disabled + .CDB-Checkbox-face {
border: 1px solid $cBlue;
}
&:hover ~ .CDB-CheckboxFace {
border: 1px solid $cHoverLine;
}
&:disabled {
~ .CDB-CheckboxFace {
border: 1px solid $cSecondaryLine; border: 1px solid $cSecondaryLine;
background: $cThirdBackground; background: $cThirdBackground;
}
~ .CDB-CheckboxFace::before, &::before,
~ .CDB-CheckboxFace::after { &::after {
background: $cWhite; background: $cWhite;
} }
}
&:hover ~ .CDB-CheckboxFace { .CDB-Checkbox:disabled:hover ~ .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine; border: 1px solid $cSecondaryLine;
} }
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
.CDB-Checkbox:focus + .CDB-Checkbox-face {
border: 1px solid $cBlue;
} }
.CDB-Checkbox:hover + .CDB-Checkbox-face {
border: 1px solid $cHoverLine;
} }

12
src/scss/cdb-components/forms/legends.scss
View File

@ -7,12 +7,12 @@
``` ```
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Radio" type="radio" name="veritas" value="01"> <input class="CDB-Radio" type="radio" name="veritas" value="01">
<span class="u-iBlock CDB-RadioFace"></span> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">True</label> <label class="u-iBlock u-lSpace">True</label>
</div> </div>
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Radio" type="radio" name="veritas" value="02" checked> <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
<span class="u-iBlock CDB-RadioFace"></span> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">False</label> <label class="u-iBlock u-lSpace">False</label>
</div> </div>
@ -22,12 +22,12 @@
<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock CDB-CheckboxFace"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Sport</label> <label class="u-iBlock u-lSpace">Sport</label>
</div> </div>
<label class="u-iblock CDB-Text CDB-Size-medium"> <label class="u-iblock CDB-Text CDB-Size-medium">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock CDB-CheckboxFace"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Travel</label> <label class="u-iBlock u-lSpace">Travel</label>
</label> </label>
@ -41,14 +41,14 @@
<li class="u-iBlock u-rSpace--xl"> <li class="u-iBlock u-rSpace--xl">
<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock CDB-CheckboxFace"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Sport</label> <label class="u-iBlock u-lSpace">Sport</label>
</div> </div>
</li> </li>
<li class="u-iblock"> <li class="u-iblock">
<label class="u-iblock CDB-Text CDB-Size-medium"> <label class="u-iblock CDB-Text CDB-Size-medium">
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock CDB-CheckboxFace"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Travel</label> <label class="u-iBlock u-lSpace">Travel</label>
</label> </label>
</li> </li>

47
src/scss/cdb-components/forms/radio.scss
View File

@ -8,15 +8,15 @@
``` ```
<div class="u-iBlock"> <div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="01" checked> <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
<span class="u-iBlock CDB-RadioFace"></span> <span class="u-iBlock CDB-Radio-face"></span>
</div> </div>
<div class="u-iBlock"> <div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="02"> <input class="CDB-Radio" type="radio" name="gender" value="02">
<span class="u-iBlock CDB-RadioFace"></span> <span class="u-iBlock CDB-Radio-face"></span>
</div> </div>
<div class="u-iBlock"> <div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="03" disabled> <input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
<span class="u-iBlock CDB-RadioFace"></span> <span class="u-iBlock CDB-Radio-face"></span>
</div> </div>
``` ```
*/ */
@ -31,8 +31,9 @@
position: absolute; position: absolute;
vertical-align: middle; vertical-align: middle;
z-index: 1; z-index: 1;
}
~ .CDB-RadioFace { .CDB-Radio-face {
position: relative; position: relative;
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
@ -57,41 +58,33 @@
} }
} }
&:checked { .CDB-Radio:checked + .CDB-Radio-face {
~ .CDB-RadioFace {
border: 1px solid $cBlue; border: 1px solid $cBlue;
background: $cBlue; background: $cBlue;
}
~ .CDB-RadioFace::before { &::before {
background: $cWhite; background: $cWhite;
} }
}
&:hover ~ .CDB-RadioFace { .CDB-Radio:disabled + .CDB-Radio-face {
border: 1px solid $cBlue; border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before {
background: $cWhite;
} }
} }
&:focus ~ .CDB-RadioFace { .CDB-Radio:disabled:hover + .CDB-Radio-face {
border: 1px solid $cBlue; border: 1px solid $cSecondaryLine;
} }
&:hover ~ .CDB-RadioFace { .CDB-Radio:hover + .CDB-Radio-face {
border: 1px solid $cHoverLine; border: 1px solid $cHoverLine;
} }
&:disabled { .CDB-Radio:focus + .CDB-Radio-face,
~ .CDB-RadioFace { .CDB-Radio:checked:hover + .CDB-Radio-face {
border: 1px solid $cSecondaryLine; border: 1px solid $cBlue;
background: $cThirdBackground;
}
~ .CDB-RadioFace::before {
background: $cWhite;
}
&:hover ~ .CDB-RadioFace {
border: 1px solid $cSecondaryLine;
}
}
} }