Quasar CSS Helper Classes     

There are a lot of CSS classes that you can use while writing your Vue templates. Very handy to ease the complexity of your VueModels and templates.

The list below is not complete. Also check the other CSS documentation pages like Typography, Visibility, Shadows, Positioning.

Class NameDescription
non-selectableUser won’t be able to select DOM node along with its text
scrollApplies CSS tweaks to make scroll work at its best on ALL platforms
no-scrollHides scrollbars on the DOM node
no-pointer-eventsDOM element does not become a target of mouse events - clicks, hover and so on
all-pointer-eventsThe opposite of no-pointer-events
cursor-pointerChange mouse pointer on DOM element to look as if on a clickable link
Class NameDescription
fitWidth and Height is set to 100%
full-heightHeight is set to 100%
full-widthWidth is set to 100%
window-heightHeight is set to 100vh with top and bottom margins 0
window-widthWidth is set to 100vw with left and right margins 0
blockSets display property set to block
Class NameDescription
rotate-90Rotate by 90 degrees
rotate-180Rotate by 180 degrees
rotate-270Rotate by 270 degrees
flip-horizontalFlip DOM element horizontally
flip-verticalFlip DOM element vertically
Class NameDescription
no-borderRemoves any border
round-bordersApplies a generic border radius based on theme
Class NameDescription
no-marginSets margin to “0”
no-paddingSets padding to “0”

Groups

There’s are two special CSS class named group and generic-margin.

group applies a small margin to all children DOM elements, while generic-margin applies same margin to the respective DOM element (this varies with each theme).