use flexbox for forms

This commit is contained in:
piensaenpixel 2016-02-23 13:48:27 +01:00
parent 008f6aaf8e
commit 78829e693c
5 changed files with 22 additions and 13 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -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;

View File

@ -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%;
}