mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-22 17:47:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #971 v4 input-group implementation

Browse Source
This commit is contained in:
Kevin Ross 2016-04-29 16:03:40 -05:00
parent c159915e57
commit 716ec4ce1e
4 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/baseInput.js
View File

@ -12,7 +12,8 @@ const BaseInput = (($) => {
BMD_LABEL_FLOATING: 'bmd-label-floating', BMD_LABEL_FLOATING: 'bmd-label-floating',
HAS_DANGER: 'has-danger', HAS_DANGER: 'has-danger',
IS_FILLED: 'is-filled', IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused' IS_FOCUSED: 'is-focused',
INPUT_GROUP: 'input-group'
} }
const Selector = { const Selector = {
@ -176,7 +177,14 @@ const BaseInput = (($) => {
if (this.config.bmdFormGroup.create && (this.$formGroup === undefined || this.$formGroup.length === 0)) { if (this.config.bmdFormGroup.create && (this.$formGroup === undefined || this.$formGroup.length === 0)) {
// If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label). // If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label).
// note: it's possible to make this smarter, but I need to see valid cases before adding any complexity. // note: it's possible to make this smarter, but I need to see valid cases before adding any complexity.
this.outerElement().wrap(this.config.bmdFormGroup.template)
// this may be an input-group, wrap that instead
if(this.outerElement().parent().hasClass(ClassName.INPUT_GROUP)){
this.outerElement().parent().wrap(this.config.bmdFormGroup.template)
}
else{
this.outerElement().wrap(this.config.bmdFormGroup.template)
}
} else { } else {
// a form-group does exist, add our marker class to it // a form-group does exist, add our marker class to it
this.$formGroup.addClass(ClassName.BMD_FORM_GROUP) this.$formGroup.addClass(ClassName.BMD_FORM_GROUP)

17
scss/_input-group.scss
View File

@ -22,12 +22,19 @@
} }
.input-group { // may be in or outside of form-group .input-group { // may be in or outside of form-group
.input-group-btn {
//padding: 0 12px; // match addon spacing
}
.input-group-addon { .input-group-addon {
//border: 0; display: flex;
//background: transparent; justify-content: center;
align-items: center;
background-color: transparent;
border-color: transparent;
}
.input-group-addon + input,
input + .input-group-addon {
margin-left: .75rem;
} }
} }

6
scss/mixins/_forms.scss
View File

@ -125,9 +125,9 @@
} }
// Set validation states also for addons // Set validation states also for addons
.input-group-addon { //.input-group-addon {
border-color: $border-color; // border-color: $border-color;
} //}
.bmd-help { .bmd-help {
color: $bmd-label-color-inner-focus; color: $bmd-label-color-inner-focus;

4
scss/variables/bootstrap/_forms.scss
View File

@ -35,8 +35,8 @@ $input-padding-y-lg: .5625rem !default; // no-spec 9px // .75rem !de
// //
//$form-group-margin-bottom: $spacer-y !default; //$form-group-margin-bottom: $spacer-y !default;
// //
//$input-group-addon-bg: $gray-lighter !default; $input-group-addon-bg: transparent !default; //$gray-lighter !default;
//$input-group-addon-border-color: $input-border-color !default; $input-group-addon-border-color: transparent !default; //$input-border-color !default;
// //
//$cursor-disabled: not-allowed !default; //$cursor-disabled: not-allowed !default;
// //