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

    .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
    > .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(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .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%