Block level button @@ -681,7 +681,7 @@ ================================================== -->
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. @@ -760,7 +760,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. @@ -776,7 +776,7 @@ - + Icons @@ -1796,7 +1796,7 @@ - + Tables @@ -1865,7 +1865,7 @@ ================================================== --> - + Forms @@ -1873,22 +1873,22 @@ - + Legend - Email + Email - + - Password + Password - + - + Checkbox @@ -1923,7 +1923,7 @@ - + Toggle button @@ -1932,25 +1932,25 @@ - File + File - + - Textarea + Textarea - + A longer block of help text that breaks onto a new line and may extend beyond one line. - Radios + Radios - + @@ -1966,9 +1966,9 @@ - Select + Select - + 1 2 @@ -1979,9 +1979,9 @@ - Select Multiple + Select Multiple - + 1 2 @@ -1992,7 +1992,7 @@ - + Cancel Submit @@ -2001,7 +2001,7 @@ - + @@ -2112,7 +2112,7 @@ - + Navs @@ -2120,7 +2120,7 @@ - + Tabs @@ -2155,7 +2155,7 @@ - + Pills @@ -2199,7 +2199,7 @@ - + Breadcrumbs @@ -2224,7 +2224,7 @@ - + Pagination @@ -2257,7 +2257,7 @@ - + Pager @@ -2272,7 +2272,7 @@ - + @@ -2283,7 +2283,7 @@ - + Indicators @@ -2291,7 +2291,7 @@ - + Alerts @@ -2306,7 +2306,7 @@ - + × @@ -2315,7 +2315,7 @@ - + × @@ -2324,7 +2324,7 @@ - + × @@ -2335,7 +2335,7 @@ - + Labels @@ -2347,7 +2347,7 @@ Info - + Badges @@ -2366,7 +2366,7 @@ - + Progress bars @@ -2445,7 +2445,7 @@ - + Sliders (with noUiSlider) @@ -2473,7 +2473,7 @@ - + Containers @@ -2491,12 +2491,12 @@ - + List groups - + @@ -2538,7 +2538,7 @@ - + @@ -2580,7 +2580,7 @@ - + @@ -2623,12 +2623,12 @@ - + Panels - + @@ -2651,7 +2651,7 @@ - + @@ -2681,7 +2681,7 @@ - + @@ -2705,26 +2705,26 @@ - + Wells - + Look, I'm in a well! - + Look, I'm in a small well! - + Look, I'm in a large well! @@ -2739,14 +2739,14 @@ - + Dialogs - + Modals @@ -2769,7 +2769,7 @@ - + Popovers @@ -2797,7 +2797,7 @@ - + Snackbars and toasts (with SnackbarJS) SnackbarJS is the ad-hoc developed plugin to create snackbars and toasts, read more about it on the diff --git a/index.html b/index.html index e98adacd..62574c16 100644 --- a/index.html +++ b/index.html @@ -391,9 +391,9 @@ - Column label + Column label - + This is a hint as a span.help-block.hint @@ -617,7 +617,7 @@ - + @@ -668,7 +668,7 @@ - + @@ -719,7 +719,7 @@ - + @@ -770,7 +770,7 @@ - + diff --git a/less/_inputs.less b/less/_inputs.less index 8c2e8cda..f425a2e0 100644 --- a/less/_inputs.less +++ b/less/_inputs.less @@ -1,7 +1,7 @@ @import '_inputs-size.less'; // must be broken out for reuse - webkit selector breaks firefox -.label-position(@label-top, @static-font-size, @static-line-height) { +.label-static(@label-top, @static-font-size, @static-line-height) { label.control-label { top: @label-top; left: 0; @@ -11,6 +11,44 @@ } } +.label-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @static-font-size, @static-line-height, @help-block-font-size){ + .form-control { + .material-placeholder({ + font-size: @placeholder-font-size; + line-height: @line-height; + color: @mdb-input-placeholder-color; + font-weight: 400; + }); + // 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; + } + + // generic labels used anywhere in the form (not control-label) + .checkbox label, + .radio label, + label { + font-size: @placeholder-font-size; + line-height: @line-height; + color: @mdb-input-placeholder-color; + font-weight: 400; + } + + // smaller focused or static size + label.control-label { + font-size: @static-font-size; + line-height: @static-line-height; + color: @mdb-input-placeholder-color; + font-weight: 400; + margin: 16px 0 0 0; // std and lg + } + + .help-block { + margin-top: 0px; // allow the input margin to set-off the top of the help-block + font-size: @help-block-font-size; + } +} + .form-group-validation-state(@name, @color) { &.@{name} { // e.g. has-error @@ -27,7 +65,7 @@ } } -.label-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){ +.form-group-size-variant(@parent, @placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim) { @static-font-size: ceil((@mdb-label-static-size-ratio * @placeholder-font-size)); @static-line-height: (@mdb-label-static-size-ratio * @line-height); @@ -37,128 +75,108 @@ @help-block-font-size: ceil((@mdb-help-block-size-ratio * @placeholder-font-size)); @help-block-line-height: (@mdb-help-block-size-ratio * @line-height); - // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned - margin: (@label-top-margin + @static-font-size) 0 0 0; - - .form-control { - .material-placeholder({ - font-size: @placeholder-font-size; - }); - margin-bottom: @vertical-padding; // must be specified to give help-block vertical space + // this is outside a form-group + & when not (isstring(@parent)) { + .label-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @static-font-size, @static-line-height, @help-block-font-size); } - // upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin - // must also be expressed as form-group padding - padding-bottom: @vertical-padding; + // this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg + & when (isstring(@parent)) { + @{parent} { + .label-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @static-font-size, @static-line-height, @help-block-font-size); - .help-block { - margin-top: 0px; // allow the input margin to set-off the top of the help-block - font-size: @help-block-font-size; - } + // form-group padding-bottom + // upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom, + // so the form-control margin-bottom must also be expressed as form-group padding + padding-bottom: @vertical-padding; - // generic labels used anywhere in the form (not control-label) - .checkbox label, - .radio label, - label { - font-size: @placeholder-font-size; - line-height: @line-height; - font-weight: 400; - } + // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned + margin: (@label-top-margin + @static-font-size) 0 0 0; - // smaller focused or static size - label.control-label { - font-size: @static-font-size; - line-height: @static-line-height; - } + // larger labels as placeholders + &.label-floating, + &.label-placeholder { + label.control-label { + top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding + font-size: @placeholder-font-size; + line-height: @line-height; + } + } - // larger labels as placeholders - &.label-floating, - &.label-placeholder { - label.control-label { - top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding - font-size: @placeholder-font-size; - line-height: @line-height; + // static, focused, or autofill floating labels + &.label-static, + &.label-floating.is-focused, + &.label-floating:not(.is-empty) { + .label-static(@label-top, @static-font-size, @static-line-height); + } + // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 + &.label-floating input.form-control:-webkit-autofill ~ label.control-label { + .label-static(@label-top, @static-font-size, @static-line-height); + } } } - - // static, focused, or autofill floating labels - &.label-static, - &.label-floating.is-focused, - &.label-floating:not(.is-empty) { - .label-position(@label-top, @static-font-size, @static-line-height); - } - // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 - &.label-floating input.form-control:-webkit-autofill ~ label.control-label { - .label-position(@label-top, @static-font-size, @static-line-height); - } } +// ----- +// Inputs +// +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +.form-control, +.form-group .form-control { + border: 0; + background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); + background-size: 0 2px, 100% 1px; + background-repeat: no-repeat; + background-position: center bottom, center calc(~"100% - 1px"); + background-color: rgba(0, 0, 0, 0); + transition: background 0s ease-out; + float: none; + box-shadow: none; + border-radius: 0; + + // Placeholders and and labels-as-placeholders should look the same + .material-placeholder({ + color: @mdb-input-placeholder-color; + font-weight: 400; + }); + + + //&:textarea { // appears to be an invalid selector + // height: 40px; + //} + + &[readonly], + &[disabled], + fieldset[disabled] & { + background-color: rgba(0, 0, 0, 0); + } + + &[disabled], + fieldset[disabled] & { + background-image: none; + border-bottom: 1px dotted @mdb-input-underline-color; + } +} + +// ----- +// Labels with form-group signalled state +// +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +//.variations(~" label.control-label", color, @mdb-input-placeholder-color); // default label color variations + .form-group { - //border: solid 1px red; position: relative; // ----- - // Inputs - // - // Reference http://www.google.com/design/spec/components/text-fields.html - // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section - .form-control { - border: 0; - background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); - background-size: 0 2px, 100% 1px; - background-repeat: no-repeat; - background-position: center bottom, center calc(~"100% - 1px"); - background-color: rgba(0, 0, 0, 0); - transition: background 0s ease-out; - float: none; - box-shadow: none; - border-radius: 0; - - // Placeholders and and labels-as-placeholders should look the same - .material-placeholder({ - color: @mdb-input-placeholder-color; - font-weight: 400; - }); - - - //&:textarea { // appears to be an invalid selector - // height: 40px; - //} - - &[readonly], - &[disabled], - fieldset[disabled] & { - background-color: rgba(0, 0, 0, 0); - } - - &[disabled], - fieldset[disabled] & { - background-image: none; - border-bottom: 1px dotted @mdb-input-underline-color; - } - } - - &.is-focused .form-control { - outline: none; - background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); - background-size: 100% 2px, 100% 1px; - box-shadow: none; - transition-duration: 0.3s; - - .material-input:after { - background-color: @brand-primary; - } - } - - // ----- - // Labels + // Labels with form-group signalled state // // Reference http://www.google.com/design/spec/components/text-fields.html // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section &.label-static, &.label-placeholder, &.label-floating { - label.control-label { position: absolute; pointer-events: none; @@ -166,19 +184,6 @@ } } - // generic labels and control labels - label, - label.control-label { - // same label properties as form-group placeholder - color: @mdb-input-placeholder-color; - font-weight: 400; - } - - label.control-label { - // same label properties as form-group placeholder - margin: 16px 0 0 0; // std and lg - } - // hide label-placeholders when the field is not empty &.label-placeholder:not(.is-empty){ label.control-label{ @@ -186,30 +191,40 @@ } } - .variations(~" label.control-label", color, @mdb-input-placeholder-color); // default label color variations - .variations(~".is-focused label.control-label", color, @brand-primary); // focused label color variations - .variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color); // default label color variations - - // default floating size/location - .label-size-variant(@mdb-input-font-size-base, @mdb-label-top-margin-base, @mdb-input-padding-base-vertical, @mdb-input-line-height-base, @mdb-label-as-placeholder-shim-base); - - // sm floating size/location - &.form-group-sm { - .label-size-variant(@mdb-input-font-size-small, @mdb-label-top-margin-small, @mdb-input-padding-small-vertical, @mdb-input-line-height-small, @mdb-label-as-placeholder-shim-small); - } - - // lg floating size/location - &.form-group-lg { - .label-size-variant(@mdb-input-font-size-large, @mdb-label-top-margin-large, @mdb-input-padding-large-vertical, @mdb-input-line-height-large, @mdb-label-as-placeholder-shim-large); - } - - // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good. + // Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good. .help-block { position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur display: none; } + // form-group is-focused display &.is-focused { + .form-control { + outline: none; + background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); + background-size: 100% 2px, 100% 1px; + box-shadow: none; + transition-duration: 0.3s; + + .material-input:after { + background-color: @brand-primary; + } + } + + //.variations(~".is-focused label.control-label", color, @brand-primary); // focused label color variations + label, + label.control-label { + color: @brand-primary; + } + + //.variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color); // default label color variations + &.label-placeholder { + label, + label.control-label { + color: @mdb-input-placeholder-color; + } + } + .help-block { display: block; } @@ -241,6 +256,19 @@ } } +// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) +.form-group-size-variant(null, @mdb-input-font-size-base, @mdb-label-top-margin-base, @mdb-input-padding-base-vertical, @mdb-input-line-height-base, @mdb-label-as-placeholder-shim-base); + +// default floating size/location with a form-group (need margin etc from a default form-group) +.form-group-size-variant(~".form-group", @mdb-input-font-size-base, @mdb-label-top-margin-base, @mdb-input-padding-base-vertical, @mdb-input-line-height-base, @mdb-label-as-placeholder-shim-base); + +// sm floating size/location +.form-group-size-variant(~".form-group.form-group-sm", @mdb-input-font-size-small, @mdb-label-top-margin-small, @mdb-input-padding-small-vertical, @mdb-input-line-height-small, @mdb-label-as-placeholder-shim-small); + +// lg floating size/location +.form-group-size-variant(~".form-group.form-group-lg", @mdb-input-font-size-large, @mdb-label-top-margin-large, @mdb-input-padding-large-vertical, @mdb-input-line-height-large, @mdb-label-as-placeholder-shim-large); + + select.form-control { border: 0; @@ -271,7 +299,7 @@ select.form-control { // ---------------- // input group/addon related styles -// default margin +// default margin - no form-group required .input-group-button-variation(@mdb-input-padding-base-vertical); .form-group {
SnackbarJS is the ad-hoc developed plugin to create snackbars and toasts, read more about it on the diff --git a/index.html b/index.html index e98adacd..62574c16 100644 --- a/index.html +++ b/index.html @@ -391,9 +391,9 @@
span.help-block.hint