CSS gradient buttons

Summary: Creates CSS Gradients for buttons. Also tweaked hover and active styles. "Fixed" disabled state (this may require follow up diffs to correct around site)

Test Plan: Tested Maniphest and UI Examples in Chrome and IE10/9/8

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5624
This commit is contained in:
Chad Little
2013-04-08 15:00:55 -07:00
parent 1e2b6faadd
commit d1daf80d0d
14 changed files with 91 additions and 169 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 231 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 233 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 223 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 222 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 232 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 197 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 B

View File

@@ -1,31 +1,11 @@
{
"version" : 1,
"sprites" : {
"gradient-black-dark" : {
"name" : "gradient-black-dark",
"rule" : ".gradient-black-dark, button.black, a.black, a.black:visited",
"hash" : "17425d8c9c53672ab2edbd236e6efd7a"
},
"gradient-black-light" : {
"name" : "gradient-black-light",
"rule" : ".gradient-black-light, button.black:active, a.black:active",
"hash" : "c4fb2231553d2894fd2c97beaa8bfe39"
},
"gradient-blue-dark" : {
"name" : "gradient-blue-dark",
"rule" : ".gradient-blue-dark, button, a.button, a.button:visited, input.inputsubmit",
"hash" : "f467612edcdbf984672287c6086492c4"
},
"gradient-blue-header" : {
"name" : "gradient-blue-header",
"rule" : ".gradient-blue-header",
"hash" : "dd82b6d737f9f683c0d6e70eff59e872"
},
"gradient-blue-light" : {
"name" : "gradient-blue-light",
"rule" : ".gradient-blue-light, button:active, a.button:active",
"hash" : "471d47c102def6db46b345310aac5a03"
},
"gradient-breadcrumbs" : {
"name" : "gradient-breadcrumbs",
"rule" : ".gradient-breadcrumbs",
@@ -36,36 +16,16 @@
"rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phabricator-menu-item-type-label",
"hash" : "e0d4a455142f9c4745d36ad8b7dd3f78"
},
"gradient-green-dark" : {
"name" : "gradient-green-dark",
"rule" : ".gradient-green-dark, button.green, a.green, a.green:visited",
"hash" : "a6719fe55b2b0e527ed32985691eab34"
},
"gradient-green-header" : {
"name" : "gradient-green-header",
"rule" : ".gradient-green-header",
"hash" : "d61297d23aa31fa1de51e2b9b5974554"
},
"gradient-green-light" : {
"name" : "gradient-green-light",
"rule" : ".gradient-green-light, button.green:active, a.green:active",
"hash" : "124969cc7805bbd754005bc702e24c54"
},
"gradient-grey-dark" : {
"name" : "gradient-grey-dark",
"rule" : ".gradient-grey-dark, button.grey, input.inputaux, a.grey, a.grey:visited, a.button.disabled, button[disabled], button.disabled",
"hash" : "fac28a773098fc62bf571e12b843f71a"
},
"gradient-grey-header" : {
"name" : "gradient-grey-header",
"rule" : ".gradient-grey-header",
"hash" : "f1453896068a8dd0d7885457c8e371bc"
},
"gradient-grey-light" : {
"name" : "gradient-grey-light",
"rule" : ".gradient-grey-light, button.grey:active, a.grey:active, button.grey_active, a.dropdown-open",
"hash" : "83c6128f59fc2e426c912c2f73f5b92b"
},
"gradient-menu-hover" : {
"name" : "gradient-menu-hover",
"rule" : ".gradient-menu-hover, .device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover, .phabricator-filetree a.phabricator-filetree-item:hover",
@@ -95,6 +55,6 @@
"scales" : [
1
],
"header" : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit, .phabricator-dark-menu .phabricator-menu-item-type-label, .phabricator-side-menu .phabricator-menu-item-type-label, .device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover, .phabricator-side-menu .phabricator-menu-item-selected, .device-desktop .phabricator-side-menu a.phabricator-menu-item-selected:hover, .phabricator-filetree a.phabricator-filetree-item:hover, .phabricator-filetree a.phabricator-active-nav-focus {\n background-image: url(\/rsrc\/image\/sprite-gradient.png);\n background-repeat: repeat-x;\n}\n\n\n",
"header" : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, .phabricator-dark-menu .phabricator-menu-item-type-label, .phabricator-side-menu .phabricator-menu-item-type-label, .device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover, .phabricator-side-menu .phabricator-menu-item-selected, .device-desktop .phabricator-side-menu a.phabricator-menu-item-selected:hover, .phabricator-filetree a.phabricator-filetree-item:hover, .phabricator-filetree a.phabricator-active-nav-focus {\n background-image: url(\/rsrc\/image\/sprite-gradient.png);\n background-repeat: repeat-x;\n}\n\n\n",
"type" : "repeat-x"
}