Contents

// Button group
//
// A button group is a series of buttons laid out next to each other, all part
// of one visual button, but separated by rules to be separate.

.BtnGroup {
  display: inline-block;
  vertical-align: middle;
  @include clearfix();

  // Proper spacing for multiple button groups (a la, gollum editor)
  + .BtnGroup,
  + .btn {
    margin-left: $spacer-1;
  }
}

.BtnGroup-item {
  position: relative;
  float: left;
  border-right-width: 0;
  border-radius: 0;

  &:first-child {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }

  &:last-child {
    border-right-width: $border-width;
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }

  &.selected,
  &[aria-selected=true],
  &:focus,
  &:active,
  &:hover {
    border-right-width: $border-width;

    + .BtnGroup-item,
    + .BtnGroup-parent .BtnGroup-item {
      border-left-width: 0;
    }
  }
}

.BtnGroup-parent {
  float: left;

  &:first-child .BtnGroup-item {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }

  &:last-child .BtnGroup-item {
    border-right-width: $border-width;
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }

  .BtnGroup-item {
    border-right-width: 0;
    border-radius: 0;
  }

  &.selected,
  &[aria-selected=true],
  &:focus,
  &:active,
  &:hover {
    .BtnGroup-item {
      border-right-width: $border-width;
    }

    + .BtnGroup-item,
    + .BtnGroup-parent .BtnGroup-item {
      border-left-width: 0;
    }
  }
}

// ensure that the focus ring sits above the adjacent buttons
.BtnGroup-item,
.BtnGroup-parent {
  &:focus,
  &:active {
    z-index: 1;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
primery-0.1.0	_sass/@primer/css/buttons/button-group.scss