mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

much refactoring on coloring and sizing for forms. default sized single mdb-floating-label working (have not measured to make sure it meets spec). No margins yet so multiple in a row run together with the absolute positioned labels

Browse Source
This commit is contained in:
Kevin Ross 2015-12-11 15:13:33 -06:00
parent ce2e84bdb9
commit ee8d7bfae2
11 changed files with 156 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/assets/js/src/application.js
View File

@ -109,10 +109,10 @@ class Application {
} }
manipulateSearchBox() { manipulateSearchBox() {
let $search = $('#search-input') //let $search = $('#search-input')
$search.wrap(`<div class='mdb-form-group'></div>`) //$search.wrap(`<div class='mdb-form-group'></div>`)
$search.before(`<label class='mdb-label-placeholder'>${$search.prop('placeholder')}</label>`) //$search.before(`<label class='mdb-label-placeholder'>${$search.prop('placeholder')}</label>`)
$search.removeAttr('placeholder') //$search.removeAttr('placeholder')
} }
} }

6
docs/material-design/test.md
View File

@ -6,9 +6,9 @@ group: material-design
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group mdb-label-floating"> <fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1" class="mdb-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>
</form> </form>

21
js/src/baseInput.js
View File

@ -6,10 +6,11 @@ const BaseInput = (($) => {
FORM_GROUP: 'form-group', FORM_GROUP: 'form-group',
MDB_FORM_GROUP: 'mdb-form-group', MDB_FORM_GROUP: 'mdb-form-group',
MDB_LABEL: 'mdb-label', MDB_LABEL: 'mdb-label',
MDB_LABEL_STATIC: 'mdb-label-static',
MDB_LABEL_PLACEHOLDER: 'mdb-label-placeholder', MDB_LABEL_PLACEHOLDER: 'mdb-label-placeholder',
MDB_LABEL_FLOATING: 'mdb-label-floating', MDB_LABEL_FLOATING: 'mdb-label-floating',
HAS_DANGER: 'has-danger', HAS_DANGER: 'has-danger',
IS_EMPTY: 'is-empty', IS_FILLED: 'is-filled',
IS_FOCUSED: 'is-focused' IS_FOCUSED: 'is-focused'
} }
@ -40,7 +41,7 @@ const BaseInput = (($) => {
`.form-control-label`, // in the case of horizontal or inline forms, this will be marked `.form-control-label`, // in the case of horizontal or inline forms, this will be marked
`> label` // usual case for text inputs, first child. Deeper would find toggle labels so don't do that. `> label` // usual case for text inputs, first child. Deeper would find toggle labels so don't do that.
], ],
className: `mdb-label` className: ClassName.MDB_LABEL_STATIC
}, },
requiredClasses: [], requiredClasses: [],
invalidComponentMatches: [], invalidComponentMatches: [],
@ -130,17 +131,17 @@ const BaseInput = (($) => {
this.$element this.$element
.on('keydown paste', (event) => { .on('keydown paste', (event) => {
if (Util.isChar(event)) { if (Util.isChar(event)) {
this.removeIsEmpty() this.addIsFilled()
} }
}) })
.on('keyup change', (event) => { .on('keyup change', (event) => {
// make sure empty is added back when there is a programmatic value change. // make sure empty is added back when there is a programmatic value change.
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change') // NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
if (this.$element.val()) { if (this.isEmpty()) {
this.addIsEmpty() this.removeIsFilled()
} else { } else {
this.removeIsEmpty() this.addIsFilled()
} }
if (this.config.validate) { if (this.config.validate) {
@ -178,12 +179,12 @@ const BaseInput = (($) => {
this.$mdbFormGroup.removeClass(ClassName.HAS_DANGER) this.$mdbFormGroup.removeClass(ClassName.HAS_DANGER)
} }
addIsEmpty() { removeIsFilled() {
this.$mdbFormGroup.addClass(ClassName.IS_EMPTY) this.$mdbFormGroup.removeClass(ClassName.IS_FILLED)
} }
removeIsEmpty() { addIsFilled() {
this.$mdbFormGroup.removeClass(ClassName.IS_EMPTY) this.$mdbFormGroup.addClass(ClassName.IS_FILLED)
} }
isEmpty() { isEmpty() {

2
js/src/bootstrapMaterialDesign.js vendored
View File

@ -32,7 +32,7 @@ const BootstrapMaterialDesign = (($) => {
global: { global: {
validate: false, validate: false,
mdbLabel: { mdbLabel: {
className: `mdb-label` // default style of label to be used if not specified in the html markup className: 'mdb-label-static' // default style of label to be used if not specified in the html markup
} }
}, },
ripples: { ripples: {

4
js/src/file.js
View File

@ -92,9 +92,9 @@ const File = (($) => {
}) })
value = value.substring(0, value.length - 2) value = value.substring(0, value.length - 2)
if (value) { if (value) {
this.removeIsEmpty() this.addIsFilled()
} else { } else {
this.addIsEmpty() this.removeIsFilled()
} }
this.$mdbFormGroup.find(Selector.FILENAMES).val(value) this.$mdbFormGroup.find(Selector.FILENAMES).val(value)
}) })

2
js/src/text.js
View File

@ -38,7 +38,7 @@ const Text = (($) => {
// Initially mark as empty // Initially mark as empty
if (this.isEmpty()) { if (this.isEmpty()) {
this.addIsEmpty() this.removeIsFilled()
} }
// Add marker div the end of the form-group // Add marker div the end of the form-group

70
scss/_forms.scss
View File

@ -65,7 +65,7 @@
} }
// ----- // -----
// State coloring: default, // State coloring: default, success, info, warning, danger
// //
@include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color); @include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
@ -88,6 +88,8 @@
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations //.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations
// Whereas .form-group adds structure, mdb-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose.
.mdb-form-group { .mdb-form-group {
position: relative; position: relative;
@ -99,66 +101,40 @@
//&.mdb-label-static, //&.mdb-label-static,
//&.mdb-label-placeholder, //&.mdb-label-placeholder,
//&.mdb-label-floating { //&.mdb-label-floating {
// //> label { label[class^='mdb-label'],
// // position: absolute; label[class*=' mdb-label'] {
// // pointer-events: none; position: absolute;
// // transition: 0.3s ease all; pointer-events: none;
// // transition: 0.3s ease all;
// // label {
// // position: relative;
// // }
// //}
//}
//
//// hint to browser for optimization
//&.mdb-label-floating {
// label {
// will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
// }
//}
//
//// hide label-placeholders when the field is not empty
//&.mdb-label-placeholder:not(.is-empty) {
// label {
// display: none;
// }
//}
&.is-focused { // hint to browser for optimization
//label { &.mdb-label-floating {
// color: $brand-primary; will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
//
// label { // inner label e.g. checkbox or radio label
// color: $mdb-label-color-inner-focus;
// }
//}
//
//&.mdb-label-placeholder {
// label {
// color: $mdb-label-color;
//
// label { // inner label e.g. checkbox or radio label
// color: $mdb-label-color-inner-focus;
// }
// }
//}
} }
// hide label-placeholders when the field is filled
.is-filled &.mdb-label-placeholder {
display: none;
}
}
// default floating size/location with an mdb-form-group // default floating size/location with an mdb-form-group
@include mdb-form-group-size-variant($font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default"); @include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default");
// sm floating size/location // sm floating size/location
//&.mdb-form-group-sm { //&.mdb-form-group-sm {
// @include mdb-form-group-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm"); // @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm");
//} //}
// //
//// lg floating size/location //// lg floating size/location
//&.mdb-form-group-lg { //&.mdb-form-group-lg {
// @include mdb-form-group-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg"); // @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg");
//} //}
} }
// FIXME: remove the following, I don't think it is necessary any longer and just adds more rules that are already matched above.
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) // default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
//@include mdb-form-group-size-variant($font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base); //@include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $line-height, $mdb-label-as-placeholder-shim-base);
select { select {
&, &,

6
scss/_input-group.scss
View File

@ -11,14 +11,14 @@
} }
// default margin - no form-group required // default margin - no form-group required
@include input-group-button-variation($mdb-input-padding-y-base); @include input-group-button-variation(input-padding-y);
&.mdb-form-group-sm { &.mdb-form-group-sm {
@include input-group-button-variation($mdb-input-padding-y-sm); @include input-group-button-variation($input-padding-y-sm);
} }
&.mdb-form-group-lg { &.mdb-form-group-lg {
@include input-group-button-variation($mdb-input-padding-y-lg); @include input-group-button-variation($input-padding-y-lg);
} }
.input-group { // may be in or outside of form-group .input-group { // may be in or outside of form-group

13
scss/_variables.scss
View File

@ -8,6 +8,9 @@ $gray-dark: rgba($black, 0.87) !default;
// wondering if any of these could still be refactored out, but are definitely in use. // wondering if any of these could still be refactored out, but are definitely in use.
$mdb-text-color-light: rgba($white, 0.84) !default; $mdb-text-color-light: rgba($white, 0.84) !default;
$mdb-text-color-primary: $gray-dark !default; $mdb-text-color-primary: $gray-dark !default;
$mdb-label-color: $gray-light !default;
$mdb-label-color-focus: $brand-primary !default;
$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
//--- //---
// Customized BS variables // Customized BS variables
@ -21,10 +24,6 @@ $enable-flex: true;
@import "variables/bootstrap/state"; @import "variables/bootstrap/state";
@import "variables/bootstrap/type"; @import "variables/bootstrap/type";
// wondering if any of these could still be refactored out, but are definitely in use.
$mdb-label-color: $gray-light !default;
$mdb-label-color-focus: $brand-primary !default;
$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
//--- //---
// verified in use with refactoring to v4 // verified in use with refactoring to v4
@ -50,24 +49,18 @@ $contrast-factor: 40% !default;
// -------------------- // --------------------
// inputs // inputs
//$mdb-input-placeholder-color: #BDBDBD !default;
//$mdb-input-underline-color: #d2d2d2 !default;
$mdb-mdb-label-static-size-ratio: 75 / 100 !default; $mdb-mdb-label-static-size-ratio: 75 / 100 !default;
$mdb-help-size-ratio: 75 / 100 !default; $mdb-help-size-ratio: 75 / 100 !default;
// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables // FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
// //
////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). ////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$mdb-input-padding-y-base: .4375rem !default; // 7px
$mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder $mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder
$mdb-label-top-margin-base: 1rem !default; $mdb-label-top-margin-base: 1rem !default;
// //
$mdb-input-padding-y-lg: .5625rem !default; // 9px
$mdb-label-as-placeholder-shim-lg: 0 !default; // -4px // manual adjustment of label top when positioned as placeholder $mdb-label-as-placeholder-shim-lg: 0 !default; // -4px // manual adjustment of label top when positioned as placeholder
$mdb-label-top-margin-lg: 1rem !default; // 16px $mdb-label-top-margin-lg: 1rem !default; // 16px
// //
$mdb-input-padding-y-sm: .1875 !default; // 3px
$mdb-label-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder $mdb-label-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder
$mdb-label-top-margin-sm: .75rem !default; // 12px $mdb-label-top-margin-sm: .75rem !default; // 12px

186
scss/mixins/_forms.scss
View File

@ -1,70 +1,30 @@
// must be broken out for reuse - webkit selector breaks firefox
@mixin mdb-label-static($label-top, $static-font-size, $static-line-height) {
label {
top: $label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
font-size: $static-font-size;
line-height: $static-line-height;
}
}
@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size) {
.form-control {
@include mdb-input-placeholder {
font-size: $placeholder-font-size;
line-height: $line-height;
}
//
// // margin-bottom must be specified to give help-block vertical space.
// // $see also form-group padding-bottom (and size variants) re: collapsible margins. These work together.
// margin-bottom: $vertical-padding;
}
// generic labels used anywhere in the form (not control-label)
.checkbox label,
.radio label,
label {
font-size: $placeholder-font-size;
line-height: $line-height;
}
// smaller focused or static size
label {
font-size: $static-font-size;
line-height: $static-line-height;
//margin: 16px 0 0 0; // std and lg
}
.mdb-help {
margin-top: 0; // allow the input margin to set-off the top of the help-block
font-size: $help-font-size;
}
}
@mixin mdb-form-color($label-color, $label-color-focus, $border-color) { @mixin mdb-form-color($label-color, $label-color-focus, $border-color) {
// override BS and keep the border-color normal/grey so that overlayed focus animation draws attention label[class^='mdb-label'],
label[class*=' mdb-label'] {
color: $label-color;
}
// override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
.form-control { .form-control {
border-color: $input-border-color; border-color: $input-border-color;
} }
.is-focused, // may or may not be a form-group or mdb-form-group
&.is-focused { &.is-focused {
// on focus set borders and labels to the validation color // on focus set borders and labels to the validation color
// Use the BS provided mixin for the bulk of the color // Use the BS provided mixin for the bulk of the color
@include form-control-validation($label-color); @include form-control-validation($label-color);
label { label[class^='mdb-label'],
label[class*=' mdb-label'] {
color: $label-color-focus; color: $label-color-focus;
} }
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match
.form-control { .form-control {
border-color: $border-color; border-color: $border-color;
@include mdb-input-placeholder {
color: $label-color;
}
} }
// Set validation states also for addons // Set validation states also for addons
@ -76,7 +36,7 @@
.mdb-form-control-decorator { .mdb-form-control-decorator {
&::before, &::before,
&::after { &::after {
@include gradient-vertical($label-color, $input-border-color); @include gradient-vertical($label-color-focus, $input-border-color);
} }
} }
@ -86,24 +46,92 @@
} }
} }
@mixin mdb-form-group-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $context: null) {
$static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size) !default;
$static-line-height: ($mdb-mdb-label-static-size-ratio * $line-height) !default;
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default; // must be broken out for reuse - webkit selector breaks firefox
$label-top: $label-as-placeholder-top - ($font-size + $vertical-padding) !default; @mixin mdb-label-static($label-top, $static-font-size, $static-line-height) {
top: $label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
//font-size: $static-font-size;
//line-height: $static-line-height;
}
$help-font-size: ($mdb-help-size-ratio * $font-size) !default; @mixin mdb-form-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $form-group-context: null) {
$help-line-height: ($mdb-help-size-ratio * $line-height) !default; $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size);
$static-line-height: ($mdb-mdb-label-static-size-ratio * $line-height);
@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} context: #{$context} "; $label-as-placeholder-top: ($vertical-padding + $label-as-placeholder-shim); // -1 *
$label-top: $label-as-placeholder-top - ($font-size + $vertical-padding);
// this is outside a form-group $help-font-size: ($mdb-help-size-ratio * $font-size);
@if not $context { $help-line-height: ($mdb-help-size-ratio * $line-height);
@include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size);
} @else { @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
// this is inside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
@include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size); // this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
//@include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size);
.form-control {
//
// // margin-bottom must be specified to give help-block vertical space.
// // $see also form-group padding-bottom (and size variants) re: collapsible margins. These work together.
// margin-bottom: $vertical-padding;
}
input::placeholder {
font-size: $font-size;
line-height: $line-height;
}
// generic labels used anywhere in the form
.checkbox label,
.radio label,
label {
font-size: $font-size;
line-height: $line-height;
}
// smaller focused or static size
//label[class^='mdb-label'],
//label[class*=' mdb-label'] {
// //font-size: $static-font-size;
// //line-height: $static-line-height;
// //margin: 16px 0 0 0; // std and lg
//}
// floating/placeholder default
.mdb-label-floating,
.mdb-label-placeholder {
@debug "top: #{$label-as-placeholder-top}";
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
//font-size: $placeholder-font-size;
//line-height: $line-height;
}
// floating focused/filled will look like static
&.is-focused,
.is-focused,
&.is-filled,
.is-filled {
.mdb-label-floating {
@include mdb-label-static($label-top, $static-font-size, $static-line-height);
}
}
// static
.mdb-label-static {
@include mdb-label-static($label-top, $static-font-size, $static-line-height);
}
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
//input:-webkit-autofill ~ .mdb-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary
// @include mdb-label-static($label-top, $static-font-size, $static-line-height);
//}
.mdb-help {
margin-top: 0; // allow the input margin to set-off the top of the help-block
font-size: $help-font-size;
}
@if $form-group-context {
// form-group padding-bottom // form-group padding-bottom
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom, // upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
@ -114,29 +142,6 @@
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
//margin: ($label-top-margin + $static-font-size) 0 0 0; // old, try padding below //margin: ($label-top-margin + $static-font-size) 0 0 0; // old, try padding below
//padding-top: ($label-top-margin + $static-font-size); //padding-top: ($label-top-margin + $static-font-size);
// placeholder positioning
&.mdb-label-floating,
&.mdb-label-placeholder {
label,
label {
@debug "top: #{$label-as-placeholder-top}";
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
//font-size: $placeholder-font-size;
//line-height: $line-height;
}
}
// static, focused, or autofill floating labels
&.mdb-label-static,
&.mdb-label-floating.is-focused,
&.mdb-label-floating:not(.is-empty) {
@include mdb-label-static($label-top, $static-font-size, $static-line-height);
}
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
&.mdb-label-floating input.form-control:-webkit-autofill ~ label {
@include mdb-label-static($label-top, $static-font-size, $static-line-height);
}
} }
} }
@ -158,11 +163,4 @@
} }
} }
//// Placeholder text
@mixin mdb-input-placeholder() {
&::placeholder {
@content;
}
}

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

@ -1,7 +1,5 @@
// Forms // Forms
//$input-padding-x: .75rem !default;
//$input-padding-y: .375rem !default;
// //
$input-bg: rgba($black, 0) !default; // #fff !default; $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;
@ -18,14 +16,19 @@ $input-border-radius: 0 !default; // $border-radius !default;
//$input-border-focus: #66afe9 !default; //$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default; $input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default;
// //
$input-color-placeholder: #bdbdbd !default; // #999 !default; $input-color-placeholder: $mdb-label-color !default; // #999 !default;
//
//$input-padding-x-sm: .75rem !default;
//$input-padding-y-sm: .275rem !default;
// $input-padding-x: 0 !default; // .75rem !default;
//$input-padding-x-lg: 1.25rem !default; $input-padding-y: .4375rem !default; // $mdb-input-padding-y: 7px // .375rem !default;
//$input-padding-y-lg: .75rem !default;
// $input-padding-x-sm: 0 !default; // .75rem !default;
$input-padding-y-sm: .1875 !default; // 3px //.275rem !default;
$input-padding-x-lg: 0 !default; // 1.25rem !default;
$input-padding-y-lg: .5625rem !default; // 9px // .75rem !default;
//$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default; //$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
//$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; //$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
//$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; //$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;