fixed color of labels and floating labels

This commit is contained in:
FezVrasta 2015-03-18 14:46:06 +01:00
parent 58c8eb0c44
commit c6d0850ae1
11 changed files with 49 additions and 261 deletions

View File

@ -2594,67 +2594,6 @@ a:hover,
a:focus {
color: #009688;
}
body .well,
.container .well,
.container-fluid .well,
body .well:not([class^="well well-material-"]),
.container .well:not([class^="well well-material-"]),
.container-fluid .well:not([class^="well well-material-"]),
body .well .form-control,
.container .well .form-control,
.container-fluid .well .form-control,
body .well:not([class^="well well-material-"]) .form-control,
.container .well:not([class^="well well-material-"]) .form-control,
.container-fluid .well:not([class^="well well-material-"]) .form-control {
color: rgba(0, 0, 0, 0.84);
}
body .well .floating-label,
.container .well .floating-label,
.container-fluid .well .floating-label,
body .well:not([class^="well well-material-"]) .floating-label,
.container .well:not([class^="well well-material-"]) .floating-label,
.container-fluid .well:not([class^="well well-material-"]) .floating-label {
color: #7e7e7e;
}
body .well .form-control::-webkit-input-placeholder,
.container .well .form-control::-webkit-input-placeholder,
.container-fluid .well .form-control::-webkit-input-placeholder,
body .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder,
.container .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder,
.container-fluid .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder {
color: #7e7e7e;
}
body .well .form-control::-moz-placeholder,
.container .well .form-control::-moz-placeholder,
.container-fluid .well .form-control::-moz-placeholder,
body .well:not([class^="well well-material-"]) .form-control::-moz-placeholder,
.container .well:not([class^="well well-material-"]) .form-control::-moz-placeholder,
.container-fluid .well:not([class^="well well-material-"]) .form-control::-moz-placeholder {
color: #7e7e7e;
opacity: 1;
}
body .well .form-control:-ms-input-placeholder,
.container .well .form-control:-ms-input-placeholder,
.container-fluid .well .form-control:-ms-input-placeholder,
body .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder,
.container .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder,
.container-fluid .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder {
color: #7e7e7e;
}
body .well .option,
.container .well .option,
.container-fluid .well .option,
body .well:not([class^="well well-material-"]) .option,
.container .well:not([class^="well well-material-"]) .option,
.container-fluid .well:not([class^="well well-material-"]) .option,
body .well .create,
.container .well .create,
.container-fluid .well .create,
body .well:not([class^="well well-material-"]) .create,
.container .well:not([class^="well well-material-"]) .create,
.container-fluid .well:not([class^="well well-material-"]) .create {
color: rgba(0, 0, 0, 0.84);
}
body .well.well-sm,
.container .well.well-sm,
.container-fluid .well.well-sm {
@ -2665,46 +2604,6 @@ body .well.well-lg,
.container-fluid .well.well-lg {
padding: 26px;
}
body [class^="well well-material-"],
.container [class^="well well-material-"],
.container-fluid [class^="well well-material-"],
body [class^="well well-material-"] .form-control,
.container [class^="well well-material-"] .form-control,
.container-fluid [class^="well well-material-"] .form-control,
body [class^="well well-material-"] .floating-label,
.container [class^="well well-material-"] .floating-label,
.container-fluid [class^="well well-material-"] .floating-label {
color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .form-control,
.container [class^="well well-material-"] .form-control,
.container-fluid [class^="well well-material-"] .form-control {
border-bottom-color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .form-control::-webkit-input-placeholder,
.container [class^="well well-material-"] .form-control::-webkit-input-placeholder,
.container-fluid [class^="well well-material-"] .form-control::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .form-control::-moz-placeholder,
.container [class^="well well-material-"] .form-control::-moz-placeholder,
.container-fluid [class^="well well-material-"] .form-control::-moz-placeholder {
color: rgba(255, 255, 255, 0.84);
opacity: 1;
}
body [class^="well well-material-"] .form-control:-ms-input-placeholder,
.container [class^="well well-material-"] .form-control:-ms-input-placeholder,
.container-fluid [class^="well well-material-"] .form-control:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .option,
.container [class^="well well-material-"] .option,
.container-fluid [class^="well well-material-"] .option,
body [class^="well well-material-"] .create,
.container [class^="well well-material-"] .create,
.container-fluid [class^="well well-material-"] .create {
color: rgba(0, 0, 0, 0.84);
}
body .well,
.container .well,
.container-fluid .well,
@ -35615,6 +35514,15 @@ select[multiple].form-control.focus {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
@ -35645,7 +35553,7 @@ fieldset[disabled] .form-control.focus:disabled,
position: relative;
}
.form-control-wrapper .floating-label {
color: #7E7E7E;
color: #bdbdbd;
font-size: 14px;
position: absolute;
pointer-events: none;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

112
dist/css/material.css vendored
View File

@ -2594,67 +2594,6 @@ a:hover,
a:focus {
color: #009688;
}
body .well,
.container .well,
.container-fluid .well,
body .well:not([class^="well well-material-"]),
.container .well:not([class^="well well-material-"]),
.container-fluid .well:not([class^="well well-material-"]),
body .well .form-control,
.container .well .form-control,
.container-fluid .well .form-control,
body .well:not([class^="well well-material-"]) .form-control,
.container .well:not([class^="well well-material-"]) .form-control,
.container-fluid .well:not([class^="well well-material-"]) .form-control {
color: rgba(0, 0, 0, 0.84);
}
body .well .floating-label,
.container .well .floating-label,
.container-fluid .well .floating-label,
body .well:not([class^="well well-material-"]) .floating-label,
.container .well:not([class^="well well-material-"]) .floating-label,
.container-fluid .well:not([class^="well well-material-"]) .floating-label {
color: #7e7e7e;
}
body .well .form-control::-webkit-input-placeholder,
.container .well .form-control::-webkit-input-placeholder,
.container-fluid .well .form-control::-webkit-input-placeholder,
body .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder,
.container .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder,
.container-fluid .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder {
color: #7e7e7e;
}
body .well .form-control::-moz-placeholder,
.container .well .form-control::-moz-placeholder,
.container-fluid .well .form-control::-moz-placeholder,
body .well:not([class^="well well-material-"]) .form-control::-moz-placeholder,
.container .well:not([class^="well well-material-"]) .form-control::-moz-placeholder,
.container-fluid .well:not([class^="well well-material-"]) .form-control::-moz-placeholder {
color: #7e7e7e;
opacity: 1;
}
body .well .form-control:-ms-input-placeholder,
.container .well .form-control:-ms-input-placeholder,
.container-fluid .well .form-control:-ms-input-placeholder,
body .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder,
.container .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder,
.container-fluid .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder {
color: #7e7e7e;
}
body .well .option,
.container .well .option,
.container-fluid .well .option,
body .well:not([class^="well well-material-"]) .option,
.container .well:not([class^="well well-material-"]) .option,
.container-fluid .well:not([class^="well well-material-"]) .option,
body .well .create,
.container .well .create,
.container-fluid .well .create,
body .well:not([class^="well well-material-"]) .create,
.container .well:not([class^="well well-material-"]) .create,
.container-fluid .well:not([class^="well well-material-"]) .create {
color: rgba(0, 0, 0, 0.84);
}
body .well.well-sm,
.container .well.well-sm,
.container-fluid .well.well-sm {
@ -2665,46 +2604,6 @@ body .well.well-lg,
.container-fluid .well.well-lg {
padding: 26px;
}
body [class^="well well-material-"],
.container [class^="well well-material-"],
.container-fluid [class^="well well-material-"],
body [class^="well well-material-"] .form-control,
.container [class^="well well-material-"] .form-control,
.container-fluid [class^="well well-material-"] .form-control,
body [class^="well well-material-"] .floating-label,
.container [class^="well well-material-"] .floating-label,
.container-fluid [class^="well well-material-"] .floating-label {
color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .form-control,
.container [class^="well well-material-"] .form-control,
.container-fluid [class^="well well-material-"] .form-control {
border-bottom-color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .form-control::-webkit-input-placeholder,
.container [class^="well well-material-"] .form-control::-webkit-input-placeholder,
.container-fluid [class^="well well-material-"] .form-control::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .form-control::-moz-placeholder,
.container [class^="well well-material-"] .form-control::-moz-placeholder,
.container-fluid [class^="well well-material-"] .form-control::-moz-placeholder {
color: rgba(255, 255, 255, 0.84);
opacity: 1;
}
body [class^="well well-material-"] .form-control:-ms-input-placeholder,
.container [class^="well well-material-"] .form-control:-ms-input-placeholder,
.container-fluid [class^="well well-material-"] .form-control:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.84);
}
body [class^="well well-material-"] .option,
.container [class^="well well-material-"] .option,
.container-fluid [class^="well well-material-"] .option,
body [class^="well well-material-"] .create,
.container [class^="well well-material-"] .create,
.container-fluid [class^="well well-material-"] .create {
color: rgba(0, 0, 0, 0.84);
}
body .well,
.container .well,
.container-fluid .well,
@ -5004,6 +4903,15 @@ select[multiple].form-control.focus {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
@ -5034,7 +4942,7 @@ fieldset[disabled] .form-control.focus:disabled,
position: relative;
}
.form-control-wrapper .floating-label {
color: #7E7E7E;
color: #bdbdbd;
font-size: 14px;
position: absolute;
pointer-events: none;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -29,13 +29,30 @@ select[multiple].form-control {
background-position: center bottom, center calc(~"100% - 1px");
background-color: transparent;
background-color: rgba(0,0,0,0);
&::-webkit-input-placeholder {
color: @input-placeholder-color;
}
&::-moz-placeholder {
color: @input-placeholder-color;
}
&:-ms-input-placeholder {
color: @input-placeholder-color;
}
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0,0,0,0);
}
fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:disabled, .form-control:disabled, fieldset[disabled] .form-control:focus:disabled, .form-control-wrapper .form-control:focus:disabled, .form-control:focus:disabled, fieldset[disabled] .form-control.focus:disabled, .form-control-wrapper .form-control.focus:disabled, .form-control.focus:disabled {
border: 0;
fieldset[disabled] .form-control:disabled,
.form-control-wrapper .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control-wrapper .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus:disabled,
.form-control.focus:disabled {
border: 0; // Ugly override of Bootstrap border
}
.form-control:focus, .form-control.focus {
@ -51,7 +68,7 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
position: relative;
.floating-label {
color: #7E7E7E;
color: @input-placeholder-color;
font-size: 14px;
position: absolute;
pointer-events: none;

View File

@ -87,3 +87,6 @@
// Popovers and Popups
@popover-background: rgba(101, 101, 101, 0.9);
@popover-color: #ececec;
// Inputs
@input-placeholder-color: #BDBDBD;

View File

@ -1,58 +1,11 @@
body, .container, .container-fluid {
.well, .well:not([class^="well well-material-"]) {
&, .form-control {
color: @lightbg-text;
}
.floating-label {
color: #7e7e7e;
}
.form-control {
&::-webkit-input-placeholder {
color: #7e7e7e;
}
&::-moz-placeholder {
color: #7e7e7e;
opacity: 1;
}
&:-ms-input-placeholder {
color: #7e7e7e;
}
}
.option, .create {
color: @lightbg-text;
}
}
.well.well-sm {
padding: 10px;
}
.well.well-lg {
padding: 26px;
}
[class^="well well-material-"] {
&, .form-control, .floating-label {
color: @darkbg-text;
}
.form-control {
border-bottom-color: @darkbg-text;
&::-webkit-input-placeholder {
color: @darkbg-text;
}
&::-moz-placeholder {
color: @darkbg-text;
opacity: 1;
}
&:-ms-input-placeholder {
color: @darkbg-text;
}
}
// Rule to fix selectize plugin
.option, .create {
color: @lightbg-text;
}
}
.well, .jumbotron {
background-color: #fff;
@ -64,7 +17,6 @@ body, .container, .container-fluid {
p {
font-weight: 300;
}
.variations(~"", background-color, #FFF);
}
}