first prototype using decorator to underline the input because the background image approach was conflicting with default BS samples for form-control-success etc.

This commit is contained in:
Kevin Ross 2015-12-08 17:59:07 -06:00
parent 66b2feb9ee
commit f50a8866b1
4 changed files with 88 additions and 38 deletions

View File

@ -20,7 +20,9 @@ const Text = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME] const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = { const Default = {
template: `<span class='text-input-decorator'></span>`, decorator: {
template: `<span class='mdb-form-control-decorator'></span>`
},
requiredClasses: ['form-control'] requiredClasses: ['form-control']
} }
@ -40,7 +42,7 @@ const Text = (($) => {
} }
// Add marker div the end of the form-group // Add marker div the end of the form-group
this.$mdbFormGroup.append(this.config.template) this.$element.after(this.config.decorator.template)
} }
dispose(dataKey = DATA_KEY) { dispose(dataKey = DATA_KEY) {

View File

@ -61,21 +61,24 @@
//box-shadow: none; // replaced with variable //box-shadow: none; // replaced with variable
} }
//.form-control-#{$name} { // e.g. form-control-success
.form-control-#{$name} {
// background-image: none; // background-image: none;
//}
&.is-focused .form-control {
background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
.text-input-decorator::after {
background-color: $color;
} }
&.is-focused {
.form-control {
//background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
}
.mdb-form-control-decorator::after {
//background-color: $color;
} }
label.control-label, label.control-label,
.help-block { .help-block {
color: $color; color: $color;
} }
} }
}
} }
@mixin mdb-form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim) { @mixin mdb-form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim) {
@ -137,40 +140,85 @@
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.mdb-form-group .form-control, //.mdb-form-group .form-control,
.form-control { .form-control {
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); //background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-repeat: no-repeat; //background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px); //background-position: center bottom, center calc(100% - 1px);
background-size: 0 2px, 100% 1px; //background-size: 0 2px, 100% 1px;
border: 0; //transition: background 0s ease-out;
transition: background 0s ease-out;
//float: none; // why? //float: none; // why?
// The border bottom should be static in all states, the decorator will be animated over this.
&,
&:focus,
.mdb-form-group.is-focused & {
border: 0;
border-bottom: $input-border-width solid $input-border-color;
}
&[disabled],
fieldset[disabled] & {
//background-image: none;
border-bottom: $input-border-width dotted $input-border-color;
}
//&:textarea { //&:textarea {
// height: 40px; // height: 40px;
//} //}
.mdb-form-group.is-focused & { //&:focus,
background-size: 100% 2px, 100% 1px; //.mdb-form-group.is-focused & {
outline: none; // background-size: 100% 2px, 100% 1px;
transition-duration: 0.3s; // outline: none; // redundant - in bootstrap
// transition-duration: 0.3s;
.text-input-decorator::after { //}
background-color: $brand-primary; //.mdb-form-group.is-focused .mdb-form-control-decorator::after {
} // background-color: $brand-primary;
} //}
//&[readonly], //&[readonly],
//&[disabled], //&[disabled],
//fieldset[disabled] & { //fieldset[disabled] & {
// background-color: rgba($black, 0); // replaced with $input-bg-disabled // background-color: rgba($black, 0); // replaced with $input-bg-disabled
//} //}
}
&[disabled],
fieldset[disabled] & { // BOTTOM BARS =================================
background-image: none; .mdb-form-control-decorator {
border-bottom: 1px dotted $mdb-input-underline-color; position: relative;
top: (-1 * $input-border-width); // move the top up enough to overlay the border from the input
display: block;
//width: 300px;
}
.mdb-form-control-decorator::before,
.mdb-form-control-decorator::after {
position: absolute;
//bottom: 1px;
width: 0;
height: $input-border-width;
content: "";
@include gradient-vertical($brand-primary, $mdb-input-underline-color);
transition: 0.3s ease all;
}
.mdb-form-control-decorator::before {
left: 50%;
}
.mdb-form-control-decorator::after {
right: 50%;
}
// active state
//input:focus ~ .mdb-form-control-decorator:before,
//input:focus ~ .mdb-form-control-decorator:after {
.form-control:focus,
.mdb-form-group.is-focused .form-control {
~ .mdb-form-control-decorator::before,
~ .mdb-form-control-decorator::after {
width: 50%;
} }
} }
// BOTTOM BARS =================================
// ----- // -----
// Labels with mdb-form-group signalled state // Labels with mdb-form-group signalled state
@ -180,7 +228,7 @@
//.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations //.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
.mdb-form-group { .mdb-form-group {
//position: relative; position: relative;
// ----- // -----
// Labels with form-group signalled state // Labels with form-group signalled state
@ -251,7 +299,7 @@
select { select {
//appearance: none; // Fix for OS X //appearance: none; // Fix for OS X
~ .text-input-decorator::after { ~ .mdb-form-control-decorator::after {
//display: none; //display: none;
} }
} }

View File

@ -159,8 +159,8 @@
// margin: 0; // margin: 0;
// padding: 0; // padding: 0;
// //
// .text-input-decorator:before, // .mdb-form-control-decorator:before,
// &.is-focused .text-input-decorator:after { // &.is-focused .mdb-form-control-decorator:after {
// background-color: inherit; // background-color: inherit;
// } // }
// } // }

View File

@ -7,7 +7,7 @@ $input-bg: rgba($black, 0) !default; // #fff !default;
$input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default; $input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default;
// //
//$input-color: $gray !default; //$input-color: $gray !default;
//$input-border-color: #ccc !default; $input-border-color: #d2d2d2 !default; // #ccc !default;
//$input-border-width: $border-width !default; //$input-border-width: $border-width !default;
$input-box-shadow: none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default; $input-box-shadow: none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default;
// //