2011-02-16 22:14:09 -08:00
|
|
|
/**
|
|
|
|
|
* @provides phabricator-object-selector-css
|
|
|
|
|
* @requires aphront-dialog-view-css
|
|
|
|
|
*/
|
|
|
|
|
|
2013-11-30 19:47:20 -08:00
|
|
|
.device-desktop .phabricator-object-selector-dialog {
|
|
|
|
|
width: 860px;
|
2011-02-16 22:14:09 -08:00
|
|
|
}
|
|
|
|
|
|
2011-02-17 14:32:01 -08:00
|
|
|
.phabricator-object-selector-dialog .aphront-dialog-body {
|
2011-02-16 22:14:09 -08:00
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-search {
|
|
|
|
|
width: 100%;
|
2013-11-30 19:47:20 -08:00
|
|
|
background: {$lightbluebackground};
|
|
|
|
|
border-bottom: 1px solid {$thinblueborder};
|
2011-02-16 22:14:09 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-search td {
|
|
|
|
|
padding: 4px 8px;
|
Update form styles, implement in many places
Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:
- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.
I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.
Test Plan: Tested many applications, forms, mobile and tablet.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 14:07:06 -07:00
|
|
|
vertical-align: middle;
|
2011-02-16 22:14:09 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td.phabricator-object-selector-search-text {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-30 19:47:20 -08:00
|
|
|
.phabricator-object-selector-row:hover {
|
|
|
|
|
background-color: {$greybackground};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-row:hover a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
2011-02-16 22:14:09 -08:00
|
|
|
.phabricator-object-selector-search-text input {
|
|
|
|
|
width: 100%;
|
2013-11-30 19:47:20 -08:00
|
|
|
border-radius: 14px;
|
|
|
|
|
padding: 4px 8px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
margin: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-popicon {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 4px;
|
2011-02-16 22:14:09 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-results {
|
|
|
|
|
position: relative;
|
2011-02-17 14:32:01 -08:00
|
|
|
height: 24em;
|
2011-02-16 22:14:09 -08:00
|
|
|
overflow-y: scroll;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-handle {
|
|
|
|
|
width: 100%;
|
2013-11-30 19:47:20 -08:00
|
|
|
background: {$lightgreybackground};
|
2011-02-16 22:14:09 -08:00
|
|
|
margin-bottom: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-handle td {
|
2013-11-30 19:47:20 -08:00
|
|
|
padding: 4px 8px;
|
2011-02-16 22:14:09 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-handle th {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2012-03-19 19:20:49 -07:00
|
|
|
.phabricator-object-selector-handle th a {
|
|
|
|
|
display: block;
|
2013-11-30 19:47:20 -08:00
|
|
|
padding: 4px 0;
|
2012-03-19 19:20:49 -07:00
|
|
|
}
|
|
|
|
|
|
2011-02-16 22:14:09 -08:00
|
|
|
.phabricator-object-selector-header {
|
2013-11-30 19:47:20 -08:00
|
|
|
margin-bottom: 8px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: {$bluetext};
|
2011-02-16 22:14:09 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-attach-explicit {
|
|
|
|
|
padding: 4px;
|
|
|
|
|
background: #f3f3f3;
|
|
|
|
|
border: solid #bbbbbb;
|
|
|
|
|
border-width: 1px 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-object-selector-current {
|
2013-11-30 19:47:20 -08:00
|
|
|
border-top: 1px solid {$thinblueborder};
|
2011-02-16 22:14:09 -08:00
|
|
|
}
|
2011-02-17 14:32:01 -08:00
|
|
|
|
2013-11-30 19:47:20 -08:00
|
|
|
.phabricator-object-selector-currently-attached {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
2011-02-17 14:32:01 -08:00
|
|
|
|
|
|
|
|
.object-selector-nothing {
|
|
|
|
|
padding: 1em;
|
2013-09-02 08:12:18 -07:00
|
|
|
color: {$lightgreytext};
|
2011-02-17 14:32:01 -08:00
|
|
|
text-align: center;
|
|
|
|
|
}
|
2011-06-14 07:55:04 -07:00
|
|
|
|
|
|
|
|
.phabricator-object-selector-instructions {
|
|
|
|
|
font-size: 11px;
|
2013-09-02 08:08:54 -07:00
|
|
|
color: {$greytext};
|
2011-06-14 07:55:04 -07:00
|
|
|
margin-top: 1.25em;
|
|
|
|
|
}
|