Miscellaneous

components/utilities/_misc.scss

Here is a list of static CSS utilities for common purpose, not based on your settings. As every utility class, these classes use !important because it overrides all inheritances of any component.

Shortcuts

Explicit CSS classes utilities without property name shorthand:

CSS shortcut utility	Rendering
`.u-initial`	`display: initial !important`
`.u-block`	`display: block !important`
`.u-none`	`display: none !important`
`.u-inline-block`	`display: inline-block !important`
`.u-inline`	`display: inline !important`
`.u-hidden`	`visibility: hidden !important`
`.u-fixed`	`position: fixed !important`
`.u-absolute`	`position: absolute !important`
`.u-sticky`	`position: -webkit-sticky !important;` `position: sticky !important;`
`.u-absolute-center`	`position: absolute !important;` `top: 50% !important;` `left: 50% !important;` `transform: translateX(-50%) translateY(-50%) !important;`
`.u-relative`	`position: relative !important`
`.u-faded`	`opacity: 0.3 !important`
`.u-transparent`	`opacity: 0 !important`
`.u-disabled`	`pointer-events: none !important;` `opacity: 0.3 !important;`
`.u-ellipsis`	`white-space: nowrap !important;` `text-overflow: ellipsis !important;` `overflow: hidden !important;`
`.u-capitalize`	`text-transform: capitalize !important`
`.u-uppercase`	`text-transform: uppercase !important`
`.u-decoration-none`	`text-decoration: none !important`

Utilities

CSS class utility	Rendering
`.u-b-none`	`border: none !important;`
`.u-bottom-0`	`bottom: 0px !important;`
`.u-bottom-50`	`bottom: 50% !important;`
`.u-h-100`	`height: 100% !important;`
`.u-h-auto`	`height: auto !important;`
`.u-m-auto`	`margin: auto !important;`
`.u-m-none`	`margin: none !important;`
`.u-left-0`	`left: 0px !important;`
`.u-left-50`	`left: 50% !important;`
`.u-o-hidden`	`overflow: hidden !important;`
`.u-o-visible`	`overflow: visible !important;`
`.u-p-none`	`padding: none !important;`
`.u-pe-none`	`pointer-events: none !important;`
`.u-pe-auto`	`pointer-events: auto !important;`
`.u-right-0`	`right: 0px !important;`
`.u-right-50`	`right: 50% !important;`
`.u-top-0`	`top: 0px !important;`
`.u-top-50`	`top: 50% !important;`
`.u-va-middle`	`vertical-align: middle !important;`
`.u-va-unset`	`vertical-align: unset !important;`
`.u-va-middle`	`vertical-align: middle !important;`
`.u-w-100`	`width: 100% !important;`
`.u-w-auto`	`width: auto !important;`
`.u-z-10000`	`z-index: 10000 !important;`
`.u-z-1000`	`z-index: 1000 !important;`
`.u-z-100`	`z-index: 100 !important;`
`.u-z-30`	`z-index: 30 !important;`
`.u-z-20`	`z-index: 20 !important;`
`.u-z-10`	`z-index: 10 !important;`
`.u-z-0`	`z-index: 0 !important;`
`.u-z--10`	`z-index: -10 !important;`
`.u-z--100`	`z-index: -100 !important;`