Icons

A few simple icons to indicate state or function.

Caret Icons

Use carets to indicate some meaning of functionality or direction.

If used inside of an element marked as .open the caret will reverse direction accordingly to indicate state.

<span class="caret" aria-hidden="true"></span>
<span class="caretup" aria-hidden="true"></span>
<span class="caretstart" aria-hidden="true"></span>
<span class="caretend" aria-hidden="true"></span>

Mixins

Create custom uses of the caret with the Sass mixins.

Four directions are available, with the following names: down, up, start, and end.

The start/end directions are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css uses the ltr mode, where figuration-rtl.*.css uses the rtl mode.

  • For left-to-right mode (ltr - default);
    • start caret points to the left side
    • end caret points to the right side
  • For right-to-left mode (rtl);
    • start caret points to the right side
    • end caret points to the left side
// Create the base caret
@include caret($direction, $border-width, $border-color);

// Modify the caret direction
@include caret-down($border-width, $border-color);
@include caret-up($border-width, $border-color);
@include caret-start($border-width, $border-color);
@include caret-end($border-width, $border-color);

Example

.btn {
.example-caret {
@include caret(start, .5rem, #000);
}

@include hover-focus() {
.example-caret {
@include caret-end(.5rem, #000);
}
}
}
Hover over, or focus on the following button to change caret direction:
Hover over, or focus on the following button to change caret direction:<br />
<button type="button" class="btn">
Caret example
<span class="example-caret" aria-hidden="true"></span>
</button>

Close Icon

Use a generic close icon for dismissing content like alerts, modals, tooltips, and popovers. Be sure to include text for screen readers, as we've done with aria-label.

<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

Drag Icon

Figuration also uses a drag icon with draggable popovers. Be sure to include text for screen readers, as we've done with aria-label.

<button type="button" class="drag" aria-label="Drag">
<span aria-hidden="true">+</span>
</button>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-caret boolean true Enable generation of the caret icon utility classes.
$enable-utility-close boolean true

Enable generation of the close icon utility class.

Disabling this may adversely affect the layout of any close icons used within a component.
$enable-utility-drag boolean true

Enable generation of the drag icon utility class.

Disabling this may adversely affect the layout of the drag icons used within a component.
$caret-width string .75rem Caret element width.
$caret-border-width string .3125rem Caret border width.
$close-font-size string ($font-size-base * 1.5) Close icon font size.
$close-font-weight string $font-weight-bold Close icon font weight.
$close-opacity float .65 Close icon opacity.
$close-hover-opacity float .85 Close icon opacity when hovered/focused.
$drag-font-size string ($font-size-base * 1.5) Drag icon font size.
$drag-font-weight string $font-weight-bold Drag icon font weight.
$drag-opacity float .65 Drag icon opacity.
$drag-hover-opacity float .85 Drag icon opacity when hovered/focused.

Mixins

Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

caret()

Build the base caret icon.

@include caret($direction, $width, $color);
Argument Type Default Description
$direction string down Direction the caret should point. Options are up, down,start, or end.
$width string $caret-border-width Width of the borders used to size the caret.
$color string null The color of the caret. A null value will inhterit the font color.

caret-up()

Alter the base caret to point in the up direction. Uuseful for a hover or active state.

@include caret-up($width, $color);
Argument Type Default Description
$width string $caret-border-width Width of the borders used to size the caret.
$color string null The color of the caret. A null value will inhterit the font color.

caret-down()

Alter the base caret to point in the down direction. Uuseful for a hover or active state.

@include caret-down($width, $color);
Argument Type Default Description
$width string $caret-border-width Width of the borders used to size the caret.
$color string null The color of the caret. A null value will inhterit the font color.

caret-start()

Alter the base caret to point in the start direction. Uuseful for a hover or active state.

@include caret-start($width, $color);
Argument Type Default Description
$width string $caret-border-width Width of the borders used to size the caret.
$color string null The color of the caret. A null value will inhterit the font color.

caret-end()

Alter the base caret to point in the end direction. Uuseful for a hover or active state.

@include caret-end($width, $color);
Argument Type Default Description
$width string $caret-border-width Width of the borders used to size the caret.
$color string null The color of the caret. A null value will inhterit the font color.