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

added input style for read-only and invalid, fixed disabled style

Browse Source
This commit is contained in:
FezVrasta 2016-08-03 00:51:17 +02:00
parent c2e3218e05
commit 528f56f38a
3 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_forms.scss
View File

@ -28,12 +28,6 @@ form {
border: 0; border: 0;
transition: background 0s ease-out; transition: background 0s ease-out;
// on disabled, kill the bg animation image and fall back to a simple dotted bottom border
@include bmd-disabled() {
background-image: none;
border-bottom: $input-btn-border-width dotted $input-border-color;
}
// The border bottom should be static in all states, the decorator will be animated over this. // The border bottom should be static in all states, the decorator will be animated over this.
&:focus, &:focus,
.bmd-form-group.is-focused & { .bmd-form-group.is-focused & {

5
scss/_variables.scss
View File

@ -46,7 +46,10 @@ $enable-shadows: true; // enable shadows, set to false to turn off shadows
@import "variables/menu"; @import "variables/menu";
@import "variables/drawer"; @import "variables/drawer";
$bmd-label-color-focus: $brand-primary !default; $bmd-label-color-focus: $brand-primary !default;
$bmd-invalid-underline: $red-a700 !default;
$bmd-readonly-underline: $input-border-color !default;
//--- //---
// verified in use with refactoring to v4 // verified in use with refactoring to v4

19
scss/mixins/_forms.scss
View File

@ -74,7 +74,10 @@
.form-control { .form-control {
// underline animation color on focus // underline animation color on focus
$underline-background-image: linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px); $underline-background-image: linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
$underline-background-image-invalid: linear-gradient(to top, $bmd-invalid-underline 2px, fade-out($bmd-invalid-underline, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
$underline-background-image-readonly: linear-gradient(to top, $bmd-readonly-underline 1px, fade-out($bmd-readonly-underline, 1) 1px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
$underline-background-image-disabled: linear-gradient(to right, $input-border-color 0%, $input-border-color 30%, transparent 30%, transparent 100%);
// bg image is always there, we just need to reveal it // bg image is always there, we just need to reveal it
&, &,
@ -82,6 +85,20 @@
background-image: $underline-background-image; background-image: $underline-background-image;
} }
&:invalid {
background-image: $underline-background-image-invalid;
}
&:read-only {
background-image: $underline-background-image-readonly;
}
@include bmd-disabled() {
background-image: $underline-background-image-disabled;
background-repeat: repeat-x;
background-size: 3px 1px;
}
// allow underline focus image and validation images to coexist // allow underline focus image and validation images to coexist
&.form-control-success { &.form-control-success {
&, &,