_input-group.scss 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. // stylelint-disable selector-no-qualifying-type
  2. //
  3. // Base styles
  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. > .form-control,
  12. > .form-control-plaintext,
  13. > .custom-select,
  14. > .custom-file {
  15. position: relative; // For focus state's z-index
  16. flex: 1 1 auto;
  17. width: 1%;
  18. min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
  19. margin-bottom: 0;
  20. + .form-control,
  21. + .custom-select,
  22. + .custom-file {
  23. margin-left: -$input-border-width;
  24. }
  25. }
  26. // Bring the "active" form control to the top of surrounding elements
  27. > .form-control:focus,
  28. > .custom-select:focus,
  29. > .custom-file .custom-file-input:focus ~ .custom-file-label {
  30. z-index: 3;
  31. }
  32. // Bring the custom file input above the label
  33. > .custom-file .custom-file-input:focus {
  34. z-index: 4;
  35. }
  36. > .form-control,
  37. > .custom-select {
  38. &:not(:first-child) { @include border-left-radius(0); }
  39. }
  40. // Custom file inputs have more complex markup, thus requiring different
  41. // border-radius overrides.
  42. > .custom-file {
  43. display: flex;
  44. align-items: center;
  45. &:not(:last-child) .custom-file-label,
  46. &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
  47. &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
  48. }
  49. &:not(.has-validation) {
  50. > .form-control:not(:last-child),
  51. > .custom-select:not(:last-child),
  52. > .custom-file:not(:last-child) .custom-file-label,
  53. > .custom-file:not(:last-child) .custom-file-label::after {
  54. @include border-right-radius(0);
  55. }
  56. }
  57. &.has-validation {
  58. > .form-control:nth-last-child(n + 3),
  59. > .custom-select:nth-last-child(n + 3),
  60. > .custom-file:nth-last-child(n + 3) .custom-file-label,
  61. > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
  62. @include border-right-radius(0);
  63. }
  64. }
  65. }
  66. // Prepend and append
  67. //
  68. // While it requires one extra layer of HTML for each, dedicated prepend and
  69. // append elements allow us to 1) be less clever, 2) simplify our selectors, and
  70. // 3) support HTML5 form validation.
  71. .input-group-prepend,
  72. .input-group-append {
  73. display: flex;
  74. // Ensure buttons are always above inputs for more visually pleasing borders.
  75. // This isn't needed for `.input-group-text` since it shares the same border-color
  76. // as our inputs.
  77. .btn {
  78. position: relative;
  79. z-index: 2;
  80. &:focus {
  81. z-index: 3;
  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. .input-group-prepend { margin-right: -$input-border-width; }
  92. .input-group-append { margin-left: -$input-border-width; }
  93. // Textual addons
  94. //
  95. // Serves as a catch-all element for any text or radio/checkbox input you wish
  96. // to prepend or append to an input.
  97. .input-group-text {
  98. display: flex;
  99. align-items: center;
  100. padding: $input-padding-y $input-padding-x;
  101. margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
  102. @include font-size($input-font-size); // Match inputs
  103. font-weight: $font-weight-normal;
  104. line-height: $input-line-height;
  105. color: $input-group-addon-color;
  106. text-align: center;
  107. white-space: nowrap;
  108. background-color: $input-group-addon-bg;
  109. border: $input-border-width solid $input-group-addon-border-color;
  110. @include border-radius($input-border-radius);
  111. // Nuke default margins from checkboxes and radios to vertically center within.
  112. input[type="radio"],
  113. input[type="checkbox"] {
  114. margin-top: 0;
  115. }
  116. }
  117. // Sizing
  118. //
  119. // Remix the default form control sizing classes into new ones for easier
  120. // manipulation.
  121. .input-group-lg > .form-control:not(textarea),
  122. .input-group-lg > .custom-select {
  123. height: $input-height-lg;
  124. }
  125. .input-group-lg > .form-control,
  126. .input-group-lg > .custom-select,
  127. .input-group-lg > .input-group-prepend > .input-group-text,
  128. .input-group-lg > .input-group-append > .input-group-text,
  129. .input-group-lg > .input-group-prepend > .btn,
  130. .input-group-lg > .input-group-append > .btn {
  131. padding: $input-padding-y-lg $input-padding-x-lg;
  132. @include font-size($input-font-size-lg);
  133. line-height: $input-line-height-lg;
  134. @include border-radius($input-border-radius-lg);
  135. }
  136. .input-group-sm > .form-control:not(textarea),
  137. .input-group-sm > .custom-select {
  138. height: $input-height-sm;
  139. }
  140. .input-group-sm > .form-control,
  141. .input-group-sm > .custom-select,
  142. .input-group-sm > .input-group-prepend > .input-group-text,
  143. .input-group-sm > .input-group-append > .input-group-text,
  144. .input-group-sm > .input-group-prepend > .btn,
  145. .input-group-sm > .input-group-append > .btn {
  146. padding: $input-padding-y-sm $input-padding-x-sm;
  147. @include font-size($input-font-size-sm);
  148. line-height: $input-line-height-sm;
  149. @include border-radius($input-border-radius-sm);
  150. }
  151. .input-group-lg > .custom-select,
  152. .input-group-sm > .custom-select {
  153. padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
  154. }
  155. // Prepend and append rounded corners
  156. //
  157. // These rulesets must come after the sizing ones to properly override sm and lg
  158. // border-radius values when extending. They're more specific than we'd like
  159. // with the `.input-group >` part, but without it, we cannot override the sizing.
  160. .input-group > .input-group-prepend > .btn,
  161. .input-group > .input-group-prepend > .input-group-text,
  162. .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
  163. .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
  164. .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
  165. .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
  166. .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
  167. .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  168. @include border-right-radius(0);
  169. }
  170. .input-group > .input-group-append > .btn,
  171. .input-group > .input-group-append > .input-group-text,
  172. .input-group > .input-group-prepend:not(:first-child) > .btn,
  173. .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
  174. .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
  175. .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  176. @include border-left-radius(0);
  177. }