Border utility classes (BEMIT, LESS)

_utility.border.less

/**==================================================
 * Utilites >> Border
 *
 * Chainable classes for applying borders and various
 * other border related properties.
 *
 * Defaults: 
 *      border-width: --unit-xxs
 *      border-style: solid
 *      border-color: --border
 * ==================================================
 */


// Border on all sides
.u-b,
.u-b--xxs { border: var(--unit-xxs) solid var(--border); }
.u-b--xs { border: var(--unit-xs) solid var(--border); }
.u-b--sm { border: var(--unit-sm) solid var(--border); }
.u-b--rg { border: var(--unit-rg) solid var(--border); }
.u-b--md { border: var(--unit-md) solid var(--border); }
.u-b--lg { border: var(--unit-lg) solid var(--border); }
.u-b--xl { border: var(--unit-xl) solid var(--border); }
.u-b--xxl { border: var(--unit-xxl) solid var(--border); }


// Border on top
.u-bt,
.u-bt--xxs { border-top: var(--unit-xxs) solid var(--border); }
.u-bt--xs { border-top: var(--unit-xs) solid var(--border); }
.u-bt--sm { border-top: var(--unit-sm) solid var(--border); }
.u-bt--rg { border-top: var(--unit-rg) solid var(--border); }
.u-bt--md { border-top: var(--unit-md) solid var(--border); }
.u-bt--lg { border-top: var(--unit-lg) solid var(--border); }
.u-bt--xl { border-top: var(--unit-xl) solid var(--border); }
.u-bt--xxl { border-top: var(--unit-xxl) solid var(--border); }


// Border on right
.u-br,
.u-br--xxs { border-right: var(--unit-xxs) solid var(--border); }
.u-br--xs { border-right: var(--unit-xs) solid var(--border); }
.u-br--sm { border-right: var(--unit-sm) solid var(--border); }
.u-br--rg { border-right: var(--unit-rg) solid var(--border); }
.u-br--md { border-right: var(--unit-md) solid var(--border); }
.u-br--lg { border-right: var(--unit-lg) solid var(--border); }
.u-br--xl { border-right: var(--unit-xl) solid var(--border); }
.u-br--xxl { border-right: var(--unit-xxl) solid var(--border); }


// Border on bottom
.u-bb,
.u-bb--xxs { border-bottom: var(--unit-xxs) solid var(--border); }
.u-bb--xs { border-bottom: var(--unit-xs) solid var(--border); }
.u-bb--sm { border-bottom: var(--unit-sm) solid var(--border); }
.u-bb--rg { border-bottom: var(--unit-rg) solid var(--border); }
.u-bb--md { border-bottom: var(--unit-md) solid var(--border); }
.u-bb--lg { border-bottom: var(--unit-lg) solid var(--border); }
.u-bb--xl { border-bottom: var(--unit-xl) solid var(--border); }
.u-bb--xxl { border-bottom: var(--unit-xxl) solid var(--border); }


// Border on left
.u-bl,
.u-bl--xxs { border-left: var(--unit-xxs) solid var(--border); }
.u-bl--xs { border-left: var(--unit-xs) solid var(--border); }
.u-bl--sm { border-left: var(--unit-sm) solid var(--border); }
.u-bl--rg { border-left: var(--unit-rg) solid var(--border); }
.u-bl--md { border-left: var(--unit-md) solid var(--border); }
.u-bl--lg { border-left: var(--unit-lg) solid var(--border); }
.u-bl--xl { border-left: var(--unit-xl) solid var(--border); }
.u-bl--xxl { border-left: var(--unit-xxl) solid var(--border); }


// Remove borders
.u-b--none { border: unset; }
.u-bt--none { border-top: unset; }
.u-br--none { border-right: unset; }
.u-bb--none { border-bottom: unset; }
.u-bl--none { border-left: unset; }


// Force-remove borders
.u-b--none--force { .u-b--none !important; }
.u-bt--none--force { .u-bt--none !important; }
.u-br--none--force { .u-br--none !important; }
.u-bb--none--force { .u-bb--none !important; }
.u-bl--none--force { .u-bl--none !important; }


// Set the border colour
.u-b--major { border-color: var(--border-major); }
.u-b--minor { border-color: var(--border-minor); }


// Set the border style
.u-b--solid { border-style: solid; }
.u-b--dashed { border-style: dashed; }
.u-b--dotted { border-style: dotted; }
.u-b--groove { border-style: groove; }