mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-23 05:50:55 +01:00
43ff24b0f3
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
48 lines
928 B
CSS
48 lines
928 B
CSS
/**
|
|
* @provides phabricator-form-view-css
|
|
*/
|
|
|
|
.phabricator-form-view {
|
|
padding: 20px;
|
|
background: #f4f5f8;
|
|
border-width: 1px 0;
|
|
border-style: solid;
|
|
border-color: rgb(199, 201, 214);
|
|
}
|
|
|
|
.device-phone .phabricator-form-view {
|
|
padding: 10px 5px 10px 10px;
|
|
}
|
|
|
|
.device .phabricator-form-view .aphront-form-control .aphront-form-label {
|
|
display: block;
|
|
float: none;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.device .phabricator-form-view .aphront-form-control .aphront-form-caption {
|
|
display: block;
|
|
float: none;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.device .phabricator-form-view .aphront-form-control .aphront-form-input {
|
|
float: none;
|
|
display: block;
|
|
text-align: left;
|
|
margin: .25em 0 0 0;
|
|
width: 99%;
|
|
padding: 0;
|
|
}
|
|
|
|
.device .phabricator-form-view .aphront-form-control .aphront-form-error {
|
|
float: none;
|
|
text-align: left;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|