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

View File

@@ -590,8 +590,8 @@ celerity_register_resource_map(array(
),
'/rsrc/image/sprite-gradient.png' =>
array(
'hash' => 'df1e8e0d09bbbabdd6015d3467dec11a',
'uri' => '/res/df1e8e0d/rsrc/image/sprite-gradient.png',
'hash' => '72614b1679a3c69fcef9766c0f2be53d',
'uri' => '/res/72614b16/rsrc/image/sprite-gradient.png',
'disk' => '/rsrc/image/sprite-gradient.png',
'type' => 'png',
),
@@ -2903,7 +2903,7 @@ celerity_register_resource_map(array(
),
'phabricator-core-buttons-css' =>
array(
'uri' => '/res/4e6b94c8/rsrc/css/core/buttons.css',
'uri' => '/res/da2e42df/rsrc/css/core/buttons.css',
'type' => 'css',
'requires' =>
array(
@@ -3819,7 +3819,7 @@ celerity_register_resource_map(array(
),
'sprite-gradient-css' =>
array(
'uri' => '/res/0d784d61/rsrc/css/sprite-gradient.css',
'uri' => '/res/5bce353e/rsrc/css/sprite-gradient.css',
'type' => 'css',
'requires' =>
array(
@@ -3901,7 +3901,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'30e5f188' =>
'75db5fb7' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@@ -3943,7 +3943,7 @@ celerity_register_resource_map(array(
34 => 'phabricator-object-item-list-view-css',
35 => 'global-drag-and-drop-css',
),
'uri' => '/res/pkg/30e5f188/core.pkg.css',
'uri' => '/res/pkg/75db5fb7/core.pkg.css',
'type' => 'css',
),
'bf16b308' =>
@@ -4133,16 +4133,16 @@ celerity_register_resource_map(array(
'reverse' =>
array(
'aphront-attached-file-view-css' => '6b1fccc6',
'aphront-dialog-view-css' => '30e5f188',
'aphront-error-view-css' => '30e5f188',
'aphront-form-view-css' => '30e5f188',
'aphront-list-filter-view-css' => '30e5f188',
'aphront-pager-view-css' => '30e5f188',
'aphront-panel-view-css' => '30e5f188',
'aphront-table-view-css' => '30e5f188',
'aphront-tokenizer-control-css' => '30e5f188',
'aphront-tooltip-css' => '30e5f188',
'aphront-typeahead-control-css' => '30e5f188',
'aphront-dialog-view-css' => '75db5fb7',
'aphront-error-view-css' => '75db5fb7',
'aphront-form-view-css' => '75db5fb7',
'aphront-list-filter-view-css' => '75db5fb7',
'aphront-pager-view-css' => '75db5fb7',
'aphront-panel-view-css' => '75db5fb7',
'aphront-table-view-css' => '75db5fb7',
'aphront-tokenizer-control-css' => '75db5fb7',
'aphront-tooltip-css' => '75db5fb7',
'aphront-typeahead-control-css' => '75db5fb7',
'differential-changeset-view-css' => '8aaacd1b',
'differential-core-view-css' => '8aaacd1b',
'differential-inline-comment-editor' => 'e96b08f8',
@@ -4156,7 +4156,7 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => '8aaacd1b',
'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => '30e5f188',
'global-drag-and-drop-css' => '75db5fb7',
'inline-comment-summary-css' => '8aaacd1b',
'javelin-aphlict' => 'bf16b308',
'javelin-behavior' => 'a2f94024',
@@ -4228,47 +4228,47 @@ celerity_register_resource_map(array(
'javelin-util' => 'a2f94024',
'javelin-vector' => 'a2f94024',
'javelin-workflow' => 'a2f94024',
'lightbox-attachment-css' => '30e5f188',
'lightbox-attachment-css' => '75db5fb7',
'maniphest-task-summary-css' => '6b1fccc6',
'maniphest-transaction-detail-css' => '6b1fccc6',
'phabricator-busy' => 'bf16b308',
'phabricator-content-source-view-css' => '8aaacd1b',
'phabricator-core-buttons-css' => '30e5f188',
'phabricator-core-css' => '30e5f188',
'phabricator-crumbs-view-css' => '30e5f188',
'phabricator-directory-css' => '30e5f188',
'phabricator-core-buttons-css' => '75db5fb7',
'phabricator-core-css' => '75db5fb7',
'phabricator-crumbs-view-css' => '75db5fb7',
'phabricator-directory-css' => '75db5fb7',
'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
'phabricator-dropdown-menu' => 'bf16b308',
'phabricator-file-upload' => 'bf16b308',
'phabricator-filetree-view-css' => '30e5f188',
'phabricator-flag-css' => '30e5f188',
'phabricator-form-view-css' => '30e5f188',
'phabricator-header-view-css' => '30e5f188',
'phabricator-jump-nav' => '30e5f188',
'phabricator-filetree-view-css' => '75db5fb7',
'phabricator-flag-css' => '75db5fb7',
'phabricator-form-view-css' => '75db5fb7',
'phabricator-header-view-css' => '75db5fb7',
'phabricator-jump-nav' => '75db5fb7',
'phabricator-keyboard-shortcut' => 'bf16b308',
'phabricator-keyboard-shortcut-manager' => 'bf16b308',
'phabricator-main-menu-view' => '30e5f188',
'phabricator-main-menu-view' => '75db5fb7',
'phabricator-menu-item' => 'bf16b308',
'phabricator-nav-view-css' => '30e5f188',
'phabricator-nav-view-css' => '75db5fb7',
'phabricator-notification' => 'bf16b308',
'phabricator-notification-css' => '30e5f188',
'phabricator-notification-menu-css' => '30e5f188',
'phabricator-object-item-list-view-css' => '30e5f188',
'phabricator-notification-css' => '75db5fb7',
'phabricator-notification-menu-css' => '75db5fb7',
'phabricator-object-item-list-view-css' => '75db5fb7',
'phabricator-object-selector-css' => '8aaacd1b',
'phabricator-prefab' => 'bf16b308',
'phabricator-project-tag-css' => '6b1fccc6',
'phabricator-remarkup-css' => '30e5f188',
'phabricator-remarkup-css' => '75db5fb7',
'phabricator-shaped-request' => 'e96b08f8',
'phabricator-side-menu-view-css' => '30e5f188',
'phabricator-standard-page-view' => '30e5f188',
'phabricator-side-menu-view-css' => '75db5fb7',
'phabricator-standard-page-view' => '75db5fb7',
'phabricator-textareautils' => 'bf16b308',
'phabricator-tooltip' => 'bf16b308',
'phabricator-transaction-view-css' => '30e5f188',
'phabricator-zindex-css' => '30e5f188',
'sprite-apps-large-css' => '30e5f188',
'sprite-gradient-css' => '30e5f188',
'sprite-icon-css' => '30e5f188',
'sprite-menu-css' => '30e5f188',
'syntax-highlighting-css' => '30e5f188',
'phabricator-transaction-view-css' => '75db5fb7',
'phabricator-zindex-css' => '75db5fb7',
'sprite-apps-large-css' => '75db5fb7',
'sprite-gradient-css' => '75db5fb7',
'sprite-icon-css' => '75db5fb7',
'sprite-menu-css' => '75db5fb7',
'syntax-highlighting-css' => '75db5fb7',
),
));

View File

@@ -418,28 +418,7 @@ final class CeleritySpriteGenerator {
'grey-header' => 70
);
// Reorder the sprites so less-specific rules generate earlier in the sheet.
// Otherwise we end up with blue "a.black" buttons because the blue rules
// have the same specificity but appear later.
$gradients = array_fuse($gradients);
$gradients = array_select_keys(
$gradients,
array(
'blue-dark',
'blue-light',
)) + $gradients;
$extra_css = array(
'black-dark' => ', button.black, a.black, a.black:visited',
'black-light' => ', button.black:active, a.black:active',
'blue-dark' => ', button, a.button, a.button:visited, input.inputsubmit',
'blue-light' => ', button:active, a.button:active',
'grey-dark' => ', button.grey, input.inputaux, a.grey, a.grey:visited, '.
'a.button.disabled, button[disabled], button.disabled',
'grey-light' => ', button.grey:active, a.grey:active, '.
'button.grey_active, a.dropdown-open',
'green-dark' => ', button.green, a.green, a.green:visited',
'green-light' => ', button.green:active, a.green:active',
'dark-menu-label' =>
', .phabricator-dark-menu .phabricator-menu-item-type-label',
'menu-label' =>
@@ -472,8 +451,7 @@ final class CeleritySpriteGenerator {
'gradient',
false,
PhutilSpriteSheet::TYPE_REPEAT_X,
', button, a.button, a.button:visited, input.inputsubmit, '.
'.phabricator-dark-menu .phabricator-menu-item-type-label, '.
', .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, '.