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

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.no-margin
  margin 0 !important
.no-padding
  padding 0 !important
.no-border
  border 0 !important
.no-border-radius
  border-radius 0 !important
.no-box-shadow
  box-shadow none !important
.no-outline
  outline 0 !important

.ellipsis
  text-overflow ellipsis
  white-space nowrap
  overflow hidden

  &-2-lines, &-3-lines
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
  &-2-lines
    -webkit-line-clamp 2
  &-3-lines
    -webkit-line-clamp 3

.readonly
  cursor default !important
.disabled, [disabled]
  &, * // @stylint ignore
    cursor not-allowed !important
.disabled, [disabled]
  opacity .6 !important

.hidden
  display none !important
.invisible
  visibility hidden !important
.transparent
  background transparent !important

.overflow-auto
  overflow auto !important
.overflow-hidden
  overflow hidden !important

.dimmed, .light-dimmed
  &:after
    content ''
    position absolute
    top 0
    right 0
    bottom 0
    left 0
.dimmed:after
  background $dimmed-background !important
.light-dimmed:after
  background $light-dimmed-background !important
.z-top
  z-index $z-top !important
.z-max
  z-index $z-max !important

for type in desktop mobile cordova electron ios mat touch within-iframe platform-ios platform-android
  body:not(.{type}) .{type}-only,
  body.{type} .{type}-hide
    display none !important

@media all and (orientation portrait)
  .orientation-landscape
    display none !important

@media all and (orientation landscape)
  .orientation-portrait
    display none !important

@media screen
  .print-only
    display none !important
@media print
  .print-hide
    display none !important

@media (max-width $breakpoint-xs-max)
  .xs-hide, .gt-xs, .sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-sm-min) and (max-width $breakpoint-sm-max)
  .sm-hide, .xs, .lt-sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
  .md-hide, .xs, .lt-sm, .sm, .lt-md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
  .lg-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-xl-min)
  .xl-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .lg, .lt-xl
    display none !important

.q-focus-helper
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  pointer-events none
  border-radius inherit
  opacity .15
  transition background-color .3s cubic-bezier(.25, .8, .5, 1)

body
  &.desktop
    .q-focusable:focus, .q-hoverable:hover
      .q-focus-helper
        background currentColor
  &.ios .q-hoverable:active .q-focus-helper
    background currentColor
    opacity .3