quasar/src/components/btn-group/QBtnGroup.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-btn-group
  border-radius: $button-border-radius
  box-shadow: $button-shadow
  vertical-align: middle

  > .q-btn-item
    border-radius: inherit
    align-self: stretch

    .q-btn__wrapper:before
      box-shadow: none

    .q-badge--floating
      right: 0

  > .q-btn-group
    box-shadow: none

    &:first-child
      > .q-btn:first-child
        border-top-left-radius: inherit
        border-bottom-left-radius: inherit
    &:last-child
      > .q-btn:last-child
        border-top-right-radius: inherit
        border-bottom-right-radius: inherit
  > .q-btn-group:not(:first-child) > .q-btn:first-child
    .q-btn__wrapper:before
      border-left: 0
  > .q-btn-group:not(:last-child) > .q-btn:last-child
    .q-btn__wrapper:before
      border-right: 0
  > .q-btn-item:not(:last-child)
    border-top-right-radius: 0
    border-bottom-right-radius: 0
  > .q-btn-item:not(:first-child)
    border-top-left-radius: 0
    border-bottom-left-radius: 0
  > .q-btn-item.q-btn--standard
    .q-btn__wrapper:before
      z-index: -1

  &--push
    border-radius: $button-push-border-radius

    > .q-btn--push
      &.q-btn--actionable
        transform: none

        .q-btn__wrapper
          transition: margin-top $button-transition, margin-bottom $button-transition, box-shadow $button-transition
        &:active,
        &.q-btn--active
          .q-btn__wrapper
            margin-top: 2px
            margin-bottom: -2px
  &--rounded
    border-radius: $button-rounded-border-radius

  &--flat, &--outline, &--unelevated
    box-shadow: none

  &--outline
    > .q-separator
      display: none
    > .q-btn-item + .q-btn-item
      .q-btn__wrapper:before
        border-left: 0
    > .q-btn-item:not(:last-child)
      .q-btn__wrapper:before
        border-right: 0

  &--stretch
    align-self: stretch
    border-radius: 0

  &--glossy
    > .q-btn-item
      background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .04)) !important

  &--spread
    > .q-btn-group
      display: flex !important
    > .q-btn-item, > .q-btn-group > .q-btn-item:not(.q-btn-dropdown__arrow-container)
      width: auto
      min-width: 0
      max-width: 100%
      flex: 10000 1 0%