refactored form-group variants into a mixin, much less code.

This commit is contained in:
Kevin Ross 2015-11-10 16:35:08 -06:00
parent f564b4ff16
commit 9d3cd1a500
6 changed files with 143 additions and 176 deletions

View File

@ -14,7 +14,7 @@
<!-- Material Design for Bootstrap -->
<link href="dist/css/roboto.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet">
<!-- Dropdown.js -->
@ -1437,7 +1437,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Material Design for Bootstrap -->
<script src="dist/js/material.min.js"></script>
<script src="dist/js/material.js"></script>
<script src="dist/js/ripples.min.js"></script>
<script>
$.material.init();

View File

@ -38,12 +38,6 @@
}
}
.material-placeholder({
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
font-weight: normal;
});
&,
fieldset[disabled] & {
@ -72,41 +66,26 @@
}
}
.form-group {
position: relative;
.form-group-size-variant(@placeholder-font-size, @vertical-padding){
@label-as-placeholder-top: -1 * @vertical-padding;
@static-font-size: ceil((@floating-label-size-ratio * @placeholder-font-size));
@hint-font-size: ceil((@hint-size-ratio * @placeholder-font-size));
// -----
// Labels
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
@label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
label.control-label { // static label
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
color: @input-placeholder-color;
font-size: @floating-label-size-ratio * @md-input-font-size-base; // same as focused size of floating
font-weight: normal;
margin: 16px 0 0 0; // std and lg
&.floating-label {
font-size: @md-input-font-size-base; // as placeholder
position: absolute;
pointer-events: none;
left: 0px;
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
transition: 0.3s ease all;
}
.form-control {
.material-placeholder({
font-size: @placeholder-font-size;
});
}
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
&.is-focused {
label.control-label{
&.floating-label{
font-size: @md-input-label-font-size-base; // 12px
}
.hint {
font-size: @hint-font-size;
}
label.control-label { // static label
font-size: @static-font-size; // static (smaller of the two)
&.floating-label {
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
font-size: @placeholder-font-size; // as placeholder (full size)
}
}
@ -114,66 +93,63 @@
&.is-focused,
&:not(.is-empty) {
label.control-label.floating-label {
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical);
font-size: @md-input-label-font-size-base;
top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
font-size: @static-font-size;
}
}
}
// sm
.form-group {
position: relative;
// ----
// Placeholders and and floating-labels should look the same
.form-control {
.material-placeholder({
color: @input-placeholder-color;
font-weight: normal;
});
}
// -----
// Labels
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
label.control-label { // static label
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
color: @input-placeholder-color;
font-weight: normal;
margin: 16px 0 0 0; // std and lg
&.floating-label {
position: absolute;
pointer-events: none;
left: 0px;
transition: 0.3s ease all;
}
}
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
// default floating size/location
.form-group-size-variant(@md-input-font-size-base, @md-input-padding-base-vertical);
// sm floating size/location
&.form-group-sm {
.form-control {
.material-placeholder({
font-size: @md-input-font-size-small;
});
}
label.control-label { // static label
font-size: @md-input-label-font-size-small; // static
//margin: 12px 0 0 0; // sm only
&.floating-label {
font-size: @md-input-font-size-small; // as placeholder
}
}
// sm floating size/location
&.is-focused,
&:not(.is-empty) {
label.control-label.floating-label {
top: @label-as-placeholder-top - (@md-input-label-font-size-small + @md-input-padding-small-vertical);
font-size: @md-input-label-font-size-small;
}
}
.form-group-size-variant(@md-input-font-size-small, @md-input-padding-small-vertical);
}
// lg
// lg floating size/location
&.form-group-lg {
.form-control {
.material-placeholder({
font-size: @md-input-font-size-large;
});
}
label.control-label { // static label
font-size: @floating-label-size-ratio * @md-input-font-size-large; // same as focused size of floating
&.floating-label {
font-size: @md-input-font-size-large; // as placeholder (never larger than size-base)
}
}
// lg floating size/location
&.is-focused,
&:not(.is-empty) {
label.control-label.floating-label {
top: @label-as-placeholder-top - (@md-input-label-font-size-large + @md-input-padding-large-vertical);
font-size: @md-input-label-font-size-large;
}
}
.form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical);
}
// Hints
.hint {
position: absolute;
font-size: 80%;
display: none;
}

View File

@ -85,6 +85,7 @@
// inputs
@input-placeholder-color: #BDBDBD;
@floating-label-size-ratio: 75 / 100;
@hint-size-ratio: 75 / 100;
@input-underline-color: #D2D2D2;
@md-input-font-size-base: 16px;
@ -92,9 +93,9 @@
@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
// size when static or floating with focus i.e. 16px
@md-input-label-font-size-base: @floating-label-size-ratio * @md-input-font-size-base;
@md-input-label-font-size-small: @floating-label-size-ratio * @md-input-font-size-small;
@md-input-label-font-size-large: @floating-label-size-ratio * @md-input-font-size-large;
//@md-input-label-font-size-base: ceil((@floating-label-size-ratio * @md-input-font-size-base));
//@md-input-label-font-size-small:ceil(( @floating-label-size-ratio * @md-input-font-size-small));
//@md-input-label-font-size-large: ceil((@floating-label-size-ratio * @md-input-font-size-large));
//** Unit-less `line-height` for use in components like buttons.
@md-input-line-height-base: 1.428571429; // 20/14

View File

@ -83,6 +83,8 @@ output {
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
// mixin pulled from bootstrap and altered for less/sass compatibility
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
#{$parent} {

View File

@ -40,38 +40,15 @@
}
}
@include material-placeholder {
color: $input-placeholder-color;
font-size: $md-input-font-size-base;
font-weight: normal;
}
&,
fieldset[disabled] & {
//&::-moz-placeholder {
// color: $input-placeholder-color;
// font-size: $md-input-font-size-base;
// font-weight: normal;
//}
//&:-ms-input-placeholder {
// color: $input-placeholder-color;
// font-size: $md-input-font-size-base;
// font-weight: normal;
//}
//&::-webkit-input-placeholder {
// color: $input-placeholder-color;
// font-size: $md-input-font-size-base;
// font-weight: normal;
//}
fieldset[disabled] &,
& {
&:textarea {
height: 40px;
}
&,
.form-group.is-focused & {
//padding: 0;
float: none;
border: 0;
box-shadow: none;
@ -91,41 +68,92 @@
}
}
@mixin form-group-size-variant($placeholder-font-size, $vertical-padding){
$label-as-placeholder-top: -1 * $vertical-padding !default;
$static-font-size: ceil(($floating-label-size-ratio * $placeholder-font-size)) !default;
$hint-font-size: ceil(($hint-size-ratio * $placeholder-font-size)) !default;
.form-control {
@include material-placeholder {
font-size: $placeholder-font-size;
}
}
.hint {
font-size: $hint-font-size;
}
label.control-label { // static label
font-size: $static-font-size; // static (smaller of the two)
&.floating-label {
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
font-size: $placeholder-font-size; // as placeholder (full size)
}
}
// sizing of focused/open/labels
&.is-focused,
&:not(.is-empty) {
label.control-label.floating-label {
top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding);
font-size: $static-font-size;
}
}
}
.form-group {
position: relative;
// ----
// Placeholders and and floating-labels should look the same
.form-control {
@include material-placeholder {
color: $input-placeholder-color;
font-weight: normal;
}
}
// -----
// Labels
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
label.control-label { // static label
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
color: $input-placeholder-color;
font-size: $md-input-font-size-base;
font-weight: normal;
margin: 16px 0 0 0; // std and lg
}
//.variations(unquote(" label.control-label"), color, $input-placeholder-color); // FIXME: not sure if necessary
//.variations(unquote(".is-focused label.control-label"), color, $input-default);
// sm
&.floating-label {
position: absolute;
pointer-events: none;
left: 0px;
transition: 0.3s ease all;
}
}
@include variations(unquote(" label.control-label"), color, $input-placeholder-color); // default label color variations
@include variations(unquote(".is-focused label.control-label"), color, $input-default); // focused label color variations
// default floating size/location
@include form-group-size-variant($md-input-font-size-base, $md-input-padding-base-vertical);
// sm floating size/location
&.form-group-sm {
label.control-label { // static label
font-size: $floating-label-size-ratio * $md-input-font-size-small; // same as focused size of floating FIXME shouldn't this be full size?
margin: 12px 0 0 0; // sm only
}
@include form-group-size-variant($md-input-font-size-small, $md-input-padding-small-vertical);
}
// lg
// lg floating size/location
&.form-group-lg {
label.control-label { // static label
font-size: $floating-label-size-ratio * $md-input-font-size-large; // same as focused size of floating FIXME shouldn't this be full size?
}
@include form-group-size-variant($md-input-font-size-large, $md-input-padding-large-vertical);
}
// Hints
.hint {
position: absolute;
font-size: 80%;
display: none;
}
@ -179,49 +207,6 @@ select.form-control {
}
}
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
// this is for input-sm and input-lg directly on input. Recommended way is form-group-sm and form-group-lg instead.
@mixin input-size-floating-label($name, $size){
.form-control.#{$name} ~ & {
font-size: $size;
top: 7px;
}
.form-group.is-focused .form-control.#{$name} ~ .form-group.is-focused &,
.form-group.is-empty .form-control.#{$name} ~ .form-group.is-empty & {
top: $floating-label-size-ratio * -$size;
font-size: $floating-label-size-ratio * $size;
}
}
// Do not nest label.floating-label inside .form-group - it messes with ~ selector
label.control-label.floating-label {
font-size: $md-input-font-size-base; // Input sizes
position: absolute;
pointer-events: none;
left: 0px;
top: -1 * $md-input-padding-base-vertical; // place the floating label to look like a placeholder with input padding
transition: 0.3s ease all;
.form-group.is-focused & {
label.control-label {
font-size: $md-input-label-font-size-base; // 12px
}
}
// sizing
.form-group.is-focused &,
.form-group:not(.is-empty) & {
top: -1 * ($md-input-label-font-size-base + $md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
font-size: $md-input-label-font-size-base;
}
@include input-size-floating-label(input-sm, $md-input-font-size-small);
@include input-size-floating-label(input-lg, $md-input-font-size-large);
}
.input-group {
.form-group {
.form-control {

View File

@ -87,6 +87,7 @@ $material-border-radius: 2px !default;
// inputs
$input-placeholder-color: #BDBDBD !default;
$floating-label-size-ratio: 75 / 100 !default;
$hint-size-ratio: 75 / 100 !default;
$input-underline-color: #D2D2D2 !default;
$md-input-font-size-base: 16px !default;
@ -94,7 +95,9 @@ $md-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
$md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
// size when static or floating with focus i.e. 16px
$md-input-label-font-size-base: $floating-label-size-ratio * $md-input-font-size-base !default;
//$md-input-label-font-size-base: ceil(($floating-label-size-ratio * $md-input-font-size-base)) !default;
//$md-input-label-font-size-small:ceil(( $floating-label-size-ratio * $md-input-font-size-small)) !default;
//$md-input-label-font-size-large: ceil(($floating-label-size-ratio * $md-input-font-size-large)) !default;
//** Unit-less `line-height` for use in components like buttons.
$md-input-line-height-base: 1.428571429 !default; // 20/14
@ -105,7 +108,7 @@ $md-input-line-height-computed: floor(($md-input-font-size-base * $md-input-l
$md-input-padding-base-vertical: 8px !default; // was 6.
$md-input-padding-base-horizontal: 0px !default; // was 12.
$md-input-padding-large-vertical: 8px !default; // 10
$md-input-padding-large-vertical: 10px !default; // 10
$md-input-padding-large-horizontal: 0px !default; // 16
$md-input-padding-small-vertical: 4px !default; // 5