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

use flexbox for forms

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/fonts/cartoIcon.eot
BIN
View File
Binary file not shown.
src/fonts/cartoIcon.ttf
BIN
View File
Binary file not shown.
src/fonts/cartoIcon.woff
BIN
View File
Binary file not shown.
src/scss/cdb-components/forms/inputs.scss
+1
View File
@@ -21,6 +21,7 @@
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
font-size: $sFontSize-medium; font-size: $sFontSize-medium;
line-height: $sLineHeight-medium; line-height: $sLineHeight-medium;
box-sizing: border-box;
&:hover { &:hover {
border: 1px solid $cHoverLine; border: 1px solid $cHoverLine;
src/scss/cdb-components/forms/legends.scss
+21 -13
View File
@@ -35,37 +35,45 @@
<br/> <br/>
<br/> <br/>
<fieldset> <div class="CDB-Fieldset">
<p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p> <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
<ul class="CDB-Text CDB-Size-medium u-iBlock"> <ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
<li class="u-iBlock u-rSpace--xl"> <li class="u-rSpace--xl u-iblock">
<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iblock CDB-Size-medium">
<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-Checkbox-face"></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-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-Checkbox-face"></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>
</ul> </ul>
</fieldset> </div>
<fieldset class="u-tSpace-xl CDB-Text"> <div class="u-tSpace-xl CDB-Text CDB-Fieldset">
<p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p> <p class="CDB-Legend 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">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText"> </div>
</div>
</fieldset>
``` ```
*/ */
@import '../../cdb-variables/sizes'; @import '../../cdb-variables/sizes';
@import '../../cdb-utilities/mixins';
.CDB-Legend { .CDB-Legend {
width: $baseSize * 12; width: $baseSize * 12;
} }
.CDB-Fieldset {
@include display-flex();
@include align-items(center);
}
.CDB-Fieldset-block {
width: 100%;
}