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

fixed input behaviors

Browse Source
This commit is contained in:
FezVrasta 2015-03-17 18:08:03 +01:00
parent 0c8e3d34c1
commit 9339c8e3da
12 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
dist/css/material-fullpalette.css vendored
View File

@ -35644,7 +35644,10 @@ fieldset[disabled] .form-control.focus:disabled,
font-size: 10px; font-size: 10px;
opacity: 1; opacity: 1;
} }
.form-control-wrapper .form-control:focus:invalid ~ .floating-label, .form-control-wrapper .form-control:focus ~ .floating-label {
color: #009587;
}
.form-control-wrapper .form-control:not(.empty):invalid ~ .floating-label,
.form-control-wrapper .form-control.focus:invalid ~ .floating-label { .form-control-wrapper .form-control.focus:invalid ~ .floating-label {
color: #f44336; color: #f44336;
} }
@ -35652,11 +35655,8 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus ~ .material-input:after { .form-control-wrapper .form-control.focus ~ .material-input:after {
background-color: #009587; background-color: #009587;
} }
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before, .form-control-wrapper .form-control:invalid {
.form-control-wrapper .form-control.focus:invalid ~ .material-input:before, background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
.form-control-wrapper .form-control:focus:invalid ~ .material-input:after,
.form-control-wrapper .form-control.focus:invalid ~ .material-input:after {
background-color: #f44336;
} }
.form-control-wrapper .form-control.empty ~ .floating-label { .form-control-wrapper .form-control.empty ~ .floating-label {
opacity: 1; opacity: 1;
@ -35679,6 +35679,9 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper select ~ .material-input:after { .form-control-wrapper select ~ .material-input:after {
display: none; display: none;
} }
.form-control-wrapper select {
appearance: none;
}
.form-group.has-warning .form-control { .form-group.has-warning .form-control {
box-shadow: none; box-shadow: none;
} }

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

15
dist/css/material.css vendored
View File

@ -5033,7 +5033,10 @@ fieldset[disabled] .form-control.focus:disabled,
font-size: 10px; font-size: 10px;
opacity: 1; opacity: 1;
} }
.form-control-wrapper .form-control:focus:invalid ~ .floating-label, .form-control-wrapper .form-control:focus ~ .floating-label {
color: #009587;
}
.form-control-wrapper .form-control:not(.empty):invalid ~ .floating-label,
.form-control-wrapper .form-control.focus:invalid ~ .floating-label { .form-control-wrapper .form-control.focus:invalid ~ .floating-label {
color: #f44336; color: #f44336;
} }
@ -5041,11 +5044,8 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus ~ .material-input:after { .form-control-wrapper .form-control.focus ~ .material-input:after {
background-color: #009587; background-color: #009587;
} }
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before, .form-control-wrapper .form-control:invalid {
.form-control-wrapper .form-control.focus:invalid ~ .material-input:before, background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
.form-control-wrapper .form-control:focus:invalid ~ .material-input:after,
.form-control-wrapper .form-control.focus:invalid ~ .material-input:after {
background-color: #f44336;
} }
.form-control-wrapper .form-control.empty ~ .floating-label { .form-control-wrapper .form-control.empty ~ .floating-label {
opacity: 1; opacity: 1;
@ -5068,6 +5068,9 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper select ~ .material-input:after { .form-control-wrapper select ~ .material-input:after {
display: none; display: none;
} }
.form-control-wrapper select {
appearance: none;
}
.form-group.has-warning .form-control { .form-group.has-warning .form-control {
box-shadow: none; box-shadow: none;
} }

2
dist/css/material.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

32
less/_inputs.less
View File

@ -23,7 +23,7 @@ select[multiple].form-control {
.form-control { .form-control {
border: 0; border: 0;
background-image: linear-gradient(@primary, @primary), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
background-size: 0 2px, 100% 1px; background-size: 0 2px, 100% 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px"); background-position: center bottom, center calc(~"100% - 1px");
@ -40,7 +40,7 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
.form-control:focus, .form-control.focus { .form-control:focus, .form-control.focus {
outline: none; outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
animation: input-highlight 0.5s forwards; animation: input-highlight 0.5s forwards;
box-shadow: none; box-shadow: none;
background-size: 0 2px, 100% 1px; background-size: 0 2px, 100% 1px;
@ -66,16 +66,17 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
font-size: 10px; font-size: 10px;
opacity: 1; opacity: 1;
} }
.form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label { .form-control:focus ~ .floating-label {
color: @primary;
}
.form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
color: @input-danger; color: @input-danger;
} }
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after { .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
background-color: @input-default; background-color: @input-default;
} }
.form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input { .form-control:invalid {
&:before, &:after { background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
background-color: @input-danger;
}
} }
.form-control.empty ~ .floating-label { .form-control.empty ~ .floating-label {
opacity: 1; opacity: 1;
@ -99,6 +100,11 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
display: none; display: none;
} }
// Fix for OS X
select {
appearance: none;
}
} }
.form-group { .form-group {
@ -107,7 +113,7 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
box-shadow: none; box-shadow: none;
} }
.material-input:focus, .form-control:focus, .form-control.focus { .material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-warning, @input-warning), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@input-warning, @input-warning), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none; box-shadow: none;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:focus ~ .floating-label {
@ -119,7 +125,7 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
box-shadow: none; box-shadow: none;
} }
.material-input:focus, .form-control:focus, .form-control.focus { .material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none; box-shadow: none;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:focus ~ .floating-label {
@ -131,7 +137,7 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
box-shadow: none; box-shadow: none;
} }
.material-input:focus, .form-control:focus, .form-control.focus { .material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-success, @input-success), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@input-success, @input-success), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none; box-shadow: none;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:focus ~ .floating-label {
@ -143,7 +149,7 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
box-shadow: none; box-shadow: none;
} }
.material-input:focus, .form-control:focus, .form-control.focus { .material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient(@input-info, @input-info), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@input-info, @input-info), linear-gradient(@input-underline-color, @input-underline-color);
box-shadow: none; box-shadow: none;
} }
.control-label, input.form-control:focus ~ .floating-label { .control-label, input.form-control:focus ~ .floating-label {
@ -151,10 +157,10 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
} }
} }
.generic-variations(~" .form-control:focus", @primary, { .generic-variations(~" .form-control:focus", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
}); });
.generic-variations(~" .form-control.focus", @primary, { .generic-variations(~" .form-control.focus", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
}); });
.variations(~" .control-label", color, @lightbg-text); .variations(~" .control-label", color, @lightbg-text);
.variations(~" input.form-control:focus ~ .floating-label", color, @input-default); .variations(~" input.form-control:focus ~ .floating-label", color, @input-default);

1
less/_variables.less
View File

@ -81,6 +81,7 @@
// Global Material variables // Global Material variables
@material-border-radius: 2px; @material-border-radius: 2px;
@input-underline-color: #D2D2D2;
// Card // Card
@card-body-text: @lightbg-text; @card-body-text: @lightbg-text;