Input label fixes

This commit is contained in:
María Checa 2016-02-01 18:33:16 +01:00
parent 3a9a4beb0f
commit d00064ceac
3 changed files with 12 additions and 9 deletions

View File

@ -8,17 +8,14 @@
<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-CheckboxFace"></span>
<label class="CDB-CheckboxLabel"></label>
</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-CheckboxFace"></span>
<label class="CDB-CheckboxLabel"></label>
</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-CheckboxFace"></span>
<label class="CDB-CheckboxLabel"></label>
</div> </div>
``` ```
*/ */
@ -31,6 +28,7 @@
height: $baseSize * 2; height: $baseSize * 2;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
vertical-align: middle;
z-index: 1; z-index: 1;
~ .CDB-CheckboxFace { ~ .CDB-CheckboxFace {

View File

@ -8,12 +8,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-RadioFace"></span>
<label class="u-iBlock">True</label> <label class="CDB-Label 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-RadioFace"></span>
<label class="u-iBlock">False</label> <label class="CDB-Label u-iBlock u-lSpace">False</label>
</div> </div>
<br/> <br/>
@ -23,12 +23,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-CheckboxFace"></span>
<label class="u-iBlock">Sport</label> <label class="CDB-Label 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-CheckboxFace"></span>
<label class="u-iBlock">Travel</label> <label class="CDB-Label u-iBlock u-lSpace">Travel</label>
</label> </label>
<br/> <br/>
@ -42,14 +42,14 @@
<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-CheckboxFace"></span>
<label class="u-iBlock">Sport</label> <label class="CDB-Label 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-CheckboxFace"></span>
<label class="u-iBlock">Travel</label> <label class="CDB-Label u-iBlock u-lSpace">Travel</label>
</label> </label>
</li> </li>
</ul> </ul>
@ -69,3 +69,7 @@
.CDB-Legend { .CDB-Legend {
width: $baseSize * 12; width: $baseSize * 12;
} }
.CDB-Label {
vertical-align: middle;
}

View File

@ -29,6 +29,7 @@
height: $baseSize * 2; height: $baseSize * 2;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
vertical-align: middle;
z-index: 1; z-index: 1;
~ .CDB-RadioFace { ~ .CDB-RadioFace {