From 96faac13e3dbbfae1f6ceae0beae5d5666b658be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Fri, 18 Oct 2019 17:46:09 +0200
Subject: [PATCH] adding

---
 src/components/_field.scss | 214 +++++++++++++++++++++++++++++++++++--
 1 file changed, 206 insertions(+), 8 deletions(-)

diff --git a/src/components/_field.scss b/src/components/_field.scss
index 7878bf1..007c0a3 100644
--- a/src/components/_field.scss
+++ b/src/components/_field.scss
@@ -1,11 +1,3 @@
-@import
-    'field/checkbox',
-    'field/label',
-    'field/panel',
-    'field/text',
-    'field/radio',
-    'field/select';
-
 /**
  * component: field
  *
@@ -23,10 +15,27 @@
 
 $crispy__field__margin: toEm(0 0 $crispy__spacing 0) !default;
 
+$crispy__field__border: 1px solid $crispy__color-secondary !default;
+
+$crispy__field__color--valid: $crispy__color-success !default;
+$crispy__field__color--error: $crispy__color-danger !default;
+
+$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__input__font-size: $crispy__font-size !default;
 $crispy__field__input__padding: toEm(6px 8px) !default;
 $crispy__field__input__color: $crispy__color-text !default;
 
+$crispy__field__select__padding: toEm(8px) !default;
+
+$crispy__field__select__background-color: white !default;
+$crispy__field__select__border: $crispy_border !default;
+
 @mixin crispy__field() {
     .field {
         margin: $crispy__field__margin;
@@ -47,4 +56,193 @@ $crispy__field__input__color: $crispy__color-text !default;
 
         font-size: $crispy__field__input__font-size;
     }
+
+    /**
+     * label
+     *
+     *
+     */
+
+    .field__label {
+        display: inline-block;
+        width: 100%;
+    }
+
+    .field--valid {
+        .field__label {
+            color: $crispy__field__color--valid;
+        }
+    }
+
+    .field--error {
+        .field__label {
+            color: $crispy__field__color--error;
+        }
+    }
+
+    /**
+     * input & textarea
+     *
+     *
+     */
+
+    .field__text {
+        margin: 0;
+        border: $crispy__field__border;
+
+        &:focus {
+            border-color: $crispy__field__border-color--focus;
+        }
+    }
+
+    .field--valid {
+        .field__text, .field__select {
+            border-color: $crispy__field__border-color--valid;
+        }
+    }
+
+    .field--error {
+        .field__text, .field__select {
+            border-color: $crispy__field__border-color--error;
+        }
+    }
+
+    /**
+     * 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__border-color--focus;
+        }
+    }
+
+    /**
+     * 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
+     *
+     *
+     */
+
+    .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__checked__color;
+        }
+
+        &__unchecked {
+            fill: $crispy__field__unchecked__color;
+        }
+    }
+
+    .field--valid {
+        .field__checkbox__checked, .field__checkbox__unchecked {
+            fill: $crispy__field__color--valid;
+        }
+    }
+
+    .field--error {
+        .field__checkbox__checked, .field__checkbox__unchecked {
+            fill: $crispy__field__color--error;
+        }
+    }
+
+    /**
+     *
+     *
+     *
+     */
+
+    .field__panel {
+        padding: $crispy__field__panel__padding;
+    }
+
+    .field--valid {
+        .field__panel {
+            color: white;
+            background-color: $crispy__field__background-color--valid;
+        }
+    }
+
+    .field--error {
+        .field__panel {
+            color: white;
+            background-color: $crispy__field__background-color--error;
+        }
+    }
 }