_button-group.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. // stylelint-disable selector-no-qualifying-type
  2. // Make the div behave like a button
  3. .btn-group,
  4. .btn-group-vertical {
  5. position: relative;
  6. display: inline-flex;
  7. vertical-align: middle; // match .btn alignment given font-size hack above
  8. > .btn {
  9. position: relative;
  10. flex: 1 1 auto;
  11. // Bring the hover, focused, and "active" buttons to the front to overlay
  12. // the borders properly
  13. @include hover() {
  14. z-index: 1;
  15. }
  16. &:focus,
  17. &:active,
  18. &.active {
  19. z-index: 1;
  20. }
  21. }
  22. }
  23. // Optional: Group multiple button groups together for a toolbar
  24. .btn-toolbar {
  25. display: flex;
  26. flex-wrap: wrap;
  27. justify-content: flex-start;
  28. .input-group {
  29. width: auto;
  30. }
  31. }
  32. .btn-group {
  33. // Prevent double borders when buttons are next to each other
  34. > .btn:not(:first-child),
  35. > .btn-group:not(:first-child) {
  36. margin-left: -$btn-border-width;
  37. }
  38. // Reset rounded corners
  39. > .btn:not(:last-child):not(.dropdown-toggle),
  40. > .btn-group:not(:last-child) > .btn {
  41. @include border-right-radius(0);
  42. }
  43. > .btn:not(:first-child),
  44. > .btn-group:not(:first-child) > .btn {
  45. @include border-left-radius(0);
  46. }
  47. }
  48. // Sizing
  49. //
  50. // Remix the default button sizing classes into new ones for easier manipulation.
  51. .btn-group-sm > .btn { @extend .btn-sm; }
  52. .btn-group-lg > .btn { @extend .btn-lg; }
  53. //
  54. // Split button dropdowns
  55. //
  56. .dropdown-toggle-split {
  57. padding-right: $btn-padding-x * .75;
  58. padding-left: $btn-padding-x * .75;
  59. &::after,
  60. .dropup &::after,
  61. .dropright &::after {
  62. margin-left: 0;
  63. }
  64. .dropleft &::before {
  65. margin-right: 0;
  66. }
  67. }
  68. .btn-sm + .dropdown-toggle-split {
  69. padding-right: $btn-padding-x-sm * .75;
  70. padding-left: $btn-padding-x-sm * .75;
  71. }
  72. .btn-lg + .dropdown-toggle-split {
  73. padding-right: $btn-padding-x-lg * .75;
  74. padding-left: $btn-padding-x-lg * .75;
  75. }
  76. // The clickable button for toggling the menu
  77. // Set the same inset shadow as the :active state
  78. .btn-group.show .dropdown-toggle {
  79. @include box-shadow($btn-active-box-shadow);
  80. // Show no shadow for `.btn-link` since it has no other button styles.
  81. &.btn-link {
  82. @include box-shadow(none);
  83. }
  84. }
  85. //
  86. // Vertical button groups
  87. //
  88. .btn-group-vertical {
  89. flex-direction: column;
  90. align-items: flex-start;
  91. justify-content: center;
  92. > .btn,
  93. > .btn-group {
  94. width: 100%;
  95. }
  96. > .btn:not(:first-child),
  97. > .btn-group:not(:first-child) {
  98. margin-top: -$btn-border-width;
  99. }
  100. // Reset rounded corners
  101. > .btn:not(:last-child):not(.dropdown-toggle),
  102. > .btn-group:not(:last-child) > .btn {
  103. @include border-bottom-radius(0);
  104. }
  105. > .btn:not(:first-child),
  106. > .btn-group:not(:first-child) > .btn {
  107. @include border-top-radius(0);
  108. }
  109. }
  110. // Checkbox and radio options
  111. //
  112. // In order to support the browser's form validation feedback, powered by the
  113. // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
  114. // `display: none;` or `visibility: hidden;` as that also hides the popover.
  115. // Simply visually hiding the inputs via `opacity` would leave them clickable in
  116. // certain cases which is prevented by using `clip` and `pointer-events`.
  117. // This way, we ensure a DOM element is visible to position the popover from.
  118. //
  119. // See https://github.com/twbs/bootstrap/pull/12794 and
  120. // https://github.com/twbs/bootstrap/pull/14559 for more information.
  121. .btn-group-toggle {
  122. > .btn,
  123. > .btn-group > .btn {
  124. margin-bottom: 0; // Override default `<label>` value
  125. input[type="radio"],
  126. input[type="checkbox"] {
  127. position: absolute;
  128. clip: rect(0, 0, 0, 0);
  129. pointer-events: none;
  130. }
  131. }
  132. }