# Border Mixins
The mixins will pull the values based on the border variables in the _variables.scss file at the root of the /00_Abstracts directory.
# Global Settings
There are two global settings that allow you to create consistency throughout your application as well as reduce the amount of typing you need to do to get borders set up.
$border-style- This is used to determine the style of the of your border -solid,dashed, etc.$border-size- This will use values from the$spacing-sizesvariable. The default value for this is3xsor0.0625rem(1pxif your base font size is set to16px).$border-color- This will pull values from the$theme-colorsvariable. The default value for this is set tolight.
NOTE
The $border-color variable can also be set up with a variation and opacity like the other color features - ex: light, darker, 0.75.
# Summary of Abbreviations
| Abbreviation | Meaning |
|---|---|
| border() | border - all sides |
| border-x() | border - left and right |
| border-y() | border - top and bottom |
| border-t() | border - top |
| border-l() | border - left |
| border-r() | border - right |
| border-b() | border - bottom |
# Example
border()
border-x()
border-y()
border-l()
border-r()
border-t()
border-b()
# Parameters
The mixin can accept additional parameters in order to override the default settings.
| Name | Type | Default Value | Description |
|---|---|---|---|
| style | string | $border-style | Determines the style of the borer - (solid, dashed, etc.) |
| size | string | $border-size | The width of the border - (xs, sm, md, etc.) |
| color | string | $border-color | The base color of the border - (primary, dark, light, etc.) |
| variant | string | base (if not defined in $border-color) | This variation of the border color - (lighter, light, darker, etc.) |
| opacity | decimal | 1 (if not defined in $border-color) | The opacity of the color - (a number between 0 and 1) |
| important | bool | false | determines whether or not the !important property is added to the css rule |
# Example
border(dashed, xxs)
border(dotted, xs)
border-l(solid, md, primary)
# !important
The last parameter in this mixin is $important and defining all of the parameters just to make your style !important may seem a bit tedious - border-l(solid, md, primary, base, 1, true). Don't worry! You can pass in a named parameter as a shortcut: border(dashed, $important: true);.
# Default Styles
You will probably not use this mixin as it is already implemented in the border() mixins, but there is a default-border() mixin that takes one parameter - the setting name. The default setting names are style, size, and color.