| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- // Button groups
- // *******************************************************************************
-
- .btn-group {
- --#{$prefix}btn-group-border-radius: #{$btn-border-radius};
-
- &.btn-group-sm {
- --#{$prefix}btn-group-border-radius: #{$btn-border-radius-sm};
- }
- &.btn-group-xs {
- --#{$prefix}btn-group-border-radius: #{$btn-border-radius-xs};
- }
- &.btn-group-lg {
- --#{$prefix}btn-group-border-radius: #{$btn-border-radius-lg};
- }
- &.btn-group-xl {
- --#{$prefix}btn-group-border-radius: #{$btn-border-radius-xl};
- }
-
- > :not(.btn-check:first-child) + .btn,
- > .btn-group:not(:first-child) {
- margin: 0;
- margin-inline-start: calc(#{$btn-border-width} * -1);
- }
- &:not(.btn-group-vertical) {
-
- > .btn:not(:last-child):not(.dropdown-toggle),
- > .btn.dropdown-toggle-split:first-child,
- > .btn-group:not(:last-child) > .btn,
- > .btn:nth-child(n + 3),
- > :not(.btn-check) + .btn,
- > .btn-group:not(:first-child) > .btn {
- @include border-radius(var(--#{$prefix}btn-group-border-radius));
- }
-
- > .btn:not(:last-child):not(.dropdown-toggle),
- > .btn.dropdown-toggle-split:first-child,
- > .btn-group:not(:last-child) > .btn {
- border-end-end-radius: 0 !important;
- border-start-end-radius: 0 !important;
- }
-
- > .btn:nth-child(n + 3),
- > :not(.btn-check) + .btn,
- > .btn-group:not(:first-child) > .btn {
- border-end-start-radius: 0 !important;
- border-start-start-radius: 0 !important;
- }
- }
-
- &.btn-group-vertical {
- > :not(.btn-check:first-child) + .btn,
- > .btn-group:not(:first-child) {
- margin: 0;
- margin-block-start: calc(#{$btn-border-width} * -1);
- }
- .btn:not([class*="btn-outline-"]) {
- border-inline-color: var(--#{$prefix}btn-bg);
- &:hover {
- border-inline-color: var(--#{$prefix}btn-hover-bg);
- }
- }
- > .btn:first-child,
- > .btn.dropdown-toggle-split:first-child,
- > .btn-group:first-child > .btn {
- @include border-top-radius(var(--#{$prefix}btn-group-border-radius));
- }
- > .btn:last-child,
- > .btn.dropdown-toggle-split:last-child,
- > .btn-group:last-child > .btn {
- @include border-bottom-radius(var(--#{$prefix}btn-group-border-radius));
- }
- }
- }
-
- // Split button
- // *******************************************************************************
-
- .dropdown-toggle-split,
- .btn-lg + .dropdown-toggle-split,
- .btn-group-lg > .btn + .dropdown-toggle-split,
- .input-group-lg .btn + .dropdown-toggle-split,
- .btn-xl + .dropdown-toggle-split,
- .btn-group-xl > .btn + .dropdown-toggle-split {
- padding-inline: .92em;
- }
-
- .btn-sm + .dropdown-toggle-split,
- .btn-group-sm > .btn + .dropdown-toggle-split,
- .input-group-sm .btn + .dropdown-toggle-split {
- padding-inline: .6em;
- }
-
- .btn-xs + .dropdown-toggle-split,
- .btn-group-xs > .btn + .dropdown-toggle-split {
- padding-inline: .5em;
- }
-
- // Sizing
- // *******************************************************************************
-
- .btn-group-xs > .btn {
- @extend .btn-xs;
- }
-
- .btn-group-xl > .btn {
- @extend .btn-xl;
- }
-
- /* Button groups border */
-
- .btn-group:not(.btn-group-vertical) > .btn-group:first-child > .btn:not([class*="btn-outline-"]):first-child,
- .input-group > .btn:not([class*="btn-outline-"]):first-child,
- :not(.btn-group, .input-group) > .btn-group:not(.btn-group-vertical) > .btn:not([class*="btn-outline-"]):first-child,
- .input-group > .btn-group:first-child > .btn:not([class*="btn-outline-"]):first-child {
- border-inline-start-color: transparent;
- }
-
- .btn-group:not(.btn-group-vertical) > .btn-group:last-child > .btn:not([class*="btn-outline-"]):last-of-type,
- .input-group > .btn:not([class*="btn-outline-"]):last-of-type,
- :not(.btn-group, .input-group) > .btn-group:not(.btn-group-vertical) > .btn:not([class*="btn-outline-"]):last-of-type,
- .input-group > .btn-group:last-child > .btn:not([class*="btn-outline-"]):last-of-type {
- border-inline-end-color: transparent;
- }
-
- .btn-group-vertical > .btn-group-vertical:first-child > .btn:not([class*="btn-outline-"]):first-child,
- :not(.btn-group-vertical, .input-group) > .btn-group-vertical > .btn:not([class*="btn-outline-"]):first-child {
- border-block-start-color: transparent;
- }
-
- .btn-group-vertical > .btn-group-vertical:last-child > .btn:not([class*="btn-outline-"]):last-of-type,
- :not(.btn-group-vertical, .input-group) > .btn-group-vertical > .btn:not([class*="btn-outline-"]):last-of-type {
- border-block-end-color: transparent;
- }
|