You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

139 lines
2.9 KiB

  1. // Make the div behave like a button
  2. .btn-group,
  3. .btn-group-vertical {
  4. position: relative;
  5. display: inline-flex;
  6. vertical-align: middle; // match .btn alignment given font-size hack above
  7. > .btn {
  8. position: relative;
  9. flex: 1 1 auto;
  10. }
  11. // Bring the hover, focused, and "active" buttons to the front to overlay
  12. // the borders properly
  13. > .btn-check:checked + .btn,
  14. > .btn-check:focus + .btn,
  15. > .btn:hover,
  16. > .btn:focus,
  17. > .btn:active,
  18. > .btn.active {
  19. z-index: 1;
  20. }
  21. }
  22. // Optional: Group multiple button groups together for a toolbar
  23. .btn-toolbar {
  24. display: flex;
  25. flex-wrap: wrap;
  26. justify-content: flex-start;
  27. .input-group {
  28. width: auto;
  29. }
  30. }
  31. .btn-group {
  32. // Prevent double borders when buttons are next to each other
  33. > .btn:not(:first-child),
  34. > .btn-group:not(:first-child) {
  35. margin-left: -$btn-border-width;
  36. }
  37. // Reset rounded corners
  38. > .btn:not(:last-child):not(.dropdown-toggle),
  39. > .btn-group:not(:last-child) > .btn {
  40. @include border-end-radius(0);
  41. }
  42. // The left radius should be 0 if the button is:
  43. // - the "third or more" child
  44. // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
  45. // - part of a btn-group which isn't the first child
  46. > .btn:nth-child(n + 3),
  47. > :not(.btn-check) + .btn,
  48. > .btn-group:not(:first-child) > .btn {
  49. @include border-start-radius(0);
  50. }
  51. }
  52. // Sizing
  53. //
  54. // Remix the default button sizing classes into new ones for easier manipulation.
  55. .btn-group-sm > .btn { @extend .btn-sm; }
  56. .btn-group-lg > .btn { @extend .btn-lg; }
  57. //
  58. // Split button dropdowns
  59. //
  60. .dropdown-toggle-split {
  61. padding-right: $btn-padding-x * .75;
  62. padding-left: $btn-padding-x * .75;
  63. &::after,
  64. .dropup &::after,
  65. .dropend &::after {
  66. margin-left: 0;
  67. }
  68. .dropstart &::before {
  69. margin-right: 0;
  70. }
  71. }
  72. .btn-sm + .dropdown-toggle-split {
  73. padding-right: $btn-padding-x-sm * .75;
  74. padding-left: $btn-padding-x-sm * .75;
  75. }
  76. .btn-lg + .dropdown-toggle-split {
  77. padding-right: $btn-padding-x-lg * .75;
  78. padding-left: $btn-padding-x-lg * .75;
  79. }
  80. // The clickable button for toggling the menu
  81. // Set the same inset shadow as the :active state
  82. .btn-group.show .dropdown-toggle {
  83. @include box-shadow($btn-active-box-shadow);
  84. // Show no shadow for `.btn-link` since it has no other button styles.
  85. &.btn-link {
  86. @include box-shadow(none);
  87. }
  88. }
  89. //
  90. // Vertical button groups
  91. //
  92. .btn-group-vertical {
  93. flex-direction: column;
  94. align-items: flex-start;
  95. justify-content: center;
  96. > .btn,
  97. > .btn-group {
  98. width: 100%;
  99. }
  100. > .btn:not(:first-child),
  101. > .btn-group:not(:first-child) {
  102. margin-top: -$btn-border-width;
  103. }
  104. // Reset rounded corners
  105. > .btn:not(:last-child):not(.dropdown-toggle),
  106. > .btn-group:not(:last-child) > .btn {
  107. @include border-bottom-radius(0);
  108. }
  109. > .btn ~ .btn,
  110. > .btn-group:not(:first-child) > .btn {
  111. @include border-top-radius(0);
  112. }
  113. }