[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phui-form-view-css
   3   */
   4  
   5  .phui-form-view {
   6    padding: 16px;
   7  }
   8  
   9  .phui-form-view.phui-form-full-width {
  10    padding: 0;
  11  }
  12  
  13  /* only used in transaction comments */
  14  .phui-form-shaded .phui-form-view {
  15    border-bottom: 1px solid #D4DAE0;
  16    background: #F4F5F8;
  17  }
  18  
  19  .phui-form-view label.aphront-form-label {
  20    padding-top: 5px;
  21    width: 19%;
  22    float: left;
  23    text-align: right;
  24    font-weight: bold;
  25    font-size: 13px;
  26    color: {$bluetext};
  27    -webkit-font-smoothing: antialiased;
  28  }
  29  
  30  .device-phone .phui-form-view label.aphront-form-label,
  31  .phui-form-full-width.phui-form-view label.aphront-form-label {
  32    display: block;
  33    float: none;
  34    text-align: left;
  35    width: 100%;
  36    margin-bottom: 3px;
  37  }
  38  
  39  .aphront-form-input {
  40    margin-left: 20%;
  41    margin-right: 20%;
  42    width: 60%;
  43  }
  44  
  45  .device-phone .aphront-form-input,
  46  .phui-form-full-width .aphront-form-input {
  47    margin-left: 0%;
  48    margin-right: 0%;
  49    width: 100%;
  50  }
  51  
  52  .aphront-form-input *::-webkit-input-placeholder {
  53    color:{$greytext} !important;
  54  }
  55  
  56  .aphront-form-input *::-moz-placeholder {
  57    color:{$greytext} !important;
  58    opacity: 1; /* Firefox nudges the opacity to 0.4 */
  59  }
  60  
  61  .aphront-form-input *:-ms-input-placeholder  {
  62    color:{$greytext} !important;
  63  }
  64  
  65  
  66  .aphront-form-error {
  67    width: 18%;
  68    float: right;
  69    color: {$red};
  70    font-weight: bold;
  71    padding-top: 5px;
  72  }
  73  
  74  .aphront-dialog-body .phui-form-full-width {
  75    margin-top: -10px;
  76  }
  77  
  78  .aphront-dialog-body .phui-form-view {
  79    padding: 0;
  80  }
  81  
  82  .device-phone .aphront-form-error,
  83  .phui-form-full-width .aphront-form-error {
  84    float: none;
  85    width: 100%;
  86  }
  87  
  88  .device-phone .aphront-form-drag-and-drop-upload {
  89    display: none;
  90  }
  91  
  92  .aphront-form-required {
  93    font-weight: normal;
  94    color: {$lightgreytext};
  95    font-size: 11px;
  96    -webkit-font-smoothing: antialiased;
  97  }
  98  
  99  .aphront-form-input input {
 100    width: 100%;
 101  }
 102  
 103  .aphront-form-input textarea {
 104    display: block;
 105    width: 100%;
 106    box-sizing: border-box;
 107    height: 12em;
 108  }
 109  
 110  .aphront-form-control {
 111    padding: 4px;
 112  }
 113  
 114  .phui-form-full-width .aphront-form-control {
 115    padding: 4px 0;
 116  }
 117  
 118  .aphront-form-control-submit button,
 119  .aphront-form-control-submit a.button {
 120    float: right;
 121    margin: 4px 0 0 8px;
 122  }
 123  
 124  .phui-form-control-multi-submit input,
 125  .phui-form-control-multi-submit button,
 126  .phui-form-control-multi-submit a {
 127    float: right;
 128    margin: 4px 0 0 8px;
 129    width: auto;
 130  }
 131  
 132  .aphront-form-control-textarea textarea.aphront-textarea-very-short {
 133    height: 44px;
 134  }
 135  
 136  .aphront-form-control-textarea textarea.aphront-textarea-very-tall {
 137    height: 24em;
 138  }
 139  
 140  .aphront-form-control-select .aphront-form-input {
 141    padding-top: 2px;
 142  }
 143  
 144  .phui-form-view .aphront-form-caption {
 145    font-size: 12px;
 146    color: {$bluetext};
 147    padding: 8px 0;
 148    margin-right: 20%;
 149    margin-left: 20%;
 150    -webkit-font-smoothing: antialiased;
 151    line-height: 15px;
 152  }
 153  
 154  .device-phone .phui-form-view .aphront-form-caption,
 155  .phui-form-full-width .phui-form-view .aphront-form-caption {
 156    margin: 0;
 157  }
 158  
 159  /* override for when inside an aphront-panel-view */
 160  .aphront-panel-view .phui-form-view h1 {
 161    padding: 0em 0em .8em 0em;
 162  }
 163  
 164  .aphront-form-instructions {
 165    width: 60%;
 166    margin-left: 20%;
 167    padding: 10px 4px;
 168  }
 169  
 170  .device .aphront-form-instructions,
 171  .phui-form-full-width .aphront-form-instructions {
 172    width: 100%;
 173    margin: 0;
 174  }
 175  
 176  .aphront-form-important {
 177    margin: .5em 0;
 178    background: #ffffdd;
 179    padding: .5em 1em;
 180  }
 181  .aphront-form-important code {
 182    display: block;
 183    padding: .25em;
 184    margin: .5em 2em;
 185  }
 186  
 187  .aphront-form-control-static .aphront-form-input,
 188  .aphront-form-control-markup .aphront-form-input {
 189    padding-top: 6px;
 190    font-size: 13px;
 191  }
 192  
 193  .aphront-form-control-togglebuttons .aphront-form-input {
 194    padding: 2px 0 0 0;
 195  }
 196  
 197  table.aphront-form-control-radio-layout,
 198  table.aphront-form-control-checkbox-layout {
 199    margin-top: 3px;
 200    font-size: 13px;
 201  }
 202  
 203  table.aphront-form-control-radio-layout th {
 204    padding-top: 3px;
 205    padding-left: 8px;
 206    padding-bottom: 4px;
 207    font-weight: bold;
 208    color: {$darkgreytext};
 209  }
 210  
 211  
 212  table.aphront-form-control-checkbox-layout th {
 213    padding-top: 2px;
 214    padding-left: 8px;
 215    padding-bottom: 4px;
 216    color: {$darkgreytext};
 217  }
 218  
 219  .aphront-form-control-radio-layout td input,
 220  .aphront-form-control-checkbox-layout td input {
 221    margin-top: 4px;
 222    width: auto;
 223  }
 224  
 225  .aphront-form-control-radio-layout label.disabled,
 226  .aphront-form-control-checkbox-layout label.disabled {
 227    color: {$greytext};
 228  }
 229  
 230  .aphront-form-radio-caption {
 231    margin-top: 4px;
 232    font-size: 12px;
 233    font-weight: normal;
 234    color: #555;
 235  }
 236  
 237  .aphront-form-control-image span {
 238    margin: 0 4px 0 2px;
 239  }
 240  
 241  .aphront-form-control-image .default-image {
 242    display: inline;
 243    width: 12px;
 244  }
 245  
 246  .aphront-form-input hr {
 247    border: none;
 248    background: #bbbbbb;
 249    height: 1px;
 250    position: relative;
 251  }
 252  
 253  .phui-form-inset {
 254    margin: 4px 0 8px;
 255    padding: 8px;
 256    background: #f7f9fd;
 257    border: 1px solid {$lightblueborder};
 258    border-bottom: 1px solid {$blueborder};
 259    border-radius: 3px;
 260  }
 261  
 262  .phui-form-inset h1 {
 263    color: {$bluetext};
 264    padding-bottom: 8px;
 265    margin-bottom: 8px;
 266    font-size: 14px;
 267    border-bottom: 1px solid {$thinblueborder};
 268  }
 269  
 270  .aphront-form-drag-and-drop-file-list {
 271    width: 400px;
 272  }
 273  
 274  .drag-and-drop-instructions {
 275    color: {$darkgreytext};
 276    font-size: 11px;
 277    padding: 6px 8px;
 278  }
 279  
 280  .drag-and-drop-file-target {
 281    border: 1px dashed #bfbfbf;
 282    padding-top: 12px;
 283    padding-bottom: 12px;
 284  }
 285  
 286  .aphront-textarea-drag-and-drop {
 287    background: {$lightgreen};
 288    border-color: {$green};
 289  }
 290  
 291  .aphront-form-crop .crop-box {
 292    cursor: move;
 293    overflow: hidden;
 294  }
 295  
 296  .aphront-form-crop .crop-box .crop-image {
 297    position: relative;
 298    top: 0px;
 299    left: 0px;
 300  }
 301  
 302  .calendar-button {
 303    display: inline;
 304    padding: 8px 4px;
 305    margin: 2px 8px 2px 2px;
 306    position: relative;
 307  }
 308  
 309  .aphront-form-date-container {
 310    position: relative;
 311    display: inline;
 312  }
 313  
 314  .aphront-form-date-container select {
 315    margin: 2px;
 316    display: inline;
 317  }
 318  .aphront-form-date-container input.aphront-form-date-enabled-input {
 319    width: auto;
 320    display: inline;
 321    margin-right: 8px;
 322    font-size: 16px;
 323  }
 324  
 325  .aphront-form-date-container input.aphront-form-date-time-input {
 326    width: 7em;
 327    display: inline;
 328  }
 329  
 330  .fancy-datepicker {
 331    position: absolute;
 332    width: 240px;
 333  }
 334  
 335  .fancy-datepicker-core {
 336    padding: 1px;
 337    font-size: 12px;
 338    text-align: center;
 339  }
 340  
 341  .fancy-datepicker-core .month-table,
 342  .fancy-datepicker-core .day-table {
 343    margin: 0 auto;
 344    border-collapse: separate;
 345    border-spacing: 1px;
 346    width: 100%;
 347  }
 348  
 349  .fancy-datepicker-core .month-table {
 350    margin-bottom: 6px;
 351    font-size: 13px;
 352    background-color: {$hoverblue};
 353    border-radius: 2px;
 354  }
 355  
 356  .fancy-datepicker-core .month-table td.lrbutton {
 357    width: 18%;
 358    color: {$lightbluetext};
 359  }
 360  
 361  .fancy-datepicker-core .month-table td {
 362    padding: 4px;
 363    font-weight: bold;
 364    color: {$bluetext};
 365  }
 366  
 367  .fancy-datepicker-core .month-table td.lrbutton:hover {
 368    border-radius: 2px;
 369    background: {$hoverselectedblue};
 370    color: {$darkbluetext};
 371  }
 372  
 373  .fancy-datepicker-core .day-table td {
 374    overflow: hidden;
 375    vertical-align: center;
 376    text-align: center;
 377    border: 1px solid {$thinblueborder};
 378    padding: 4px 0;
 379  }
 380  
 381  .fancy-datepicker .fancy-datepicker-core .day-table td.day:hover {
 382    background-color: {$hoverblue};
 383    border-color: {$lightblueborder};
 384  }
 385  
 386  .fancy-datepicker-core .day-table td.day-placeholder {
 387    border-color: transparent;
 388    background: transparent;
 389  }
 390  
 391  .fancy-datepicker-core .day-table td.weekend {
 392    color: {$lightgreytext};
 393    border-color: {$lightgreyborder};
 394    background: {$lightgreybackground};
 395  }
 396  
 397  .fancy-datepicker-core .day-table td.day-name {
 398    background: transparent;
 399    border: 1px transparent;
 400    vertical-align: bottom;
 401    color: {$lightgreytext};
 402  }
 403  
 404  .fancy-datepicker-core .day-table td.today {
 405    background: {$greybackground};
 406    border-color: {$greyborder};
 407    color: {$darkgreytext};
 408    font-weight: bold;
 409  }
 410  
 411  .fancy-datepicker-core .day-table td.datepicker-selected {
 412    background: {$lightgreen};
 413    border-color: {$green};
 414    color: {$green};
 415  }
 416  
 417  .fancy-datepicker-core td {
 418    cursor: pointer;
 419  }
 420  
 421  .fancy-datepicker-core td.novalue {
 422    cursor: inherit;
 423  }
 424  
 425  .picker-open .calendar-button .phui-icon-view {
 426    color: {$sky};
 427  }
 428  
 429  .fancy-datepicker-core {
 430    background-color: white;
 431    border: 1px solid {$lightblueborder};
 432    border-bottom: 1px solid {$blueborder};
 433    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
 434    border-radius: 3px;
 435  }
 436  
 437  .login-to-comment {
 438    margin: 12px;
 439  }
 440  
 441  .phui-form-divider hr {
 442    height: 1px;
 443    border: 0;
 444    background: #c0c0c0;
 445    width: 85%;
 446    margin: 15px auto;
 447  }
 448  
 449  .recaptcha_only_if_privacy {
 450    display: none;
 451  }
 452  
 453  .phabricator-standard-custom-field-header {
 454    font-size: 16px;
 455    color: {$bluetext};
 456    border-bottom: 1px solid {$lightbluetext};
 457    padding: 16px 0 4px;
 458    margin-bottom: 4px;
 459  }
 460  
 461  .device-desktop .text-with-submit-control-outer-bounds {
 462    position: relative;
 463  }
 464  
 465  .device-desktop .text-with-submit-control-text-bounds {
 466    position: absolute;
 467    left: 0;
 468    right: 184px;
 469  }
 470  
 471  .device-desktop .text-with-submit-control-submit-bounds {
 472    text-align: right;
 473  }
 474  
 475  .device-desktop .text-with-submit-control-submit {
 476    width: 180px;
 477  }
 478  
 479  
 480  .aphront-form-choose-table td {
 481    vertical-align: middle;
 482    padding: 4px 0;
 483  }
 484  
 485  .aphront-form-choose-table .aphront-form-choose-button-cell {
 486    padding: 4px 8px;
 487  }