adding

dist/example/index.html

@@ -475,22 +475,22 @@
 
                 <!-- radio / error -->
                 <div class="field field--error">
-                    <input id="field__radio__3" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
+                    <input id="field__radio__3" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
                     <label for="field__radio__3" class="field__label">
-                        <svg class="icon field__radio__unchecked" aria-hidden="true">
+                        <svg class="icon field__choice__unchecked" aria-hidden="true">
                             <use xlink:href="symbol-defs.svg#icon-minus"></use>
                         </svg>
-                        <svg class="icon field__radio__checked" aria-hidden="true">
+                        <svg class="icon field__choice__checked" aria-hidden="true">
                             <use xlink:href="symbol-defs.svg#icon-checked" />
                         </svg>
                         radio item 1
                     </label><br />
-                    <input id="field__radio__4" class="field__radio" type="radio" name="field__radio__2[]" value="true" />
+                    <input id="field__radio__4" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
                     <label for="field__radio__4" class="field__label">
-                        <svg class="icon field__radio__unchecked" aria-hidden="true">
+                        <svg class="icon field__choice__unchecked" aria-hidden="true">
                             <use xlink:href="symbol-defs.svg#icon-minus"></use>
                         </svg>
-                        <svg class="icon field__radio__checked" aria-hidden="true">
+                        <svg class="icon field__choice__checked" aria-hidden="true">
                             <use xlink:href="symbol-defs.svg#icon-checked" />
                         </svg>
                         radio item 2

src/all.scss

@@ -15,12 +15,6 @@
 @include crispy__modal();
 
 @include crispy__field();
-@include crispy__field__label();
-@include crispy__field__checkbox();
-@include crispy__field__radio();
-@include crispy__field__select();
-@include crispy__field__text();
-@include crispy__field__panel();
 
 @include crispy__panel();
 @include crispy__table();

src/components/_field.scss

@@ -24,8 +24,8 @@ $crispy__field__border-color--focus: $crispy__color-primary !default;
 $crispy__field__border-color--valid: $crispy__color-success !default;
 $crispy__field__border-color--error: $crispy__color-danger !default;
 
-$crispy__field__checked: $crispy__color-success !default;
-$crispy__field__unchecked: $crispy__color-danger !default;
+$crispy__field__choice__checked__color: $crispy__color-success !default;
+$crispy__field__choice__unchecked__color: $crispy__color-danger !default;
 
 $crispy__field__input__font-size: $crispy__font-size !default;
 $crispy__field__input__padding: toEm(6px 8px) !default;
@@ -33,8 +33,10 @@ $crispy__field__input__color: $crispy__color-text !default;
 
 $crispy__field__select__padding: toEm(8px) !default;
 
+$crispy__field__panel__padding: toEm(10px) !default;
+
 $crispy__field__select__background-color: white !default;
-$crispy__field__select__border: $crispy_border !default;
+$crispy__field__select__border: $crispy__border !default;
 
 @mixin crispy__field() {
     .field {
@@ -125,66 +127,29 @@ $crispy__field__select__border: $crispy_border !default;
     }
 
     /**
-     * radio
-     *
-     *
-     */
-
-    .field__radio {
-        position: relative;
-        display: none;
-
-        + .field__label {
-            .field__radio__checked {
-                display: none;
-            }
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        &:checked + .field__label &__checked {
-            display: inline-block;
-        }
-
-        &:checked + .field__label &__unchecked {
-            display: none;
-        }
-
-        &__checked {
-            fill: $crispy__field__checked__color;
-        }
-
-        &__unchecked {
-            fill: $crispy__field__unchecked__color;
-        }
-    }
-
-    .field--valid {
-        .field__radio__checked, .field__radio__unchecked {
-            fill: $crispy__field__radio__color--valid;
-        }
-    }
-
-    .field--error {
-        .field__radio__checked, .field__radio__unchecked {
-            fill: $crispy__field__radio__color--error;
-        }
-    }
-
-    /**
-     *  checkbox
+     * radio & checkbox
      *
+     * <div class="field">
+     *     <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
+     *     <label for="field__checkbox__1" class="field__label">
+     *         <svg class="icon field__choice__unchecked" aria-hidden="true">
+     *             <use xlink:href="symbol-defs.svg#icon-minus"></use>
+     *         </svg>
+     *         <svg class="icon field__choice__checked" aria-hidden="true">
+     *             <use xlink:href="symbol-defs.svg#icon-checked"></use>
+     *         </svg>
+     *         checkbox 1
+     *    </label>
+     * </div>
      *
      */
 
-    .field__checkbox {
+    .field__choice {
         position: relative;
         display: none;
 
         + .field__label {
-            .field__checkbox__checked {
+            .field__choice__checked {
                 display: none;
             }
 
@@ -202,22 +167,22 @@ $crispy__field__select__border: $crispy_border !default;
         }
 
         &__checked {
-            fill: $crispy__field__checked__color;
+            fill: $crispy__field__choice__checked__color;
         }
 
         &__unchecked {
-            fill: $crispy__field__unchecked__color;
+            fill: $crispy__field__choice__unchecked__color;
         }
     }
 
     .field--valid {
-        .field__checkbox__checked, .field__checkbox__unchecked {
+        .field__choice__checked, .field__choice__unchecked {
             fill: $crispy__field__color--valid;
         }
     }
 
     .field--error {
-        .field__checkbox__checked, .field__checkbox__unchecked {
+        .field__choice__checked, .field__choice__unchecked {
             fill: $crispy__field__color--error;
         }
     }
@@ -235,14 +200,14 @@ $crispy__field__select__border: $crispy_border !default;
     .field--valid {
         .field__panel {
             color: white;
-            background-color: $crispy__field__background-color--valid;
+            background-color: $crispy__field__color--valid;
         }
     }
 
     .field--error {
         .field__panel {
             color: white;
-            background-color: $crispy__field__background-color--error;
+            background-color: $crispy__field__color--error;
         }
     }
 }

src/components/field/_checkbox.scss

@@ -1,70 +0,0 @@
-/**
- * component: checkbox
- *
- * <div class="field">
- *     <input id="" type="text" class="field__checkbox" />
- *     <label for="" class="field__label">
- *         <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
- *             <use src="#"></use>
- *         </svg>
- *         <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
- *             <use src="#"></use>
- *         </svg>
- *    </label>
- * </div>
- *
- * @author Björn Hase
- *
- */
-
-$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;
-
-$crispy__field__checkbox__color--valid: $crispy__color-success !default;
-$crispy__field__checkbox__color--error: $crispy__color-danger !default;
-
-@mixin crispy__field__checkbox() {
-    .field__checkbox {
-        position: relative;
-        display: none;
-
-        + .field__label {
-            .field__checkbox__checked {
-                display: none;
-            }
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        &:checked + .field__label &__checked {
-            display: inline-block;
-        }
-
-        &:checked + .field__label &__unchecked {
-            display: none;
-        }
-
-        &__checked {
-            fill: $crispy__field__checkbox__checked__color;
-        }
-
-        &__unchecked {
-            fill: $crispy__field__checkbox__unchecked__color;
-        }
-    }
-
-    .field--valid {
-        .field__checkbox__checked, .field__checkbox__unchecked {
-            fill: $crispy__field__checkbox__color--valid;
-        }
-    }
-
-    .field--error {
-        .field__checkbox__checked, .field__checkbox__unchecked {
-            fill: $crispy__field__checkbox__color--error;
-        }
-    }
-}

src/components/field/_label.scss

@@ -1,32 +0,0 @@
-/**
- * component: label
- *
- * <label class="field">
- *
- * </label>
- *
- * @author Björn Hase
- *
- */
-
-$crispy__field__label__color--valid: $crispy__color-success !default;
-$crispy__field__label__color--error: $crispy__color-danger !default;
-
-@mixin crispy__field__label() {
-    .field__label {
-        display: inline-block;
-        width: 100%;
-    }
-
-    .field--valid {
-        .field__label {
-            color: $crispy__field__label__color--valid;
-        }
-    }
-
-    .field--error {
-        .field__label {
-            color: $crispy__field__label__color--error;
-        }
-    }
-}

src/components/field/_panel.scss

@@ -1,39 +0,0 @@
-/**
- * component: panel
- *
- * <div class="field">
- *     <div class="field__panel">
- *         <ul>
- *              <li>item 1<li>
- *         </ul>
- *     </div>
- * </div>
- *
- * @author Björn Hase
- *
- */
-
-$crispy__field__panel__padding: toEm($crispy__spacing) !default;
-$crispy__field__panel__color: white !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 {
-        padding: $crispy__field__panel__padding;
-    }
-
-    .field--valid {
-        .field__panel {
-            color: white;
-            background-color: $crispy__field__panel__background-color--valid;
-        }
-    }
-
-    .field--error {
-        .field__panel {
-            color: white;
-            background-color: $crispy__field__panel__background-color--error;
-        }
-    }
-}

src/components/field/_radio.scss

@@ -1,70 +0,0 @@
-/**
- * component: radio
- *
- * <div class="field">
- *     <input id="" type="text" class="field__radio" />
- *     <label for="" class="field__label">
- *         <i class="icon field__radio__checked">
- *
- *         </i>
- *         <i class="icon field__radio__checked">
- *
- *         </i>
- *    </label>
- * </div>
- *
- * @author Björn Hase
- *
- */
-
-$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;
-
-$crispy__field__radio__color--valid: $crispy__color-success !default;
-$crispy__field__radio__color--error: $crispy__color-danger !default;
-
-@mixin crispy__field__radio() {
-    .field__radio {
-        position: relative;
-        display: none;
-
-        + .field__label {
-            .field__radio__checked {
-                display: none;
-            }
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        &:checked + .field__label &__checked {
-            display: inline-block;
-        }
-
-        &:checked + .field__label &__unchecked {
-            display: none;
-        }
-
-        &__checked {
-            fill: $crispy__field__radio__checked__color;
-        }
-
-        &__unchecked {
-            fill: $crispy__field__radio__unchecked__color;
-        }
-    }
-
-    .field--valid {
-        .field__radio__checked, .field__radio__unchecked {
-            fill: $crispy__field__radio__color--valid;
-        }
-    }
-
-    .field--error {
-        .field__radio__checked, .field__radio__unchecked {
-            fill: $crispy__field__radio__color--error;
-        }
-    }
-}

src/components/field/_select.scss

@@ -1,49 +0,0 @@
-/**
- * component: select
- *
- * <div class="field">
- *     <label class="field__label">
- *         <select class="field__select">
- *
- *         </select>
- *    </label>
- * </div>
- *
- * @author Björn Hase
- *
- */
-
-$crispy__field__select__padding: toEm(8px) !default;
-
-$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 {
-        padding: $crispy__field__select__padding;
-        border: $crispy__field__select__border;
-        background-color: $crispy__field__select__background-color;
-
-        &:focus {
-            outline: 0;
-            border-color: $crispy__field__select__border-color--focus;
-        }
-    }
-
-    .field--valid {
-        .field__select {
-            border-color: $crispy__field__select__border-color--valid;
-        }
-    }
-
-    .field--error {
-        .field__select {
-            border-color: $crispy__field__select__border-color--error;
-        }
-    }
-}

src/components/field/_text.scss

@@ -1,42 +0,0 @@
-/**
- * component: text
- *
- * <div class="field">
- *     <label class="field__label">
- *         input
- *         <input type="text" class="field__text" />
- *     </label>
- * </div>
- *
- * @author Björn Hase
- *
- */
-
-$crispy__field__text__border: 1px solid $crispy__color-secondary !default;
-
-$crispy__field__text__border-color--focus: $crispy__color-primary !default;
-$crispy__field__text__border-color--valid: $crispy__color-success !default;
-$crispy__field__text__border-color--error: $crispy__color-danger !default;
-
-@mixin crispy__field__text() {
-    .field__text {
-        margin: 0;
-        border: $crispy__field__text__border;
-
-        &:focus {
-            border-color: $crispy__field__text__border-color--focus;
-        }
-    }
-
-    .field--valid {
-        .field__text {
-            border-color: $crispy__field__text__border-color--valid;
-        }
-    }
-
-    .field--error {
-        .field__text {
-            border-color: $crispy__field__text__border-color--error;
-        }
-    }
-}