mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-11-04 09:57:36 +03:00
First pass with default mdb-form-group-size-variant. Removed references to control-label as they were mostly used incorrectly in the previous version. They are now form-control-label and only necessary for inline forms etc
This commit is contained in:
Kevin Ross
parent
ca916b4729
commit
2b64baf94c
|
|
@ -20,7 +20,7 @@ linters:
|
|||
exclude: ['_normalize.scss', 'bootstrap.scss']
|
||||
|
||||
DebugStatement:
|
||||
enabled: true
|
||||
enabled: false
|
||||
|
||||
DeclarationOrder:
|
||||
enabled: false
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
@include mdb-form-color($mdb-label-color, $input-border-color);
|
||||
@include mdb-form-control-validation(warning, $brand-warning);
|
||||
@include mdb-form-control-validation(danger, $brand-danger);
|
||||
|
|
@ -52,6 +51,7 @@
|
|||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// End: Focus underline animation =================================
|
||||
|
||||
// Help blocks (not in v4)
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
//
|
||||
// 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.control-label"), color, $mdb-input-placeholder-color); // default label color variations
|
||||
//.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations
|
||||
|
||||
.mdb-form-group {
|
||||
position: relative;
|
||||
|
|
@ -88,39 +88,47 @@
|
|||
&.label-static,
|
||||
&.label-placeholder,
|
||||
&.label-floating {
|
||||
label.control-label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
//> label {
|
||||
// position: absolute;
|
||||
// pointer-events: none;
|
||||
// transition: 0.3s ease all;
|
||||
//
|
||||
// label {
|
||||
// position: relative;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
||||
// hint to browser for optimization
|
||||
&.label-floating label.control-label {
|
||||
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
|
||||
&.label-floating {
|
||||
label {
|
||||
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
|
||||
}
|
||||
}
|
||||
|
||||
// hide label-placeholders when the field is not empty
|
||||
&.label-placeholder:not(.is-empty) {
|
||||
label.control-label {
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
label, // this is a control-label, but often times (too often) not marked as such so work around bad markup
|
||||
label.control-label {
|
||||
label {
|
||||
color: $brand-primary;
|
||||
|
||||
label { // inner label
|
||||
label { // inner label e.g. checkbox or radio label
|
||||
color: $mdb-label-color-inner-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&.label-placeholder {
|
||||
label,
|
||||
label.control-label {
|
||||
label {
|
||||
color: $mdb-label-color;
|
||||
|
||||
label { // inner label e.g. checkbox or radio label
|
||||
color: $mdb-label-color-inner-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,8 +136,23 @@
|
|||
color: $mdb-label-color-inner-focus;
|
||||
}
|
||||
}
|
||||
// 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");
|
||||
|
||||
// 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");
|
||||
//}
|
||||
//
|
||||
//// 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");
|
||||
//}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
select {
|
||||
&,
|
||||
&.form-control {
|
||||
|
|
@ -139,19 +162,6 @@ select {
|
|||
}
|
||||
}
|
||||
|
||||
// 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(null, $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base);
|
||||
|
||||
// default floating size/location with a form-group (need margin etc from a default form-group)
|
||||
@include mdb-form-group-size-variant(unquote(".mdb-form-group"), $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base);
|
||||
|
||||
// sm floating size/location
|
||||
@include mdb-form-group-size-variant(unquote(".mdb-form-group.mdb-form-group-sm"), $font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm);
|
||||
|
||||
// lg floating size/location
|
||||
@include mdb-form-group-size-variant(unquote(".mdb-form-group.mdb-form-group-lg"), $font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg);
|
||||
|
||||
|
||||
// Input files - hide actual input - requires specific markup in the sample.
|
||||
//.mdb-form-group input[type=file] {
|
||||
// opacity: 0;
|
||||
|
|
@ -189,7 +199,7 @@ select {
|
|||
// text-align: right;
|
||||
// }
|
||||
//
|
||||
// label.control-label {
|
||||
// label {
|
||||
// margin: 0;
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ $contrast-factor: 40% !default;
|
|||
|
||||
//$mdb-input-underline-color: #d2d2d2 !default;
|
||||
$mdb-label-static-size-ratio: 75 / 100 !default;
|
||||
$mdb-help-block-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
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
// must be broken out for reuse - webkit selector breaks firefox
|
||||
@mixin label-static($label-top, $static-font-size, $static-line-height) {
|
||||
label.control-label {
|
||||
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;
|
||||
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-block-font-size) {
|
||||
@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;
|
||||
line-height: $line-height;
|
||||
}
|
||||
//
|
||||
// // margin-bottom must be specified to give help-block vertical space.
|
||||
|
|
@ -25,21 +25,21 @@
|
|||
.checkbox label,
|
||||
.radio label,
|
||||
label {
|
||||
//font-size: $placeholder-font-size;
|
||||
//line-height: $line-height;
|
||||
font-size: $placeholder-font-size;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
// smaller focused or static size
|
||||
label.control-label {
|
||||
//font-size: $static-font-size;
|
||||
//line-height: $static-line-height;
|
||||
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-block-font-size;
|
||||
//}
|
||||
.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, $border-color) {
|
||||
|
|
@ -92,54 +92,56 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin mdb-form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim) {
|
||||
$static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
|
||||
@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-label-static-size-ratio * $font-size) !default;
|
||||
$static-line-height: ($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 - ($placeholder-font-size + $vertical-padding) !default;
|
||||
$label-top: $label-as-placeholder-top - ($font-size + $vertical-padding) !default;
|
||||
|
||||
$help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
|
||||
$help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
|
||||
$help-font-size: ($mdb-help-size-ratio * $font-size) !default;
|
||||
$help-line-height: ($mdb-help-size-ratio * $line-height) !default;
|
||||
|
||||
@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} context: #{$context} ";
|
||||
|
||||
// this is outside a form-group
|
||||
@if not $parent {
|
||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
||||
@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
|
||||
#{$parent} {
|
||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
||||
@include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size);
|
||||
|
||||
// form-group padding-bottom
|
||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
|
||||
// so the form-control margin-bottom must also be expressed as form-group padding
|
||||
//padding-bottom: $vertical-padding;
|
||||
// form-group padding-bottom
|
||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
|
||||
// so the form-control margin-bottom must also be expressed as form-group padding
|
||||
//padding-bottom: $vertical-padding;
|
||||
|
||||
// FIXME: need to avoid top margin http://v4-alpha.getbootstrap.com/content/reboot/#approach
|
||||
// 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);
|
||||
// FIXME: need to avoid top margin http://v4-alpha.getbootstrap.com/content/reboot/#approach
|
||||
// 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);
|
||||
|
||||
// larger labels as placeholders
|
||||
&.label-floating,
|
||||
&.label-placeholder {
|
||||
label.control-label {
|
||||
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;
|
||||
}
|
||||
// placeholder positioning
|
||||
&.label-floating,
|
||||
&.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
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty) {
|
||||
@include 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
|
||||
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
|
||||
@include label-static($label-top, $static-font-size, $static-line-height);
|
||||
}
|
||||
// static, focused, or autofill floating labels
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty) {
|
||||
@include 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
|
||||
&.label-floating input.form-control:-webkit-autofill ~ label {
|
||||
@include label-static($label-top, $static-font-size, $static-line-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user