Summary

Fix CSS linear gradient which resulted in strangely rendered buttons.

Review Request #8239 — Created June 11, 2016 and submitted June 13, 2016, 3:31 p.m.

Information

Owner

gmyers

Repository

Review Board

Branch

release-3.0.x

Bugs

Depends On

Commit

f9b8b80...

Reviewers

Groups

reviewboard

People

Description

The move to less-plugin-autoprefix in 53bc220 exposed several linear-gradient() calls that were being formulated incorrectly, resulting in strangely rendered buttons in Firefox and IE. The <side-or-corner> parameter should be expressed in "to <side-or-corner>" syntax rather than the old "<side>" syntax without the "to".

Changed all usages to "to" syntax. For the vertical-three-colors case added an explicit "to bottom", even though this was already the implicit default.

Also fixed an unrelated typo in defs.css to change "rgpa" to "rgba".

Testing Done

Manually tested with Firefox 46.0.1, IE 11.0.9600, and Chrome 51.0.2704.  Previously rendering was fine in Chrome, but strange in Firefox and IE.  Now buttons look fine in all three browsers.

Files

Tool: PEP8 Style Checker
Ignored Files:
    reviewboard/static/rb/css/defs.less
    reviewboard/static/rb/css/mixins/gradients.less



Tool: Pyflakes
Ignored Files:
    reviewboard/static/rb/css/defs.less
    reviewboard/static/rb/css/mixins/gradients.less

I know next to nothing about CSS, so hopefully I've correctly fixed this and not just canceled out one problem with another.

If this is correct, then this likely should be applied to the deployed Splat code base as well.

Ship it!

I glanced at the entry for linear-gradient on MDN and this looks correct to me!

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-3.0.x (e74a03f)