Margin utility classes (BEMIT, LESS)

_utility.margin.less

/**==================================================
 * Utilites >> MARGIN
 *
 * Chainable classes for applying margin properties
 * defined from the project's variables.
 *
 * Please avoid using negative margins.
 * ==================================================
 */


// Margin on all sides
.u-m--xxs { margin: var(--unit-xxs); }
.u-m--xs { margin: var(--unit-xs); }
.u-m--sm { margin: var(--unit-sm); }
.u-m,
.u-m--rg { margin: var(--unit-rg); }
.u-m--md { margin: var(--unit-md); }
.u-m--lg { margin: var(--unit-lg); }
.u-m--xl { margin: var(--unit-xl); }
.u-m--xxl { margin: var(--unit-xxl); }


// Margin on top
.u-mt--xxs { margin-top: var(--unit-xxs); }
.u-mt--xs { margin-top: var(--unit-xs); }
.u-mt--sm { margin-top: var(--unit-sm); }
.u-mt,
.u-mt--rg { margin-top: var(--unit-rg); }
.u-mt--md { margin-top: var(--unit-md); }
.u-mt--lg { margin-top: var(--unit-lg); }
.u-mt--xl { margin-top: var(--unit-xl); }
.u-mt--xxl { margin-top: var(--unit-xxl); }


// Margin on right
.u-mr--xxs { margin-right: var(--unit-xxs); }
.u-mr--xs { margin-right: var(--unit-xs); }
.u-mr--sm { margin-right: var(--unit-sm); }
.u-mr,
.u-mr--rg { margin-right: var(--unit-rg); }
.u-mr--md { margin-right: var(--unit-md); }
.u-mr--lg { margin-right: var(--unit-lg); }
.u-mr--xl { margin-right: var(--unit-xl); }
.u-mr--xxl { margin-right: var(--unit-xxl); }


// Margin on bottom
.u-mb--xxs { margin-bottom: var(--unit-xxs); }
.u-mb--xs { margin-bottom: var(--unit-xs); }
.u-mb--sm { margin-bottom: var(--unit-sm); }
.u-mb,
.u-mb--rg { margin-bottom: var(--unit-rg); }
.u-mb--md { margin-bottom: var(--unit-md); }
.u-mb--lg { margin-bottom: var(--unit-lg); }
.u-mb--xl { margin-bottom: var(--unit-xl); }
.u-mb--xxl { margin-bottom: var(--unit-xxl); }


// Margin on left
.u-ml--xxs { margin-left: var(--unit-xxs); }
.u-ml--xs { margin-left: var(--unit-xs); }
.u-ml--sm { margin-left: var(--unit-sm); }
.u-ml,
.u-ml--rg { margin-left: var(--unit-rg); }
.u-ml--md { margin-left: var(--unit-md); }
.u-ml--lg { margin-left: var(--unit-lg); }
.u-ml--xl { margin-left: var(--unit-xl); }
.u-ml--xxl { margin-left: var(--unit-xxl); }


// Remove padding
.u-m--none { margin: unset; }
.u-mt--none { margin-top: unset; }
.u-mr--none { margin-right: unset; }
.u-mb--none { margin-bottom: unset; }
.u-ml--none { margin-left: unset; }


// Force-remove padding
.u-m--none--force { .u-m--none !important; }
.u-mt--none--force { .u-mt--none !important; }
.u-mr--none--force { .u-mr--none !important; }
.u-mb--none--force { .u-mb--none !important; }
.u-ml--none--force { .u-ml--none !important; }