/mizuxe2017/scss/bootstrap/_button-group.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects · Sass · 166 lines · 104 code · 31 blank · 31 comment · 0 complexity · 4ebf7dd937ce0eec503a520b96a1c1f5 MD5 · raw file

  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: 0 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. // Prevent double borders when buttons are next to each other
  23. .btn + .btn,
  24. .btn + .btn-group,
  25. .btn-group + .btn,
  26. .btn-group + .btn-group {
  27. margin-left: -$btn-border-width;
  28. }
  29. }
  30. // Optional: Group multiple button groups together for a toolbar
  31. .btn-toolbar {
  32. display: flex;
  33. flex-wrap: wrap;
  34. justify-content: flex-start;
  35. .input-group {
  36. width: auto;
  37. }
  38. }
  39. .btn-group {
  40. > .btn:first-child {
  41. margin-left: 0;
  42. }
  43. // Reset rounded corners
  44. > .btn:not(:last-child):not(.dropdown-toggle),
  45. > .btn-group:not(:last-child) > .btn {
  46. @include border-right-radius(0);
  47. }
  48. > .btn:not(:first-child),
  49. > .btn-group:not(:first-child) > .btn {
  50. @include border-left-radius(0);
  51. }
  52. }
  53. // Sizing
  54. //
  55. // Remix the default button sizing classes into new ones for easier manipulation.
  56. .btn-group-sm > .btn { @extend .btn-sm; }
  57. .btn-group-lg > .btn { @extend .btn-lg; }
  58. //
  59. // Split button dropdowns
  60. //
  61. .dropdown-toggle-split {
  62. padding-right: $btn-padding-x * .75;
  63. padding-left: $btn-padding-x * .75;
  64. &::after {
  65. margin-left: 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 + .btn,
  97. > .btn + .btn-group,
  98. > .btn-group + .btn,
  99. > .btn-group + .btn-group {
  100. margin-top: -$btn-border-width;
  101. margin-left: 0;
  102. }
  103. // Reset rounded corners
  104. > .btn:not(:last-child):not(.dropdown-toggle),
  105. > .btn-group:not(:last-child) > .btn {
  106. @include border-bottom-radius(0);
  107. }
  108. > .btn:not(:first-child),
  109. > .btn-group:not(:first-child) > .btn {
  110. @include border-top-radius(0);
  111. }
  112. }
  113. // Checkbox and radio options
  114. //
  115. // In order to support the browser's form validation feedback, powered by the
  116. // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
  117. // `display: none;` or `visibility: hidden;` as that also hides the popover.
  118. // Simply visually hiding the inputs via `opacity` would leave them clickable in
  119. // certain cases which is prevented by using `clip` and `pointer-events`.
  120. // This way, we ensure a DOM element is visible to position the popover from.
  121. //
  122. // See https://github.com/twbs/bootstrap/pull/12794 and
  123. // https://github.com/twbs/bootstrap/pull/14559 for more information.
  124. .btn-group-toggle {
  125. > .btn,
  126. > .btn-group > .btn {
  127. margin-bottom: 0; // Override default `<label>` value
  128. input[type="radio"],
  129. input[type="checkbox"] {
  130. position: absolute;
  131. clip: rect(0, 0, 0, 0);
  132. pointer-events: none;
  133. }
  134. }
  135. }