mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
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
This commit is contained in:
Kevin Ross
parent
ce2e84bdb9
commit
ee8d7bfae2
|
|
@ -109,10 +109,10 @@ class Application {
|
|||
}
|
||||
|
||||
manipulateSearchBox() {
|
||||
let $search = $('#search-input')
|
||||
$search.wrap(`<div class='mdb-form-group'></div>`)
|
||||
$search.before(`<label class='mdb-label-placeholder'>${$search.prop('placeholder')}</label>`)
|
||||
$search.removeAttr('placeholder')
|
||||
//let $search = $('#search-input')
|
||||
//$search.wrap(`<div class='mdb-form-group'></div>`)
|
||||
//$search.before(`<label class='mdb-label-placeholder'>${$search.prop('placeholder')}</label>`)
|
||||
//$search.removeAttr('placeholder')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ group: material-design
|
|||
|
||||
{% example html %}
|
||||
<form>
|
||||
<fieldset class="form-group mdb-label-floating">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleInputEmail1" class="mdb-label-floating">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1">
|
||||
<span class="mdb-help">We'll never share your email with anyone else.</span>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@ const BaseInput = (($) => {
|
|||
FORM_GROUP: 'form-group',
|
||||
MDB_FORM_GROUP: 'mdb-form-group',
|
||||
MDB_LABEL: 'mdb-label',
|
||||
MDB_LABEL_STATIC: 'mdb-label-static',
|
||||
MDB_LABEL_PLACEHOLDER: 'mdb-label-placeholder',
|
||||
MDB_LABEL_FLOATING: 'mdb-label-floating',
|
||||
HAS_DANGER: 'has-danger',
|
||||
IS_EMPTY: 'is-empty',
|
||||
IS_FILLED: 'is-filled',
|
||||
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
|
||||
`> 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: [],
|
||||
invalidComponentMatches: [],
|
||||
|
|
@ -130,17 +131,17 @@ const BaseInput = (($) => {
|
|||
this.$element
|
||||
.on('keydown paste', (event) => {
|
||||
if (Util.isChar(event)) {
|
||||
this.removeIsEmpty()
|
||||
this.addIsFilled()
|
||||
}
|
||||
})
|
||||
.on('keyup change', (event) => {
|
||||
|
||||
// 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')
|
||||
if (this.$element.val()) {
|
||||
this.addIsEmpty()
|
||||
if (this.isEmpty()) {
|
||||
this.removeIsFilled()
|
||||
} else {
|
||||
this.removeIsEmpty()
|
||||
this.addIsFilled()
|
||||
}
|
||||
|
||||
if (this.config.validate) {
|
||||
|
|
@ -178,12 +179,12 @@ const BaseInput = (($) => {
|
|||
this.$mdbFormGroup.removeClass(ClassName.HAS_DANGER)
|
||||
}
|
||||
|
||||
addIsEmpty() {
|
||||
this.$mdbFormGroup.addClass(ClassName.IS_EMPTY)
|
||||
removeIsFilled() {
|
||||
this.$mdbFormGroup.removeClass(ClassName.IS_FILLED)
|
||||
}
|
||||
|
||||
removeIsEmpty() {
|
||||
this.$mdbFormGroup.removeClass(ClassName.IS_EMPTY)
|
||||
addIsFilled() {
|
||||
this.$mdbFormGroup.addClass(ClassName.IS_FILLED)
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
|
|
|
|||
2
js/src/bootstrapMaterialDesign.js
vendored
2
js/src/bootstrapMaterialDesign.js
vendored
|
|
@ -32,7 +32,7 @@ const BootstrapMaterialDesign = (($) => {
|
|||
global: {
|
||||
validate: false,
|
||||
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: {
|
||||
|
|
|
|||
|
|
@ -92,9 +92,9 @@ const File = (($) => {
|
|||
})
|
||||
value = value.substring(0, value.length - 2)
|
||||
if (value) {
|
||||
this.removeIsEmpty()
|
||||
this.addIsFilled()
|
||||
} else {
|
||||
this.addIsEmpty()
|
||||
this.removeIsFilled()
|
||||
}
|
||||
this.$mdbFormGroup.find(Selector.FILENAMES).val(value)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const Text = (($) => {
|
|||
|
||||
// Initially mark as empty
|
||||
if (this.isEmpty()) {
|
||||
this.addIsEmpty()
|
||||
this.removeIsFilled()
|
||||
}
|
||||
|
||||
// Add marker div the end of the form-group
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
@ -88,6 +88,8 @@
|
|||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
//.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 {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -99,66 +101,40 @@
|
|||
//&.mdb-label-static,
|
||||
//&.mdb-label-placeholder,
|
||||
//&.mdb-label-floating {
|
||||
// //> label {
|
||||
// // position: absolute;
|
||||
// // 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;
|
||||
// }
|
||||
//}
|
||||
label[class^='mdb-label'],
|
||||
label[class*=' mdb-label'] {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
|
||||
&.is-focused {
|
||||
//label {
|
||||
// color: $brand-primary;
|
||||
//
|
||||
// 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;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
// hint to browser for optimization
|
||||
&.mdb-label-floating {
|
||||
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
|
||||
}
|
||||
// hide label-placeholders when the field is filled
|
||||
.is-filled &.mdb-label-placeholder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
//&.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
|
||||
//&.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)
|
||||
//@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 {
|
||||
&,
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
}
|
||||
|
||||
// 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 {
|
||||
@include input-group-button-variation($mdb-input-padding-y-sm);
|
||||
@include input-group-button-variation($input-padding-y-sm);
|
||||
}
|
||||
|
||||
&.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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
$mdb-text-color-light: rgba($white, 0.84) !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
|
||||
|
|
@ -21,10 +24,6 @@ $enable-flex: true;
|
|||
@import "variables/bootstrap/state";
|
||||
@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
|
||||
|
|
@ -50,24 +49,18 @@ $contrast-factor: 40% !default;
|
|||
|
||||
// --------------------
|
||||
// inputs
|
||||
//$mdb-input-placeholder-color: #BDBDBD !default;
|
||||
|
||||
//$mdb-input-underline-color: #d2d2d2 !default;
|
||||
$mdb-mdb-label-static-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
|
||||
//
|
||||
////## 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-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-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-top-margin-sm: .75rem !default; // 12px
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
||||
// 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 {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
.is-focused, // may or may not be a form-group or mdb-form-group
|
||||
&.is-focused {
|
||||
// on focus set borders and labels to the validation color
|
||||
|
||||
// Use the BS provided mixin for the bulk of the color
|
||||
@include form-control-validation($label-color);
|
||||
|
||||
label {
|
||||
label[class^='mdb-label'],
|
||||
label[class*=' mdb-label'] {
|
||||
color: $label-color-focus;
|
||||
}
|
||||
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: $border-color;
|
||||
@include mdb-input-placeholder {
|
||||
color: $label-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Set validation states also for addons
|
||||
|
|
@ -76,7 +36,7 @@
|
|||
.mdb-form-control-decorator {
|
||||
&::before,
|
||||
&::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;
|
||||
$label-top: $label-as-placeholder-top - ($font-size + $vertical-padding) !default;
|
||||
// must be broken out for reuse - webkit selector breaks firefox
|
||||
@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;
|
||||
$help-line-height: ($mdb-help-size-ratio * $line-height) !default;
|
||||
@mixin mdb-form-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $form-group-context: null) {
|
||||
$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
|
||||
@if not $context {
|
||||
@include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size);
|
||||
} @else {
|
||||
// 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);
|
||||
$help-font-size: ($mdb-help-size-ratio * $font-size);
|
||||
$help-line-height: ($mdb-help-size-ratio * $line-height);
|
||||
|
||||
@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
|
||||
|
||||
// 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
|
||||
// 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
|
||||
//margin: ($label-top-margin + $static-font-size) 0 0 0; // old, try padding below
|
||||
//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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
// Forms
|
||||
|
||||
//$input-padding-x: .75rem !default;
|
||||
//$input-padding-y: .375rem !default;
|
||||
//
|
||||
$input-bg: rgba($black, 0) !default; // #fff !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-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default;
|
||||
//
|
||||
$input-color-placeholder: #bdbdbd !default; // #999 !default;
|
||||
//
|
||||
//$input-padding-x-sm: .75rem !default;
|
||||
//$input-padding-y-sm: .275rem !default;
|
||||
//
|
||||
//$input-padding-x-lg: 1.25rem !default;
|
||||
//$input-padding-y-lg: .75rem !default;
|
||||
//
|
||||
$input-color-placeholder: $mdb-label-color !default; // #999 !default;
|
||||
|
||||
|
||||
|
||||
$input-padding-x: 0 !default; // .75rem !default;
|
||||
$input-padding-y: .4375rem !default; // $mdb-input-padding-y: 7px // .375rem !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-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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user