Padding utility classes (BEMIT, LESS)

_utility.padding.less

/**==================================================
 * Utilites >> PADDING
 *
 * Chainable classes for applying padding properties
 * defined from the project's variables.
 * ==================================================
 */


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


// Padding on top
.u-pt--xxs { padding-top: var(--unit-xxs); }
.u-pt--xs { padding-top: var(--unit-xs); }
.u-pt--sm { padding-top: var(--unit-sm); }
.u-pt,
.u-pt--rg { padding-top: var(--unit-rg); }
.u-pt--md { padding-top: var(--unit-md); }
.u-pt--lg { padding-top: var(--unit-lg); }
.u-pt--xl { padding-top: var(--unit-xl); }
.u-pt--xxl { padding-top: var(--unit-xxl); }


// Padding on right
.u-pr--xxs { padding-right: var(--unit-xxs); }
.u-pr--xs { padding-right: var(--unit-xs); }
.u-pr--sm { padding-right: var(--unit-sm); }
.u-pr,
.u-pr--rg { padding-right: var(--unit-rg); }
.u-pr--md { padding-right: var(--unit-md); }
.u-pr--lg { padding-right: var(--unit-lg); }
.u-pr--xl { padding-right: var(--unit-xl); }
.u-pr--xxl { padding-right: var(--unit-xxl); }


// Padding on bottom
.u-pb--xxs { padding-bottom: var(--unit-xxs); }
.u-pb--xs { padding-bottom: var(--unit-xs); }
.u-pb--sm { padding-bottom: var(--unit-sm); }
.u-pb,
.u-pb--rg { padding-bottom: var(--unit-rg); }
.u-pb--md { padding-bottom: var(--unit-md); }
.u-pb--lg { padding-bottom: var(--unit-lg); }
.u-pb--xl { padding-bottom: var(--unit-xl); }
.u-pb--xxl { padding-bottom: var(--unit-xxl); }


// Padding on left
.u-pl--xxs { padding-left: var(--unit-xxs); }
.u-pl--xs { padding-left: var(--unit-xs); }
.u-pl--sm { padding-left: var(--unit-sm); }
.u-pl,
.u-pl--rg { padding-left: var(--unit-rg); }
.u-pl--md { padding-left: var(--unit-md); }
.u-pl--lg { padding-left: var(--unit-lg); }
.u-pl--xl { padding-left: var(--unit-xl); }
.u-pl--xxl { padding-left: var(--unit-xxl); }


// Remove padding
.u-p--none { padding: unset; }
.u-pt--none { padding-top: unset; }
.u-pr--none { padding-right: unset; }
.u-pb--none { padding-bottom: unset; }
.u-pl--none { padding-left: unset; }


// Force-remove padding
.u-p--none--force { .u-p--none !important; }
.u-pt--none--force { .u-pt--none !important; }
.u-pr--none--force { .u-pr--none !important; }
.u-pb--none--force { .u-pb--none !important; }
.u-pl--none--force { .u-pl--none !important; }