Solves #731 - webkit specific rule must be specified separately otherwise firefox ignores the ruleset

This commit is contained in:
Kevin Ross 2015-11-21 06:36:20 -06:00
parent 566453f56d
commit 6a3263a0cc
10 changed files with 440 additions and 422 deletions

File diff suppressed because it is too large Load Diff

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

131
dist/css/material.css vendored
View File

@ -2571,7 +2571,7 @@ Then, run this script to get the list.
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
} }
body { body {
background-color: #eeeeee; background-color: #EEEEEE;
} }
body.inverse { body.inverse {
background: #333333; background: #333333;
@ -2655,7 +2655,7 @@ body .well-default,
body .jumbotron-default, body .jumbotron-default,
.container .jumbotron-default, .container .jumbotron-default,
.container-fluid .jumbotron-default { .container-fluid .jumbotron-default {
background-color: #ffffff; background-color: #FFF;
} }
body .well-black, body .well-black,
.container .well-black, .container .well-black,
@ -5214,7 +5214,7 @@ output {
} }
.form-group .form-control { .form-group .form-control {
border: 0; border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
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);
@ -5225,15 +5225,15 @@ output {
border-radius: 0; border-radius: 0;
} }
.form-group .form-control::-moz-placeholder { .form-group .form-control::-moz-placeholder {
color: #bdbdbd; color: #BDBDBD;
font-weight: normal; font-weight: normal;
} }
.form-group .form-control:-ms-input-placeholder { .form-group .form-control:-ms-input-placeholder {
color: #bdbdbd; color: #BDBDBD;
font-weight: normal; font-weight: normal;
} }
.form-group .form-control::-webkit-input-placeholder { .form-group .form-control::-webkit-input-placeholder {
color: #bdbdbd; color: #BDBDBD;
font-weight: normal; font-weight: normal;
} }
.form-group .form-control[readonly], .form-group .form-control[readonly],
@ -5244,11 +5244,11 @@ fieldset[disabled] .form-group .form-control {
.form-group .form-control[disabled], .form-group .form-control[disabled],
fieldset[disabled] .form-group .form-control { fieldset[disabled] .form-group .form-control {
background-image: none; background-image: none;
border-bottom: 1px dotted #d2d2d2; border-bottom: 1px dotted #D2D2D2;
} }
.form-group.is-focused .form-control { .form-group.is-focused .form-control {
outline: none; outline: none;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
background-size: 100% 2px, 100% 1px; background-size: 100% 2px, 100% 1px;
box-shadow: none; box-shadow: none;
transition-duration: 0.3s; transition-duration: 0.3s;
@ -5265,7 +5265,7 @@ fieldset[disabled] .form-group .form-control {
} }
.form-group label, .form-group label,
.form-group label.control-label { .form-group label.control-label {
color: #bdbdbd; color: #BDBDBD;
font-weight: normal; font-weight: normal;
} }
.form-group label.control-label { .form-group label.control-label {
@ -5276,7 +5276,7 @@ fieldset[disabled] .form-group .form-control {
} }
.form-group label.control-label, .form-group label.control-label,
.form-group-default label.control-label { .form-group-default label.control-label {
color: #bdbdbd; color: #BDBDBD;
} }
.form-group-black label.control-label { .form-group-black label.control-label {
color: #000000; color: #000000;
@ -5446,7 +5446,7 @@ fieldset[disabled] .form-group .form-control {
} }
.form-group.is-focused.label-placeholder label.control-label, .form-group.is-focused.label-placeholder label.control-label,
.form-group-default.is-focused.label-placeholder label.control-label { .form-group-default.is-focused.label-placeholder label.control-label {
color: #bdbdbd; color: #BDBDBD;
} }
.form-group-black.is-focused.label-placeholder label.control-label { .form-group-black.is-focused.label-placeholder label.control-label {
color: #000000; color: #000000;
@ -5560,14 +5560,15 @@ fieldset[disabled] .form-group .form-control {
font-size: 16px; font-size: 16px;
line-height: 1.42857143; line-height: 1.42857143;
} }
.form-group.label-static ~ label.control-label,
.form-group.label-floating.is-focused ~ label.control-label,
.form-group.label-floating:not(.is-empty) ~ label.control-label,
.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label,
.form-group.label-static label.control-label, .form-group.label-static label.control-label,
.form-group.label-floating.is-focused label.control-label, .form-group.label-floating.is-focused label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label, .form-group.label-floating:not(.is-empty) label.control-label {
.form-group.label-floating input.form-control:-webkit-autofill label.control-label { top: -30px;
left: 0;
font-size: 12px;
line-height: 1.07142857;
}
.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label label.control-label {
top: -30px; top: -30px;
left: 0; left: 0;
font-size: 12px; font-size: 12px;
@ -5608,14 +5609,15 @@ fieldset[disabled] .form-group .form-control {
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
} }
.form-group.form-group-sm.label-static ~ label.control-label,
.form-group.form-group-sm.label-floating.is-focused ~ label.control-label,
.form-group.form-group-sm.label-floating:not(.is-empty) ~ label.control-label,
.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill ~ label.control-label,
.form-group.form-group-sm.label-static label.control-label, .form-group.form-group-sm.label-static label.control-label,
.form-group.form-group-sm.label-floating.is-focused label.control-label, .form-group.form-group-sm.label-floating.is-focused label.control-label,
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label, .form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill label.control-label { top: -25px;
left: 0;
font-size: 9px;
line-height: 1.125;
}
.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill ~ label.control-label label.control-label {
top: -25px; top: -25px;
left: 0; left: 0;
font-size: 9px; font-size: 9px;
@ -5656,14 +5658,15 @@ fieldset[disabled] .form-group .form-control {
font-size: 18px; font-size: 18px;
line-height: 1.3333333; line-height: 1.3333333;
} }
.form-group.form-group-lg.label-static ~ label.control-label,
.form-group.form-group-lg.label-floating.is-focused ~ label.control-label,
.form-group.form-group-lg.label-floating:not(.is-empty) ~ label.control-label,
.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill ~ label.control-label,
.form-group.form-group-lg.label-static label.control-label, .form-group.form-group-lg.label-static label.control-label,
.form-group.form-group-lg.label-floating.is-focused label.control-label, .form-group.form-group-lg.label-floating.is-focused label.control-label,
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label, .form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill label.control-label { top: -32px;
left: 0;
font-size: 14px;
line-height: 0.99999998;
}
.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill ~ label.control-label label.control-label {
top: -32px; top: -32px;
left: 0; left: 0;
font-size: 14px; font-size: 14px;
@ -5678,94 +5681,94 @@ fieldset[disabled] .form-group .form-control {
} }
.form-group.is-focused .form-control, .form-group.is-focused .form-control,
.form-group-default.is-focused .form-control { .form-group-default.is-focused .form-control {
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-black.is-focused .form-control { .form-group-black.is-focused .form-control {
background-image: linear-gradient(#000000, #000000), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#000000, #000000), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-white.is-focused .form-control { .form-group-white.is-focused .form-control {
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-inverse.is-focused .form-control { .form-group-inverse.is-focused .form-control {
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-primary.is-focused .form-control { .form-group-primary.is-focused .form-control {
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-success.is-focused .form-control { .form-group-success.is-focused .form-control {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-info.is-focused .form-control { .form-group-info.is-focused .form-control {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-warning.is-focused .form-control { .form-group-warning.is-focused .form-control {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-danger.is-focused .form-control { .form-group-danger.is-focused .form-control {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-red.is-focused .form-control { .form-group-material-red.is-focused .form-control {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-pink.is-focused .form-control { .form-group-material-pink.is-focused .form-control {
background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-purple.is-focused .form-control { .form-group-material-purple.is-focused .form-control {
background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-deep-purple.is-focused .form-control { .form-group-material-deep-purple.is-focused .form-control {
background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-indigo.is-focused .form-control { .form-group-material-indigo.is-focused .form-control {
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-blue.is-focused .form-control { .form-group-material-blue.is-focused .form-control {
background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-light-blue.is-focused .form-control { .form-group-material-light-blue.is-focused .form-control {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-cyan.is-focused .form-control { .form-group-material-cyan.is-focused .form-control {
background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-teal.is-focused .form-control { .form-group-material-teal.is-focused .form-control {
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-green.is-focused .form-control { .form-group-material-green.is-focused .form-control {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-light-green.is-focused .form-control { .form-group-material-light-green.is-focused .form-control {
background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-lime.is-focused .form-control { .form-group-material-lime.is-focused .form-control {
background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-yellow.is-focused .form-control { .form-group-material-yellow.is-focused .form-control {
background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-amber.is-focused .form-control { .form-group-material-amber.is-focused .form-control {
background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-orange.is-focused .form-control { .form-group-material-orange.is-focused .form-control {
background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-deep-orange.is-focused .form-control { .form-group-material-deep-orange.is-focused .form-control {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-brown.is-focused .form-control { .form-group-material-brown.is-focused .form-control {
background-image: linear-gradient(#795548, #795548), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#795548, #795548), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-grey.is-focused .form-control { .form-group-material-grey.is-focused .form-control {
background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group-material-blue-grey.is-focused .form-control { .form-group-material-blue-grey.is-focused .form-control {
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group.has-warning .form-control { .form-group.has-warning .form-control {
box-shadow: none; box-shadow: none;
} }
.form-group.has-warning.is-focused .form-control { .form-group.has-warning.is-focused .form-control {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group.has-warning label.control-label, .form-group.has-warning label.control-label,
.form-group.has-warning .help-block { .form-group.has-warning .help-block {
@ -5775,7 +5778,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none; box-shadow: none;
} }
.form-group.has-error.is-focused .form-control { .form-group.has-error.is-focused .form-control {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group.has-error label.control-label, .form-group.has-error label.control-label,
.form-group.has-error .help-block { .form-group.has-error .help-block {
@ -5785,7 +5788,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none; box-shadow: none;
} }
.form-group.has-success.is-focused .form-control { .form-group.has-success.is-focused .form-control {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group.has-success label.control-label, .form-group.has-success label.control-label,
.form-group.has-success .help-block { .form-group.has-success .help-block {
@ -5795,7 +5798,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none; box-shadow: none;
} }
.form-group.has-info.is-focused .form-control { .form-group.has-info.is-focused .form-control {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
} }
.form-group.has-info label.control-label, .form-group.has-info label.control-label,
.form-group.has-info .help-block { .form-group.has-info .help-block {
@ -5820,7 +5823,7 @@ select.form-control {
} }
.form-group.is-focused select.form-control { .form-group.is-focused select.form-control {
box-shadow: none; box-shadow: none;
border-color: #d2d2d2; border-color: #D2D2D2;
} }
select.form-control[multiple], select.form-control[multiple],
.form-group.is-focused select.form-control[multiple] { .form-group.is-focused select.form-control[multiple] {
@ -7896,7 +7899,7 @@ icon-material-blue-grey {
/**************************************************************************/ /**************************************************************************/
border-radius: 2px; border-radius: 2px;
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
background: #ffffff; background: #fff;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
.card .card-height-indicator { .card .card-height-indicator {
@ -7925,7 +7928,7 @@ icon-material-blue-grey {
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
left: 18px; left: 18px;
color: #ffffff; color: #fff;
font-size: 2em; font-size: 2em;
} }
.card .card-body { .card .card-body {

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

@ -1,6 +1,16 @@
@import '_inputs-size.less'; @import '_inputs-size.less';
// usage: .form-group-validation-state(@input-danger); // must be broken out for reuse - webkit selector breaks firefox
.label-position(@label-top, @static-font-size, @static-line-height) {
label.control-label {
top: @label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
font-size: @static-font-size;
line-height: @static-line-height;
}
}
.form-group-validation-state(@name, @color) { .form-group-validation-state(@name, @color) {
&.@{name} { // e.g. has-error &.@{name} { // e.g. has-error
@ -72,16 +82,12 @@
// static, focused, or autofill floating labels // static, focused, or autofill floating labels
&.label-static, &.label-static,
&.label-floating.is-focused, &.label-floating.is-focused,
&.label-floating:not(.is-empty), &.label-floating:not(.is-empty) {
&.label-floating input.form-control:-webkit-autofill { .label-position(@label-top, @static-font-size, @static-line-height);
& ~ label.control-label, // #559 webkit chrome autofill `.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label`
label.control-label {
top: @label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
font-size: @static-font-size;
line-height: @static-line-height;
} }
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
.label-position(@label-top, @static-font-size, @static-line-height);
} }
} }

View File

@ -2,7 +2,17 @@
@import '_inputs-size'; @import '_inputs-size';
// usage: @include form-group-validation-state($input-danger); // must be broken out for reuse - webkit selector breaks firefox
@mixin label-position($label-top, $static-font-size, $static-line-height){
label.control-label {
top: $label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
font-size: $static-font-size;
line-height: $static-line-height;
}
}
@mixin form-group-validation-state($name, $color){ @mixin form-group-validation-state($name, $color){
&.#{$name} { // e.g. has-error &.#{$name} { // e.g. has-error
@ -75,16 +85,12 @@
// static, focused, or autofill floating labels // static, focused, or autofill floating labels
&.label-static, &.label-static,
&.label-floating.is-focused, &.label-floating.is-focused,
&.label-floating:not(.is-empty), &.label-floating:not(.is-empty) {
&.label-floating input.form-control:-webkit-autofill { @include label-position($label-top, $static-font-size, $static-line-height);
& ~ label.control-label, // #559 webkit chrome autofill `.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label`
label.control-label {
top: $label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
font-size: $static-font-size;
line-height: $static-line-height;
} }
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
@include label-position($label-top, $static-font-size, $static-line-height);
} }
} }