1 // stylelint-disable selector-no-qualifying-type
10 flex-wrap: wrap; // For form validation feedback
15 > .form-control-plaintext,
18 position: relative; // For focus state's z-index
21 min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
27 margin-left: -$input-border-width;
31 // Bring the "active" form control to the top of surrounding elements
32 > .form-control:focus,
33 > .custom-select:focus,
34 > .custom-file .custom-file-input:focus ~ .custom-file-label {
38 // Bring the custom file input above the label
39 > .custom-file .custom-file-input:focus {
45 &:not(:first-child) { @include border-left-radius(0); }
48 // Custom file inputs have more complex markup, thus requiring different
49 // border-radius overrides.
54 &:not(:last-child) .custom-file-label,
55 &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
58 &:not(.has-validation) {
59 > .form-control:not(:last-child),
60 > .custom-select:not(:last-child),
61 > .custom-file:not(:last-child) .custom-file-label::after {
62 @include border-right-radius(0);
67 > .form-control:nth-last-child(n + 3),
68 > .custom-select:nth-last-child(n + 3),
69 > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
70 @include border-right-radius(0);
78 // While it requires one extra layer of HTML for each, dedicated prepend and
79 // append elements allow us to 1) be less clever, 2) simplify our selectors, and
80 // 3) support HTML5 form validation.
86 // Ensure buttons are always above inputs for more visually pleasing borders.
87 // This isn't needed for `.input-group-text` since it shares the same border-color
99 .btn + .input-group-text,
100 .input-group-text + .input-group-text,
101 .input-group-text + .btn {
102 margin-left: -$input-border-width;
106 .input-group-prepend { margin-right: -$input-border-width; }
107 .input-group-append { margin-left: -$input-border-width; }
112 // Serves as a catch-all element for any text or radio/checkbox input you wish
113 // to prepend or append to an input.
118 padding: $input-padding-y $input-padding-x;
119 margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
120 @include font-size($input-font-size); // Match inputs
121 font-weight: $font-weight-normal;
122 line-height: $input-line-height;
123 color: $input-group-addon-color;
126 background-color: $input-group-addon-bg;
127 border: $input-border-width solid $input-group-addon-border-color;
128 @include border-radius($input-border-radius);
130 // Nuke default margins from checkboxes and radios to vertically center within.
132 input[type="checkbox"] {
140 // Remix the default form control sizing classes into new ones for easier
143 .input-group-lg > .form-control:not(textarea),
144 .input-group-lg > .custom-select {
145 height: $input-height-lg;
148 .input-group-lg > .form-control,
149 .input-group-lg > .custom-select,
150 .input-group-lg > .input-group-prepend > .input-group-text,
151 .input-group-lg > .input-group-append > .input-group-text,
152 .input-group-lg > .input-group-prepend > .btn,
153 .input-group-lg > .input-group-append > .btn {
154 padding: $input-padding-y-lg $input-padding-x-lg;
155 @include font-size($input-font-size-lg);
156 line-height: $input-line-height-lg;
157 @include border-radius($input-border-radius-lg);
160 .input-group-sm > .form-control:not(textarea),
161 .input-group-sm > .custom-select {
162 height: $input-height-sm;
165 .input-group-sm > .form-control,
166 .input-group-sm > .custom-select,
167 .input-group-sm > .input-group-prepend > .input-group-text,
168 .input-group-sm > .input-group-append > .input-group-text,
169 .input-group-sm > .input-group-prepend > .btn,
170 .input-group-sm > .input-group-append > .btn {
171 padding: $input-padding-y-sm $input-padding-x-sm;
172 @include font-size($input-font-size-sm);
173 line-height: $input-line-height-sm;
174 @include border-radius($input-border-radius-sm);
177 .input-group-lg > .custom-select,
178 .input-group-sm > .custom-select {
179 padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
183 // Prepend and append rounded corners
185 // These rulesets must come after the sizing ones to properly override sm and lg
186 // border-radius values when extending. They're more specific than we'd like
187 // with the `.input-group >` part, but without it, we cannot override the sizing.
190 .input-group > .input-group-prepend > .btn,
191 .input-group > .input-group-prepend > .input-group-text,
192 .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
193 .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
194 .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
195 .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
196 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
197 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
198 @include border-right-radius(0);
201 .input-group > .input-group-append > .btn,
202 .input-group > .input-group-append > .input-group-text,
203 .input-group > .input-group-prepend:not(:first-child) > .btn,
204 .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
205 .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
206 .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
207 @include border-left-radius(0);