[6a3a178] | 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 | }
|
---|