Quasar CSS Visibility     

There are some CSS classes that you can use out of the box for common functionality.

Class NameDescription
disabledCursor is changed to notify a ‘disable’ and opacity is set to a lower value.
hiddenSet display to none
invisibleSet visibility to none
transparentBackground color is transparent
dimmedApply dark transparent overlay on top of your element. Do not use on elements which already have :after pseudoelement.
light-dimmedApply white transparent overlay on top of your element. Do not use on elements which already have :after pseudoelement.
highlight-and-fadeAdds a yellow background color and fades it away upon element is displayed.
ellipsisTruncates text and shows ellipsis when not enough space available.
z-absolutePositions your element on top of any other component (including Drawer, Modals, Toasts, Layout header/footer, …)

Animating

Class NameDescription
animate-spinApply a continuous spin/rotation to the DOM element
animate-spin-reverseApply a continuous spin/rotation (opposite direction to animate-spin) to the DOM element
animate-blinkApply a blinking effect to the DOM element
animate-popApply a pop-in effect to the DOM element
animate-scaleApply a scale-in effect to the DOM element
animate-fadeApply a fade-in effect to the DOM element
animate-bounceApply a continuous bouncing effect to the DOM element

Visible only on:

Class NameDescription
desktop-onlyVisible only on desktop
mobile-onlyVisible only on mobile
cordova-onlyVisible only on Cordova wrapped Apps
electron-onlyVisible only on Electron wrapped Apps
touch-onlyVisible only on touch capable platforms
no-touch-onlyVisible only on non-touch platforms
mat-onlyVisible only for Material Quasar Theme
ios-onlyVisible only for iOS Quasar Theme
platform-iosVisible only on an iOS platform
platform-androidVisible only on an Android platform
within-iframe-onlyVisible only when entire website is under an IFRAME tag

Hide on:

Class NameDescription
desktop-hideHide on desktop
mobile-hideHide on mobile
cordova-hideHide on Cordova wrapped Apps
electron-hideHide on Electron wrapped Apps
touch-hideHide on touch capable platforms
no-touch-hideHide on non-touch platforms
mat-hideHide for Material Quasar Theme
ios-hideHide for iOS Quasar Theme
platform-iosHide on iOS platform
platform-androidHide on Android platform
within-iframe-hideHide only when entire website is under an IFRAME tag

Also check Quasar Theming > Platform Specific Styles.

NOTE
There is also a non-recommended way to hide DOM elements through Javascript. Read more on Javascript > Environment page.

Class NameDescription
orientation-portraitVisible only when screen orientation is Portrait
orientation-landscapeVisible only when screen orientation is Landscape

First of all, let’s define what does a small, medium, big or large window means:

Window SizeWidth threshold in pixels
SmallUp to 600px
MediumUp to 920px
BigUp to 1280px
LargeBigger than 1280px

Now on to the window width related CSS classes:

Class NameDescription
smDisplay only on small windows
mdDisplay only on medium-sized windows
bgDisplay only on big windows
lgDisplay only on large windows
lt-mdDisplay only on lower than medium windows
lt-bgDisplay only on lower than big windows
lt-lgDisplay only on lower than large windows
gt-smDisplay only on greater than small windows
gt-mdDisplay only on greater than medium windows
gt-bgDisplay only on greater than big windows

NOTE
You can combine the visibility classes with the inline class for inline-blocks.
Example : <span class="gt-sm inline">&nbsp;and here is the end of this long sentence.</span>