Icons

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:<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.

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);

caret-up()

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

@include caret-up($width, $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);

caret-start()

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

@include caret-start($width, $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);