123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- .btn-group,
- .btn-group-vertical {
- position: relative;
- display: inline-flex;
- vertical-align: middle;
- > .btn {
- position: relative;
- flex: 1 1 auto;
- }
-
-
- > .btn-check:checked + .btn,
- > .btn-check:focus + .btn,
- > .btn:hover,
- > .btn:focus,
- > .btn:active,
- > .btn.active {
- z-index: 1;
- }
- }
- .btn-toolbar {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- .input-group {
- width: auto;
- }
- }
- .btn-group {
-
- > .btn:not(:first-child),
- > .btn-group:not(:first-child) {
- margin-left: -$btn-border-width;
- }
-
- > .btn:not(:last-child):not(.dropdown-toggle),
- > .btn-group:not(:last-child) > .btn {
- @include border-end-radius(0);
- }
-
-
-
-
- > .btn:nth-child(n + 3),
- > :not(.btn-check) + .btn,
- > .btn-group:not(:first-child) > .btn {
- @include border-start-radius(0);
- }
- }
- .btn-group-sm > .btn { @extend .btn-sm; }
- .btn-group-lg > .btn { @extend .btn-lg; }
- .dropdown-toggle-split {
- padding-right: $btn-padding-x * .75;
- padding-left: $btn-padding-x * .75;
- &::after,
- .dropup &::after,
- .dropend &::after {
- margin-left: 0;
- }
- .dropstart &::before {
- margin-right: 0;
- }
- }
- .btn-sm + .dropdown-toggle-split {
- padding-right: $btn-padding-x-sm * .75;
- padding-left: $btn-padding-x-sm * .75;
- }
- .btn-lg + .dropdown-toggle-split {
- padding-right: $btn-padding-x-lg * .75;
- padding-left: $btn-padding-x-lg * .75;
- }
- .btn-group.show .dropdown-toggle {
- @include box-shadow($btn-active-box-shadow);
-
- &.btn-link {
- @include box-shadow(none);
- }
- }
- .btn-group-vertical {
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- > .btn,
- > .btn-group {
- width: 100%;
- }
- > .btn:not(:first-child),
- > .btn-group:not(:first-child) {
- margin-top: -$btn-border-width;
- }
-
- > .btn:not(:last-child):not(.dropdown-toggle),
- > .btn-group:not(:last-child) > .btn {
- @include border-bottom-radius(0);
- }
- > .btn ~ .btn,
- > .btn-group:not(:first-child) > .btn {
- @include border-top-radius(0);
- }
- }
|