Helpers
Helpers classes are very reusable classes with a single purpose to reduce the frequency of highly repetitive declarations.
Typography
.mat-headline-1.mat-headline-2.mat-headline-3.mat-headline-4.mat-h1,.mat-headline-5.mat-h2,.mat-headline-6.mat-h3,.mat-subtitle-1.mat-h4,.mat-body-1.mat-h5.mat-h6.mat-body,.mat-body-2.mat-body-strong,.mat-subtitle-2.mat-small,.mat-caption
Elevation
.mat-elevation-z1.mat-elevation-z2.mat-elevation-z3.mat-elevation-z4.mat-elevation-z5.mat-elevation-z6.mat-elevation-z7.mat-elevation-z8.mat-elevation-z9.mat-elevation-z10.mat-elevation-z11.mat-elevation-z12.mat-elevation-z13.mat-elevation-z14.mat-elevation-z15.mat-elevation-z16.mat-elevation-z17.mat-elevation-z18.mat-elevation-z19.mat-elevation-z20.mat-elevation-z21.mat-elevation-z22.mat-elevation-z23.mat-elevation-z24
Background/Border/Text Color
- .[bg|border|text]-red-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-pink-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-purple-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-indigo-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-blue-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-cyan-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-teal-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-green-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-yellow-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-orange-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-deep-orange-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-brown-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-green-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-grey-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-dark-grey-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-black-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
- .[bg|border|text]-white-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]
.static.fixed.absolute.relative.sticky
Position
.d-block.d-inline-block.d-inline.d-flex.d-inline-flex.d-none
Display
.flex-row.flex-row-reverse.flex-col.flex-col-reverse
Flexbox (Direction)
.flex-fill.flex-grow-0.flex-grow-1.flex-shrink-0.flex-shrink-1
Flexbox (Fill & Grow & Shrink)
.flex-wrap.flex-nowrap.flex-wrap-reverse
Flexbox (Wrap)
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around
Flexbox (Justify content)
.align-content-start.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch
Flexbox (Align content)
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch
Flexbox (Align items)
.align-self-auto.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch
Flexbox (Align self)
.m[-[t|b|r|l|x|y]]-0.m[-[t|b|r|l|x|y]]-4.m[-[t|b|r|l|x|y]]-8.m[-[t|b|r|l|x|y]]-16.m[-[t|b|r|l|x|y]]-24.m[-[t|b|r|l|x|y]]-32.m[-[t|b|r|l|x|y]]-48.m[-[t|b|r|l|x|y]]-auto
Margin
.m[-[t|b|r|l|x|y]]--4.m[-[t|b|r|l|x|y]]--8.m[-[t|b|r|l|x|y]]--16.m[-[t|b|r|l|x|y]]--24.m[-[t|b|r|l|x|y]]--32.m[-[t|b|r|l|x|y]]--48
Negative Margin
.p[-[t|b|r|l|x|y]]-0.p[-[t|b|r|l|x|y]]-4.p[-[t|b|r|l|x|y]]-8.p[-[t|b|r|l|x|y]]-16.p[-[t|b|r|l|x|y]]-24.p[-[t|b|r|l|x|y]]-32.p[-[t|b|r|l|x|y]]-48
Padding
.b[-[t|b|r|l|x|y]]-0.b[-[t|b|r|l|x|y]]-1.b[-[t|b|r|l|x|y]]-2.b[-[t|b|r|l|x|y]]-3.b[-[t|b|r|l|x|y]]-4.b[-[t|b|r|l|x|y]]-5
Border
.border[-[t|b|r|l|x|y]]-0.border[-[t|b|r|l|x|y]]-1.border[-[t|b|r|l|x|y]]-2.border[-[t|b|r|l|x|y]]-3.border[-[t|b|r|l|x|y]]-4.border[-[t|b|r|l|x|y]]-5
Border Width
.border[-[t|b|r|l|x|y]]-solid.border[-[t|b|r|l|x|y]]-dashed.border[-[t|b|r|l|x|y]]-dotted.border[-[t|b|r|l|x|y]]-double.border[-[t|b|r|l|x|y]]-hidden.border[-[t|b|r|l|x|y]]-none
Border Style
.r[-[t|b]-[r|l]]-0, r[-[t|b|l|r]]-0.r[-[t|b]-[r|l]]-4, r[-[t|b|l|r]]-4.r[-[t|b]-[r|l]]-8, r[-[t|b|l|r]]-8.r[-[t|b]-[r|l]]-16, r[-[t|b|l|r]]-16.r[-[t|b]-[r|l]]-24, r[-[t|b|l|r]]-24.r[-[t|b]-[r|l]]-32, r[-[t|b|l|r]]-32-
.r[-[t|b]-[r|l]]-full, r[-[t|b|l|r]]-full
Border Radius
.w-20.w-25.w-40.w-50.w-60.w-75.w-80.w-full.w-auto
Width (%)
.h-20.h-25.h-40.h-50.h-60.h-75.h-80.h-full.h-auto
Height (%)
.f-w-100.f-w-200.f-w-300.f-w-400.f-w-500.f-w-600.f-w-700.f-w-800.f-w-900
Font Weight
.f-s-0.f-s-10.f-s-12.f-s-14.f-s-16.f-s-18.f-s-20
Font Size
.font-italic.font-normal
Font Style
.text-center.text-right.text-left
Text Align
.text-none.text-underline.text-line-through
Text Decoration
.text-capitalize.text-uppercase.text-lowercase
Text Transform
.text-normal.text-nowrap
White Space
.text-break
Word Wrap
.text-ellipsis
Text Overflow
.text-reset.text-current
Color
.align-top.align-middle.align-bottom
Vertical Align
.cursor-default.cursor-pointer.cursor-text.cursor-move.cursor-copy.cursor-not-allowed
Cursor
.select-all.select-auto.select-none
User Select
.pointer-events-none.pointer-events-auto
Pointer Events
.overflow-auto.overflow-hidden.overflow-visible.overflow-scroll.overflow-x-auto.overflow-y-auto.overflow-x-hidden.overflow-y-hidden.overflow-x-visible.overflow-y-visible.overflow-x-scroll.overflow-y-scroll
Overflow
.object-cover.object-contain.object-fill.object-none.object-scale-down
Object Fit
.object-top.object-bottom.object-center.object-left.object-left-top.object-left-right.object-right.object-right-top.object-right-bottom
Object Position
.icon-18.icon-24.icon-36.icon-48