diff --git a/src/scss/components/field/_checkbox.scss b/src/scss/components/field/_checkbox.scss
index 4a9b4a8..5e529c4 100644
--- a/src/scss/components/field/_checkbox.scss
+++ b/src/scss/components/field/_checkbox.scss
@@ -4,10 +4,10 @@
*
*
*
@@ -17,50 +17,39 @@
*
*/
-$crispy__field__checkbox___disabled__color: !default;
-$crispy__field__checkbox___checked__color: !default;
-$crispy__field__checkbox___unchecked__color: !default;
+$crispy__field__checkbox__disabled__color: $crispy__color-secondary !default;
+$crispy__field__checkbox__checked__color: $crispy__color-success !default;
+$crispy__field__checkbox__unchecked__color: $crispy__color-text !default;
@mixin crispy__field__checkbox() {
.field__checkbox {
position: relative;
display: none;
- appearance: none;
- + label {
+ + .field__label {
+ .field__checkbox__checked {
+ display: none;
+ }
+
&:hover {
cursor: pointer;
}
}
- &:checked + label .field__checkbox__checked {
+ &:checked + .field__label &__checked {
display: inline-block;
}
- &:checked + label .field__checkbox__unchecked {
+ &:checked + .field__label &__unchecked {
display: none;
}
- &:disabled + label .field__checkbox__icon {
- fill: $crispy__field__checkbox___disabled__color;
- }
-
- &:disabled + label:hover {
- cursor: not-allowed;
- }
-
- &__checkbox__icon {
- fill: $crispy__field__checkbox__color;
- transition: $crispy__field__checkbox__transition;
- }
-
- &__checkbox__checked {
- fill: $checkbox__icon-color-checked;
- display: none;
+ &__checked {
+ fill: $crispy__field__checkbox__checked__color;
}
- &__checkbox__unchecked {
- fill: $checkbox__icon-color-unchecked;
+ &__unchecked {
+ fill: $crispy__field__checkbox__unchecked__color;
}
}
}
diff --git a/src/scss/components/field/_field.scss b/src/scss/components/field/_field.scss
index 77075d7..926daf4 100644
--- a/src/scss/components/field/_field.scss
+++ b/src/scss/components/field/_field.scss
@@ -1,5 +1,9 @@
@import
- 'text';
+ 'panel',
+ 'text',
+ 'checkbox',
+ 'radio',
+ 'select';
/**
* field
@@ -15,17 +19,17 @@ $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;
}
+
+ .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);
+ }
}
diff --git a/src/scss/components/field/_panel.scss b/src/scss/components/field/_panel.scss
index c11bd50..bb4956e 100644
--- a/src/scss/components/field/_panel.scss
+++ b/src/scss/components/field/_panel.scss
@@ -11,8 +11,17 @@
*
*/
+$crispy__field__panel__padding: toEm($crispy__margin) !default;
+$crispy__field__panel__color: white !default;
+$crispy__field__panel__background-color: $crispy__color-danger !default;
+
@mixin crispy__field__panel() {
.field__panel {
- @extend .panel;
+ padding: $crispy__field__panel__padding;
+
+ &--error {
+ color: white;
+ background-color: $crispy__field__panel__background-color;
+ }
}
}
diff --git a/src/scss/components/field/_radio.scss b/src/scss/components/field/_radio.scss
index cd4de37..cc619ed 100644
--- a/src/scss/components/field/_radio.scss
+++ b/src/scss/components/field/_radio.scss
@@ -1,71 +1,55 @@
/**
- * input, textarea
+ * radio
*
+ *
+ *
+ *
+ *
*
* @author Björn Hase
*
*/
-$crispy__field__checkbox: !default;
+$crispy__field__radio__disabled__color: $crispy__color-secondary !default;
+$crispy__field__radio__checked__color: $crispy__color-success !default;
+$crispy__field__radio__unchecked__color: $crispy__color-text !default;
-@mixin crispy__field__checkbox() {
- .field__checkbox {
+@mixin crispy__field__radio() {
+ .field__radio {
+ position: relative;
+ display: none;
- label {
- &:hover {
- cursor: pointer;
- }
-
- .field__checkbox__icon {
- fill: $checkbox__icon-color-unchecked;
- transition: $checkbox__transition-color;
- }
-
- .field__checkbox__checked {
- fill: $checkbox__icon-color-checked;
+ + .field__label {
+ .field__radio__checked {
display: none;
}
- .field__checkbox__unchecked {
- fill: $checkbox__icon-color-unchecked;
+ &:hover {
+ cursor: pointer;
}
}
- 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;
+ &:checked + .field__label &__checked {
+ display: inline-block;
}
- &--valid {
- border-color: $crispy__field__border-color--valid;
+ &:checked + .field__label &__unchecked {
+ display: none;
}
- &--error {
- border-color: $crispy__field__border-color--error;
+ &__checked {
+ fill: $crispy__field__radio__checked__color;
}
- &:focus {
- border-color: $crispy__field__border-color--focus;
+ &__unchecked {
+ fill: $crispy__field__radio__unchecked__color;
}
-
- @include crispy__font-size($crispy__field__font-size);
}
}
diff --git a/src/scss/components/field/_select.scss b/src/scss/components/field/_select.scss
index e69de29..165afc5 100644
--- a/src/scss/components/field/_select.scss
+++ b/src/scss/components/field/_select.scss
@@ -0,0 +1,48 @@
+/**
+ * select
+ *
+ *
+ *
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__field__select__background-color: white !default;
+
+$crispy__field__select__border: 1px solid $crispy__color-secondary !default;
+
+$crispy__field__select__border-color--focus: $crispy__color-primary !default;
+$crispy__field__select__border-color--valid: $crispy__color-success !default;
+$crispy__field__select__border-color--error: $crispy__color-danger !default;
+
+@mixin crispy__field__select()
+{
+ .field__select {
+ @extend .field__;
+
+ display: block;
+ width: 100%;
+ border: $crispy__field__select__border;
+
+ background-color: $crispy__field__select__background-color;
+
+ &--valid {
+ border-color: $crispy__field__select__border-color--valid;
+ }
+
+ &--error {
+ border-color: $crispy__field__select__border-color--error;
+ }
+
+ &:focus {
+ outline: 0;
+ border-color: $crispy__field__select__border-color--focus;
+ }
+ }
+}
diff --git a/src/scss/components/field/_text.scss b/src/scss/components/field/_text.scss
index bc4ea49..15bd7a1 100644
--- a/src/scss/components/field/_text.scss
+++ b/src/scss/components/field/_text.scss
@@ -20,22 +20,22 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default;
@mixin crispy__field__text() {
.field__text {
- @extend %field__;
+ @extend .field__;
display: block;
width: 100%;
- border: $crispy__field__border;
+ border: $crispy__field__text__border;
&--valid {
- border-color: $crispy__field__border-color--valid;
+ border-color: $crispy__field__text__border-color--valid;
}
&--error {
- border-color: $crispy__field__border-color--error;
+ border-color: $crispy__field__text__border-color--error;
}
&:focus {
- border-color: $crispy__field__border-color--focus;
+ border-color: $crispy__field__text__border-color--focus;
}
}
}
diff --git a/src/scss/example.scss b/src/scss/example.scss
index 1b65942..e6c21b5 100644
--- a/src/scss/example.scss
+++ b/src/scss/example.scss
@@ -12,7 +12,12 @@
@include crispy__panel();
@include crispy__table();
-@include crispy__form__text();
+@include crispy__field();
+@include crispy__field__text();
+@include crispy__field__checkbox();
+@include crispy__field__radio();
+@include crispy__field__select();
+@include crispy__field__panel();
.container {
max-width: 992px;