ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix all the places we were using incorrect css3 gradients 

fixes: #CNVS-13294

firefox can render gradients prefix-free but
all of these were using an invalid syntax for css3
gradients. The invalid syntax still works in chrome
but not firefox (or other browsers).

That's a huge gotcha because almost every
example & tutorial out there also uses the bad syntax
and that's also how you would do the prefixed version
if it was required.

Now that we use autoprefixer, it was leaving
the unprefixed rule in-tact and not printing
a -moz one. and since these used the wrong syntax
for the unprefixed ones they didn't work in FF

so: you should use `to bottom` instead of `top`:

bad:
background: linear-gradient(top, white, black)
good:
background: linear-gradient(to bottom, white, black)

see: https://github.com/ai/autoprefixer#why-dont-gradients-work-in-firefox

test plan:
make sure these look right:
1. Assignments Gradebook:Grid View 
   http://screencast.com/t/eVop4gcbogm
2. Assignments Gradebook:Grid View Settings Dropdown 
   http://cl.ly/image/1g0M203Z250c 
   (BG color on hover isn't showing)
3. SpeedGrader student dropdown 
   http://cl.ly/image/2P2g0O3I3R08

Change-Id: Ie76a53da026dacfc0e1c21561292aa616b3de7c4
Reviewed-on: https://gerrit.instructure.com/35808
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Braden Anderson <banderson@instructure.com>
QA-Review: Clare Strong <clare@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Ryan Shaw 2014-06-02 23:56:39 -06:00
parent bd6aba84e5
commit c7e932fac7
6 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/stylesheets/discussions.scss
View File

@ -206,7 +206,7 @@ body.with-right-side.with-left-side {
width: 10px;
height: 10px;
background: #46aaf9;
background: linear-gradient(top, #73d6fc, #2489f7);
background: linear-gradient(to bottom, #73d6fc, #2489f7);
}
.read .discussion-read-state {

2
app/stylesheets/jqueryui/_jquery.ui.datepicker.scss
View File

@ -65,7 +65,7 @@
border: 1px solid #a8adb3;
color: #333;
background: #d5dde3;
background: linear-gradient(top, #e0e6eb, #d4dce2);
background: linear-gradient(to bottom, #e0e6eb, #d4dce2);
font-weight: bold;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
}

2
app/stylesheets/mixins/_misc.sass
View File

@ -8,7 +8,7 @@
padding: 0
=vertical-gradient($topColor, $bottomColor)
background-image: linear-gradient(top, $topColor, $bottomColor)
background-image: linear-gradient(to bottom, $topColor, $bottomColor)
=accessible_text_replacement
display: inline-block

2
app/stylesheets/mobile_auth.scss
View File

@ -22,7 +22,7 @@ html {
-webkit-linear-gradient(top, #2B2B2B, black);
background: url('/images/Money_Noise_tm.png?1348625397'),
radial-gradient(50% -100px, circle cover, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
linear-gradient(top, #2B2B2B, black);
linear-gradient(to bottom, #2B2B2B, black);
min-height: 420px; /* this is a workaround to be high enough on an iphone */
font-size: 114%;
font-family: Helvetica;

2
app/stylesheets/quizzes.sass
View File

@ -1677,7 +1677,7 @@ ul#quiz_versions
right: 0
bottom: 0
background-color: #4b555d
background: image-url("/images/Money_Noise_tm.png"), radial-gradient(50% -100px, circle cover, rgba(255, 255, 255, 0.6) 0%, transparent 100%), linear-gradient(top, #59656e, #3e464c)
background: image-url("/images/Money_Noise_tm.png"), radial-gradient(50% -100px, circle cover, rgba(255, 255, 255, 0.6) 0%, transparent 100%), linear-gradient(to bottom, #59656e, #3e464c)
padding: 0
margin: 0

4
public/flash/uploadify/uploadify.css
View File

@ -10,7 +10,7 @@ Released under the MIT License <http://www.opensource.org/licenses/mit-license.p
}
.uploadify-button {
background-color: #505050;
background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: linear-gradient(to top, #505050 0%, #707070 100%);
background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
@ -36,7 +36,7 @@ Released under the MIT License <http://www.opensource.org/licenses/mit-license.p
}
.uploadify:hover .uploadify-button {
background-color: #606060;
background-image: linear-gradient(top, #606060 0%, #808080 100%);
background-image: linear-gradient(to bottom, #606060 0%, #808080 100%);
background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);