mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-23 23:32:40 +01:00
ee77c5c8f1
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
404 lines
7.4 KiB
CSS
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;
|
|
}
|