1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 08:20:57 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-crumbs-view.css
Chad Little 2fed5b6925 Fourth fix for the magical world of crumbs and text-overflow
Summary: The Safari hack in place casued a truncation issue in Firefox, so that hack is now gone. Instead the bug appears to be the creative inclusion of "space". In fiddling with this adding one space inside the span and one space outside the span seems to resolve all cases.

Test Plan: Chrome, Safari, Firefox. Test "hector" and copy paste of a Task ID.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D17483
2017-03-09 07:23:41 -08:00

136 lines
2.6 KiB
CSS

/**
* @provides phui-crumbs-view-css
*/
.phui-crumbs-view {
overflow: hidden;
vertical-align: top;
padding: 0 12px 0 20px;
/* TODO: Position this over the slider for Differential's file tree view.
Remove this once that gets sorted out. */
position: relative;
-webkit-font-smoothing: antialiased;
background-color: {$page.background};
}
.printable .phui-crumbs-view {
display: none;
}
.phui-crumbs-view,
.phui-crumbs-view a.phui-crumb-view,
.phui-crumbs-view a.phui-crumbs-action {
color: {$darkbluetext};
font-weight: bold;
text-decoration: none;
}
.device-tablet .phui-crumbs-view,
.device-phone .phui-crumbs-view,
.project-board-nav .phui-crumbs-view {
padding-left: 8px;
padding-right: 8px;
}
.phui-crumbs-view a.phui-crumbs-action-disabled,
.phui-crumbs-view a.phui-crumbs-action-disabled .phui-icon-view {
color: {$lightgreytext};
}
.phui-crumbs-view + .phui-header-shell {
border-top: none;
}
.device-desktop .phui-crumbs-view a:hover {
text-decoration: underline;
}
.phui-crumb-view {
float: left;
padding: 8px 0;
max-width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.device-phone .phui-crumb-view.phabricator-last-crumb .phui-crumb-name,
.device-phone .phui-crumb-view.phui-crumb-has-icon,
.device-phone .phui-crumb-has-icon + .phui-crumb-divider {
display: inline-block;
}
.device-phone .phui-crumb-name,
.device-phone .phui-crumb-divider {
display: none;
}
.phui-crumb-has-icon .phui-icon-view {
margin: 0 4px;
}
.device-phone .phui-crumb-icon {
margin-left: 7px;
}
.phui-crumbs-actions {
float: right;
white-space: nowrap;
}
.phui-crumbs-action {
display: inline-block;
height: 17px;
padding: 8px 12px;
position: relative;
}
.device-phone a.phui-crumbs-action {
padding: 8px 6px;
}
.device-desktop .phui-crumbs-view a:hover,
.device-desktop .phui-crumbs-view a:hover .phui-icon-view {
color: {$blue};
text-decoration: none;
}
.device-phone .phui-crumbs-action-name {
display: none;
}
a.phui-crumbs-action .phui-icon-view {
color: {$darkbluetext};
}
a.phui-crumbs-action .phui-crumbs-action-name {
margin-left: 6px;
}
.device-phone a.phui-crumbs-action .phui-icon-view {
margin-left: 4px;
}
.phui-crumb-divider {
margin: 2px 8px;
}
.phui-crumbs-view.phui-crumbs-border {
border-bottom: 1px solid rgba({$alphagrey},.1);
}
body .phui-crumbs-view + .phui-object-box {
margin-top: 0;
}
body .phui-crumbs-view + .phui-oi-list-view {
padding-top: 0;
}
.phui-crumb-action-divider {
border-left: 1px solid {$lightgreyborder};
}
.phui-crumbs-action-icon + .phui-crumbs-action-icon {
padding-left: 4px;
}