56 lines (41 loc) · 1.5 KB

Hide and only classes

These are classes for breakpoint tags and mobile,nonmobile split. see breakpoints for reference god i hate words

Hide

Hide on breakpoint or device

.hide-xs
.hide-sm
.hide-md
.hide-lg
.hide-mobile
.hide-nonmobile

Show on certain ineractions of its ancestor with a .pointer-reference class

.hide-hover (hide when on hover)
.hide-not-hover (hide when not on hover)
.hide-focus (hide when on focus)
.hide-not-focus (hide when not on focus)
.hide-active (hide when on active)
.hide-not-active (hide when not on active)
.hide-toggle (hide when classed as open or active)
.hide-not-toggle (hide when not classed as open or active)

Only

Show only on breakpoint or device

.only-xs
.only-sm
.only-md
.only-lg
.only-mobile
.only-nonmobile

Show on certain ineractions of its ancestor with a .pointer-reference class

.only-hover (only when on hover)
.only-not-hover (only when not on hover)
.only-focus (only when on focus)
.only-not-focus (only when not on focus)
.only-active (only when on active)
.only-not-active (only when not on active)
.only-toggle (only when classed as open or active)
.only-not-toggle (only when not classed as open or active)

Screen reader only

.sr-only

Yea boi