From 0a489cf35d8e4daf95304ab6393c8b3215dff7d2 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Mon, 14 Dec 2015 11:55:59 -0600 Subject: [PATCH] stable default text input size variant --- scss/_forms.scss | 23 ++++++++++++--------- scss/_variables.scss | 5 +---- scss/mixins/_forms.scss | 28 +++++--------------------- scss/variables/bootstrap/_forms.scss | 4 ++-- scss/variables/bootstrap/_spacing.scss | 26 ++++++++++++++++++++++++ 5 files changed, 48 insertions(+), 38 deletions(-) create mode 100644 scss/variables/bootstrap/_spacing.scss diff --git a/scss/_forms.scss b/scss/_forms.scss index b3db8b52..8dd63123 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,3 +1,8 @@ +form { + // ensure enough room at the bottom of any form to display a one-line mdb-help + margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height; +} + // ----- // Inputs // @@ -115,17 +120,17 @@ } // default floating size/location with an mdb-form-group - @include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-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, $mdb-form-line-height, "mdb-form-group default"); // sm floating size/location - //&.mdb-form-group-sm { - // @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm"); - //} - // - //// lg floating size/location - //&.mdb-form-group-lg { - // @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg"); - //} + &.mdb-form-group-sm { + @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $input-padding-y-sm, $mdb-form-line-height-sm, "mdb-form-group sm"); + } + + // lg floating size/location + &.mdb-form-group-lg { + @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $input-padding-y-lg, $mdb-form-line-height-sm, "mdb-form-group lg"); + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index ccf4c49b..f194f7c6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -15,6 +15,7 @@ $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted //--- // Customized BS variables $enable-flex: true; +@import "variables/bootstrap/spacing"; @import "variables/bootstrap/body"; @import "variables/bootstrap/brand"; @import "variables/bootstrap/buttons"; @@ -57,16 +58,12 @@ $mdb-help-size-ratio: 75 / 100 !default; ////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). $mdb-form-line-height: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec. - -$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-form-line-height-lg: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec. -$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-form-line-height-sm: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec. -$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 // Card diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index d961faa6..25982807 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -40,7 +40,7 @@ .mdb-form-control-decorator { &::before, &::after { - //@include gradient-vertical($label-color-focus, $input-border-color); + //@include gradient-vertical($label-color-focus, $input-border-color); // seems to look better solid. other comments? background-color: $label-color-focus; } } @@ -59,7 +59,7 @@ font-size: $static-font-size; } -@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $label-as-placeholder-shim, $form-group-context: null) { +@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) { $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size); $help-font-size: ($mdb-help-size-ratio * $font-size); @@ -75,33 +75,23 @@ //Padding below text divider: 8dp @if $form-group-context { - // Create a space at the top of the mdb-form-group for the label. - // The label is absolutely positioned, so we use top padding to make space. This padding extends down to the top of the input (padding). + // The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding). padding-top: ($label-top-margin + $static-font-size); + // note: bottom-margin of this is determined by $spacer. @see _spacer.scss } // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space // from the default line-height of 1.5 .form-control, label, - .mdb-help, input::placeholder { line-height: $variant-line-height; } - // 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, $variant-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; - } - + // Note: 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 input::placeholder { font-size: $font-size; - //line-height: $variant-line-height; } // generic labels used anywhere in the form @@ -111,19 +101,11 @@ font-size: $font-size; } - // smaller focused or static size - //[class^='mdb-label'], - //[class*=' mdb-label'] { - // //font-size: $static-font-size; - // //margin: 16px 0 0 0; // std and lg - //} - // floating/placeholder default (no focus) .mdb-label-floating, .mdb-label-placeholder { //@debug "top: #{$label-as-placeholder-top}"; top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding - //font-size: $placeholder-font-size; } // floating focused/filled will look like static diff --git a/scss/variables/bootstrap/_forms.scss b/scss/variables/bootstrap/_forms.scss index 993856df..314e14b2 100644 --- a/scss/variables/bootstrap/_forms.scss +++ b/scss/variables/bootstrap/_forms.scss @@ -24,10 +24,10 @@ $input-padding-x: 0 !default; // .75rem !default; $input-padding-y: .4375rem !default; // spec 8px // .375rem !default; $input-padding-x-sm: 0 !default; // .75rem !default; -$input-padding-y-sm: .1875 !default; // 3px //.275rem !default; +$input-padding-y-sm: .25rem !default; // spec 4px //.275rem !default; $input-padding-x-lg: 0 !default; // 1.25rem !default; -$input-padding-y-lg: .5625rem !default; // 9px // .75rem !default; +$input-padding-y-lg: .5625rem !default; // no-spec 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; diff --git a/scss/variables/bootstrap/_spacing.scss b/scss/variables/bootstrap/_spacing.scss new file mode 100644 index 00000000..40328607 --- /dev/null +++ b/scss/variables/bootstrap/_spacing.scss @@ -0,0 +1,26 @@ +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. + +$spacer: .5rem !default; // 1rem !default; // $form-group-margin-bottom uses $spacer-y. Decided to try this globally and see how it works out. +//$spacer-x: $spacer !default; +//$spacer-y: $spacer !default; +//$spacers: ( +// 0: ( +// x: 0, +// y: 0 +// ), +// 1: ( +// x: $spacer-x, +// y: $spacer-y +// ), +// 2: ( +// x: ($spacer-x * 1.5), +// y: ($spacer-y * 1.5) +// ), +// 3: ( +// x: ($spacer-x * 3), +// y: ($spacer-y * 3) +// ) +//) !default;