Created
August 16, 2018 12:59
-
-
Save M-Willett/6eab3b87b7de1c5f80f3190a5e473534 to your computer and use it in GitHub Desktop.
Border utility classes (BEMIT, LESS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**================================================== | |
* 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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment