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); } } }