1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-22 18:28:47 +02:00
phorge-phorge/webroot/rsrc/css/phui/button/phui-button-simple.css
Chad Little d3c464a610 Separate button CSS classes
Summary: Try to dis-ambiguate various button types and colors. Moves `simple` to `phui-button-simple` and moves colors to `button-color`.

Test Plan: Grep for buttons still inline, UIExamples, PHUIX, Herald, and Email Preferences.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D18077
2017-06-05 20:14:34 +00:00

131 lines
3.6 KiB
CSS

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