mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +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

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

@ -35644,7 +35644,10 @@ fieldset[disabled] .form-control.focus:disabled,
font-size: 10px;
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 {
color: #f44336;
}
@ -35652,11 +35655,8 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus ~ .material-input:after {
background-color: #009587;
}
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
.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:invalid {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-control-wrapper .form-control.empty ~ .floating-label {
opacity: 1;
@ -35679,6 +35679,9 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper select ~ .material-input:after {
display: none;
}
.form-control-wrapper select {
appearance: none;
}
.form-group.has-warning .form-control {
box-shadow: none;
}
@ -73420,4 +73423,4 @@ hr.on-light {
.shadow-z-5 {
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
/*# sourceMappingURL=material-fullpalette.css.map */
/*# sourceMappingURL=material-fullpalette.css.map */

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

File diff suppressed because one or more lines are too long

4
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

17
dist/css/material.css vendored
View File

@ -5033,7 +5033,10 @@ fieldset[disabled] .form-control.focus:disabled,
font-size: 10px;
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 {
color: #f44336;
}
@ -5041,11 +5044,8 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus ~ .material-input:after {
background-color: #009587;
}
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
.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:invalid {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-control-wrapper .form-control.empty ~ .floating-label {
opacity: 1;
@ -5068,6 +5068,9 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper select ~ .material-input:after {
display: none;
}
.form-control-wrapper select {
appearance: none;
}
.form-group.has-warning .form-control {
box-shadow: none;
}
@ -8286,4 +8289,4 @@ hr.on-light {
.shadow-z-5 {
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
/*# sourceMappingURL=material.css.map */
/*# sourceMappingURL=material.css.map */

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

File diff suppressed because one or more lines are too long

4
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

2
dist/css/roboto.css vendored
View File

@ -22,4 +22,4 @@
font-weight: 400;
src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(../fonts/RobotoDraftItalic.woff2) format('woff2'), url(../fonts/RobotoDraftItalic.woff) format('woff');
}
/*# sourceMappingURL=roboto.css.map */
/*# sourceMappingURL=roboto.css.map */

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

@ -1,2 +1,2 @@
@font-face{font-family:RobotoDraft;src:local('RobotoDraft'),local('RobotoDraft-Regular'),local('Roboto-Regular'),url(../fonts/RobotoDraftRegular.woff2) format('woff2'),url(../fonts/RobotoDraftRegular.woff) format('woff')}@font-face{font-family:RobotoDraft;font-weight:500;src:local('RobotoDraft Medium'),local('RobotoDraft-Medium'),local('Roboto-Medium'),url(../fonts/RobotoDraftMedium.woff2) format('woff2'),url(../fonts/RobotoDraftMedium.woff) format('woff')}@font-face{font-family:RobotoDraft;font-weight:700;src:local('RobotoDraft Bold'),local('RobotoDraft-Bold'),local('Roboto-Bold'),url(../fonts/RobotoDraftBold.woff2) format('woff2'),url(../fonts/RobotoDraftBold.woff) format('woff')}@font-face{font-family:RobotoDraft;font-style:italic;src:local('RobotoDraft Italic'),local('RobotoDraft-Italic'),local('Roboto-Italic'),url(../fonts/RobotoDraftItalic.woff2) format('woff2'),url(../fonts/RobotoDraftItalic.woff) format('woff')}
/*# sourceMappingURL=roboto.min.css.map */
/*# sourceMappingURL=roboto.min.css.map */

32
less/_inputs.less
View File

@ -23,7 +23,7 @@ select[multiple].form-control {
.form-control {
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-repeat: no-repeat;
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 {
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;
box-shadow: none;
background-size: 0 2px, 100% 1px;
@ -66,16 +66,17 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
font-size: 10px;
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;
}
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
background-color: @input-default;
}
.form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input {
&:before, &:after {
background-color: @input-danger;
}
.form-control:invalid {
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
}
.form-control.empty ~ .floating-label {
opacity: 1;
@ -99,6 +100,11 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
display: none;
}
// Fix for OS X
select {
appearance: none;
}
}
.form-group {
@ -107,7 +113,7 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
box-shadow: none;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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, {
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, {
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(~" input.form-control:focus ~ .floating-label", color, @input-default);

1
less/_variables.less
View File

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