fixed color of labels and floating labels

This commit is contained in:
FezVrasta 2015-03-18 14:46:06 +01:00
parent ea57cde490
commit b4f40e2fb6
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);
}
}