1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-26 15:30:58 +01:00

Move simple buttons, bar to own CSS file

Summary:
- Add a simple green button... maybe don't need
- Fix tokenizer search icon
- Splite simple and button-bar into own files

Test Plan: uiexamples, various pages with buttons, diffusion

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D18063
This commit is contained in:
Chad Little 2017-06-01 13:30:00 -07:00
parent 9f8907ccf7
commit b8ad999d50
8 changed files with 191 additions and 133 deletions

View file

@ -9,7 +9,7 @@ return array(
'names' => array(
'conpherence.pkg.css' => 'ff161f2d',
'conpherence.pkg.js' => 'b5b51108',
'core.pkg.css' => '38689e09',
'core.pkg.css' => 'e8d63571',
'core.pkg.js' => '1475bd91',
'darkconsole.pkg.js' => '1f9a31bc',
'differential.pkg.css' => 'a2755617',
@ -33,7 +33,7 @@ return array(
'rsrc/css/aphront/panel-view.css' => '8427b78d',
'rsrc/css/aphront/phabricator-nav-view.css' => 'faf6a6fc',
'rsrc/css/aphront/table-view.css' => '34cf86b4',
'rsrc/css/aphront/tokenizer.css' => '9a8cb501',
'rsrc/css/aphront/tokenizer.css' => '15d5ff71',
'rsrc/css/aphront/tooltip.css' => '173b9431',
'rsrc/css/aphront/typeahead-browse.css' => '4f82e510',
'rsrc/css/aphront/typeahead.css' => '8a84cc7d',
@ -124,6 +124,9 @@ return array(
'rsrc/css/font/phui-font-icon-base.css' => '870a7360',
'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
'rsrc/css/layout/phabricator-source-code-view.css' => '4383192f',
'rsrc/css/phui/button/phui-button-bar.css' => '39fe680c',
'rsrc/css/phui/button/phui-button-simple.css' => 'd410596b',
'rsrc/css/phui/button/phui-button.css' => '9f13ddcc',
'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
'rsrc/css/phui/calendar/phui-calendar-list.css' => '576be600',
'rsrc/css/phui/calendar/phui-calendar-month.css' => '8e10e92c',
@ -140,7 +143,6 @@ return array(
'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
'rsrc/css/phui/phui-box.css' => '269cbc99',
'rsrc/css/phui/phui-button.css' => '836844c9',
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
'rsrc/css/phui/phui-cms.css' => '504b4b23',
'rsrc/css/phui/phui-comment-form.css' => '57af2e14',
@ -539,7 +541,7 @@ return array(
'aphront-multi-column-view-css' => '84cc6640',
'aphront-panel-view-css' => '8427b78d',
'aphront-table-view-css' => '34cf86b4',
'aphront-tokenizer-control-css' => '9a8cb501',
'aphront-tokenizer-control-css' => '15d5ff71',
'aphront-tooltip-css' => '173b9431',
'aphront-typeahead-control-css' => '8a84cc7d',
'application-search-view-css' => '66ee5d46',
@ -817,7 +819,9 @@ return array(
'phui-basic-nav-view-css' => 'a0705f53',
'phui-big-info-view-css' => 'bd903741',
'phui-box-css' => '269cbc99',
'phui-button-css' => '836844c9',
'phui-button-bar-css' => '39fe680c',
'phui-button-css' => '9f13ddcc',
'phui-button-simple-css' => 'd410596b',
'phui-calendar-css' => '477acfaa',
'phui-calendar-day-css' => '572b1893',
'phui-calendar-list-css' => '576be600',
@ -973,6 +977,10 @@ return array(
'javelin-dom',
'javelin-history',
),
'15d5ff71' => array(
'aphront-typeahead-control-css',
'phui-tag-view-css',
),
16053029 => array(
'phui-theme-css',
),
@ -1102,6 +1110,10 @@ return array(
'javelin-dom',
'javelin-vector',
),
'39fe680c' => array(
'phui-button-css',
'phui-button-simple-css',
),
'3ab51e2c' => array(
'javelin-behavior',
'javelin-behavior-device',
@ -1618,10 +1630,6 @@ return array(
'phuix-icon-view',
'javelin-behavior-phabricator-gesture',
),
'9a8cb501' => array(
'aphront-typeahead-control-css',
'phui-tag-view-css',
),
'9bbf3762' => array(
'javelin-behavior',
'javelin-dom',
@ -1971,6 +1979,9 @@ return array(
'd254d646' => array(
'javelin-util',
),
'd410596b' => array(
'phui-button-css',
),
'd4505101' => array(
'javelin-stratcom',
'javelin-install',
@ -2177,6 +2188,7 @@ return array(
'phabricator-core-css',
'phabricator-zindex-css',
'phui-button-css',
'phui-button-simple-css',
'phui-theme-css',
'phabricator-standard-page-view',
'aphront-dialog-view-css',

View file

@ -93,6 +93,7 @@ return array(
'phabricator-core-css',
'phabricator-zindex-css',
'phui-button-css',
'phui-button-simple-css',
'phui-theme-css',
'phabricator-standard-page-view',
'aphront-dialog-view-css',

View file

@ -29,7 +29,7 @@ final class PHUIButtonBarView extends AphrontTagView {
}
protected function getTagContent() {
require_celerity_resource('phui-button-css');
require_celerity_resource('phui-button-bar-css');
$i = 1;
$j = count($this->buttons);

View file

@ -154,6 +154,7 @@ final class PHUIButtonView extends AphrontTagView {
protected function getTagAttributes() {
require_celerity_resource('phui-button-css');
require_celerity_resource('phui-button-simple-css');
$classes = array();
$classes[] = 'button';

View file

@ -181,4 +181,5 @@ a.jx-tokenizer-token-invalid:hover {
.button.tokenizer-browse-button .phui-icon-view {
top: 7px;
left: 9px;
position: absolute;
}

View file

@ -0,0 +1,61 @@
/**
* @provides phui-button-bar-css
* @requires phui-button-css
* @requires phui-button-simple-css
*/
.phui-button-bar-borderless .button {
border: 0;
background-color: transparent;
background-image: none;
padding-left: 10px;
padding-right: 10px;
}
.phui-button-bar-borderless .button .phui-icon-view {
font-size: 15px;
color: rgba({$alphagrey},.4);
}
.phui-button-bar-borderless .button:hover {
background-color: transparent;
background-image: none;
border-radius: 3px;
}
.phui-button-bar-borderless .button:hover .phui-icon-view {
color: rgba({$alphagrey},.9);
}
.phui-button-bar-borderless .button {
border: 0;
}
.phui-button-bar .phui-button-bar-first {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.phui-button-bar .phui-button-bar-middle {
border-radius: 0;
border-left: none;
}
.phui-button-bar .phui-button-bar-last {
border-left: none;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.phui-button-bar .button.simple:hover {
border-color: {$lightblueborder};
background-color: #fff;
background-image: none;
color: {$sky};
}
.phui-button-bar .button.simple:hover .phui-icon-view {
border-color: {$lightblueborder};
color: {$sky};
background-image: none;
}

View file

@ -0,0 +1,105 @@
/**
* @provides phui-button-simple-css
* @requires phui-button-css
*/
/* - Basic -------------------------------------------------------------------*/
button.simple,
input[type="submit"].simple,
a.simple,
a.simple:visited {
background: #fff;
color: {$bluetext};
border: 1px solid {$lightblueborder};
}
button.simple .phui-icon-view,
input[type="submit"].simple .phui-icon-view,
a.simple .phui-icon-view,
a.simple:visited .phui-icon-view {
color: {$lightbluetext};
}
a.button.simple:hover,
button.simple:hover {
border-color: {$blueborder};
background-image: none;
background-color: #fff;
transition: 0s;
}
a.simple.current {
background: {$lightblue};
}
/* - Red --------------------------------------------------------------------*/
button.simple.red,
input[type="submit"].simple.red,
a.simple.red,
a.simple.red:visited {
background: #fff;
color: {$redtext};
border: 1px solid {$sh-redborder};
}
button.simple.red .phui-icon-view,
input[type="submit"].simple.red .phui-icon-view,
a.simple.red .phui-icon-view,
a.simple.red:visited .phui-icon-view {
color: {$redtext};
}
a.button.simple.red:hover,
button.simple.red:hover {
border-color: {$red};
background-image: none;
background-color: #fff;
transition: 0s;
}
/* - Green ------------------------------------------------------------------*/
button.simple.green,
input[type="submit"].simple.green,
a.simple.green,
a.simple.green:visited {
background: #fff;
color: {$greentext};
border: 1px solid {$sh-greenborder};
}
button.simple.green .phui-icon-view,
input[type="submit"].simple.green .phui-icon-view,
a.simple.green .phui-icon-view,
a.simple.green:visited .phui-icon-view {
color: {$greentext};
}
a.button.simple.green:hover,
button.simple.green:hover {
border-color: {$green};
background-image: none;
background-color: #fff;
transition: 0s;
}
/* - Misc -------------------------------------------------------------------*/
a.button.simple .phui-icon-view {
border: none;
}
a.button.simple.phuix-dropdown-open {
background-color: #fff;
color: {$blue};
box-shadow: none;
}
a.button.simple.phuix-dropdown-open:hover .phui-icon-view {
color: {$blue};
}

View file

@ -86,42 +86,6 @@ a.grey:visited {
color: {$darkgreytext};
}
button.simple,
input[type="submit"].simple,
a.simple,
a.simple:visited {
background: #fff;
color: {$bluetext};
border: 1px solid {$lightblueborder};
}
a.simple.current {
background: {$lightblue};
}
button.simple .phui-icon-view,
input[type="submit"].simple .phui-icon-view,
a.simple .phui-icon-view,
a.simple:visited .phui-icon-view {
color: {$lightbluetext};
}
button.simple.red,
input[type="submit"].simple.red,
a.simple.red,
a.simple.red:visited {
background: #fff;
color: {$redtext};
border: 1px solid {$sh-redborder};
}
button.simple.red .phui-icon-view,
input[type="submit"].simple.red .phui-icon-view,
a.simple.red .phui-icon-view,
a.simple.red:visited .phui-icon-view {
color: {$redtext};
}
a.disabled,
button.disabled,
button[disabled] {
@ -159,36 +123,6 @@ button.green:hover {
transition: 0.1s;
}
a.button.simple:hover,
button.simple:hover {
border-color: {$blueborder};
background-image: none;
background-color: #fff;
transition: 0s;
}
a.button.simple.red:hover,
button.simple.red:hover {
border-color: {$red};
background-image: none;
background-color: #fff;
transition: 0s;
}
a.button.simple .phui-icon-view {
border: none;
}
a.button.simple.phuix-dropdown-open {
background-color: #fff;
color: {$blue};
box-shadow: none;
}
a.button.simple.phuix-dropdown-open:hover .phui-icon-view {
color: {$blue};
}
body a.button.disabled:hover,
body button.disabled:hover,
body a.button.disabled:active,
@ -359,60 +293,3 @@ a.policy-control .phui-button-text {
font-weight: normal;
}
/* PHUI Button Bar */
.phui-button-bar-borderless .button {
border: 0;
background-color: transparent;
background-image: none;
padding-left: 10px;
padding-right: 10px;
}
.phui-button-bar-borderless .button .phui-icon-view {
font-size: 15px;
color: rgba({$alphagrey},.4);
}
.phui-button-bar-borderless .button:hover {
background-color: transparent;
background-image: none;
border-radius: 3px;
}
.phui-button-bar-borderless .button:hover .phui-icon-view {
color: rgba({$alphagrey},.9);
}
.phui-button-bar-borderless .button {
border: 0;
}
.phui-button-bar .phui-button-bar-first {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.phui-button-bar .phui-button-bar-middle {
border-radius: 0;
border-left: none;
}
.phui-button-bar .phui-button-bar-last {
border-left: none;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.phui-button-bar .button.simple:hover {
border-color: {$lightblueborder};
background-color: #fff;
background-image: none;
color: {$sky};
}
.phui-button-bar .button.simple:hover .phui-icon-view {
border-color: {$lightblueborder};
color: {$sky};
background-image: none;
}