phorge/webroot/rsrc/css/layout/phabricator-property-list-view.css
epriestley 10a9f2a15f Improve PhabricatorPropertyListView and add section headers
Summary:
  - For Drydock, I want to add section headers to separate user-defined attributes from global attributes.
  - Some day for Differential, I want to add "Summary" and "Test Plan" section headers.
  - Clean up some stuff a bit; drop the multiple APIs for setting text content. Explicitly disallow appendChild().
  - Build out the UIExample a bit.

Test Plan:
{F24821}

{F24822}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Maniphest Tasks: T2015

Differential Revision: https://secure.phabricator.com/D4000
2012-11-20 18:01:18 -08:00

106 lines
2.3 KiB
CSS

/**
* @provides phabricator-property-list-view-css
*/
.phabricator-property-list-view {
border-color: #dbdbdb;
border-style: solid;
border-width: 1px 0 0 0;
}
.phabricator-property-list-container {
border-color: #dbdbdb;
border-style: solid;
border-width: 0 0 1px;
background-color: #f9f9f9;
}
.device-desktop .phabricator-property-list-container {
padding: 1em 0 0.5em;
}
.device-tablet .phabricator-property-list-container,
.device-phone .phabricator-property-list-container {
padding: .5em 0;
}
.phabricator-property-list-key {
color: #333333;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
.device-desktop .phabricator-property-list-key {
width: 15%;
margin-left: 1%;
text-align: right;
float: left;
clear: left;
margin-bottom: .5em;
}
.device-tablet .phabricator-property-list-key,
.device-phone .phabricator-property-list-key {
padding-left: .5em;
}
.phabricator-property-list-value {
color: #333333;
overflow: hidden;
}
.device-desktop .phabricator-property-list-value {
width: 50%;
margin-left: 1%;
float: left;
margin-bottom: .5em;
}
.device-tablet .phabricator-property-list-value,
.device-phone .phabricator-property-list-value {
padding-left: 1.5em;
margin-bottom: .5em;
}
.phabriator-property-list-view-end {
clear: both;
}
.phabricator-property-list-section-header {
background: #f0f0f0;
color: #666666;
padding: 4px 18px;
border-bottom: 1px solid #dbdbdb;
}
.phabricator-property-list-text-content {
padding: 12px 18px;
background: #fdfdfd;
border-bottom: 1px solid #dbdbdb;
}
/* When we follow an action list view on the Desktop, move down 30px so the
action list can start slightly above the property list. This is an unusual
case where we have something between the header and the action/property
lists and we want to give it space. */
.device-desktop .phabricator-action-list-view +
.phabricator-property-list-view {
clear: left;
margin-top: 30px;
}
/* In the common case where we immediately follow a header, move back up 30px
so we snuggle next to the header. */
.device-desktop .phabricator-header-view
+ .phabricator-action-list-view {
margin-top: -30px;
}
.device-desktop .phabricator-header-view
+ .phabricator-action-list-view
+ .phabricator-property-list-view {
margin-top: 0px;
}