stable default text input size variant

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 {
+  &.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");
+    @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
+  // lg floating size/location
-  //&.mdb-form-group-lg {
+  &.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");
+    @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");
-  //}
+  }
 }
 
 

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

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
+  // 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
-  //@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;
-  }
-
   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

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;

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;