mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

replaced old label names (not in use yet), refactored mixin mdb-form-color for use for default variation in addition to the other states

Browse Source
This commit is contained in:
Kevin Ross 2015-12-11 11:32:00 -06:00
parent c0885dc2ee
commit ce2e84bdb9
8 changed files with 130 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/material-design/forms.md
View File

@ -13,19 +13,19 @@ Bootstrap provides several form control styles, layout options, and custom compo
## Form controls ## Form controls
Form controls flavored by Material Design for Bootstrap customizations such as `label-floating`. Form controls flavored by Material Design for Bootstrap customizations such as `mdb-label-floating`.
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group label-floating"> <fieldset class="form-group mdb-label-floating">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<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>
<fieldset class="form-group label-floating"> <fieldset class="form-group mdb-label-floating">
<label for="exampleInputPassword1">Password</label> <label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</fieldset> </fieldset>
<fieldset class="form-group label-floating"> <fieldset class="form-group mdb-label-floating">
<label for="exampleSelect1">Example select</label> <label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1"> <select class="form-control" id="exampleSelect1">
<option>1</option> <option>1</option>
@ -35,7 +35,7 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<option>5</option> <option>5</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="form-group label-floating"> <fieldset class="form-group mdb-label-floating">
<label for="exampleSelect2">Example multiple select</label> <label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2"> <select multiple class="form-control" id="exampleSelect2">
<option>1</option> <option>1</option>
@ -45,11 +45,11 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<option>5</option> <option>5</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="form-group label-floating"> <fieldset class="form-group mdb-label-floating">
<label for="exampleTextarea">Example textarea</label> <label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea> <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset> </fieldset>
<fieldset class="form-group label-floating"> <fieldset class="form-group mdb-label-floating">
<label for="exampleInputFile">File input</label> <label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile"> <input type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
@ -107,7 +107,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr> </tr>
<tr> <tr>
<td> <td>
{% markdown %}`.label-floating`{% endmarkdown %} {% markdown %}`.mdb-label-floating`{% endmarkdown %}
</td> </td>
<td> <td>
@ -118,7 +118,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr> </tr>
<tr> <tr>
<td> <td>
{% markdown %}`.label-static`{% endmarkdown %} {% markdown %}`.mdb-label-static`{% endmarkdown %}
</td> </td>
<td> <td>
@ -129,7 +129,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
</tr> </tr>
<tr> <tr>
<td> <td>
{% markdown %}`.label-placeholder`{% endmarkdown %} {% markdown %}`.mdb-label-placeholder`{% endmarkdown %}
</td> </td>
<td> <td>
@ -146,7 +146,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a
The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing, The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing,
the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors. Decorations and size variations are intended to be specified on the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors. Decorations and size variations are intended to be specified on
this element e.g. `.label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`. this element e.g. `.mdb-label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`.
The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard
markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining
@ -155,11 +155,11 @@ you may need to wrap your markup in an `.mdb-form-group` to get appropriate focu
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group label-floating"> <!-- left unspecified, .mdb-form-group will be automatically added (inspect the code) --> <fieldset class="form-group mdb-label-floating"> <!-- left unspecified, .mdb-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput">Example label</label> <label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</fieldset> </fieldset>
<fieldset class="form-group mdb-form-group label-floating"> <!-- manually specified --> <fieldset class="form-group mdb-form-group mdb-label-floating"> <!-- manually specified -->
<label for="formGroupExampleInput2">Another label</label> <label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</fieldset> </fieldset>
@ -180,11 +180,11 @@ Because of this, you may need to manually address the width and alignment of ind
{% example html %} {% example html %}
<form class="form-inline"> <form class="form-inline">
<div class="form-group label-floating"> <div class="form-group mdb-label-floating">
<label for="exampleInputName2">Name</label> <label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div> </div>
<div class="form-group label-floating"> <div class="form-group mdb-label-floating">
<label for="exampleInputEmail2">Email</label> <label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div> </div>

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

@ -6,7 +6,7 @@ group: material-design
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group label-floating"> <fieldset class="form-group mdb-label-floating">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<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>

2
js/src/baseInput.js
View File

@ -38,7 +38,7 @@ const BaseInput = (($) => {
// //
selectors: [ selectors: [
`.form-control-label`, // in the case of horizontal or inline forms, this will be marked `.form-control-label`, // in the case of horizontal or inline forms, this will be marked
`> label` // usual case for text inputs `> label` // usual case for text inputs, first child. Deeper would find toggle labels so don't do that.
], ],
className: `mdb-label` className: `mdb-label`
}, },

2
js/src/bootstrapMaterialDesign.js vendored
View File

@ -32,7 +32,7 @@ const BootstrapMaterialDesign = (($) => {
global: { global: {
validate: false, validate: false,
mdbLabel: { mdbLabel: {
className: `mdb-label` className: `mdb-label` // default style of label to be used if not specified in the html markup
} }
}, },
ripples: { ripples: {

111
scss/_forms.scss
View File

@ -1,9 +1,3 @@
@include mdb-form-color($mdb-label-color, $input-border-color);
@include mdb-form-control-validation(warning, $brand-warning);
@include mdb-form-control-validation(danger, $brand-danger);
@include mdb-form-control-validation(success, $brand-success);
@include mdb-form-control-validation(info, $brand-info);
// ----- // -----
// Inputs // Inputs
// //
@ -71,12 +65,29 @@
} }
// ----- // -----
// Labels with mdb-form-group signalled state // State coloring: default,
// //
@include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
.has-success {
@include mdb-form-color($brand-success, $brand-success, $brand-success);
}
.has-info {
@include mdb-form-color($brand-info, $brand-info, $brand-info);
}
.has-warning {
@include mdb-form-color($brand-warning, $brand-warning, $brand-warning);
}
.has-danger {
@include mdb-form-color($brand-danger, $brand-danger, $brand-danger);
}
// 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
//.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations //.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations
.mdb-form-group { .mdb-form-group {
position: relative; position: relative;
@ -85,56 +96,52 @@
// //
// 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
&.label-static, //&.mdb-label-static,
&.label-placeholder, //&.mdb-label-placeholder,
&.label-floating { //&.mdb-label-floating {
//> label { // //> label {
// position: absolute; // // position: absolute;
// pointer-events: none; // // pointer-events: none;
// transition: 0.3s ease all; // // transition: 0.3s ease all;
// //
// // label {
// // position: relative;
// // }
// //}
//}
// //
//// hint to browser for optimization
//&.mdb-label-floating {
// label { // label {
// position: relative; // will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
// }
//}
//
//// hide label-placeholders when the field is not empty
//&.mdb-label-placeholder:not(.is-empty) {
// label {
// display: none;
// } // }
//} //}
}
// hint to browser for optimization
&.label-floating {
label {
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
}
}
// hide label-placeholders when the field is not empty
&.label-placeholder:not(.is-empty) {
label {
display: none;
}
}
&.is-focused { &.is-focused {
label { //label {
color: $brand-primary; // color: $brand-primary;
//
label { // inner label e.g. checkbox or radio label // label { // inner label e.g. checkbox or radio label
color: $mdb-label-color-inner-focus; // color: $mdb-label-color-inner-focus;
} // }
} //}
//
&.label-placeholder { //&.mdb-label-placeholder {
label { // label {
color: $mdb-label-color; // color: $mdb-label-color;
//
label { // inner label e.g. checkbox or radio label // label { // inner label e.g. checkbox or radio label
color: $mdb-label-color-inner-focus; // color: $mdb-label-color-inner-focus;
} // }
} // }
} //}
.mdb-help {
color: $mdb-label-color-inner-focus;
}
} }
// default floating size/location with an mdb-form-group // default floating size/location with an mdb-form-group
@include mdb-form-group-size-variant($font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default"); @include mdb-form-group-size-variant($font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default");

16
scss/_variables.scss
View File

@ -1,19 +1,14 @@
@import "variables/colors"; @import "variables/colors";
// redefine ? TODO: do we need this mdb variant? This is used as $body-color // redefine ? TODO: do we need this mdb variant? This is used as $body-color
$gray-light: rgba($black, 0.26) !default; $gray-light: rgba($black, 0.26) !default;
$gray: rgba($black, .54) !default; $gray: rgba($black, .54) !default;
$gray-dark: rgba($black, 0.87) !default; $gray-dark: rgba($black, 0.87) !default;
// wondering if any of these could still be refactored out, but are definitely in use.
$mdb-text-color-light: rgba($white, 0.84) !default; $mdb-text-color-light: rgba($white, 0.84) !default;
$mdb-text-color-primary: $gray-dark !default; $mdb-text-color-primary: $gray-dark !default;
$mdb-label-color: $gray-light !default;
$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
//--- //---
// Customized BS variables // Customized BS variables
$enable-flex: true; $enable-flex: true;
@ -26,12 +21,15 @@ $enable-flex: true;
@import "variables/bootstrap/state"; @import "variables/bootstrap/state";
@import "variables/bootstrap/type"; @import "variables/bootstrap/type";
// wondering if any of these could still be refactored out, but are definitely in use.
$mdb-label-color: $gray-light !default;
$mdb-label-color-focus: $brand-primary !default;
$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
//--- //---
// verified in use with refactoring to v4 // verified in use with refactoring to v4
$mdb-font-weight-base: 400; $mdb-font-weight-base: 400;
//--- //---
//-- unverified below here //-- unverified below here
$mdb-brand-inverse: $indigo !default; $mdb-brand-inverse: $indigo !default;
@ -54,10 +52,8 @@ $contrast-factor: 40% !default;
// inputs // inputs
//$mdb-input-placeholder-color: #BDBDBD !default; //$mdb-input-placeholder-color: #BDBDBD !default;
//$mdb-input-underline-color: #d2d2d2 !default; //$mdb-input-underline-color: #d2d2d2 !default;
$mdb-label-static-size-ratio: 75 / 100 !default; $mdb-mdb-label-static-size-ratio: 75 / 100 !default;
$mdb-help-size-ratio: 75 / 100 !default; $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

54
scss/mixins/_forms.scss
View File

@ -1,5 +1,5 @@
// must be broken out for reuse - webkit selector breaks firefox // must be broken out for reuse - webkit selector breaks firefox
@mixin label-static($label-top, $static-font-size, $static-line-height) { @mixin mdb-label-static($label-top, $static-font-size, $static-line-height) {
label { label {
top: $label-top; top: $label-top;
left: 0; left: 0;
@ -42,16 +42,21 @@
} }
} }
@mixin mdb-form-color($label-color, $border-color) { @mixin mdb-form-color($label-color, $label-color-focus, $border-color) {
// This may or may not be already in the context of an mdb-form-group depending on if it is // override BS and keep the border-color normal/grey so that overlayed focus animation draws attention
// default or comes from a validation state .form-control {
border-color: $input-border-color;
}
&.is-focused {
// on focus set borders and labels to the validation color
// Use the BS provided mixin for the bulk of the color // Use the BS provided mixin for the bulk of the color
@include form-control-validation($label-color); @include form-control-validation($label-color);
label { label {
color: $label-color; color: $label-color-focus;
} }
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match
@ -66,35 +71,24 @@
.input-group-addon { .input-group-addon {
border-color: $border-color; border-color: $border-color;
} }
}
@mixin mdb-form-control-validation($name, $color) {
// e.g. has-danger
&.has-#{$name} {
// override BS and keep the border-color normal/grey so that overlayed focus animation draws attention
.form-control {
border-color: $input-border-color;
}
&.is-focused {
// on focus set borders and labels to the validation color
@include mdb-form-color($color, $color);
// underline animation color on focus // underline animation color on focus
.mdb-form-control-decorator { .mdb-form-control-decorator {
&::before, &::before,
&::after { &::after {
@include gradient-vertical($color, $input-border-color); @include gradient-vertical($label-color, $input-border-color);
} }
} }
.mdb-help {
color: $mdb-label-color-inner-focus;
} }
} }
} }
@mixin mdb-form-group-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $context: null) { @mixin mdb-form-group-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $context: null) {
$static-font-size: ($mdb-label-static-size-ratio * $font-size) !default; $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size) !default;
$static-line-height: ($mdb-label-static-size-ratio * $line-height) !default; $static-line-height: ($mdb-mdb-label-static-size-ratio * $line-height) !default;
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default; $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
$label-top: $label-as-placeholder-top - ($font-size + $vertical-padding) !default; $label-top: $label-as-placeholder-top - ($font-size + $vertical-padding) !default;
@ -122,8 +116,8 @@
//padding-top: ($label-top-margin + $static-font-size); //padding-top: ($label-top-margin + $static-font-size);
// placeholder positioning // placeholder positioning
&.label-floating, &.mdb-label-floating,
&.label-placeholder { &.mdb-label-placeholder {
label, label,
label { label {
@debug "top: #{$label-as-placeholder-top}"; @debug "top: #{$label-as-placeholder-top}";
@ -134,14 +128,14 @@
} }
// static, focused, or autofill floating labels // static, focused, or autofill floating labels
&.label-static, &.mdb-label-static,
&.label-floating.is-focused, &.mdb-label-floating.is-focused,
&.label-floating:not(.is-empty) { &.mdb-label-floating:not(.is-empty) {
@include label-static($label-top, $static-font-size, $static-line-height); @include mdb-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 // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
&.label-floating input.form-control:-webkit-autofill ~ label { &.mdb-label-floating input.form-control:-webkit-autofill ~ label {
@include label-static($label-top, $static-font-size, $static-line-height); @include mdb-label-static($label-top, $static-font-size, $static-line-height);
} }
} }
} }

2
scss/plugins/_plugin-selectize.scss
View File

@ -37,7 +37,7 @@
// border: 0; // border: 0;
// background: transparent; // background: transparent;
// } // }
// &.label-floating-fix input { // &.mdb-label-floating-fix input {
// opacity: 0; // opacity: 0;
// } // }
// > div, > .item { // > div, > .item {