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',
HAS_DANGER: 'has-danger',
IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused'
IS_FOCUSED: 'is-focused',
INPUT_GROUP: 'input-group'
}
const Selector = {
@ -176,7 +177,14 @@ const BaseInput = (($) => {
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).
// 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 {
// a form-group does exist, add our marker class to it
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-btn {
//padding: 0 12px; // match addon spacing
}
.input-group-addon {
//border: 0;
//background: transparent;
display: flex;
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
.input-group-addon {
border-color: $border-color;
}
//.input-group-addon {
// border-color: $border-color;
//}
.bmd-help {
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;
//
//$input-group-addon-bg: $gray-lighter !default;
//$input-group-addon-border-color: $input-border-color !default;
$input-group-addon-bg: transparent !default; //$gray-lighter !default;
$input-group-addon-border-color: transparent !default; //$input-border-color !default;
//
//$cursor-disabled: not-allowed !default;
//