adding styles

dest/index.html

@@ -65,7 +65,6 @@
 						<li><a href="#get-started">Get Started</a></li>
 						<li><a href="#typography">Typography</a></li>
 						<li><a href="#components">Components</a></li>
-                        <li><a href="#form">Form</a></li>
 						<li><a href="#functions">Functions</a></li>
 						<li><a href="#helpers">Helpers</a></li>
 						<li><a href="#mixins">Mixins</a></li>
@@ -390,35 +389,7 @@
 					</tbody>
 				</table>
 
-                <!-- field -->
-                <hr class="margin-top-3x">
-				<h2 id="functions" class="margin-top-1x">
-                    Fields
-                </h2>
-
-                <!-- field / input -->
-				<h3 class="h4 margin-top-0x margin-bottom-0x">
-                    Input
-                </h3>
-                <div class="field">
-                    <input class="field__text" type="text" />
-                </div>
-                <div class="field">
-                    <input type="text" class="field__text field__text--error" />
-                    <div class="field__panel field__panel--error">
-                        error item 1
-                    </div>
-                </div>
-
-                <!-- field / textarea -->
-				<h3 class="h4 margin-top-0x margin-bottom-0x">
-                    Textarea
-                </h3>
-                <div class="field">
-                    <textarea class="field__text"></textarea>
-                </div>
-
-                <!-- field / checkbox -->
+                <!-- components / field / checkbox -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                     Checkbox
                 </h3>
@@ -434,8 +405,23 @@
                         checkbox 1
                     </label>
                 </div>
+                <div class="field">
+                    <input id="field__checkbox__2" class="field__checkbox" type="checkbox" name="field__checkbox__2" value="true" />
+                    <label for="field__checkbox__2" class="field__label">
+                        <svg class="icon field__checkbox__unchecked" alt="beaker" viewBox="0 0 100 100">
+                            <use xlink:href="/svg/icons.svg#x" />
+                        </svg>
+                        <svg class="icon field__checkbox__checked" alt="beaker" viewBox="0 0 100 100">
+                            <use xlink:href="/svg/icons.svg#check" />
+                        </svg>
+                        checkbox 1
+                    </label>
+                    <div class="field__panel field__panel--error">
+                        error item 1
+                    </div>
+                </div>
 
-                <!-- field / radio -->
+                <!-- components / field / radio -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                     Radio
                 </h3>
@@ -462,7 +448,34 @@
                     </label>
                 </div>
 
-                <!-- field / radio -->
+                <!-- radio / error -->
+                <div class="field">
+                    <input id="field__radio__3" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
+                    <label for="field__radio__3" class="field__label field__label--error">
+                        <svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">
+                            <use xlink:href="/svg/icons.svg#x" />
+                        </svg>
+                        <svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">
+                            <use xlink:href="/svg/icons.svg#check" />
+                        </svg>
+                        radio item 1
+                    </label><br />
+                    <input id="field__radio__4" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
+                    <label for="field__radio__4" class="field__label field__label--error">
+                        <svg class="icon field__radio__unchecked" alt="beaker" viewBox="0 0 100 100">
+                            <use xlink:href="/svg/icons.svg#x" />
+                        </svg>
+                        <svg class="icon field__radio__checked" alt="beaker" viewBox="0 0 100 100">
+                            <use xlink:href="/svg/icons.svg#check" />
+                        </svg>
+                        radio item 2
+                    </label>
+                    <div class="field__panel field__panel--error">
+                        error item 1
+                    </div>
+                </div>
+
+                <!-- components / field / select -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                     Select
                 </h3>
@@ -476,6 +489,51 @@
                         </select>
                     </label>
                 </div>
+                <div class="field">
+                    <label class="field__label">
+                        Select Item
+                        <select class="field__select field__select--error">
+                            <option>select item 1</option>
+                            <option>select item 2</option>
+                            <option>select item 3</option>
+                        </select>
+                        <div class="field__panel field__panel--error">
+                            error item 1
+                        </div>
+                    </label>
+                </div>
+
+                <!-- components / field / input textarea -->
+				<h3 class="h4 margin-top-0x margin-bottom-0x">
+                    Input / Textarea
+                </h3>
+                <div class="field">
+                    <input class="field__text" type="text" />
+                </div>
+                <div class="field">
+                    <label class="field__label field__label--error">
+                        Text
+                        <input type="text" class="field__text field__text--valid" />
+                    </label>
+                    <div class="field__panel field__panel--valid">
+                        error item 1
+                    </div>
+                </div>
+                <div class="field">
+                    <input type="text" class="field__text field__text--error" />
+                    <div class="field__panel field__panel--error">
+                        error item 1
+                    </div>
+                </div>
+                <div class="field">
+                    <textarea class="field__text"></textarea>
+                </div>
+                <div class="field">
+                    <textarea class="field__text"></textarea>
+                    <div class="field__panel field__panel--error">
+                        error item 1
+                    </div>
+                </div>
 
 				<!-- functions -->
 				<hr class="margin-top-3x">
@@ -501,7 +559,6 @@ toRem(10px 10px 0 0);
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                     stripUnit()
                 </h3>
-				<span class="background-warning">/functions</span>
 				<h4 class="h6 margin-top-1x">Sass:</h4>
 				<pre class="code"><code>toEm(10px);</code></pre>
 				<p>
@@ -538,11 +595,15 @@ toRem(10px 10px 0 0);
 				<pre class="code">&lt;div class=&quot;panel margin-bottom-0x&quot;&gt;margin-bottom-0x&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-1x&quot;&gt;margin-bottom-1x&lt;/div&gt;
 &lt;div class=&quot;margin-bottom-2x&quot;&gt;margin-bottom-2x&lt;/div&gt;
-&lt;div class=&quot;margin-bottom-3x&quot;&gt;margin-bottom-3x&lt;/div&gt;</code></pre>
+&lt;div class=&quot;margin-bottom-3x&quot;&gt;margin-bottom-3x&lt;/div&gt;
+&lt;div class=&quot;margin-bottom-4x&quot;&gt;margin-bottom-4x&lt;/div&gt;
+&lt;div class=&quot;margin-bottom-5x&quot;&gt;margin-bottom-5x&lt;/div&gt;</code></pre>
 				<div class="panel panel__inner margin-bottom-0x">margin-bottom-0x</div>
 				<div class="panel panel__inner margin-bottom-1x">margin-bottom-1x</div>
 				<div class="panel panel__inner margin-bottom-2x">margin-bottom-2x</div>
 				<div class="panel panel__inner margin-bottom-3x">margin-bottom-3x</div>
+                <div class="panel panel__inner margin-bottom-4x">margin-bottom-4x</div>
+                <div class="panel panel__inner margin-bottom-5x">margin-bottom-5x</div>
 
 				<!-- helpers / media -->
 				<h3 class="h4 margin-top-1x">
@@ -575,19 +636,6 @@ toRem(10px 10px 0 0);
 					</div>
 				</div>
 
-				<!-- helpers / media -->
-				<h3 class="h4 margin-top-1x">
-                    Width
-                </h3>
-				<pre class="code"><code>&lt;div class=&quot;panel width-25&quot;&gt;width-25&lt;/div&gt;
-&lt;div class=&quot;width-50&quot;&gt;width-50&lt;/div&gt;
-&lt;div class=&quot;width-75&quot;&gt;width-75&lt;/div&gt;
-&lt;div class=&quot;width-100&quot;&gt;width-100&lt;/div&gt;</code></pre>
-				<div class="panel panel__inner width-25 margin-bottom-1x">width-25</div>
-				<div class="panel panel__inner width-50 margin-bottom-1x">width-50</div>
-				<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div>
-				<div class="panel panel__inner width-100 margin-bottom-1x">width-100</div>
-
                 <!-- helpers / text -->
                 <h3 class="h4 margin-top-1x">
                     Text
@@ -605,14 +653,27 @@ toRem(10px 10px 0 0);
 &lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;</code></pre>
 
                 <p>
-                    Also it will be create classes $crispy__font-sizes
+                    Also it will be create classes for,
                 </p>
                 <ul>
                     <li>text-* with $crispy__font-sizes for "font-size"</li>
                     <li>text-* with $crispy__colors for "color"</li>
-                    <li>background- with $crispy__font-sizes for "background-color"</li>
+                    <li>background-* with $crispy__font-sizes for "background-color"</li>
                 </ul>
 
+				<!-- helpers / media -->
+				<h3 class="h4 margin-top-1x">
+                    Width
+                </h3>
+				<pre class="code"><code>&lt;div class=&quot;panel width-25&quot;&gt;width-25&lt;/div&gt;
+&lt;div class=&quot;width-50&quot;&gt;width-50&lt;/div&gt;
+&lt;div class=&quot;width-75&quot;&gt;width-75&lt;/div&gt;
+&lt;div class=&quot;width-100&quot;&gt;width-100&lt;/div&gt;</code></pre>
+				<div class="panel panel__inner width-25 margin-bottom-1x">width-25</div>
+				<div class="panel panel__inner width-50 margin-bottom-1x">width-50</div>
+				<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div>
+				<div class="panel panel__inner width-100 margin-bottom-1x">width-100</div>
+
 				<!-- mixins -->
 				<hr class="margin-top-3x">
 				<h2 id="mixins" class="margin-top-1x">

src/scss/components/field/_panel.scss

@@ -15,7 +15,8 @@
 
 $crispy__field__panel__padding: toEm($crispy__margin) !default;
 $crispy__field__panel__color: white !default;
-$crispy__field__panel__background-color: $crispy__color-danger !default;
+$crispy__field__panel__background-color--valid: $crispy__color-success !default;
+$crispy__field__panel__background-color--error: $crispy__color-danger !default;
 
 @mixin crispy__field__panel() {
     .field__panel {
@@ -23,7 +24,12 @@ $crispy__field__panel__background-color: $crispy__color-danger !default;
 
         &--error {
             color: white;
-            background-color: $crispy__field__panel__background-color;
+            background-color: $crispy__field__panel__background-color--error;
+        }
+
+        &--valid {
+            color: white;
+            background-color: $crispy__field__panel__background-color--valid;
         }
     }
 }