mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-10 19:57:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

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

148
less/_inputs.less
View File

@ -38,12 +38,6 @@
} }
} }
.material-placeholder({
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
font-weight: normal;
});
&, &,
fieldset[disabled] & { fieldset[disabled] & {
@ -72,41 +66,26 @@
} }
} }
.form-group { .form-group-size-variant(@placeholder-font-size, @vertical-padding){
position: relative; @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));
// ----- .form-control {
// Labels .material-placeholder({
// font-size: @placeholder-font-size;
// 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;
}
} }
.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 { .hint {
label.control-label{ font-size: @hint-font-size;
&.floating-label{ }
font-size: @md-input-label-font-size-base; // 12px
} 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, &.is-focused,
&:not(.is-empty) { &:not(.is-empty) {
label.control-label.floating-label { label.control-label.floating-label {
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
font-size: @md-input-label-font-size-base; 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-group-sm {
.form-control { .form-group-size-variant(@md-input-font-size-small, @md-input-padding-small-vertical);
.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;
}
}
} }
// lg // lg floating size/location
&.form-group-lg { &.form-group-lg {
.form-control { .form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical);
.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;
}
}
} }
// Hints // Hints
.hint { .hint {
position: absolute; position: absolute;
font-size: 80%;
display: none; display: none;
} }

7
less/_variables.less
View File

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

2
sass/_inputs-size.scss
View File

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

151
sass/_inputs.scss
View File

@ -40,38 +40,15 @@
} }
} }
@include material-placeholder { &,
color: $input-placeholder-color; fieldset[disabled] & {
font-size: $md-input-font-size-base;
font-weight: normal;
}
//&::-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 { &:textarea {
height: 40px; height: 40px;
} }
&, &,
.form-group.is-focused & { .form-group.is-focused & {
//padding: 0;
float: none; float: none;
border: 0; border: 0;
box-shadow: none; 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 { .form-group {
position: relative; position: relative;
// ----
// Placeholders and and floating-labels should look the same
.form-control {
@include material-placeholder {
color: $input-placeholder-color;
font-weight: normal;
}
}
// -----
// Labels // 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 label.control-label { // static label
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful // same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
color: $input-placeholder-color; color: $input-placeholder-color;
font-size: $md-input-font-size-base;
font-weight: normal; font-weight: normal;
margin: 16px 0 0 0; // std and lg 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 { &.form-group-sm {
label.control-label { // static label @include form-group-size-variant($md-input-font-size-small, $md-input-padding-small-vertical);
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
}
} }
// lg // lg floating size/location
&.form-group-lg { &.form-group-lg {
label.control-label { // static label @include form-group-size-variant($md-input-font-size-large, $md-input-padding-large-vertical);
font-size: $floating-label-size-ratio * $md-input-font-size-large; // same as focused size of floating FIXME shouldn't this be full size?
}
} }
// Hints // Hints
.hint { .hint {
position: absolute; position: absolute;
font-size: 80%;
display: none; 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 { .input-group {
.form-group { .form-group {
.form-control { .form-control {

7
sass/_variables.scss
View File

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