mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-30 05:24:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use form related line-heights of 1 instead of default 1.5 so that we can more easily space out inputs to match spec. 1.5 made our input-padding-y seem to be unrelated to the spec, which was too confusing.

Browse Source
This commit is contained in:
Kevin Ross 2015-12-14 10:30:59 -06:00
parent 4aa8c5bf69
commit f0b7422efc
5 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/material-design/test.md
View File

@ -7,7 +7,12 @@ group: material-design
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">Email address</label> <label for="exampleInputEmail1" class="mdb-label-static">Input Label text</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Input text">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">Input text</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span> <span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset> </fieldset>

11
scss/_forms.scss
View File

@ -93,13 +93,10 @@
position: relative; position: relative;
// ----- // -----
// Labels with form-group signalled state // Labels
// //
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//&.mdb-label-static,
//&.mdb-label-placeholder,
//&.mdb-label-floating {
label[class^='mdb-label'], label[class^='mdb-label'],
label[class*=' mdb-label'] { label[class*=' mdb-label'] {
position: absolute; position: absolute;
@ -117,16 +114,16 @@
} }
// default floating size/location with an mdb-form-group // 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, $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-label-as-placeholder-shim-base, "mdb-form-group default");
// sm floating size/location // 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, $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, $mdb-input-padding-y-sm, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-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, $line-height-lg, $mdb-label-as-placeholder-shim-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");
//} //}
} }

5
scss/_variables.scss
View File

@ -55,12 +55,17 @@ $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 // FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
// //
////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). ////## 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-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder
$mdb-label-top-margin-base: 1rem !default; $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-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-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-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder
$mdb-label-top-margin-sm: .75rem !default; // 12px $mdb-label-top-margin-sm: .75rem !default; // 12px

38
scss/mixins/_forms.scss
View File

@ -49,23 +49,20 @@
// must be broken out for reuse - webkit selector breaks firefox // must be broken out for reuse - webkit selector breaks firefox
@mixin mdb-label-static($label-top, $static-font-size, $static-line-height) { @mixin mdb-label-static($label-top, $static-font-size) {
top: $label-top; top: $label-top;
left: 0; left: 0;
// must repeat because the selector above is more specific than the general label sizing // must repeat because the previous (more generic) selectors
//font-size: $static-font-size; font-size: $static-font-size;
//line-height: $static-line-height;
} }
@mixin mdb-form-size-variant($font-size, $label-top-margin, $vertical-padding, $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, $label-as-placeholder-shim, $form-group-context: null) {
$static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size); $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size);
$static-line-height: ($mdb-mdb-label-static-size-ratio * $line-height);
$label-as-placeholder-top: ($vertical-padding + $label-as-placeholder-shim); // -1 * $label-as-placeholder-top: ($variant-padding-y + $label-as-placeholder-shim); // -1 *
$label-top: $label-as-placeholder-top - ($font-size + $vertical-padding); $label-top: $label-as-placeholder-top - ($font-size + $variant-padding-y);
$help-font-size: ($mdb-help-size-ratio * $font-size); $help-font-size: ($mdb-help-size-ratio * $font-size);
$help-line-height: ($mdb-help-size-ratio * $line-height);
@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
@ -75,9 +72,17 @@
//Padding below input text (including divider): 16dp //Padding below input text (including divider): 16dp
//Padding below text divider: 8dp //Padding below text divider: 8dp
// 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 // 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, $line-height, $static-font-size, $static-line-height, $help-font-size); //@include label-size-variant($font-size, $vertical-padding, $variant-line-height, $static-font-size, $static-line-height, $help-font-size);
.form-control { .form-control {
// //
// // margin-bottom must be specified to give help-block vertical space. // // margin-bottom must be specified to give help-block vertical space.
@ -87,7 +92,7 @@
input::placeholder { input::placeholder {
font-size: $font-size; font-size: $font-size;
line-height: $line-height; //line-height: $variant-line-height;
} }
// generic labels used anywhere in the form // generic labels used anywhere in the form
@ -95,24 +100,21 @@
.radio label, .radio label,
label { label {
font-size: $font-size; font-size: $font-size;
line-height: $line-height;
} }
// smaller focused or static size // smaller focused or static size
//label[class^='mdb-label'], //label[class^='mdb-label'],
//label[class*=' mdb-label'] { //label[class*=' mdb-label'] {
// //font-size: $static-font-size; // //font-size: $static-font-size;
// //line-height: $static-line-height;
// //margin: 16px 0 0 0; // std and lg // //margin: 16px 0 0 0; // std and lg
//} //}
// floating/placeholder default // floating/placeholder default
.mdb-label-floating, .mdb-label-floating,
.mdb-label-placeholder { .mdb-label-placeholder {
@debug "top: #{$label-as-placeholder-top}"; //@debug "top: #{$label-as-placeholder-top}";
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
//font-size: $placeholder-font-size; //font-size: $placeholder-font-size;
//line-height: $line-height;
} }
// floating focused/filled will look like static // floating focused/filled will look like static
@ -121,13 +123,13 @@
&.is-filled, &.is-filled,
.is-filled { .is-filled {
.mdb-label-floating { .mdb-label-floating {
@include mdb-label-static($label-top, $static-font-size, $static-line-height); @include mdb-label-static($label-top, $static-font-size);
} }
} }
// static // static
.mdb-label-static { .mdb-label-static {
@include mdb-label-static($label-top, $static-font-size, $static-line-height); @include mdb-label-static($label-top, $static-font-size);
} }
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
//input:-webkit-autofill ~ .mdb-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary //input:-webkit-autofill ~ .mdb-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary

2
scss/variables/bootstrap/_forms.scss
View File

@ -21,7 +21,7 @@ $input-color-placeholder: $mdb-label-color !default; // #999 !default;
$input-padding-x: 0 !default; // .75rem !default; $input-padding-x: 0 !default; // .75rem !default;
$input-padding-y: .4375rem !default; // $mdb-input-padding-y: 7px // .375rem !default; $input-padding-y: .4375rem !default; // spec 8px // .375rem !default;
$input-padding-x-sm: 0 !default; // .75rem !default; $input-padding-x-sm: 0 !default; // .75rem !default;
$input-padding-y-sm: .1875 !default; // 3px //.275rem !default; $input-padding-y-sm: .1875 !default; // 3px //.275rem !default;