diff --git a/src/scss/_crispy.scss b/src/scss/_crispy.scss
index 6810cff..f298550 100644
--- a/src/scss/_crispy.scss
+++ b/src/scss/_crispy.scss
@@ -14,7 +14,6 @@
'components/modal',
'components/panel',
'components/table',
-
- 'form/form',
+ 'components/field/field',
'helpers/helpers';
diff --git a/src/scss/components/field/_checkbox.scss b/src/scss/components/field/_checkbox.scss
new file mode 100644
index 0000000..cd4de37
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/scss/components/field/_field.scss b/src/scss/components/field/_field.scss
new file mode 100644
index 0000000..203ca8c
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/scss/components/field/_panel.scss b/src/scss/components/field/_panel.scss
new file mode 100644
index 0000000..c11bd50
--- /dev/null
+++ b/src/scss/components/field/_panel.scss
@@ -0,0 +1,18 @@
+/**
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy__field__panel() {
+ .field__panel {
+ @extend .panel;
+ }
+}
diff --git a/src/scss/components/field/_radio.scss b/src/scss/components/field/_radio.scss
new file mode 100644
index 0000000..cd4de37
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/scss/form/_field.scss b/src/scss/components/field/_select.scss
similarity index 100%
rename from src/scss/form/_field.scss
rename to src/scss/components/field/_select.scss
diff --git a/src/scss/components/field/_text.scss b/src/scss/components/field/_text.scss
new file mode 100644
index 0000000..d36cb82
--- /dev/null
+++ b/src/scss/components/field/_text.scss
@@ -0,0 +1,55 @@
+/**
+ *
+ *
+ *
+ *
+ *
+ * @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;
+ }
+ }
+}
diff --git a/src/scss/form/_form.scss b/src/scss/form/_form.scss
deleted file mode 100644
index f28dbd3..0000000
--- a/src/scss/form/_form.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import
- 'text';
diff --git a/src/scss/form/_text.scss b/src/scss/form/_text.scss
deleted file mode 100644
index 5e5025c..0000000
--- a/src/scss/form/_text.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/src/scss/helpers/_text.scss b/src/scss/helpers/_text.scss
index cd1999d..e30ec6e 100644
--- a/src/scss/helpers/_text.scss
+++ b/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);