revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-20 17:28:51 +02:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/phui/phui-list.css

164 lines
3.2 KiB
CSS
Raw Normal View History

PHUIList, PHUIDocument updates Summary: This diff covers a bit of ground. - PHUIDocumentExample has been added - PHUIDocument has been extended with new features - PhabricatorMenuView is now PHUIListView - PhabricatorMenuItemView is now PHUIItemListView Overall - I think I've gotten all the edges covered here. There is some derpi-ness that we can talk about, comments in the code. Responsive design is missing from the new features on PHUIDocument, will follow up later. Test Plan: Tested mobile and desktop menus, old phriction layout, new document views, new lists, and object lists. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6130
2013-06-05 17:41:43 +02:00
/**
* @provides phui-list-view-css
*/
.phui-list-item-header,
.phui-list-item-header a {
color: #9ca5b5;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255,255,255,0.90);
}
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
/* - Sidenav and Actions -------------------------------------------------------
Sidebar and Action Menus
*/
.phui-list-sidenav {
padding: 4px 0;
}
.phui-list-sidenav .phui-list-item-type-label .phui-list-item-name {
font-size: 12px;
font-weight: bold;
color: #9ca5b5;
text-transform: uppercase;
padding: 4px 8px 4px 8px;
display: block;
}
.phui-list-sidenav .phui-list-item-type-divider {
margin: 8px 8px 12px 8px;
border-bottom: 1px solid #e7e7e7;
}
.phui-list-sidenav .phui-list-item-icon {
height: 14px;
width: 14px;
display: inline-block;
position: absolute;
top: 4px;
}
.phui-list-sidenav .phui-list-item-icon + .phui-list-item-name {
padding-left: 20px;
}
.phui-list-sidenav .phui-list-item-has-icon {
margin: 0;
position: relative;
}
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
.phui-list-sidenav .phui-list-item-view {
overflow: hidden;
}
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
.phui-list-sidenav .phui-list-item-href {
display: block;
Diviner: improve links, book index, and atom view Summary: Ref T988. Minor improvements to diviner: link stuff to a valid endpoint which actually works; fix group names on the book index; improve the topics index for atom views. Test Plan: Clicked links in an article, viewed book index, viewed an article with long headers. Reviewers: btrahan, chad Reviewed By: chad CC: aran Maniphest Tasks: T988 Differential Revision: https://secure.phabricator.com/D6598
2013-07-28 22:07:30 +02:00
padding: 4px 16px;
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
clear: both;
color: #333333;
Diviner: improve links, book index, and atom view Summary: Ref T988. Minor improvements to diviner: link stuff to a valid endpoint which actually works; fix group names on the book index; improve the topics index for atom views. Test Plan: Clicked links in an article, viewed book index, viewed an article with long headers. Reviewers: btrahan, chad Reviewed By: chad CC: aran Maniphest Tasks: T988 Differential Revision: https://secure.phabricator.com/D6598
2013-07-28 22:07:30 +02:00
line-height: 18px;
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
}
.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-href {
padding: 2px 10px;
}
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
.device-desktop .phui-list-sidenav .phui-list-item-href:hover {
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
background: #005588;
background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
color: white;
cursor: pointer;
text-decoration: none;
}
/* - Top, Full Width Navigations -----------------------------------------------
Sets a page or box with a top navbar
*/
.phui-list-view.phui-list-navbar {
list-style: none;
overflow: hidden;
border-bottom: 1px solid #e7e7e7;
}
.phui-list-view.phui-list-navbar > li {
list-style: none;
float: left;
display: block;
border-right: 1px solid #e7e7e7;
}
.phui-list-view.phui-list-navbar > li > * {
display: block;
}
.phui-list-navbar .phui-list-item-href {
color: #9ca5b5;
padding: 8px 16px;
font-size: 12px;
}
.phui-list-navbar .phui-list-item-selected .phui-list-item-href {
background: #f6f7f8;
color: #555;
}
.phui-list-navbar .phui-list-item-href:hover {
background: #e8e9ec;
color: #555;
text-decoration: none;
}
.phui-list-navbar .phui-list-item-icon {
height: 14px;
width: 14px;
display: block;
}
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
.device-phone .phui-list-view.phui-list-navbar > li {
float: none;
PHUIDocument view for mobile devices. Summary: Adds collapsing of the sidebar, also allows you to say where it goes on mobile (above or below content). ToC for example, above. General Navbar, below. Up to you. Test Plan: Review UIExamples and Diviner. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6150
2013-06-06 21:47:40 +02:00
border: none;
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
}
Adds status colors to navbar tabs Summary: Adds the abilit to set a status color of warning or fail to navbar tab lists (for objectheaders) Test Plan: uiexamples, photoshop Reviewers: epriestley Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7266
2013-10-08 04:29:05 +02:00
/* - Status Colors -------------------------------------------------------------
Colors for navbars
*/
.phui-list-item-warn .phui-list-item-href {
color: #bc7837;
}
.phui-list-item-fail .phui-list-item-href {
color: {$red};
}
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href,
.phui-list-item-warn .phui-list-item-href:hover {
background: {$lightyellow};
color: #bc7837;
}
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href,
.phui-list-item-fail .phui-list-item-href:hover {
background: {$lightred};
color: {$red};
}
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover {
background: #fcf0bd;
}
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover {
background: #f5d3d0;
}
Copy permalink