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 6da08062b4
commit 27d2b66138
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);
}
body {
background-color: #eeeeee;
background-color: #EEEEEE;
}
body.inverse {
background: #333333;
@ -2655,7 +2655,7 @@ body .well-default,
body .jumbotron-default,
.container .jumbotron-default,
.container-fluid .jumbotron-default {
background-color: #ffffff;
background-color: #FFF;
}
body .well-black,
.container .well-black,
@ -5214,7 +5214,7 @@ output {
}
.form-group .form-control {
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-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
@ -5225,15 +5225,15 @@ output {
border-radius: 0;
}
.form-group .form-control::-moz-placeholder {
color: #bdbdbd;
color: #BDBDBD;
font-weight: normal;
}
.form-group .form-control:-ms-input-placeholder {
color: #bdbdbd;
color: #BDBDBD;
font-weight: normal;
}
.form-group .form-control::-webkit-input-placeholder {
color: #bdbdbd;
color: #BDBDBD;
font-weight: normal;
}
.form-group .form-control[readonly],
@ -5244,11 +5244,11 @@ fieldset[disabled] .form-group .form-control {
.form-group .form-control[disabled],
fieldset[disabled] .form-group .form-control {
background-image: none;
border-bottom: 1px dotted #d2d2d2;
border-bottom: 1px dotted #D2D2D2;
}
.form-group.is-focused .form-control {
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;
box-shadow: none;
transition-duration: 0.3s;
@ -5265,7 +5265,7 @@ fieldset[disabled] .form-group .form-control {
}
.form-group label,
.form-group label.control-label {
color: #bdbdbd;
color: #BDBDBD;
font-weight: normal;
}
.form-group label.control-label {
@ -5276,7 +5276,7 @@ fieldset[disabled] .form-group .form-control {
}
.form-group label.control-label,
.form-group-default label.control-label {
color: #bdbdbd;
color: #BDBDBD;
}
.form-group-black label.control-label {
color: #000000;
@ -5446,7 +5446,7 @@ fieldset[disabled] .form-group .form-control {
}
.form-group.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 {
color: #000000;
@ -5560,14 +5560,15 @@ fieldset[disabled] .form-group .form-control {
font-size: 16px;
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-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-floating:not(.is-empty) 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;
left: 0;
font-size: 12px;
@ -5608,14 +5609,15 @@ fieldset[disabled] .form-group .form-control {
font-size: 11px;
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-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-floating:not(.is-empty) 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;
left: 0;
font-size: 9px;
@ -5656,14 +5658,15 @@ fieldset[disabled] .form-group .form-control {
font-size: 18px;
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-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-floating:not(.is-empty) 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;
left: 0;
font-size: 14px;
@ -5678,94 +5681,94 @@ fieldset[disabled] .form-group .form-control {
}
.form-group.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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
box-shadow: none;
}
.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 .help-block {
@ -5775,7 +5778,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none;
}
.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 .help-block {
@ -5785,7 +5788,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none;
}
.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 .help-block {
@ -5795,7 +5798,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none;
}
.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 .help-block {
@ -5820,7 +5823,7 @@ select.form-control {
}
.form-group.is-focused select.form-control {
box-shadow: none;
border-color: #d2d2d2;
border-color: #D2D2D2;
}
select.form-control[multiple],
.form-group.is-focused select.form-control[multiple] {
@ -7896,7 +7899,7 @@ icon-material-blue-grey {
/**************************************************************************/
border-radius: 2px;
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);
}
.card .card-height-indicator {
@ -7925,7 +7928,7 @@ icon-material-blue-grey {
position: absolute;
bottom: 16px;
left: 18px;
color: #ffffff;
color: #fff;
font-size: 2em;
}
.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';
// 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) {
&.@{name} { // e.g. has-error
@ -72,16 +82,12 @@
// static, focused, or autofill floating labels
&.label-static,
&.label-floating.is-focused,
&.label-floating:not(.is-empty),
&.label-floating input.form-control:-webkit-autofill {
& ~ 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;
}
&.label-floating:not(.is-empty) {
.label-position(@label-top, @static-font-size, @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';
// 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){
&.#{$name} { // e.g. has-error
@ -75,16 +85,12 @@
// static, focused, or autofill floating labels
&.label-static,
&.label-floating.is-focused,
&.label-floating:not(.is-empty),
&.label-floating input.form-control:-webkit-autofill {
& ~ 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;
}
&.label-floating:not(.is-empty) {
@include label-position($label-top, $static-font-size, $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);
}
}