7df228ebc63e323252bd1f8edc5f87a20c12b6c0.svn-base 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. //
  2. // Base styles
  3. //
  4. .input-group {
  5. position: relative;
  6. @if $enable-flex {
  7. display: flex;
  8. } @else {
  9. display: table;
  10. // Prevent input groups from inheriting border styles from table cells when
  11. // placed within a table.
  12. border-collapse: separate;
  13. }
  14. .form-control {
  15. // Ensure that the input is always above the *appended* addon button for
  16. // proper border colors.
  17. position: relative;
  18. z-index: 2;
  19. @if $enable-flex {
  20. flex: 1;
  21. } @else {
  22. // IE9 fubars the placeholder attribute in text inputs and the arrows on
  23. // select elements in input groups. To fix it, we float the input. Details:
  24. // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
  25. float: left;
  26. width: 100%;
  27. }
  28. margin-bottom: 0;
  29. }
  30. }
  31. .input-group-addon,
  32. .input-group-btn,
  33. .input-group .form-control {
  34. @if $enable-flex {
  35. // do nothing
  36. } @else {
  37. display: table-cell;
  38. }
  39. &:not(:first-child):not(:last-child) {
  40. @include border-radius(0);
  41. }
  42. }
  43. .input-group-addon,
  44. .input-group-btn {
  45. @if $enable-flex {
  46. // do nothing
  47. } @else {
  48. width: 1%;
  49. }
  50. white-space: nowrap;
  51. vertical-align: middle; // Match the inputs
  52. }
  53. // Sizing options
  54. //
  55. // Remix the default form control sizing classes into new ones for easier
  56. // manipulation.
  57. .input-group-lg > .form-control,
  58. .input-group-lg > .input-group-addon,
  59. .input-group-lg > .input-group-btn > .btn {
  60. @extend .form-control-lg;
  61. }
  62. .input-group-sm > .form-control,
  63. .input-group-sm > .input-group-addon,
  64. .input-group-sm > .input-group-btn > .btn {
  65. @extend .form-control-sm;
  66. }
  67. //
  68. // Text input groups
  69. //
  70. .input-group-addon {
  71. padding: $input-padding-y $input-padding-x;
  72. font-size: $font-size-base;
  73. font-weight: normal;
  74. line-height: 1;
  75. color: $input-color;
  76. text-align: center;
  77. background-color: $input-group-addon-bg;
  78. border: 1px solid $input-group-addon-border-color;
  79. @include border-radius($border-radius);
  80. // Sizing
  81. &.form-control-sm {
  82. padding: $input-padding-y-sm $input-padding-x-sm;
  83. font-size: $font-size-sm;
  84. @include border-radius($border-radius-sm);
  85. }
  86. &.form-control-lg {
  87. padding: $input-padding-x-lg $input-padding-x-lg;
  88. font-size: $font-size-lg;
  89. @include border-radius($border-radius-lg);
  90. }
  91. // Nuke default margins from checkboxes and radios to vertically center within.
  92. input[type="radio"],
  93. input[type="checkbox"] {
  94. margin-top: 0;
  95. }
  96. }
  97. //
  98. // Reset rounded corners
  99. //
  100. .input-group .form-control:first-child,
  101. .input-group-addon:first-child,
  102. .input-group-btn:first-child > .btn,
  103. .input-group-btn:first-child > .btn-group > .btn,
  104. .input-group-btn:first-child > .dropdown-toggle,
  105. .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
  106. .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  107. @include border-right-radius(0);
  108. }
  109. .input-group-addon:first-child {
  110. border-right: 0;
  111. }
  112. .input-group .form-control:last-child,
  113. .input-group-addon:last-child,
  114. .input-group-btn:last-child > .btn,
  115. .input-group-btn:last-child > .btn-group > .btn,
  116. .input-group-btn:last-child > .dropdown-toggle,
  117. .input-group-btn:first-child > .btn:not(:first-child),
  118. .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  119. @include border-left-radius(0);
  120. }
  121. .input-group-addon:last-child {
  122. border-left: 0;
  123. }
  124. //
  125. // Button input groups
  126. //
  127. .input-group-btn {
  128. position: relative;
  129. // Jankily prevent input button groups from wrapping with `white-space` and
  130. // `font-size` in combination with `inline-block` on buttons.
  131. font-size: 0;
  132. white-space: nowrap;
  133. // Negative margin for spacing, position for bringing hovered/focused/actived
  134. // element above the siblings.
  135. > .btn {
  136. position: relative;
  137. + .btn {
  138. margin-left: -1px;
  139. }
  140. // Bring the "active" button to the front
  141. @include hover-focus-active {
  142. z-index: 2;
  143. }
  144. }
  145. // Negative margin to only have a 1px border between the two
  146. &:first-child {
  147. > .btn,
  148. > .btn-group {
  149. margin-right: -1px;
  150. }
  151. }
  152. &:last-child {
  153. > .btn,
  154. > .btn-group {
  155. z-index: 2;
  156. margin-left: -1px;
  157. }
  158. }
  159. }