Borders

A basic set of utility classes for including borders and radius on elements. Disabled by default, enable with $enable-borders: true; in the _configuration.scss document.

Default borders (anchor)

The size, style and color can be customized with CSS variables inline on parent containers or individual border elements.

.bd

.bd-t

.bd-b

.bd-s

.bd-e

.bd-y

.bd-x

Example HTML

<div class="bd p-3">.bd</div>
<div class="bd-t p-3">.bd-t</div>
<div class="bd-b p-3">.bd-b</div>
<div class="bd-s p-3">.bd-s</div>
<div class="bd-e p-3">.bd-e</div>
<div class="bd-y p-3">.bd-y</div>
<div class="bd-x p-3">.bd-x</div>

Radius (anchor)

The radius sizes use REM values that can be customized in the _properties.scss document, or inline using the CSS variable included for each radius value.

.rd-1

.rd-2

.rd-3

.rd-4

.rd-5

.rd-pill

Example HTML

<div class="rd-1 bd p-3">.rd-1</div>
<div class="rd-2 bd p-3">.rd-2</div>
<div class="rd-3 bd p-3">.rd-3</div>
<div class="rd-4 bd p-3">.rd-4</div>
<div class="rd-5 bd p-3">.rd-5</div>
<div class="rd-pill bd p-3">.rd-pill</div>

Each radius size also includes directional modifiers for top, bottom, start and end.

.rd-5-top

.rd-5-bottom

.rd-5-start

.rd-5-end

Example HTML

<div class="rd-5-top bd p-3">.rd-5-top</div>
<div class="rd-5-bottom bd p-3">.rd-5-bottom</div>
<div class="rd-5-start bd p-3">.rd-5-start</div>
<div class="rd-5-end bd p-3">.rd-5-end</div>

The .rd-circle radius utility is for elements with equal width and height such as thumbnail images.

Example HTML

<div class="rd-circle bd" style="width: 6rem; height: 6rem;"></div>

Colors (anchor)

With $enable-primary-colors: true;

.bd .bd-blue

.bd .bd-red

.bd .bd-green

.bd .bd-orange

.bd .bd-cyan

Example HTML

<div class="bd bd-blue p-3">.bd .bd-blue</div>
<div class="bd bd-red p-3">.bd .bd-red</div>
<div class="bd bd-green p-3">.bd .bd-green</div>
<div class="bd bd-orange p-3">.bd .bd-orange</div>
<div class="bd bd-cyan p-3">.bd .bd-cyan</div>

Customize (anchor)

The border radius values can be customized in the _properties.scss document, any new values included should be added to the _maps.scss for compiling.

Properties

$rd-1:                0.188rem !default;
$rd-2:                0.313rem !default;
$rd-3:                0.5rem !default;
$rd-4:                0.75rem !default;
$rd-5:                1.125rem !default;
$rd-pill:             50rem !default;

Map

$border-radius: (
  "rd-1": #{$rd-1},
  "rd-2": #{$rd-2},
  "rd-3": #{$rd-3},
  "rd-4": #{$rd-4},
  "rd-5": #{$rd-5},
  "rd-pill": #{$rd-pill},
) !default;

The border styles can be customized in the _borders.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Styles

//  ------------------------------------------------------------
//  Borders
//  ------------------------------------------------------------
@use "../../configuration" as *;
@use "../maps" as *;

@if $enable-borders {

.bd, .bd-t, .bd-b, .bd-s, .bd-e, .bd-y, .bd-x, .bd-child * {
  --bd-size: 1px;
  --bd-style: solid;
  --bd-color: var(--surf-3);
}

.bd {
  border: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-t {
  border-block-start: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-b {
  border-block-end: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-y {
  border-block: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-x {
  border-inline: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-s {
  border-inline-start: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-e {
  border-inline-end: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-child * {
  border: var(--bd-size) var(--bd-style) var(--bd-color);
}

// Radius
@each $name, $value in $border-radius {
  .#{$name} {
    border-radius: var(--#{$name});        
  }
}

.rd-circle {
  border-radius: 50%;
}

@each $name, $value in $border-radius {
  .#{$name}-top {
    border-start-start-radius: var(--#{$name});
    border-start-end-radius: var(--#{$name});     
  }
}

@each $name, $value in $border-radius {
  .#{$name}-bottom {
    border-end-start-radius: var(--#{$name});
    border-end-end-radius: var(--#{$name});     
  }
}

@each $name, $value in $border-radius {
  .#{$name}-start {
    border-start-start-radius: var(--#{$name});
    border-end-start-radius: var(--#{$name});   
  }
}

@each $name, $value in $border-radius {
  .#{$name}-end {
    border-start-end-radius: var(--#{$name});
    border-end-end-radius: var(--#{$name});    
  }
}

// Primary colors
@if $enable-primary-colors {
  .bd-blue {
    --bd-color: var(--blue);
  }
  
  .bd-red {
    --bd-color: var(--red);
  }
  
  .bd-green {
    --bd-color: var(--green);
  }
  
  .bd-orange {
    --bd-color: var(--orange);
  } 
  
  .bd-cyan {
    --bd-color: var(--cyan);
  } 
} // END [if/primary-colors]

} // END [if/borders]