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

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

.float-left
  float left
.float-right
  float right

.relative-position
  position relative

.fixed,
.fullscreen,
.fixed-center,
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top,
.fixed-top-left,
.fixed-top-right,
.fixed-bottom-left,
.fixed-bottom-right
  position fixed

.absolute,
.absolute-full,
.absolute-center,
.absolute-bottom,
.absolute-left,
.absolute-right,
.absolute-top,
.absolute-top-left,
.absolute-top-right,
.absolute-bottom-left,
.absolute-bottom-right
  position absolute

.fixed-top, .absolute-top
  top 0
  left 0
  right 0
.fixed-right, .absolute-right
  top 0
  right 0
  bottom 0
.fixed-bottom, .absolute-bottom
  right 0
  bottom 0
  left 0
.fixed-left, .absolute-left
  top 0
  bottom 0
  left 0

.fixed-top-left, .absolute-top-left
  top 0
  left 0
.fixed-top-right, .absolute-top-right
  top 0
  right 0
.fixed-bottom-left, .absolute-bottom-left
  bottom 0
  left 0
.fixed-bottom-right, .absolute-bottom-right
  bottom 0
  right 0

.fullscreen
  z-index $z-fullscreen
  border-radius 0 !important
  max-width 100vw
  max-height 100vh

.absolute-full, .fullscreen
  top 0
  right 0
  bottom 0
  left 0

.fixed-center, .absolute-center
  top 50%
  left 50%
  transform translate(-50%, -50%)

.vertical-
  &top
    vertical-align top !important
  &middle
    vertical-align middle !important
  &bottom
    vertical-align bottom !important

.on-left
  margin-right 12px
.on-right
  margin-left 12px