quasar-framework/src/css/core/size.styl

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

:root
  for $name, $size in $sizes
    --q-size-{$name} $size

.fit
  width 100% !important
  height 100% !important
.full-height
  height 100% !important
.full-width
  width 100% !important
  margin-left 0 !important
  margin-right 0 !important

.window-height
  margin-top 0 !important
  margin-bottom 0 !important
  height 100vh !important
.window-width
  margin-left 0 !important
  margin-right 0 !important
  width 100vw !important

.block
  display block !important
.inline-block
  display inline-block !important

for $space, $value in $spaces

  .q-pa-{$space}
    padding: $value.y $value.x
  .q-pl-{$space}
    padding-left: $value.x
  .q-pr-{$space}
    padding-right: $value.x
  .q-pt-{$space}
    padding-top: $value.y
  .q-pb-{$space}
    padding-bottom: $value.y
  .q-px-{$space}
    @extends .q-pl-{$space}, .q-pr-{$space}
  .q-py-{$space}
    @extends .q-pt-{$space}, .q-pb-{$space}

  .q-ma-{$space}
    margin: $value.y $value.x
  .q-ml-{$space}
    margin-left: $value.x
  .q-mr-{$space}
    margin-right: $value.x
  .q-mt-{$space}
    margin-top: $value.y
  .q-mb-{$space}
    margin-bottom: $value.y
  .q-mx-{$space}
    @extends .q-ml-{$space}, .q-mr-{$space}
  .q-my-{$space}
    @extends .q-mt-{$space}, .q-mb-{$space}

.q-ml-auto
  margin-left auto
.q-mr-auto
  margin-right auto
.q-mx-auto
  @extends .q-ml-auto, .q-mr-auto

.q-my-form
  margin-top $input-margin-top
  margin-bottom $input-margin-bottom