From 2b64baf94cafd4ecfb10233d87bba644c5bd637a Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Thu, 10 Dec 2015 15:49:02 -0600
Subject: [PATCH] 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
---
scss/.scss-lint.yml | 2 +-
scss/_forms.scss | 68 +++++++++++++++------------
scss/_variables.scss | 2 +-
scss/mixins/_forms.scss | 100 ++++++++++++++++++++--------------------
4 files changed, 92 insertions(+), 80 deletions(-)
diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 5117da2a..0f992d21 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -20,7 +20,7 @@ linters:
exclude: ['_normalize.scss', 'bootstrap.scss']
DebugStatement:
- enabled: true
+ enabled: false
DeclarationOrder:
enabled: false
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 962ffce4..a119e32d 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -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;
// }
//}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index afc39dac..74d5763a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -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
//
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 303d1719..abfa3d35 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -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);
}
}
}