mixins
3 years ago
utilities
3 years ago
vendor
3 years ago
_alert.scss
3 years ago
_badge.scss
3 years ago
_breadcrumb.scss
3 years ago
_button-group.scss
3 years ago
_buttons.scss
3 years ago
_card.scss
3 years ago
_carousel.scss
3 years ago
_close.scss
3 years ago
_code.scss
3 years ago
_custom-forms.scss
3 years ago
_dropdown.scss
3 years ago
_forms.scss
3 years ago
_functions.scss
3 years ago
_grid.scss
3 years ago
_images.scss
3 years ago
_input-group.scss
3 years ago
_jumbotron.scss
3 years ago
_list-group.scss
3 years ago
_media.scss
3 years ago
_mixins.scss
3 years ago
_modal.scss
3 years ago
_nav.scss
3 years ago
_navbar.scss
3 years ago
_pagination.scss
3 years ago
_popover.scss
3 years ago
_print.scss
3 years ago
_progress.scss
3 years ago
_reboot.scss
3 years ago
_root.scss
3 years ago
_spinners.scss
3 years ago
_tables.scss
3 years ago
_toasts.scss
3 years ago
_tooltip.scss
3 years ago
_transitions.scss
3 years ago
_type.scss
3 years ago
_utilities.scss
3 years ago
_variables.scss
3 years ago
bootstrap-grid.scss
3 years ago
bootstrap-reboot.scss
3 years ago
bootstrap-sidepanel.scss
3 years ago
bootstrap.scss
1 year ago
_input-group.scss
193 lines
| 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 | > .form-control-plaintext, |
| 16 | > .custom-select, |
| 17 | > .custom-file { |
| 18 | position: relative; // For focus state's z-index |
| 19 | flex: 1 1 auto; |
| 20 | width: 1%; |
| 21 | min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size |
| 22 | margin-bottom: 0; |
| 23 | |
| 24 | + .form-control, |
| 25 | + .custom-select, |
| 26 | + .custom-file { |
| 27 | margin-left: -$input-border-width; |
| 28 | } |
| 29 | } |
| 30 | |
| 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 { |
| 35 | z-index: 3; |
| 36 | } |
| 37 | |
| 38 | // Bring the custom file input above the label |
| 39 | > .custom-file .custom-file-input:focus { |
| 40 | z-index: 4; |
| 41 | } |
| 42 | |
| 43 | > .form-control, |
| 44 | > .custom-select { |
| 45 | &:not(:last-child) { @include border-right-radius(0); } |
| 46 | &:not(:first-child) { @include border-left-radius(0); } |
| 47 | } |
| 48 | |
| 49 | // Custom file inputs have more complex markup, thus requiring different |
| 50 | // border-radius overrides. |
| 51 | > .custom-file { |
| 52 | display: flex; |
| 53 | align-items: center; |
| 54 | |
| 55 | &:not(:last-child) .custom-file-label, |
| 56 | &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); } |
| 57 | &:not(:first-child) .custom-file-label { @include border-left-radius(0); } |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | |
| 62 | // Prepend and append |
| 63 | // |
| 64 | // While it requires one extra layer of HTML for each, dedicated prepend and |
| 65 | // append elements allow us to 1) be less clever, 2) simplify our selectors, and |
| 66 | // 3) support HTML5 form validation. |
| 67 | |
| 68 | .input-group-prepend, |
| 69 | .input-group-append { |
| 70 | display: flex; |
| 71 | |
| 72 | // Ensure buttons are always above inputs for more visually pleasing borders. |
| 73 | // This isn't needed for `.input-group-text` since it shares the same border-color |
| 74 | // as our inputs. |
| 75 | .btn { |
| 76 | position: relative; |
| 77 | z-index: 2; |
| 78 | |
| 79 | &:focus { |
| 80 | z-index: 3; |
| 81 | } |
| 82 | } |
| 83 | |
| 84 | .btn + .btn, |
| 85 | .btn + .input-group-text, |
| 86 | .input-group-text + .input-group-text, |
| 87 | .input-group-text + .btn { |
| 88 | margin-left: -$input-border-width; |
| 89 | } |
| 90 | } |
| 91 | |
| 92 | .input-group-prepend { margin-right: -$input-border-width; } |
| 93 | .input-group-append { margin-left: -$input-border-width; } |
| 94 | |
| 95 | |
| 96 | // Textual addons |
| 97 | // |
| 98 | // Serves as a catch-all element for any text or radio/checkbox input you wish |
| 99 | // to prepend or append to an input. |
| 100 | |
| 101 | .input-group-text { |
| 102 | display: flex; |
| 103 | align-items: center; |
| 104 | padding: $input-padding-y $input-padding-x; |
| 105 | margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom |
| 106 | @include font-size($input-font-size); // Match inputs |
| 107 | font-weight: $font-weight-normal; |
| 108 | line-height: $input-line-height; |
| 109 | color: $input-group-addon-color; |
| 110 | text-align: center; |
| 111 | white-space: nowrap; |
| 112 | background-color: $input-group-addon-bg; |
| 113 | border: $input-border-width solid $input-group-addon-border-color; |
| 114 | @include border-radius($input-border-radius); |
| 115 | |
| 116 | // Nuke default margins from checkboxes and radios to vertically center within. |
| 117 | input[type="radio"]="radio""], |
| 118 | input[type="checkbox"]="checkbox""] { |
| 119 | margin-top: 0; |
| 120 | } |
| 121 | } |
| 122 | |
| 123 | |
| 124 | // Sizing |
| 125 | // |
| 126 | // Remix the default form control sizing classes into new ones for easier |
| 127 | // manipulation. |
| 128 | |
| 129 | .input-group-lg > .form-control:not(textarea), |
| 130 | .input-group-lg > .custom-select { |
| 131 | height: $input-height-lg; |
| 132 | } |
| 133 | |
| 134 | .input-group-lg > .form-control, |
| 135 | .input-group-lg > .custom-select, |
| 136 | .input-group-lg > .input-group-prepend > .input-group-text, |
| 137 | .input-group-lg > .input-group-append > .input-group-text, |
| 138 | .input-group-lg > .input-group-prepend > .btn, |
| 139 | .input-group-lg > .input-group-append > .btn { |
| 140 | padding: $input-padding-y-lg $input-padding-x-lg; |
| 141 | @include font-size($input-font-size-lg); |
| 142 | line-height: $input-line-height-lg; |
| 143 | @include border-radius($input-border-radius-lg); |
| 144 | } |
| 145 | |
| 146 | .input-group-sm > .form-control:not(textarea), |
| 147 | .input-group-sm > .custom-select { |
| 148 | height: $input-height-sm; |
| 149 | } |
| 150 | |
| 151 | .input-group-sm > .form-control, |
| 152 | .input-group-sm > .custom-select, |
| 153 | .input-group-sm > .input-group-prepend > .input-group-text, |
| 154 | .input-group-sm > .input-group-append > .input-group-text, |
| 155 | .input-group-sm > .input-group-prepend > .btn, |
| 156 | .input-group-sm > .input-group-append > .btn { |
| 157 | padding: $input-padding-y-sm $input-padding-x-sm; |
| 158 | @include font-size($input-font-size-sm); |
| 159 | line-height: $input-line-height-sm; |
| 160 | @include border-radius($input-border-radius-sm); |
| 161 | } |
| 162 | |
| 163 | .input-group-lg > .custom-select, |
| 164 | .input-group-sm > .custom-select { |
| 165 | padding-right: $custom-select-padding-x + $custom-select-indicator-padding; |
| 166 | } |
| 167 | |
| 168 | |
| 169 | // Prepend and append rounded corners |
| 170 | // |
| 171 | // These rulesets must come after the sizing ones to properly override sm and lg |
| 172 | // border-radius values when extending. They're more specific than we'd like |
| 173 | // with the `.input-group >` part, but without it, we cannot override the sizing. |
| 174 | |
| 175 | |
| 176 | .input-group > .input-group-prepend > .btn, |
| 177 | .input-group > .input-group-prepend > .input-group-text, |
| 178 | .input-group > .input-group-append:not(:last-child) > .btn, |
| 179 | .input-group > .input-group-append:not(:last-child) > .input-group-text, |
| 180 | .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), |
| 181 | .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { |
| 182 | @include border-right-radius(0); |
| 183 | } |
| 184 | |
| 185 | .input-group > .input-group-append > .btn, |
| 186 | .input-group > .input-group-append > .input-group-text, |
| 187 | .input-group > .input-group-prepend:not(:first-child) > .btn, |
| 188 | .input-group > .input-group-prepend:not(:first-child) > .input-group-text, |
| 189 | .input-group > .input-group-prepend:first-child > .btn:not(:first-child), |
| 190 | .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { |
| 191 | @include border-left-radius(0); |
| 192 | } |
| 193 |