1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-25 15:00:58 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-button.css
Chad Little ee77c5c8f1 Clean up menu folding in action list
Summary: Just removing the animation for now, can't find anything decent, I think that the issue is the animation is applying to all items in the list, and not just as a list as a single block. That is, I'd like to slide down all three at one. Any animation that slides them down when attached to each item makes them overlap at the first frame and it's a little distracting. Not a big deal to leave this out for now. Whatever we come up with should likely be applied to phuix-dropdown as well.

Test Plan: Clicky Clicky.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D16159
2016-06-21 14:39:55 -07:00

404 lines
7.4 KiB
CSS

/**
* @provides phui-button-css
*/
button,
a.button {
font: {$basefont};
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.phabricator-action-view-item {
-webkit-font-smoothing: auto;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
button,
a.button,
a.button:visited,
input[type="submit"] {
background-color: #2980b9;
border: 1px solid #2980b9;
background-image: linear-gradient(to bottom, #3498db, #2980b9);
color: white;
cursor: pointer;
font-weight: bold;
font-size: {$normalfontsize};
display: inline-block;
padding: 3px 12px 4px;
text-align: center;
white-space: nowrap;
border-radius: 3px;
}
/* Buttons with images (full size only) */
button.icon,
a.icon,
a.icon:visited {
padding-left: 0;
position: relative;
text-indent: 29px;
}
button.green,
a.green,
a.green:visited {
background-color: {$green};
border-color: {$green};
background-image: linear-gradient(to bottom, #23BB5B, #139543);
}
button.grey,
input[type="submit"].grey,
a.grey,
a.grey:visited {
background-color: #F7F7F9;
background-image: linear-gradient(to bottom, #ffffff, #f1f0f1);
border: 1px solid rgba({$alphablue},.2);
color: {$darkgreytext};
}
button.simple,
input[type="submit"].simple,
a.simple,
a.simple:visited {
background: #fff;
color: {$blue};
border: 1px solid {$blue};
}
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: {$blue};
}
a.disabled,
button.disabled,
button[disabled] {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
a.phuix-dropdown-open {
color: {$greytext};
}
a.button:hover,
button:hover {
text-decoration: none;
background-color: #2980b9;
background-image: linear-gradient(to bottom, #3498db, #1b6ba0);
border-color: #115988;
transition: 0.1s;
}
a.button.grey:hover,
button.grey:hover {
background-image: linear-gradient(to bottom, #ffffff, #eeebec);
border-color: rgba({$alphablue}, 0.3);
transition: 0.1s;
}
a.button.green:hover,
button.green:hover {
border-color: #127336;
background-color: #0DAD48;
background-image: linear-gradient(to bottom, #23BB5B, #178841);
transition: 0.1s;
}
a.button.simple:hover,
button.simple:hover {
background-color: {$blue};
background-image: linear-gradient(to bottom, {$blue}, {$blue});
color: #fff;
transition: 0.1s;
}
a.button.simple:hover .phui-icon-view,
button.simple:hover .phui-icon-view {
color: #fff;
transition: 0.1s;
}
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,
body button.disabled:active {
box-shadow: none;
}
button.small,
a.small,
a.small:visited {
padding: 2px 8px;
height: auto;
font-size: {$smallestfontsize};
line-height: 16px;
}
button.link {
display: inline;
border: none;
background: transparent;
background-image: none;
font-weight: normal;
padding: 0;
margin: 0;
font-size: inherit;
border-bottom: none;
text-decoration: none;
color: #19558D;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
button.link:hover {
text-decoration: underline;
}
.phuix-dropdown-menu {
position: absolute;
width: 240px;
background: #fff;
margin-top: -1px;
padding: 5px 0;
box-shadow: {$dropshadow};
border: 1px solid {$blueborder};
border-radius: 3px;
margin-bottom: 16px;
}
.phuix-dropdown-menu a:focus {
/* We automatically focus links in dropdown menus for assistive devices, but
this is distracting for visual user agents. */
outline: none;
}
a.policy-control {
width: 240px;
text-align: left;
}
a.policy-control .caret {
float: right;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 5px solid #fff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: "";
}
.caret-right {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-left: 7px solid {$greytext};
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
content: "";
margin-bottom: 4px;
}
.caret-left {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-right: 7px solid {$greytext};
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
content: "";
margin-bottom: 4px;
}
.dropdown .caret {
margin-top: 7px;
margin-left: 6px;
}
.small.dropdown .caret {
margin-top: 6px;
}
.grey.dropdown .caret {
border-top-color: #000;
}
.phabricator-action-view-submenu .caret-right {
float: right;
margin-top: 4px;
margin-right: 6px;
border-left-color: {$alphablue};
}
.phabricator-action-view-submenu .caret {
float: right;
margin-top: 5px;
margin-right: 4px;
border-top: 7px solid {$lightgreytext};
}
.phabricator-action-list-view .phabricator-action-view-submenu.phui-submenu-open
.phabricator-action-view-item {
background-color: rgba({$alphablue}, 0.07);
color: {$sky};
border-radius: 3px;
}
.phabricator-action-list-view .phabricator-action-view-submenu.phui-submenu-open
.phabricator-action-view-item .phui-icon-view {
color: {$sky};
}
/* Icons */
.button.has-icon {
position: relative;
}
.button .phui-icon-view {
display: inline-block;
position: absolute;
top: 6px;
left: 10px;
}
.button.icon-last .phui-icon-view {
left: auto;
right: 10px;
}
.phui-button-bar .button .phui-icon-view {
left: 9px;
}
.button.has-icon .phui-button-text {
margin-left: 16px;
}
.button.has-icon.icon-last .phui-button-text {
margin: 0 16px 0 0;
}
/* Login Buttons */
.button.big.has-icon {
padding: 4px 20px 4px 14px;
border-radius: 4px;
text-align: left;
}
.button.big.has-icon .phui-button-text {
margin-left: 30px;
display: block;
}
.button.big.has-icon .phui-button-subtext {
color: {$greytext};
font-size: {$smallerfontsize};
line-height: 15px;
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 a.button.has-icon {
display: inline-block;
height: 18px;
width: 6px;
}
.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;
}