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);