diff options
author | Chris Rebert <code@chrisrebert.com> | 2015-12-24 08:45:04 +0300 |
---|---|---|
committer | Chris Rebert <code@chrisrebert.com> | 2015-12-24 09:19:44 +0300 |
commit | 7cfdc771f8e65bbfcae97fa82a2eee29177c0cc0 (patch) | |
tree | 387cbd6452f48431817008adfc9da17d5eccae03 /scss/_progress.scss | |
parent | a96e522d6ad1b6b570ee84a9e0c532c19b30fc63 (diff) |
Uncomment Firefox .progress styles; fixes #18536
[skip sauce]
[skip validator]
Diffstat (limited to 'scss/_progress.scss')
-rw-r--r-- | scss/_progress.scss | 50 |
1 files changed, 23 insertions, 27 deletions
diff --git a/scss/_progress.scss b/scss/_progress.scss index c1a65fb9b3..1687288adb 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -35,11 +35,28 @@ // Remove right-hand border of value bar from IE10+/Edge border: 0; } +.progress[value]::-moz-progress-bar { + background-color: $progress-bar-color; + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; +} .progress[value]::-webkit-progress-value { background-color: $progress-bar-color; border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius; } +// Tweaks for empty progress bar +.progress[value="0"]::-moz-progress-bar { + min-width: 2rem; + color: $gray-light; + background-color: transparent; + background-image: none; +} +// Tweaks for full progress bar +.progress[value="100"]::-moz-progress-bar { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; +} .progress[value="100"]::-webkit-progress-value { border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; @@ -51,33 +68,12 @@ @include border-radius($border-radius); @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); } - -// Firefox styles must be entirely separate or it busts Webkit styles. -// -// Commented out for now because linter. -// -// $-moz-document url-prefix() { -// .progress[value] { -// background-color: $progress-bg; -// .border-radius($border-radius); -// .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); -// } -// .progress[value]::-moz-progress-bar { -// background-color: $progress-bar-color; -// border-top-left-radius: $border-radius; -// border-bottom-left-radius: $border-radius; -// } -// .progress[value="0"]::-moz-progress-bar { -// color: $gray-light; -// min-width: 2rem; -// background-color: transparent; -// background-image: none; -// } -// .progress[value="100"]::-moz-progress-bar { -// border-top-right-radius: $border-radius; -// border-bottom-right-radius: $border-radius; -// } -// } +base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only +.progress[value] { + background-color: $progress-bg; + @include border-radius($border-radius); + @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); +} // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. @media screen and (min-width:0\0) { |