adding radio

adding panel

dest/index.html

@@ -127,18 +127,18 @@
     <li>item 1</li>
     <li>item 2
         <ul>
-       <li>child item 1</li>
-<li>child item 2</li>
-</ul>
-</li>
+            <li>child item 1</li>
+            <li>child item 2</li>
+        </ul>
+    </li>
 </ul>
 <ol>
-<li>item 1</li>
-<li>item 2</li>
+    <li>item 1</li>
+    <li>item 2</li>
 </ol>
 <dl>
-<dt>defined title 1</dt>
-<dd>defined item 1</dd>
+    <dt>defined title 1</dt>
+    <dd>defined item 1</dd>
 &lt;/dl&gt;</code></pre>
 				<ul>
 					<li>item 1</li>
@@ -356,39 +356,91 @@
 					</tbody>
 				</table>
 
-                <!-- form -->
+                <!-- field -->
                 <hr class="margin-top-3x">
 				<h2 id="functions" class="margin-top-1x">
-                    Form
+                    Fields
                 </h2>
 
-                <!-- form / input -->
+                <!-- field / input -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                     Input
                 </h3>
-                <input type="text" />
+                <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>
 
-                <!-- form / textarea -->
+                <!-- field / textarea -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
                     Textarea
                 </h3>
-                <textarea></textarea>
+                <div class="field">
+                    <textarea class="field__text"></textarea>
+                </div>
+
+                <!-- field / checkbox -->
+				<h3 class="h4 margin-top-0x margin-bottom-0x">
+                    Checkbox
+                </h3>
+                <div class="field">
+                    <input id="field__checkbox__1" class="field__checkbox" type="checkbox" name="field__checkbox__1" value="true" />
+                    <label for="field__checkbox__1" 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>
 
-                <!-- form / textarea -->
+                <!-- field / radio -->
 				<h3 class="h4 margin-top-0x margin-bottom-0x">
-                    Field
+                    Radio
                 </h3>
-                <div class="field field--valid">
-                    <input type="text" />
-                    <span class="field__panel">
-                        Error!
-                    </span>
+                <div class="field">
+                    <input id="field__radio__1" class="field__radio" type="radio" name="field__radio__1[]" value="true" />
+                    <label for="field__radio__1" class="field__label">
+                        <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__2" class="field__radio" type="radio" name="field__radio__1[]" value="true" />
+                    <label for="field__radio__2" class="field__label">
+                        <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>
-                <div class="field field--error">
-                    <input type="text" />
-                    <span class="field__panel">
-                        Error!
-                    </span>
+
+                <!-- field / radio -->
+				<h3 class="h4 margin-top-0x margin-bottom-0x">
+                    Select
+                </h3>
+                <div class="field">
+                    <label class="field__label">
+                        Select Item
+                        <select class="field__select">
+                            <option>select item 1</option>
+                            <option>select item 2</option>
+                            <option>select item 3</option>
+                        </select>
+                    </label>
                 </div>
 
 				<!-- functions -->

src/scss/components/field/_checkbox.scss

@@ -4,10 +4,10 @@
  * <div class="field">
  *     <input id="" type="text" class="field__checkbox" />
  *     <label for="" class="field__label">
- *         <svg class="icon field__checkbox__icon field__checkbox__checked" viewBox="0 0 100 100">
+ *         <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
  *             <use src="#"></use>
  *         </svg>
- *         <svg class="icon field__checkbox__icon field__checkbox__checked" viewBox="0 0 100 100">
+ *         <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
  *             <use src="#"></use>
  *         </svg>
  *    </label>
@@ -17,50 +17,39 @@
  *
  */
 
-$crispy__field__checkbox___disabled__color: !default;
-$crispy__field__checkbox___checked__color: !default;
-$crispy__field__checkbox___unchecked__color: !default;
+$crispy__field__checkbox__disabled__color: $crispy__color-secondary !default;
+$crispy__field__checkbox__checked__color: $crispy__color-success !default;
+$crispy__field__checkbox__unchecked__color: $crispy__color-text !default;
 
 @mixin crispy__field__checkbox() {
     .field__checkbox {
         position: relative;
         display: none;
-        appearance: none;
 
-        + label {
+        + .field__label {
+            .field__checkbox__checked {
+                display: none;
+            }
+
             &:hover {
                 cursor: pointer;
             }
         }
 
-        &:checked + label .field__checkbox__checked {
+        &:checked + .field__label &__checked {
             display: inline-block;
         }
 
-        &:checked + label .field__checkbox__unchecked {
+        &:checked + .field__label &__unchecked {
             display: none;
         }
 
-        &:disabled + label .field__checkbox__icon {
-            fill: $crispy__field__checkbox___disabled__color;
-        }
-
-        &:disabled + label:hover {
-            cursor: not-allowed;
-        }
-
-        &__checkbox__icon {
-            fill: $crispy__field__checkbox__color;
-            transition: $crispy__field__checkbox__transition;
-        }
-
-        &__checkbox__checked {
-            fill: $checkbox__icon-color-checked;
-            display: none;
+        &__checked {
+            fill: $crispy__field__checkbox__checked__color;
         }
 
-        &__checkbox__unchecked {
-            fill: $checkbox__icon-color-unchecked;
+        &__unchecked {
+            fill: $crispy__field__checkbox__unchecked__color;
         }
     }
 }

src/scss/components/field/_field.scss

@@ -1,5 +1,9 @@
 @import
-    'text';
+    'panel',
+    'text',
+    'checkbox',
+    'radio',
+    'select';
 
 /**
  * field
@@ -15,17 +19,17 @@ $crispy__field__input__font-size: $crispy__body__font-size !default;
 $crispy__field__input__padding: toEm(6px 8px) !default;
 $crispy__field__input__color: $crispy__color-text !default;
 
-%field__ {
-    line-height: $crispy__golden-ratio;
-    padding: $crispy__field__input__padding;
-    color: $crispy__field__input__color;
-    appearance: none;
-
-    @include crispy__font-size($crispy__field__input__font-size);
-}
-
 @mixin crispy__field() {
     .field {
         margin: $crispy__field__margin;
     }
+
+    .field__ {
+        line-height: $crispy__golden-ratio;
+        padding: $crispy__field__input__padding;
+        color: $crispy__field__input__color;
+        appearance: none;
+
+        @include crispy__font-size($crispy__field__input__font-size);
+    }
 }

src/scss/components/field/_panel.scss

@@ -11,8 +11,17 @@
  *
  */
 
+$crispy__field__panel__padding: toEm($crispy__margin) !default;
+$crispy__field__panel__color: white !default;
+$crispy__field__panel__background-color: $crispy__color-danger !default;
+
 @mixin crispy__field__panel() {
     .field__panel {
-        @extend .panel;
+        padding: $crispy__field__panel__padding;
+
+        &--error {
+            color: white;
+            background-color: $crispy__field__panel__background-color;
+        }
     }
 }

src/scss/components/field/_radio.scss

@@ -1,71 +1,55 @@
 /**
- * input, textarea
+ * radio
  *
+ * <div class="field">
+ *     <input id="" type="text" class="field__radio" />
+ *     <label for="" class="field__label">
+ *         <svg class="icon field__radio__checked" viewBox="0 0 100 100">
+ *             <use src="#"></use>
+ *         </svg>
+ *         <svg class="icon field__radio__checked" viewBox="0 0 100 100">
+ *             <use src="#"></use>
+ *         </svg>
+ *    </label>
+ * </div>
  *
  * @author Björn Hase
  *
  */
 
-$crispy__field__checkbox: !default;
+$crispy__field__radio__disabled__color: $crispy__color-secondary !default;
+$crispy__field__radio__checked__color: $crispy__color-success !default;
+$crispy__field__radio__unchecked__color: $crispy__color-text !default;
 
-@mixin crispy__field__checkbox() {
-    .field__checkbox {
+@mixin crispy__field__radio() {
+    .field__radio {
+        position: relative;
+        display: none;
 
-        label {
-            &:hover {
-                cursor: pointer;
-            }
-
-            .field__checkbox__icon {
-                fill: $checkbox__icon-color-unchecked;
-                transition: $checkbox__transition-color;
-            }
-
-            .field__checkbox__checked {
-                fill: $checkbox__icon-color-checked;
+        + .field__label {
+            .field__radio__checked {
                 display: none;
             }
 
-            .field__checkbox__unchecked {
-                fill: $checkbox__icon-color-unchecked;
+            &:hover {
+                cursor: pointer;
             }
         }
 
-        input[type="checkbox"] {
-            position: relative;
-            display: none;
-
-            &:checked + label .field__checkbox__checked {
-                display: inline-block;
-            }
-
-            &:checked + label .field__checkbox__unchecked {
-                display: none;
-            }
-
-            &:disabled + label .field__checkbox__icon {
-                fill: $checkbox__icon-color--disabled;
-            }
-
-            &:disabled + label:hover {
-                cursor: not-allowed;
-            }
-
-            appearance: none;
+        &:checked + .field__label &__checked {
+            display: inline-block;
         }
 
-        &--valid {
-            border-color: $crispy__field__border-color--valid;
+        &:checked + .field__label &__unchecked {
+            display: none;
         }
 
-        &--error {
-            border-color: $crispy__field__border-color--error;
+        &__checked {
+            fill: $crispy__field__radio__checked__color;
         }
 
-        &:focus {
-            border-color: $crispy__field__border-color--focus;
+        &__unchecked {
+            fill: $crispy__field__radio__unchecked__color;
         }
-
-        @include crispy__font-size($crispy__field__font-size);
     }
 }

src/scss/components/field/_select.scss

@@ -0,0 +1,48 @@
+/**
+ * select
+ *
+ * <div class="field">
+ *     <label class="field__label">
+ *         <select class="field__select">
+ *
+ *         </select>
+ *    </label>
+ * </div>
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__field__select__background-color: white !default;
+
+$crispy__field__select__border: 1px solid $crispy__color-secondary !default;
+
+$crispy__field__select__border-color--focus: $crispy__color-primary !default;
+$crispy__field__select__border-color--valid: $crispy__color-success !default;
+$crispy__field__select__border-color--error: $crispy__color-danger !default;
+
+@mixin crispy__field__select()
+{
+    .field__select {
+        @extend .field__;
+
+        display: block;
+        width: 100%;
+        border: $crispy__field__select__border;
+
+        background-color: $crispy__field__select__background-color;
+
+        &--valid {
+            border-color: $crispy__field__select__border-color--valid;
+        }
+
+        &--error {
+            border-color: $crispy__field__select__border-color--error;
+        }
+
+        &:focus {
+            outline: 0;
+            border-color: $crispy__field__select__border-color--focus;
+        }
+    }
+}

src/scss/components/field/_text.scss

@@ -20,22 +20,22 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default;
 
 @mixin crispy__field__text() {
     .field__text {
-        @extend %field__;
+        @extend .field__;
 
         display: block;
         width: 100%;
-        border: $crispy__field__border;
+        border: $crispy__field__text__border;
 
         &--valid {
-            border-color: $crispy__field__border-color--valid;
+            border-color: $crispy__field__text__border-color--valid;
         }
 
         &--error {
-            border-color: $crispy__field__border-color--error;
+            border-color: $crispy__field__text__border-color--error;
         }
 
         &:focus {
-            border-color: $crispy__field__border-color--focus;
+            border-color: $crispy__field__text__border-color--focus;
         }
     }
 }

src/scss/example.scss

@@ -12,7 +12,12 @@
 @include crispy__panel();
 @include crispy__table();
 
-@include crispy__form__text();
+@include crispy__field();
+@include crispy__field__text();
+@include crispy__field__checkbox();
+@include crispy__field__radio();
+@include crispy__field__select();
+@include crispy__field__panel();
 
 .container {
     max-width: 992px;