[Summary view] [Print] [Text view]

   1  //
   2  // Base styles
   3  //
   4  
   5  .input-group {
   6    position: relative;
   7    display: flex;
   8    flex-wrap: wrap; // For form validation feedback
   9    align-items: stretch;
  10    width: 100%;
  11  
  12    > .form-control,
  13    > .form-select {
  14      position: relative; // For focus state's z-index
  15      flex: 1 1 auto;
  16      width: 1%;
  17      min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
  18    }
  19  
  20    // Bring the "active" form control to the top of surrounding elements
  21    > .form-control:focus,
  22    > .form-select:focus {
  23      z-index: 3;
  24    }
  25  
  26    // Ensure buttons are always above inputs for more visually pleasing borders.
  27    // This isn't needed for `.input-group-text` since it shares the same border-color
  28    // as our inputs.
  29    .btn {
  30      position: relative;
  31      z-index: 2;
  32  
  33      &:focus {
  34        z-index: 3;
  35      }
  36    }
  37  }
  38  
  39  
  40  // Textual addons
  41  //
  42  // Serves as a catch-all element for any text or radio/checkbox input you wish
  43  // to prepend or append to an input.
  44  
  45  .input-group-text {
  46    display: flex;
  47    align-items: center;
  48    padding: $input-group-addon-padding-y $input-group-addon-padding-x;
  49    @include font-size($input-font-size); // Match inputs
  50    font-weight: $input-group-addon-font-weight;
  51    line-height: $input-line-height;
  52    color: $input-group-addon-color;
  53    text-align: center;
  54    white-space: nowrap;
  55    background-color: $input-group-addon-bg;
  56    border: $input-border-width solid $input-group-addon-border-color;
  57    @include border-radius($input-border-radius);
  58  }
  59  
  60  
  61  // Sizing
  62  //
  63  // Remix the default form control sizing classes into new ones for easier
  64  // manipulation.
  65  
  66  .input-group-lg > .form-control,
  67  .input-group-lg > .form-select,
  68  .input-group-lg > .input-group-text,
  69  .input-group-lg > .btn {
  70    padding: $input-padding-y-lg $input-padding-x-lg;
  71    @include font-size($input-font-size-lg);
  72    @include border-radius($input-border-radius-lg);
  73  }
  74  
  75  .input-group-sm > .form-control,
  76  .input-group-sm > .form-select,
  77  .input-group-sm > .input-group-text,
  78  .input-group-sm > .btn {
  79    padding: $input-padding-y-sm $input-padding-x-sm;
  80    @include font-size($input-font-size-sm);
  81    @include border-radius($input-border-radius-sm);
  82  }
  83  
  84  .input-group-lg > .form-select,
  85  .input-group-sm > .form-select {
  86    padding-right: $form-select-padding-x + $form-select-indicator-padding;
  87  }
  88  
  89  
  90  // Rounded corners
  91  //
  92  // These rulesets must come after the sizing ones to properly override sm and lg
  93  // border-radius values when extending. They're more specific than we'd like
  94  // with the `.input-group >` part, but without it, we cannot override the sizing.
  95  
  96  // stylelint-disable-next-line no-duplicate-selectors
  97  .input-group {
  98    &:not(.has-validation) {
  99      > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
 100      > .dropdown-toggle:nth-last-child(n + 3) {
 101        @include border-end-radius(0);
 102      }
 103    }
 104  
 105    &.has-validation {
 106      > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
 107      > .dropdown-toggle:nth-last-child(n + 4) {
 108        @include border-end-radius(0);
 109      }
 110    }
 111  
 112    $validation-messages: "";
 113    @each $state in map-keys($form-validation-states) {
 114      $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
 115    }
 116  
 117    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
 118      margin-left: -$input-border-width;
 119      @include border-start-radius(0);
 120    }
 121  }