From 78829e693cf95b5e8646e2917ddb4ff404fc63a4 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Tue, 23 Feb 2016 13:48:27 +0100
Subject: [PATCH] use flexbox for forms

---
 src/fonts/cartoIcon.eot                    | Bin 19808 -> 19808 bytes
 src/fonts/cartoIcon.ttf                    | Bin 19636 -> 19636 bytes
 src/fonts/cartoIcon.woff                   | Bin 12424 -> 12424 bytes
 src/scss/cdb-components/forms/inputs.scss  |   1 +
 src/scss/cdb-components/forms/legends.scss |  34 +++++++++++++--------
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot
index 4f461cd8bf57861cb8fba6b79bb5a4455f2f77b4..7c041fd67c9dc3d89dfb7223bf3145e2c23f7714 100644
GIT binary patch
delta 55
zcmaDbi}ArM#tAmeE5m{(+OK22WPV}dhpE!RVJqYLZN4&aGyY-#f=eHN7sKey3m6Z0
F0|1Y57h3=T

delta 55
zcmaDbi}ArM#tAmewRPbW?bk71P<}S?!&K?;y4rYto39MqjK3Iw;L?YWbufDK0>%U0
E0FOc!TL1t6

diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf
index c23969acb99ae6bb4560fb8edfa35a32938ec3bb..5c1ab9f2b8af39cd35faeb0156097d9c67ab847a 100644
GIT binary patch
delta 47
wcmdlolX1&T#tDwhm&`9rbeSq09JVr^-{va=H{&k`Ah`7LcQK6K_~n2%0Ku9Q*Z=?k

delta 47
wcmdlolX1&T#tDwh7nGk(beSq0URN8>Z}XLboADO|5M283u?|LW{Bpn>0Ku9Q*Z=?k

diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff
index e3e9849615c66858ef0074eaf7b90f7930778e4c..2ae2e07295f28d245aa4fdcd9956467050e10f15 100644
GIT binary patch
delta 59
zcmV-B0L1@@VTfUnc>~fn(6M~VC?_DzgYo<}Um3U=e*r}pE`9u645Qza|NqVv!T1Nr
R<zQd}i2?wKqqA)(8wW?l8x8;f

delta 59
zcmV-B0L1@@VTfUnc>~ZR=CORrC?~MMsqy?aUm3U=e*r}pE`9h|2czGV|NqVv!T1Nr
R<zQd}i2?wKyR&U68wX>N8^Hho

diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss
index 4c5b843..6559fe0 100644
--- a/src/scss/cdb-components/forms/inputs.scss
+++ b/src/scss/cdb-components/forms/inputs.scss
@@ -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;
diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss
index d9c7317..20483ae 100644
--- a/src/scss/cdb-components/forms/legends.scss
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -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%;
+}
+