quasar-framework/src/components/collapsible/collapsible.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-collapsible-sub-item
  padding $collapsible-padding
  &.indent
    padding-left $collapsible-menu-left-padding
    padding-right 0

  .q-card
    margin-bottom 0

.q-collapsible.{$router-link-active} > .q-item
  background $collapsible-active-color

.q-collapsible
  transition padding .5s

.q-collapsible-popup-closed
  padding 0 15px
  .q-collapsible-inner
    border 1px solid $item-separator-color
  & + &
    .q-collapsible-inner
      border-top 0

.q-collapsible-popup-opened
  padding 15px 0
  .q-collapsible-inner
    box-shadow $shadow-2
  & + &, &:first-child
    padding-top 0
  &:last-child
    padding-bottom 0

.q-collapsible-cursor-pointer > .q-collapsible-inner > .q-item
  cursor pointer

.q-collapsible-toggle-icon
  border-radius 50%
  width 1em
  text-align center