mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 08:52:39 +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
74 lines
1.2 KiB
CSS
74 lines
1.2 KiB
CSS
/**
|
|
* @provides aphront-tokenizer-control-css
|
|
* @requires aphront-typeahead-control-css
|
|
*/
|
|
|
|
body div.jx-tokenizer {
|
|
background: transparent;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
body div.jx-tokenizer-container {
|
|
position: relative;
|
|
display: block;
|
|
padding: 0;
|
|
height: 30px;
|
|
}
|
|
|
|
var.jx-tokenizer-metrics {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 20px;
|
|
}
|
|
|
|
body input.jx-tokenizer-input {
|
|
border: 1px solid transparent;
|
|
border-width: 1px 0px;
|
|
padding: 3px;
|
|
outline: none;
|
|
float: left;
|
|
width: 100%;
|
|
border-shadow: none;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
font-size: 13px;
|
|
color: #777;
|
|
height: 26px;
|
|
}
|
|
|
|
body input.jx-tokenizer-input:focus {
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.jx-typeahead-placeholder {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
a.jx-tokenizer-x {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
a.jx-tokenizer-x:hover {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.jx-tokenizer-token {
|
|
padding: 2px 6px 3px;
|
|
border: 1px solid #a4bdec;
|
|
margin: 3px 2px 0 4px;
|
|
background: #dee7f8;
|
|
float: left;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
color: #333;
|
|
|
|
}
|
|
|
|
a.jx-tokenizer-token:hover {
|
|
text-decoration: none;
|
|
background: #bbcef1;
|
|
}
|