Browse Source

adding field and text

master
HerrHase 6 years ago
parent
commit
fdbdf7269f
2 changed files with 18 additions and 20 deletions
  1. +14
    -2
      src/scss/components/field/_field.scss
  2. +4
    -18
      src/scss/components/field/_text.scss

+ 14
- 2
src/scss/components/field/_field.scss View File

@ -1,6 +1,5 @@
@import @import
'text',
'checkbox';
'text';
/** /**
* field * field
@ -12,6 +11,19 @@
$crispy__field__margin: toEm(0 0 $crispy__margin 0) !default; $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() { @mixin crispy__field() {
.field { .field {
margin: $crispy__field__margin; margin: $crispy__field__margin;


+ 4
- 18
src/scss/components/field/_text.scss View File

@ -1,25 +1,17 @@
/** /**
*
*
* <div class="field"> * <div class="field">
* <label class="field__label"> * <label class="field__label">
* input * input
* <input type="text" class="field__text" /> * <input type="text" class="field__text" />
* </label> * </label>
* <div class="field__panel">
* <ul>
* <li>item 1<li>
* </ul>
* </div>
* </div> * </div>
* *
* @author Björn Hase * @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: 1px solid $crispy__color-secondary !default;
$crispy__field__text__border-color--focus: $crispy__color-primary !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() { @mixin crispy__field__text() {
.field__text { .field__text {
@extend %field__;
display: block; display: block;
width: 100%; width: 100%;
line-height: $crispy__golden-ratio;
padding: $crispy__field__padding;
color: $crispy__field__text__color;
border: $crispy__field__border; border: $crispy__field__border;
appearance: none;
@include crispy__font-size($crispy__field__font-size);
&--valid { &--valid {
border-color: $crispy__field__border-color--valid; border-color: $crispy__field__border-color--valid;


Loading…
Cancel
Save