1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-24 06:20:56 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-form-view.css
epriestley 948d69364a Manage date control enabled state as part of DateControlValue
Summary: Ref T8024. Allow `DateControlValue` to manage enabled/disabled state, so we can eventually delete the copy of this logic in `DateControl`.

Test Plan:
  - Used Calendar ApplicationSearch queries to observe improved behaviors:
    - Error for invalid start date, if enabled.
    - Error for invalid end date, if enabled.
    - Error for invalid date range, if both enabled.
    - When submitting an invalid date (for example, with the time "Tea Time"), form retains invalid date verbatim instead of discarding information.
  - Created an event, using existing date controls to check that I didn't break anything.

Reviewers: chad, lpriestley, btrahan

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T8024

Differential Revision: https://secure.phabricator.com/D12673
2015-05-04 10:08:49 -07:00

510 lines
9.6 KiB
CSS

/**
* @provides phui-form-view-css
*/
.phui-form-view {
padding: 16px;
}
.phui-form-view.phui-form-full-width {
padding: 0;
}
/* only used in transaction comments */
.phui-form-shaded .phui-form-view {
border-bottom: 1px solid #D4DAE0;
background: #F4F5F8;
}
.phui-form-view label.aphront-form-label {
padding-top: 5px;
width: 19%;
float: left;
text-align: right;
font-weight: bold;
font-size: 13px;
color: {$bluetext};
-webkit-font-smoothing: antialiased;
}
.device-phone .phui-form-view label.aphront-form-label,
.phui-form-full-width.phui-form-view label.aphront-form-label {
display: block;
float: none;
text-align: left;
width: 100%;
margin-bottom: 3px;
}
.aphront-form-input {
margin-left: 20%;
margin-right: 20%;
width: 60%;
}
.device-phone .aphront-form-input,
.device .aphront-form-input select,
.device .aphront-form-input pre,
.phui-form-full-width .aphront-form-input {
margin-left: 0%;
margin-right: 0%;
width: 100%;
}
.aphront-form-input *::-webkit-input-placeholder {
color:{$greytext} !important;
}
.aphront-form-input *::-moz-placeholder {
color:{$greytext} !important;
opacity: 1; /* Firefox nudges the opacity to 0.4 */
}
.aphront-form-input *:-ms-input-placeholder {
color:{$greytext} !important;
}
.aphront-form-error {
width: 18%;
float: right;
color: {$red};
font-weight: bold;
padding-top: 5px;
}
.aphront-form-label .aphront-form-error {
display: none;
}
.aphront-dialog-body .phui-form-full-width {
margin-top: -10px;
}
.aphront-dialog-body .phui-form-view {
padding: 0;
}
.device-phone .aphront-form-error,
.phui-form-full-width .aphront-form-error {
display: none;
}
.device-phone .aphront-form-label .aphront-form-error,
.phui-form-full-width .aphront-form-label .aphront-form-error {
display: block;
float: right;
padding: 0;
width: auto;
}
.device-phone .aphront-form-drag-and-drop-upload {
display: none;
}
.aphront-form-required {
font-weight: normal;
color: {$lightgreytext};
font-size: 11px;
-webkit-font-smoothing: antialiased;
}
.aphront-form-input input {
width: 100%;
}
.aphront-form-cvc-input input {
width: 64px;
}
.aphront-form-input textarea {
display: block;
width: 100%;
box-sizing: border-box;
height: 12em;
}
.aphront-form-control {
padding: 4px;
}
.phui-form-full-width .aphront-form-control {
padding: 4px 0;
}
.aphront-form-control-submit button,
.aphront-form-control-submit a.button {
float: right;
margin: 4px 0 0 8px;
}
.phui-form-control-multi-submit input,
.phui-form-control-multi-submit button,
.phui-form-control-multi-submit a {
float: right;
margin: 4px 0 0 8px;
width: auto;
}
.aphront-form-control-textarea textarea.aphront-textarea-very-short {
height: 44px;
}
.aphront-form-control-textarea textarea.aphront-textarea-very-tall {
height: 24em;
}
.aphront-form-control-select .aphront-form-input {
padding-top: 2px;
}
.phui-form-view .aphront-form-caption {
font-size: 12px;
color: {$bluetext};
padding: 8px 0;
margin-right: 20%;
margin-left: 20%;
-webkit-font-smoothing: antialiased;
line-height: 15px;
}
.device-phone .phui-form-view .aphront-form-caption,
.phui-form-full-width .phui-form-view .aphront-form-caption {
margin: 0;
}
.aphront-form-instructions {
width: 60%;
margin-left: 20%;
padding: 10px 4px;
}
.device .aphront-form-instructions,
.phui-form-full-width .aphront-form-instructions {
width: 100%;
margin: 0;
}
.aphront-form-important {
margin: .5em 0;
background: #ffffdd;
padding: .5em 1em;
}
.aphront-form-important code {
display: block;
padding: .25em;
margin: .5em 2em;
}
.aphront-form-control-static .aphront-form-input,
.aphront-form-control-markup .aphront-form-input {
padding-top: 6px;
font-size: 13px;
}
.aphront-form-control-togglebuttons .aphront-form-input {
padding: 2px 0 0 0;
}
table.aphront-form-control-radio-layout,
table.aphront-form-control-checkbox-layout {
margin-top: 3px;
font-size: 13px;
}
table.aphront-form-control-radio-layout th {
padding-top: 3px;
padding-left: 8px;
padding-bottom: 4px;
font-weight: bold;
color: {$darkgreytext};
}
table.aphront-form-control-checkbox-layout th {
padding-top: 2px;
padding-left: 8px;
padding-bottom: 4px;
color: {$darkgreytext};
}
.aphront-form-control-radio-layout td input,
.aphront-form-control-checkbox-layout td input {
margin-top: 4px;
width: auto;
}
.aphront-form-control-radio-layout label.disabled,
.aphront-form-control-checkbox-layout label.disabled {
color: {$greytext};
}
.aphront-form-radio-caption {
margin-top: 4px;
font-size: 12px;
font-weight: normal;
color: #555;
}
.aphront-form-control-image span {
margin: 0 4px 0 2px;
}
.aphront-form-control-image .default-image {
display: inline;
width: 12px;
}
.aphront-form-input hr {
border: none;
background: #bbbbbb;
height: 1px;
position: relative;
}
.phui-form-inset {
margin: 4px 0 8px;
padding: 8px;
background: #f7f9fd;
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$blueborder};
border-radius: 3px;
}
.phui-form-inset h1 {
color: {$bluetext};
padding-bottom: 8px;
margin-bottom: 8px;
font-size: 14px;
border-bottom: 1px solid {$thinblueborder};
}
.aphront-form-drag-and-drop-file-list {
width: 400px;
}
.drag-and-drop-instructions {
color: {$darkgreytext};
font-size: 11px;
padding: 6px 8px;
}
.drag-and-drop-file-target {
border: 1px dashed #bfbfbf;
padding-top: 12px;
padding-bottom: 12px;
}
.aphront-textarea-drag-and-drop {
background: {$lightgreen};
border-color: {$green};
}
.aphront-form-crop .crop-box {
cursor: move;
overflow: hidden;
}
.aphront-form-crop .crop-box .crop-image {
position: relative;
top: 0px;
left: 0px;
}
.calendar-button {
display: inline;
padding: 8px 4px;
margin: 2px 8px 2px 2px;
position: relative;
}
.aphront-form-date-container {
position: relative;
display: inline;
}
.aphront-form-date-container select {
margin: 2px;
display: inline;
}
.aphront-form-date-container input.aphront-form-date-enabled-input {
width: auto;
display: inline;
margin-right: 8px;
font-size: 16px;
}
.aphront-form-date-container input.aphront-form-date-time-input {
width: 7em;
display: inline;
}
.fancy-datepicker {
position: absolute;
width: 240px;
}
.fancy-datepicker-core {
padding: 1px;
font-size: 12px;
text-align: center;
}
.fancy-datepicker-core .month-table,
.fancy-datepicker-core .day-table {
margin: 0 auto;
border-collapse: separate;
border-spacing: 1px;
width: 100%;
}
.fancy-datepicker-core .month-table {
margin-bottom: 6px;
font-size: 13px;
background-color: {$hoverblue};
border-radius: 2px;
}
.fancy-datepicker-core .month-table td.lrbutton {
width: 18%;
color: {$lightbluetext};
}
.fancy-datepicker-core .month-table td {
padding: 4px;
font-weight: bold;
color: {$bluetext};
}
.fancy-datepicker-core .month-table td.lrbutton:hover {
border-radius: 2px;
background: {$hoverselectedblue};
color: {$darkbluetext};
}
.fancy-datepicker-core .day-table td {
overflow: hidden;
vertical-align: center;
text-align: center;
border: 1px solid {$thinblueborder};
padding: 4px 0;
}
.fancy-datepicker .fancy-datepicker-core .day-table td.day:hover {
background-color: {$hoverblue};
border-color: {$lightblueborder};
}
.fancy-datepicker-core .day-table td.day-placeholder {
border-color: transparent;
background: transparent;
}
.fancy-datepicker-core .day-table td.weekend {
color: {$lightgreytext};
border-color: {$lightgreyborder};
background: {$lightgreybackground};
}
.fancy-datepicker-core .day-table td.day-name {
background: transparent;
border: 1px transparent;
vertical-align: bottom;
color: {$lightgreytext};
}
.fancy-datepicker-core .day-table td.today {
background: {$greybackground};
border-color: {$greyborder};
color: {$darkgreytext};
font-weight: bold;
}
.fancy-datepicker-core .day-table td.datepicker-selected {
background: {$lightgreen};
border-color: {$green};
color: {$green};
}
.fancy-datepicker-core td {
cursor: pointer;
}
.fancy-datepicker-core td.novalue {
cursor: inherit;
}
.picker-open .calendar-button .phui-icon-view {
color: {$sky};
}
.fancy-datepicker-core {
background-color: white;
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$blueborder};
box-shadow: {$dropshadow};
border-radius: 3px;
}
/* When the activation checkbox for the control is toggled off, visually
disable the individual controls. We don't actually use the "disabled" property
because we still want the values to submit. This is just a visual hint that
the controls won't be used. The controls themselves are still live, work
properly, and submit values. */
.datepicker-disabled select,
.datepicker-disabled .calendar-button,
.datepicker-disabled input[type="text"] {
opacity: 0.5;
}
.login-to-comment {
margin: 12px;
}
.phui-form-divider hr {
height: 1px;
border: 0;
background: {$thinblueborder};
width: 85%;
margin: 15px auto;
}
.recaptcha_only_if_privacy {
display: none;
}
.phabricator-standard-custom-field-header {
font-size: 16px;
color: {$bluetext};
border-bottom: 1px solid {$lightbluetext};
padding: 16px 0 4px;
margin-bottom: 4px;
}
.device-desktop .text-with-submit-control-outer-bounds {
position: relative;
}
.device-desktop .text-with-submit-control-text-bounds {
position: absolute;
left: 0;
right: 184px;
}
.device-desktop .text-with-submit-control-submit-bounds {
text-align: right;
}
.device-desktop .text-with-submit-control-submit {
width: 180px;
}
.aphront-form-choose-table td {
vertical-align: middle;
padding: 4px 0;
}
.aphront-form-choose-table .aphront-form-choose-button-cell {
padding: 4px 8px;
}