Jump To:

  1. Demos
    1. Basic UI Icons
    2. Navigation Icons
    3. Stroke Weight Variation
    4. Transition Icons (Active State)
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. when-active()
    3. styles()
  4. Functions
    1. get()

Simple icons that only require CSS selectors, used for defaults (JS, etc). Not meant to be replacement for complete icon library. Note the selectors currently can't be modified.

Demos

Basic UI Icons

Simple geometric icons for common actions.

HTML 
<div style="font-size: 2rem; display: flex; gap: 1rem;">
  <span class="css-icon css-icon--plus"></span>
  <span class="css-icon css-icon--minus"></span>
  <span class="css-icon css-icon--close"></span>
  <span class="css-icon css-icon--menu"></span>
</div>

Icons for directional navigation and disclosures.

HTML 
<div style="font-size: 2rem; display: flex; gap: 1rem;">
  <span class="css-icon css-icon--angle-right"></span>
  <span class="css-icon css-icon--angle-down"></span>
  <span class="css-icon css-icon--arrow-right"></span>
  <span class="css-icon css-icon--arrow-left"></span>
</div>

Stroke Weight Variation

Use the `css-icon--stroke-large` modifier for a bolder appearance.

HTML 
<div style="font-size: 2rem; display: flex; gap: 1rem;">
  <span class="css-icon css-icon--plus"></span>
  <span class="css-icon css-icon--plus css-icon--stroke-large"></span>
  <span class="css-icon css-icon--angle-right"></span>
  <span class="css-icon css-icon--angle-right css-icon--stroke-large"></span>
</div>

Transition Icons (Active State)

Some icons animate between states when the `is-active` class is applied.

Plus-to-Minus
Menu-to-Close
HTML 
<div style="font-size: 2rem; display: flex; gap: 2rem; align-items: center;">
  <div>
    <span class="css-icon css-icon--plus-to-minus"></span>
    <span class="css-icon css-icon--plus-to-minus is-active"></span>
    <span class="type-small" style="display: block;">Plus-to-Minus</span>
  </div>
  <div>
    <span class="css-icon css-icon--menu-to-close"></span>
    <span class="css-icon css-icon--menu-to-close is-active"></span>
    <span class="type-small" style="display: block;">Menu-to-Close</span>
  </div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "active-selector" : "details[open] > summary &, &.is-active",
  "color" : currentColor,
  "font-family" : ('Courier New', monospace),
  "margin" : (0 0.15em),
  "size" : 1.15em,
  "stroke-border-radius" : null,
  "stroke-width" : 3px,
  "drag-gap-multiplier" : 0.75,
  "text-offset" : 0.05em,
  "text-size" : 1em,
  "vertical-align" : -0.25em,
  "transition-duration" : 200ms, 
  "transition-timing-function" : ease-in,
  "stroke-sizes" : (
    "large" : (
      "stroke-width" : 5px,
      "stroke-border-radius" : 2px
    )
  )
);
File Information
  • File: _css-icon.scss
  • Group: css-icon
  • Type: variable
  • Lines (comments): 24-39
  • Lines (code): 41-61

Map Properties

Name Type Default Description
active-selector String details[open > summary &, &.is-active] The active selector for css-icon.
color Color currentColor The color of the css-icon.
font-family CssValue ('Courier New', monospace)
margin CssValue (0 0.15em) The icon's margin
size Dimension 1.1em The width, height and font size of the css-icon.
stroke-border-radius Dimension 1px The rounding of the strokes for css-icon.
stroke-width Dimension 0.15em The stroke width of the css-icon.
drag-gap-multiplier Dimension 0.75 Multiplier used to adjust the space between drag-x/drag-y icons (used for all stroke sizes)
text-offset Dimension 0.05em When using an icon with text, adds a margin to match the text height.
text-size Dimension 1em font-size of the icon when using text.
vertical-align Dimension -0.2em Vertical-align for css-icon
transition-duration Time 200ms The duration length for the transition.
transition-timing-function CssValue ease-in The timing function for the transition.
stroke-sizes Map Map Modifiers to adjust stroke sizes for the icons.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _css-icon.scss
  • Group: css-icon
  • Type: mixin
  • Lines (comments): 63-66
  • Lines (code): 68-70

Examples

@include ulu.component-css-icon-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

when-active()

Mixin

Used to style active icons

  • Probably only useful for extending this component and matching active selector
  • Used internally in module
File Information
  • File: _css-icon.scss
  • Group: css-icon
  • Type: mixin
  • Lines (comments): 81-83
  • Lines (code): 85-89

Require

styles()

Mixin

Output CSS icon component stylesheet

File Information
  • File: _css-icon.scss
  • Group: css-icon
  • Type: mixin
  • Lines (comments): 101-103
  • Lines (code): 105-448

Examples

@include ulu.component-css-icon-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _css-icon.scss
  • Group: css-icon
  • Type: function
  • Lines (comments): 72-75
  • Lines (code): 77-79

Examples

@include ulu.component-css-icon-get("property");

Parameters

Name Type Description
$name Map Name of property

Require