package.scss._button-group.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of boosted Show documentation
Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library.
The newest version!
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle; // match .btn alignment given font-size hack above

  > .btn {
    position: relative;
    flex: 1 1 auto;
  }

  // Boosted mod: rule slightly modified
  // Bring the hover, focused, and "active" buttons to the front to overlay
  // the borders properly
  > .btn-check:checked + .btn,
  > .btn:hover,
  > .btn:active,
  > .btn.active {
    z-index: 1;
  }
  // End mod

  // Boosted mod
  &:focus-within {
    z-index: 1;
  }
  // End mod
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .input-group {
    width: auto;
  }
}

.btn-group {
  @include border-radius($border-radius);

  // Boosted mod: rule slightlty modified
  // Prevent double borders when buttons are next to each other
  > :not(.btn-check:first-child) + .btn:not(.btn-toggle),
  > .btn-group:not(:first-child) {
    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
  }
  // End mod

  // Reset rounded corners
  > .btn:not(:last-child):not(.dropdown-toggle),
  > .btn.dropdown-toggle-split:first-child,
  > .btn-group:not(:last-child) > .btn {
    @include border-end-radius(0);
  }

  // The left radius should be 0 if the button is:
  // - the "third or more" child
  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
  // - part of a btn-group which isn't the first child
  > .btn:nth-child(n + 3),
  > :not(.btn-check) + .btn,
  > .btn-group:not(:first-child) > .btn {
    @include border-start-radius(0);
  }

  // Boosted mod
  > [class*="btn-outline-"]:not(:last-of-type) {
    border-right-width: 0;

    &::after {
      display: inline-block;
      width: var(--#{$prefix}btn-border-width);
      height: 100%;
      margin: 0;
      content: "";
      border: 0;
    }

    &:focus {
      &[data-focus-visible-added] {
        border-right-width: var(--#{$prefix}btn-border-width);

        &::after {
          display: none;
        }
      }
    }
  }
  // End mod
}

// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.

.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }


//
// Split button dropdowns
//

.dropdown-toggle-split {
  // stylelint-disable-next-line function-disallowed-list
  min-width: add($dropdown-padding-x * 2, calc(#{$caret-width} * 2)); // Boosted mod
  padding-right: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
  padding-left: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod

  // Boosted mod
  .btn-group:not(.dropstart) &,
  .dropstart & ~ .btn {
    &:not(:hover):not(:focus):not(:active):not(.show) {
      border-left-color: transparent;

      &::before {
        position: absolute;
        top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
        bottom: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
        left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
        width: $btn-border-width;
        color: inherit;
        content: "";
        background:
          linear-gradient(
            transparent $btn-border-width,
            transparent map-get($spacers, 1),
            currentcolor map-get($spacers, 1),
            currentcolor subtract(100%, map-get($spacers, 1)),
            transparent subtract(100%, map-get($spacers, 1)),
            transparent subtract(100%, $btn-border-width)
          );
      }
    }
  }

  .btn:active + &,
  .btn.active + &,
  &:active + * + .btn,
  &.active + * + .btn {
    border-color: $supporting-orange;
  }

  .btn-group.show > &:not(:focus):not(:active)::before {
    color: $supporting-orange;
    background-color: currentcolor;
  }
  // End mod

  &::after,
  .dropup &::after,
  .dropend &::after {
    margin-left: 0;
  }

  .dropstart &::before {
    margin-right: 0;
  }
}

.btn-sm + .dropdown-toggle-split {
  padding-right: $btn-padding-x-sm * .5; // Boosted mod
  padding-left: $btn-padding-x-sm * .5; // Boosted mod
}

.btn-lg + .dropdown-toggle-split {
  padding-right: $btn-padding-x-lg * .5; // Boosted mod
  padding-left: $btn-padding-x-lg * .5; // Boosted mod
}


// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle {
  @include box-shadow($btn-active-box-shadow);

  // Show no shadow for `.btn-link` since it has no other button styles.
  &.btn-link {
    @include box-shadow(none);
  }
}


//
// Vertical button groups
//

.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: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
  }

  // Reset rounded corners
  > .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);
  }
}