input-groups.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. //
  2. // Input groups
  3. // --------------------------------------------------
  4. // Base styles
  5. // -------------------------
  6. .input-group {
  7. position: relative; // For dropdowns
  8. display: table;
  9. border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
  10. // Undo padding and float of grid classes
  11. &.col {
  12. float: none;
  13. padding-left: 0;
  14. padding-right: 0;
  15. }
  16. .form-control {
  17. width: 100%;
  18. margin-bottom: 0;
  19. }
  20. }
  21. // Sizing options
  22. //
  23. // Remix the default form control sizing classes into new ones for easier
  24. // manipulation.
  25. .input-group-lg > .form-control,
  26. .input-group-lg > .input-group-addon,
  27. .input-group-lg > .input-group-btn > .btn { .input-lg(); }
  28. .input-group-sm > .form-control,
  29. .input-group-sm > .input-group-addon,
  30. .input-group-sm > .input-group-btn > .btn { .input-sm(); }
  31. // Display as table-cell
  32. // -------------------------
  33. .input-group-addon,
  34. .input-group-btn,
  35. .input-group .form-control {
  36. display: table-cell;
  37. &:not(:first-child):not(:last-child) {
  38. border-radius: 0;
  39. }
  40. }
  41. // Addon and addon wrapper for buttons
  42. .input-group-addon,
  43. .input-group-btn {
  44. width: 1%;
  45. white-space: nowrap;
  46. vertical-align: middle; // Match the inputs
  47. }
  48. // Text input groups
  49. // -------------------------
  50. .input-group-addon {
  51. padding: @padding-base-vertical @padding-base-horizontal;
  52. font-size: @font-size-base;
  53. font-weight: normal;
  54. line-height: 1;
  55. text-align: center;
  56. background-color: @input-group-addon-bg;
  57. border: 1px solid @input-group-addon-border-color;
  58. border-radius: @border-radius-base;
  59. // Sizing
  60. &.input-sm {
  61. padding: @padding-small-vertical @padding-small-horizontal;
  62. font-size: @font-size-small;
  63. border-radius: @border-radius-small;
  64. }
  65. &.input-lg {
  66. padding: @padding-large-vertical @padding-large-horizontal;
  67. font-size: @font-size-large;
  68. border-radius: @border-radius-large;
  69. }
  70. // Nuke default margins from checkboxes and radios to vertically center within.
  71. input[type="radio"],
  72. input[type="checkbox"] {
  73. margin-top: 0;
  74. }
  75. }
  76. // Reset rounded corners
  77. .input-group .form-control:first-child,
  78. .input-group-addon:first-child,
  79. .input-group-btn:first-child > .btn,
  80. .input-group-btn:first-child > .dropdown-toggle,
  81. .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
  82. .border-right-radius(0);
  83. }
  84. .input-group-addon:first-child {
  85. border-right: 0;
  86. }
  87. .input-group .form-control:last-child,
  88. .input-group-addon:last-child,
  89. .input-group-btn:last-child > .btn,
  90. .input-group-btn:last-child > .dropdown-toggle,
  91. .input-group-btn:first-child > .btn:not(:first-child) {
  92. .border-left-radius(0);
  93. }
  94. .input-group-addon:last-child {
  95. border-left: 0;
  96. }
  97. // Button input groups
  98. // -------------------------
  99. .input-group-btn {
  100. position: relative;
  101. white-space: nowrap;
  102. }
  103. .input-group-btn > .btn {
  104. position: relative;
  105. // Jankily prevent input button groups from wrapping
  106. + .btn {
  107. margin-left: -4px;
  108. }
  109. // Bring the "active" button to the front
  110. &:hover,
  111. &:active {
  112. z-index: 2;
  113. }
  114. }