use flexbox for forms
This commit is contained in:
parent
008f6aaf8e
commit
78829e693c
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -21,6 +21,7 @@
|
||||
border-radius: $baseSize / 2;
|
||||
font-size: $sFontSize-medium;
|
||||
line-height: $sLineHeight-medium;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $cHoverLine;
|
||||
|
@ -35,37 +35,45 @@
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<fieldset>
|
||||
<p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
|
||||
<ul class="CDB-Text CDB-Size-medium u-iBlock">
|
||||
<li class="u-iBlock u-rSpace--xl">
|
||||
<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
|
||||
<div class="CDB-Fieldset">
|
||||
<p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
|
||||
<ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
|
||||
<li class="u-rSpace--xl u-iblock">
|
||||
<div class="u-iblock CDB-Size-medium">
|
||||
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
|
||||
<span class="u-iBlock CDB-Checkbox-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Sport</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="u-iblock">
|
||||
<label class="u-iblock CDB-Text CDB-Size-medium">
|
||||
<label class="u-iblock CDB-Size-medium">
|
||||
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
|
||||
<span class="u-iBlock CDB-Checkbox-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Travel</label>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<fieldset class="u-tSpace-xl CDB-Text">
|
||||
<p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
|
||||
<div class="u-iBlock">
|
||||
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
|
||||
<p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
|
||||
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
|
||||
</div>
|
||||
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../../cdb-variables/sizes';
|
||||
@import '../../cdb-utilities/mixins';
|
||||
|
||||
.CDB-Legend {
|
||||
width: $baseSize * 12;
|
||||
}
|
||||
|
||||
.CDB-Fieldset {
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
}
|
||||
.CDB-Fieldset-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user