scss/bootstrap/_button-group.scss

0001 // Make the div behave like a button
0002 .btn-group,
0003 .btn-group-vertical {
0004   position: relative;
0005   display: inline-flex;
0006   vertical-align: middle; // match .btn alignment given font-size hack above
0007
0008   > .btn {
0009     position: relative;
0010     flex: 1 1 auto;
0011   }
0012
0013   // Bring the hover, focused, and "active" buttons to the front to overlay
0014   // the borders properly
0015   > .btn-check:checked + .btn,
0016   > .btn-check:focus + .btn,
0017   > .btn:hover,
0018   > .btn:focus,
0019   > .btn:active,
0020   > .btn.active {
0021     z-index: 1;
0022   }
0023 }
0024
0025 // Optional: Group multiple button groups together for a toolbar
0026 .btn-toolbar {
0027   display: flex;
0028   flex-wrap: wrap;
0029   justify-content: flex-start;
0030
0031   .input-group {
0032     width: auto;
0033   }
0034 }
0035
0036 .btn-group {
0037   // Prevent double borders when buttons are next to each other
0038   > .btn:not(:first-child),
0039   > .btn-group:not(:first-child) {
0040     margin-left: -$btn-border-width;
0041   }
0042
0043   // Reset rounded corners
0044   > .btn:not(:last-child):not(.dropdown-toggle),
0045   > .btn-group:not(:last-child) > .btn {
0046     @include border-end-radius(0);
0047   }
0048
0049   // The left radius should be 0 if the button is:
0050   // - the "third or more" child
0051   // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
0052   // - part of a btn-group which isn't the first child
0053   > .btn:nth-child(n + 3),
0054   > :not(.btn-check) + .btn,
0055   > .btn-group:not(:first-child) > .btn {
0056     @include border-start-radius(0);
0057   }
0058 }
0059
0060 // Sizing
0061 //
0062 // Remix the default button sizing classes into new ones for easier manipulation.
0063
0064 .btn-group-sm > .btn { @extend .btn-sm; }
0065 .btn-group-lg > .btn { @extend .btn-lg; }
0066
0067
0068 //
0069 // Split button dropdowns
0070 //
0071
0072 .dropdown-toggle-split {
0073   padding-right: $btn-padding-x * .75;
0074   padding-left: $btn-padding-x * .75;
0075
0076   &::after,
0077   .dropup &::after,
0078   .dropend &::after {
0079     margin-left: 0;
0080   }
0081
0082   .dropstart &::before {
0083     margin-right: 0;
0084   }
0085 }
0086
0087 .btn-sm + .dropdown-toggle-split {
0088   padding-right: $btn-padding-x-sm * .75;
0089   padding-left: $btn-padding-x-sm * .75;
0090 }
0091
0092 .btn-lg + .dropdown-toggle-split {
0093   padding-right: $btn-padding-x-lg * .75;
0094   padding-left: $btn-padding-x-lg * .75;
0095 }
0096
0097
0098 // The clickable button for toggling the menu
0099 // Set the same inset shadow as the :active state
0100 .btn-group.show .dropdown-toggle {
0101   @include box-shadow($btn-active-box-shadow);
0102
0103   // Show no shadow for `.btn-link` since it has no other button styles.
0104   &.btn-link {
0105     @include box-shadow(none);
0106   }
0107 }
0108
0109
0110 //
0111 // Vertical button groups
0112 //
0113
0114 .btn-group-vertical {
0115   flex-direction: column;
0116   align-items: flex-start;
0117   justify-content: center;
0118
0119   > .btn,
0120   > .btn-group {
0121     width: 100%;
0122   }
0123
0124   > .btn:not(:first-child),
0125   > .btn-group:not(:first-child) {
0126     margin-top: -$btn-border-width;
0127   }
0128
0129   // Reset rounded corners
0130   > .btn:not(:last-child):not(.dropdown-toggle),
0131   > .btn-group:not(:last-child) > .btn {
0132     @include border-bottom-radius(0);
0133   }
0134
0135   > .btn ~ .btn,
0136   > .btn-group:not(:first-child) > .btn {
0137     @include border-top-radius(0);
0138   }
0139 }