bootstrap/forms/_input-group.scss

0001 //
0002 // Base styles
0003 //
0004
0005 .input-group {
0006   position: relative;
0007   display: flex;
0008   flex-wrap: wrap; // For form validation feedback
0009   align-items: stretch;
0010   width: 100%;
0011
0012   > .form-control,
0013   > .form-select {
0014     position: relative; // For focus state's z-index
0015     flex: 1 1 auto;
0016     width: 1%;
0017     min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
0018   }
0019
0020   // Bring the "active" form control to the top of surrounding elements
0021   > .form-control:focus,
0022   > .form-select:focus {
0023     z-index: 3;
0024   }
0025
0026   // Ensure buttons are always above inputs for more visually pleasing borders.
0027   // This isn't needed for `.input-group-text` since it shares the same border-color
0028   // as our inputs.
0029   .btn {
0030     position: relative;
0031     z-index: 2;
0032
0033     &:focus {
0034       z-index: 3;
0035     }
0036   }
0037 }
0038
0039
0040 // Textual addons
0041 //
0042 // Serves as a catch-all element for any text or radio/checkbox input you wish
0043 // to prepend or append to an input.
0044
0045 .input-group-text {
0046   display: flex;
0047   align-items: center;
0048   padding: $input-group-addon-padding-y $input-group-addon-padding-x;
0049   @include font-size($input-font-size); // Match inputs
0050   font-weight: $input-group-addon-font-weight;
0051   line-height: $input-line-height;
0052   color: $input-group-addon-color;
0053   text-align: center;
0054   white-space: nowrap;
0055   background-color: $input-group-addon-bg;
0056   border: $input-border-width solid $input-group-addon-border-color;
0057   @include border-radius($input-border-radius);
0058 }
0059
0060
0061 // Sizing
0062 //
0063 // Remix the default form control sizing classes into new ones for easier
0064 // manipulation.
0065
0066 .input-group-lg > .form-control,
0067 .input-group-lg > .form-select,
0068 .input-group-lg > .input-group-text,
0069 .input-group-lg > .btn {
0070   padding: $input-padding-y-lg $input-padding-x-lg;
0071   @include font-size($input-font-size-lg);
0072   @include border-radius($input-border-radius-lg);
0073 }
0074
0075 .input-group-sm > .form-control,
0076 .input-group-sm > .form-select,
0077 .input-group-sm > .input-group-text,
0078 .input-group-sm > .btn {
0079   padding: $input-padding-y-sm $input-padding-x-sm;
0080   @include font-size($input-font-size-sm);
0081   @include border-radius($input-border-radius-sm);
0082 }
0083
0084 .input-group-lg > .form-select,
0085 .input-group-sm > .form-select {
0086   padding-right: $form-select-padding-x + $form-select-indicator-padding;
0087 }
0088
0089
0090 // Rounded corners
0091 //
0092 // These rulesets must come after the sizing ones to properly override sm and lg
0093 // border-radius values when extending. They're more specific than we'd like
0094 // with the `.input-group >` part, but without it, we cannot override the sizing.
0095
0096 // stylelint-disable-next-line no-duplicate-selectors
0097 .input-group {
0098   &:not(.has-validation) {
0099     > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
0100     > .dropdown-toggle:nth-last-child(n + 3) {
0101       @include border-end-radius(0);
0102     }
0103   }
0104
0105   &.has-validation {
0106     > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
0107     > .dropdown-toggle:nth-last-child(n + 4) {
0108       @include border-end-radius(0);
0109     }
0110   }
0111
0112   $validation-messages: "";
0113   @each $state in map-keys($form-validation-states) {
0114     $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
0115   }
0116
0117   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
0118     margin-left: -$input-border-width;
0119     @include border-start-radius(0);
0120   }
0121 }