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