diff --git a/src/scss/components/field/_field.scss b/src/scss/components/field/_field.scss index 203ca8c..77075d7 100644 --- a/src/scss/components/field/_field.scss +++ b/src/scss/components/field/_field.scss @@ -1,6 +1,5 @@ @import - 'text', - 'checkbox'; + 'text'; /** * field @@ -12,6 +11,19 @@ $crispy__field__margin: toEm(0 0 $crispy__margin 0) !default; +$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; diff --git a/src/scss/components/field/_text.scss b/src/scss/components/field/_text.scss index d36cb82..56134d0 100644 --- a/src/scss/components/field/_text.scss +++ b/src/scss/components/field/_text.scss @@ -1,25 +1,17 @@ /** + * + * *
* - *
- * - *
*
* * @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; @@ -28,17 +20,11 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default; @mixin crispy__field__text() { .field__text { + @extend %field__; + 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;