stable default text input size variant

This commit is contained in:
Kevin Ross 2015-12-14 11:55:59 -06:00
parent 19ae3fd074
commit 0a489cf35d
5 changed files with 48 additions and 38 deletions

View File

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

View File

@ -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

View File

@ -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

View File

@ -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;

View File

@ -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;