[Summary view] [Print] [Text view]

   1  // Form
   2  
   3  .form-control {
   4    max-width: $input-max-width;
   5    background-color: $white;
   6    border: $input-border;
   7    border-radius: $border-radius;
   8  
   9    &:focus {
  10      border-color: $focuscolor;
  11      box-shadow: $focusshadow;
  12    }
  13  }
  14  
  15  .control-group {
  16    position: relative;
  17    display: flex;
  18    flex-wrap: wrap;
  19    margin: 0 0 1rem;
  20  
  21    > .form-check {
  22      display: inline-block;
  23    }
  24  
  25    &::after {
  26      display: table;
  27      clear: both;
  28      content: "";
  29    }
  30  
  31    .control-label {
  32      width: 240px;
  33      padding: .3rem 1rem .3rem 0;
  34    }
  35  
  36    .controls {
  37      position: relative;
  38      flex: 1;
  39      min-width: 210px;
  40  
  41      + div {
  42        width: 100%;
  43        margin: 5px 0 10px;
  44      }
  45    }
  46  
  47    .form-vertical & {
  48      flex-direction: column;
  49    }
  50  }
  51  
  52  .stack .control-label {
  53    width: 100%;
  54  }
  55  
  56  .spacer {
  57    hr {
  58      width: 380px;
  59    }
  60  }
  61  
  62  td .form-control {
  63    display: inline-block;
  64    width: auto;
  65  }
  66  
  67  .checkboxes {
  68    padding-top: 5px;
  69  
  70    .checkbox input {
  71      position: static;
  72      margin-left: 0;
  73    }
  74  }
  75  
  76  .form-check {
  77    padding-top: 5px;
  78    margin-bottom: 0;
  79  }
  80  
  81  .modal label {
  82    width: 100%;
  83  }
  84  
  85  // Validation
  86  .invalid {
  87    color: var(--danger);
  88    border-color: var(--danger);
  89  }
  90  
  91  .valid {
  92    border-color: var(--success);
  93  }
  94  
  95  .form-control-feedback {
  96    display: block;
  97  }
  98  
  99  [aria-grabbed="true"] {
 100    box-shadow: $input-box-shadow;
 101  }
 102  
 103  .sortable-handler.inactive {
 104    opacity: .3;
 105  }
 106  
 107  // set up hidden tooltip
 108  [role="tooltip"]:not(.show) {
 109    z-index: $zindex-tooltip;
 110    display: none;
 111    padding: .5em;
 112    margin: .25em;
 113    color: $white;
 114    text-align: start;
 115    background: $black;
 116    border-radius: .2rem !important;
 117  }
 118  
 119  // reveal associated tooltip on focus
 120  :focus + [role="tooltip"],
 121  :hover + [role="tooltip"] {
 122    position: absolute;
 123    display: block;
 124  }
 125  
 126  .filter-search-bar__description {
 127    bottom: 100%;
 128  }
 129  
 130  .container-popup .filter-search-bar__description {
 131    top: 100%;
 132    bottom: auto;
 133  }
 134  
 135  .input-group > .form-control[readonly] {
 136    margin-right: 1px;
 137  }
 138  
 139  .form-group {
 140    @extend .mb-3;
 141  }
 142  
 143  // Subform - non table layout
 144  div.subform-repeatable-group {
 145    position: relative;
 146    padding: 32px 32px 16px 28px;
 147    margin-top: 20px;
 148    border: $input-border;
 149    border-radius: $border-radius;
 150  
 151    > .btn-toolbar {
 152  
 153      .btn-group {
 154        position: static;
 155      }
 156  
 157      .btn {
 158        position: absolute;
 159  
 160        &.group-add {
 161          right: -1px;
 162          bottom: -1px;
 163          border-radius: $border-radius 0 $border-radius 0;
 164        }
 165        &.group-remove {
 166          top: -1px;
 167          right: -1px;
 168          border-radius: 0 $border-radius 0 $border-radius;
 169        }
 170        &.group-move {
 171          top: 50%;
 172          right: 100%;
 173          margin-top: -27px;
 174          line-height: 52px;
 175          border-radius: $border-radius 0 0 $border-radius;
 176        }
 177      }
 178    }
 179  }
 180  
 181  // Highlight draggable section
 182  .subform-repeatable-group[draggable="true"] {
 183    // For non table layout
 184    background-color: $teal;
 185  
 186    // For table layout
 187    > td {
 188      background-color: $teal;
 189    }
 190  }