mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 01:57:06 +03:00
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:
parent
66b2feb9ee
commit
f50a8866b1
|
@ -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) {
|
||||||
|
|
104
scss/_forms.scss
104
scss/_forms.scss
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
|
@ -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;
|
||||||
//
|
//
|
||||||
|
|
Loading…
Reference in New Issue
Block a user