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

working on inputs, label colors and focus. Introduced .mdb-help to replace .help-block

Browse Source
This commit is contained in:
Kevin Ross 2015-12-10 13:23:01 -06:00
parent e437748447
commit ca916b4729
7 changed files with 59 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<fieldset class="form-group label-floating">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<fieldset class="form-group label-floating">
<label for="exampleInputPassword1">Password</label>

2
scss/_checkboxes.scss
View File

@ -6,7 +6,7 @@ label.checkbox-inline,
padding-left: 0; // Reset for Bootstrap rule
cursor: pointer;
@include mdb-label-color-toggle-focus();
@include mdb-label-color-inner-focus();
// Hide native checkbox
input[type=checkbox] {

42
scss/_forms.scss
View File

@ -1,3 +1,4 @@
@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);
@ -53,6 +54,22 @@
}
// End: Focus underline animation =================================
// Help blocks (not in v4)
// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?
//
.mdb-help {
position: absolute;
display: none;
font-size: 80%;
font-weight: normal;
@extend .text-muted;
.mdb-form-group.is-focused & {
display: block;
}
}
// -----
// Labels with mdb-form-group signalled state
//
@ -79,9 +96,8 @@
}
// hint to browser for optimization
// TODO: evaluate effectiveness - looking for community feedback
&.label-floating label.control-label {
will-change: left, top, contents;
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
}
// hide label-placeholders when the field is not empty
@ -91,30 +107,26 @@
}
}
// Help blocks (not in v4) - 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;
//}
// mdb-form-group is-focused display
&.is-focused {
label,
label, // this is a control-label, but often times (too often) not marked as such so work around bad markup
label.control-label {
color: $brand-primary;
label { // inner label
color: $mdb-label-color-inner-focus;
}
}
&.label-placeholder {
label,
label.control-label {
//color: $mdb-input-placeholder-color;
color: $mdb-label-color;
}
}
//.help-block {
// display: block;
//}
.mdb-help {
color: $mdb-label-color-inner-focus;
}
}
}

2
scss/_radios.scss
View File

@ -20,7 +20,7 @@ label.radio-inline,
position: relative;
padding-left: 45px;
@include mdb-label-color-toggle-focus();
@include mdb-label-color-inner-focus();
cursor: pointer;

2
scss/_switch.scss
View File

@ -5,7 +5,7 @@
}
label {
cursor: pointer;
@include mdb-label-color-toggle-focus();
@include mdb-label-color-inner-focus();
// Hide original checkbox
input[type=checkbox] {

20
scss/_variables.scss
View File

@ -1,10 +1,18 @@
@import "variables/colors";
$mdb-text-color-primary: rgba($black, 0.87) !default;
$mdb-text-color-light: rgba($white, 0.84) !default;
// redefine ? TODO: do we need this mdb variant? This is used as $body-color
$gray-dark: $mdb-text-color-primary;
$gray-light: rgba($black, 0.26) !default;
$gray: rgba($black, .54) !default;
$gray-dark: rgba($black, 0.87) !default;
$mdb-text-color-light: rgba($white, 0.84) !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
@ -46,8 +54,6 @@ $contrast-factor: 40% !default;
// inputs
//$mdb-input-placeholder-color: #BDBDBD !default;
$mdb-label-color: rgba($black, 0.26) !default;
$mdb-label-color-toggle-focus: rgba($black, .54) !default;
//$mdb-input-underline-color: #d2d2d2 !default;
@ -82,7 +88,7 @@ $mdb-checkbox-size: 20px !default;
$mdb-checkbox-animation-ripple: 500ms !default;
$mdb-checkbox-animation-check: 0.3s !default;
$mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default;
$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
// Popovers and Popups
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
@ -92,7 +98,7 @@ $mdb-popover-color: #ececec !default;
$mdb-dropdown-font-size: 16px !default;
// Radio:
$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
$mdb-radio-color-off: $mdb-label-color-inner-focus !default;
$mdb-radio-color-on: $brand-primary !default;
// Buttons:

26
scss/mixins/_forms.scss
View File

@ -36,16 +36,24 @@
//margin: 16px 0 0 0; // std and lg
}
.help-block {
//margin-top: 0; // allow the input margin to set-off the top of the help-block
//font-size: $help-block-font-size;
}
//.mdb-help {
// margin-top: 0; // allow the input margin to set-off the top of the help-block
// font-size: $help-block-font-size;
//}
}
@mixin mdb-form-color($label-color, $border-color) {
// This may or may not be already in the context of an mdb-form-group depending on if it is
// default or comes from a validation state
// Use the BS provided mixin for the bulk of the color
@include form-control-validation($label-color);
label {
color: $label-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: $border-color;
@ -58,17 +66,13 @@
.input-group-addon {
border-color: $border-color;
}
label {
color: $label-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 focus animation draws attention
// override BS and keep the border-color normal/grey so that overlayed focus animation draws attention
.form-control {
border-color: $input-border-color;
}
@ -140,7 +144,7 @@
}
}
@mixin mdb-label-color-toggle-focus() {
@mixin mdb-label-color-inner-focus() {
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
.mdb-form-group.is-focused & {
color: $mdb-label-color;
@ -148,7 +152,7 @@
// on focus just darken the specific labels, do not turn them to the brand-primary
&:hover,
&:focus {
color: $mdb-label-color-toggle-focus;
color: $mdb-label-color-inner-focus;
}
// correct the above focus color for disabled items