Border Helper Classes

TIP

The following colors are available for border helper classes, see _border-helpers.scss:

Show Colors

scss

$color-map-border: (
        "primary": $primary-color,
        "primary-light": $primary-color-light,
        "primary-lightest": $primary-color-lightest,
        "secondary": $secondary-color,
        "secondary-light": $secondary-color-light,
        "white": $white,
        "notice": $notice-color,
        "error": $error-color,
        "error-dark": $error-color--dark,
        "warning": $warning-color,
        "warning-dark": $warning-color--dark,
        "success": $success-color,
        "success-dark": $success-color--dark,
        "disabled": $disabled-color,
        "gray": $gray,
        "dark-gray": $dark-gray,
        "light-gray": $light-gray,
        "black": $black,
);

Surrounding Borders

.h-border-{$colorName}

INFO

h-border-primary-lightest

h-border-primary-light

h-border-primary

h-border-secondary

h-border-light-gray

h-border-gray

h-border-black

h-border-success

h-border-warning

h-border-error

Bold Modifier

.h-border-{$colorName}-[extra]-[bold]

INFO

h-border-primary-lightest-bold

h-border-primary-bold

h-border-secondary-extra-bold

h-border-light-gray-extra-bold

Border on one side

.h-border-[left, right, top, bottom]-{$colorName}-[extra]-[bold]

INFO

h-border-left-primary

h-border-top-success-extra-bold

h-border-right-gray-extra-bold

h-border-bottom-error-bold

Border Radius

.h-border-radius, .h-border-radius-large, .h-border-radius-extra-large, .h-border-radius-button, .h-border-radius-button-large, .h-border-radius-100

INFO

h-border-radius

h-border-radius-large

h-border-radius-extra-large

h-border-radius-button

h-border-radius-100

Reset Borders

.h-no-border[-y, -x, -top, -bottom, -left, -right]

Reset Border Radius

.h-border-radius-reset[-top/-bottom]

INFO

h-border-radius-reset

Circle

.h-border-radius-100

INFO