portal-FE-common/src/styles/bootstrap/_input-group.scss

   1 // stylelint-disable selector-no-qualifying-type
   2
   3 //
   4 // Base styles
   5 //
   6
   7 .input-group {
   8   position: relative;
   9   display: flex;
  10   flex-wrap: wrap; // For form validation feedback
  11   align-items: stretch;
  12   width: 100%;
  13
  14   .form-control,
  15   .custom-select,
  16   .custom-file {
  17     position: relative; // For focus state's z-index
  18     flex: 1 1 auto;
  19     // Add width 1% and flex-basis auto to ensure that button will not wrap out
  20     // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
  21     width: 1%;
  22     margin-bottom: 0;
  23
  24     // Bring the "active" form control to the top of surrounding elements
  25     &:focus {
  26       z-index: 3;
  27     }
  28
  29     + .form-control {
  30       margin-left: -$input-border-width;
  31     }
  32   }
  33
  34   .form-control,
  35   .custom-select {
  36     &:not(:last-child) { @include border-right-radius(0); }
  37     &:not(:first-child) { @include border-left-radius(0); }
  38   }
  39
  40   // Custom file inputs have more complex markup, thus requiring different
  41   // border-radius overrides.
  42   .custom-file {
  43     display: flex;
  44     align-items: center;
  45
  46     &:not(:last-child) .custom-file-control,
  47     &:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
  48     &:not(:first-child) .custom-file-control,
  49     &:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
  50   }
  51 }
  52
  53
  54 // Prepend and append
  55 //
  56 // While it requires one extra layer of HTML for each, dedicated prepend and
  57 // append elements allow us to 1) be less clever, 2) simplify our selectors, and
  58 // 3) support HTML5 form validation.
  59
  60 .input-group-prepend,
  61 .input-group-append {
  62   display: flex;
  63   align-items: center;
  64
  65   // Ensure buttons are always above inputs for more visually pleasing borders.
  66   // This isn't needed for `.input-group-text` since it shares the same border-color
  67   // as our inputs.
  68   .btn {
  69     position: relative;
  70     z-index: 2;
  71   }
  72
  73   .btn + .btn,
  74   .btn + .input-group-text,
  75   .input-group-text + .input-group-text,
  76   .input-group-text + .btn {
  77     margin-left: -$input-border-width;
  78   }
  79 }
  80
  81 .input-group-prepend { margin-right: -$input-border-width; }
  82 .input-group-append { margin-left: -$input-border-width; }
  83
  84
  85 // Textual addons
  86 //
  87 // Serves as a catch-all element for any text or radio/checkbox input you wish
  88 // to prepend or append to an input.
  89
  90 .input-group-text {
  91   padding: $input-padding-y $input-padding-x;
  92   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
  93   font-size: $font-size-base; // Match inputs
  94   font-weight: $font-weight-normal;
  95   line-height: $input-line-height;
  96   color: $input-group-addon-color;
  97   text-align: center;
  98   white-space: nowrap;
  99   background-color: $input-group-addon-bg;
 100   border: $input-border-width solid $input-group-addon-border-color;
 101   @include border-radius($input-border-radius);
 102
 103   // Nuke default margins from checkboxes and radios to vertically center within.
 104   input[type="radio"],
 105   input[type="checkbox"] {
 106     margin-top: 0;
 107   }
 108 }
 109
 110
 111 // Sizing
 112 //
 113 // Remix the default form control sizing classes into new ones for easier
 114 // manipulation.
 115
 116 .input-group-lg > .form-control,
 117 .input-group-lg > .input-group-prepend > .input-group-text,
 118 .input-group-lg > .input-group-append > .input-group-text,
 119 .input-group-lg > .input-group-prepend > .btn,
 120 .input-group-lg > .input-group-append > .btn {
 121   @extend .form-control-lg;
 122 }
 123
 124 .input-group-sm > .form-control,
 125 .input-group-sm > .input-group-prepend > .input-group-text,
 126 .input-group-sm > .input-group-append > .input-group-text,
 127 .input-group-sm > .input-group-prepend > .btn,
 128 .input-group-sm > .input-group-append > .btn {
 129   @extend .form-control-sm;
 130 }
 131
 132
 133 // Prepend and append rounded corners
 134 //
 135 // These rulesets must come after the sizing ones to properly override sm and lg
 136 // border-radius values when extending. They're more specific than we'd like
 137 // with the `.input-group >` part, but without it, we cannot override the sizing.
 138
 139
 140 .input-group > .input-group-prepend > .btn,
 141 .input-group > .input-group-prepend > .input-group-text,
 142 .input-group > .input-group-append:not(:last-child) > .btn,
 143 .input-group > .input-group-append:not(:last-child) > .input-group-text,
 144 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 145 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
 146   @include border-right-radius(0);
 147 }
 148
 149 .input-group > .input-group-append > .btn,
 150 .input-group > .input-group-append > .input-group-text,
 151 .input-group > .input-group-prepend:not(:first-child) > .btn,
 152 .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
 153 .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
 154 .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
 155   @include border-left-radius(0);
 156 }