Border Variables
The existing variables used in all of our borders.
Examples
$border-solid-thick (3px)
$border-solid-medium (2px)
$border-solid-thin (1px)
Notes
None at this time.
Resources
| Sass File(s) | /sass/base/_variables.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Full Borders
A border that wraps around the entire element.
Examples
borderDkGray (border: $border-solid-thin $dkGray)
borderMdGray (border: $border-solid-thin $mdGray)
borderDkRed (border: $border-solid-thin $dkRed)
Code
<p class="borderDkGray padding10">Dark Gray Border</p>
<p class="borderMdGray padding10">Medium Gray Border</p>
<p class="borderDkRed padding10">Dark Red Border</p>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_border.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Top Borders
A border that only appears at the top of an element.
Examples
borderTopMdGrayThin (border-top: $border-solid-thin $mdGray)
borderTopMdGray (border-top: $border-solid-thick $mdGray)
borderTopBlue (border-top: $border-solid-thick $blue)
Code
<p class="borderTopMdGrayThin paddingTop5">Thin Medium Gray Top Border</p>
<p class="borderTopMdGray paddingTop5">Medium Gray Top Border</p>
<p class="borderTopBlue paddingTop5">Blue Top Border</p>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_border.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Bottom Borders
A border that appears at the bottom of an element.
Examples
borderBottomPurple (border-bottom: $border-solid-thick $purple)
borderBottomBlue (border-bottom: $border-solid-thick $blue)
borderBottomTeal (border-bottom: $border-solid-thick $teal)
borderBottomRed (border-bottom: $border-solid-thick $red)
borderBottomDkRed (border-bottom: $border-solid-thick $dkRed)
borderBottomMdGray (border-bottom: $border-solid-thick $mdGray)
borderBottomDkGray (border-bottom: $border-solid-thick $dkGray)
Code
<p class="borderBottomPurple">Purple Bottom Border</p>
<p class="borderBottomBlue">Blue Bottom Border</p>
<p class="borderBottomTeal">Teal Bottom Border</p>
<p class="borderBottomRed">Red Bottom Border</p>
<p class="borderBottomDkRed">Dark Red Bottom Border</p>
<p class="borderBottomMdGray">Medium Gray Bottom Border</p>
<p class="borderBottomDkGray">Dark Gray Bottom Border</p>
Notes
None at this time.
Resources
| Sass File(s) | /sass/core/_border.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.
Border Radius
A border that has a radius.
Examples
roundCorners3
roundCorners5
roundCorners8
roundCorners10
roundCornersTop10
roundCornersBtm10
roundCornersLeft10
roundCornersRight10
roundCornersTopLeft10
roundCornersTopRight10
roundCornersBtmLeft10
roundCornersBtmRight10
roundCornersTopLeftBtmRight10
roundCornersTopRightBtmLeft10
makeCircle
Code
<p class="roundCorners3 bkgdMdGray">3px Radius</p>
<p class="roundCorners5 bkgdMdGray">5px Radius</p>
<p class="roundCorners8 bkgdMdGray">8px Radius</p>
<p class="roundCorners10 bkgdMdGray">10px Radius</p>
<p class="roundCornersBtm10 bkgdMdGray">10px Bottom Radius</p>
<p class="roundCornersTop10 bkgdMdGray">10px Top Radius</p>
<p class="makeCircle bkgdMdGray">Full Radius</p>
Notes
To add radius background color to icons, see SVG Library.
Resources
| Sass File(s) | /sass/core/_utility.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
None at this time.