mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
refactored form-group variants into a mixin, much less code.
This commit is contained in:
Kevin Ross
parent
c4b924637c
commit
214ba3a369
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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
|
||||
.form-control {
|
||||
.material-placeholder({
|
||||
font-size: @placeholder-font-size;
|
||||
});
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: @hint-font-size;
|
||||
}
|
||||
|
||||
@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
|
||||
|
||||
font-size: @static-font-size; // static (smaller of the two)
|
||||
&.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 {
|
||||
label.control-label{
|
||||
&.floating-label{
|
||||
font-size: @md-input-label-font-size-base; // 12px
|
||||
}
|
||||
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-sm {
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
// ----
|
||||
// Placeholders and and floating-labels should look the same
|
||||
.form-control {
|
||||
.material-placeholder({
|
||||
font-size: @md-input-font-size-small;
|
||||
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
|
||||
font-size: @md-input-label-font-size-small; // static
|
||||
//margin: 12px 0 0 0; // sm only
|
||||
|
||||
// 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 {
|
||||
font-size: @md-input-font-size-small; // as placeholder
|
||||
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
|
||||
&.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
|
||||
&.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)
|
||||
}
|
||||
&.form-group-sm {
|
||||
.form-group-size-variant(@md-input-font-size-small, @md-input-padding-small-vertical);
|
||||
}
|
||||
|
||||
// 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-lg {
|
||||
.form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical);
|
||||
}
|
||||
|
||||
// Hints
|
||||
.hint {
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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} {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user