[Summary view] [Print] [Text view]

   1  // Form
   2  
   3  .form-control {
   4    max-width: $input-max-width;
   5    background-color: $white;
   6  
   7    &.input-xlarge {
   8      max-width: 21.875rem;
   9    }
  10  
  11    &.input-xxlarge {
  12      max-width: 34.375rem;
  13    }
  14  
  15    &.input-full {
  16      max-width: 100%;
  17    }
  18  }
  19  
  20  .spacer hr {
  21    width: 23.75rem;
  22  }
  23  
  24  .form-select {
  25    max-width: $input-max-width;
  26  }
  27  
  28  // Bootstrap 4 b/c on form-inline
  29  .form-inline .form-select {
  30    display: inline-block;
  31    width: auto;
  32  }
  33  
  34  @include media-breakpoint-down(lg) {
  35    .form-inline .form-select {
  36      width: 100%;
  37    }
  38  }
  39  
  40  td .form-control {
  41    display: inline-block;
  42    width: auto;
  43  }
  44  
  45  .checkboxes {
  46    padding-top: 5px;
  47  
  48    .checkbox input {
  49      position: static;
  50      margin-left: 0;
  51    }
  52  }
  53  
  54  .modal label {
  55    width: 100%;
  56  }
  57  
  58  // Validation
  59  .invalid {
  60    color: $danger;
  61    border-color: $danger;
  62  }
  63  
  64  .valid {
  65    border-color: $success;
  66  }
  67  
  68  .form-control-feedback {
  69    display: block;
  70  }
  71  
  72  // set up hidden tooltip
  73  [role="tooltip"]:not(.show) {
  74    right: 5em;
  75    z-index: $zindex-tooltip;
  76    display: none;
  77    max-width: 100%;
  78    padding: .5em;
  79    margin: .5em;
  80    color: $black;
  81    text-align: start;
  82    background: $white;
  83    border: 1px solid $gray-600;
  84    border-radius: $border-radius;
  85    box-shadow: 0 0 .5rem rgba(0, 0, 0, .8);
  86  
  87    &[id^=editarticle-] {
  88      right: auto;
  89      margin-inline-start: -10em;
  90    }
  91  
  92    &[id^=editcontact-] {
  93      right: auto;
  94      margin-inline-start: -10em;
  95    }
  96  
  97    &[id^=id-skip-] {
  98      right: auto;
  99    }
 100  
 101    &[id^=cbunpublish] {
 102      right: auto;
 103    }
 104  }
 105  
 106  // reveal associated tooltip on focus
 107  :focus + [role="tooltip"],
 108  :hover + [role="tooltip"] {
 109    position: absolute;
 110    display: block;
 111  }
 112  
 113  .filter-search-bar__description {
 114    bottom: 100%;
 115  }
 116  
 117  fieldset {
 118    margin-bottom: $cassiopeia-grid-gutter*2;
 119    + fieldset {
 120      margin-top: $cassiopeia-grid-gutter*2;
 121    }
 122  
 123    > * {
 124      margin-bottom: 0;
 125    }
 126  }
 127  
 128  .control-group {
 129    margin: $cassiopeia-grid-gutter 0;
 130  }
 131  .container-popup .filter-search-bar__description {
 132    top: 100%;
 133    bottom: auto;
 134  }
 135  
 136  .com-users-login__options {
 137    margin-top: $cassiopeia-grid-gutter*2;
 138  }
 139  
 140  .com-users-profile__edit,
 141  .com-users-registration {
 142    #jform_privacyconsent_privacy,
 143    #jform_profile_tos,
 144    #jform_terms_terms {
 145      .radio {
 146        display: inline-flex;
 147        gap: 1rem;
 148      }
 149    }
 150  }