renamed

adding radio
adding panel

src/scss/_crispy.scss

@@ -14,7 +14,6 @@
     'components/modal',
     'components/panel',
     'components/table',
-    
-    'form/form',
+    'components/field/field',
 
     'helpers/helpers';

src/scss/components/field/_checkbox.scss

@@ -0,0 +1,71 @@
+/**
+ * input, textarea
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__field__checkbox: !default;
+
+@mixin crispy__field__checkbox() {
+    .field__checkbox {
+
+        label {
+            &:hover {
+                cursor: pointer;
+            }
+
+            .field__checkbox__icon {
+                fill: $checkbox__icon-color-unchecked;
+                transition: $checkbox__transition-color;
+            }
+
+            .field__checkbox__checked {
+                fill: $checkbox__icon-color-checked;
+                display: none;
+            }
+
+            .field__checkbox__unchecked {
+                fill: $checkbox__icon-color-unchecked;
+            }
+        }
+
+        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;
+        }
+
+        &--valid {
+            border-color: $crispy__field__border-color--valid;
+        }
+
+        &--error {
+            border-color: $crispy__field__border-color--error;
+        }
+
+        &:focus {
+            border-color: $crispy__field__border-color--focus;
+        }
+
+        @include crispy__font-size($crispy__field__font-size);
+    }
+}

src/scss/components/field/_field.scss

@@ -0,0 +1,19 @@
+@import
+    'text',
+    'checkbox';
+
+/**
+ * field
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__field__margin: toEm(0 0 $crispy__margin 0) !default;
+
+@mixin crispy__field() {
+    .field {
+        margin: $crispy__field__margin;
+    }
+}

src/scss/components/field/_panel.scss

@@ -0,0 +1,18 @@
+/**
+ * <div class="field">
+ *     <div class="field__panel">
+ *         <ul>
+ *           <li>item 1<li>
+ *         </ul>
+ *     </div>
+ * </div>
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy__field__panel() {
+    .field__panel {
+        @extend .panel;
+    }
+}

src/scss/components/field/_radio.scss

@@ -0,0 +1,71 @@
+/**
+ * input, textarea
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__field__checkbox: !default;
+
+@mixin crispy__field__checkbox() {
+    .field__checkbox {
+
+        label {
+            &:hover {
+                cursor: pointer;
+            }
+
+            .field__checkbox__icon {
+                fill: $checkbox__icon-color-unchecked;
+                transition: $checkbox__transition-color;
+            }
+
+            .field__checkbox__checked {
+                fill: $checkbox__icon-color-checked;
+                display: none;
+            }
+
+            .field__checkbox__unchecked {
+                fill: $checkbox__icon-color-unchecked;
+            }
+        }
+
+        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;
+        }
+
+        &--valid {
+            border-color: $crispy__field__border-color--valid;
+        }
+
+        &--error {
+            border-color: $crispy__field__border-color--error;
+        }
+
+        &:focus {
+            border-color: $crispy__field__border-color--focus;
+        }
+
+        @include crispy__font-size($crispy__field__font-size);
+    }
+}

src/scss/components/field/_text.scss

@@ -0,0 +1,55 @@
+/**
+ * <div class="field">
+ *     <label class="field__label">
+ *         input
+ *         <input type="text" class="field__text" />
+ *     </label>
+ *     <div class="field__panel">
+ *         <ul>
+ *           <li>item 1<li>
+ *         </ul>
+ *     </div>
+ * </div>
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__field__text__font-size: $crispy__body__font-size !default;
+
+$crispy__field__text__padding: toEm(6px 8px) !default;
+$crispy__field__text__color: $crispy__color-text !default;
+
+$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 {
+        display: block;
+        width: 100%;
+
+        line-height: $crispy__golden-ratio;
+        padding: $crispy__field__padding;
+        color: $crispy__field__text__color;
+
+        border: $crispy__field__border;
+        appearance: none;
+
+        @include crispy__font-size($crispy__field__font-size);
+
+        &--valid {
+            border-color: $crispy__field__border-color--valid;
+        }
+
+        &--error {
+            border-color: $crispy__field__border-color--error;
+        }
+
+        &:focus {
+            border-color: $crispy__field__border-color--focus;
+        }
+    }
+}

src/scss/form/_form.scss

@@ -1,2 +0,0 @@
-@import
-    'text';

src/scss/form/_text.scss

@@ -1,56 +0,0 @@
-/**
- * input text
- *
- *
- * @author Björn Hase
- *
- */
-
-$crispy__form__font-size: $crispy__body__font-size !default;
-$crispy__form__padding: toEm(6px 8px) !default;
-$crispy__form__text__color: $crispy__color-text !default;
-$crispy__form__border: 1px solid $crispy__color-secondary !default;
-
-$crispy__form__border-color--focus: $crispy__color-primary !default;
-$crispy__form__border-color--valid: $crispy__color-success !default;
-$crispy__form__border-color--error: $crispy__color-danger !default;
-
-@mixin crispy__form__text() {
-    input:not([type="submit"]),
-    textarea {
-        display: block;
-        width: 100%;
-
-        line-height: $crispy__golden-ratio;
-        padding: $crispy__form__padding;
-        color: $crispy__form__text__color;
-
-        border: $crispy__form__border;
-        appearance: none;
-
-        @include crispy__font-size($crispy__form__font-size);
-    }
-
-    .field {
-        &--valid {
-            input:not([type="submit"]),
-            textarea {
-                border-color: $crispy__form__border-color--valid;
-            }
-        }
-
-        &--error {
-            input:not([type="submit"]),
-            textarea {
-                border-color: $crispy__form__border-color--error;
-            }
-        }
-    }
-
-    input:not([type="submit"]),
-    textarea {
-        &:focus {
-			border-color: $crispy__form__border-color--focus;
-		}
-    }
-}

src/scss/helpers/_text.scss

@@ -13,6 +13,31 @@ $crispy__text-colors: $crispy__colors !default;
 $crispy__text-font-sizes: $crispy__font-sizes !default;
 
 @mixin crispy__text() {
+
+    .text-italic {
+        font-style: italic;
+    }
+
+    .text-bold {
+        font-weight: bold;
+    }
+
+    .text-uppercase {
+        text-transform: uppercase;
+    }
+
+    .text-lowercase {
+        text-transform: lowercase;
+    }
+
+    .text-small {
+        font-size: 80%;
+    }
+
+    .text-crossed {
+    	text-decoration: line-through;
+    }
+
     @each $name, $font-size in $crispy__font-sizes {
         .text-#{$name} {
             @include crispy__font-size($font-size);