EvoToolkit - v2.3.0 (Changelog)

Icon

A suite of object classes to allow for easy sizing of icons. These sizes are programatically generated using key/value pairs in $icon-sizes.

Source

Contributors

Luke Harrison

Base

StandardDisabled

This is disabled by default. Enable block variable $object-icon-sizes or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<svg class="o-icon-tiny u-margin-bottom-small"><use xlink:href="#cat"></use></svg> <svg class="o-icon-small u-margin-bottom-small"><use xlink:href="#cat"></use></svg> <svg class="o-icon-regular u-margin-bottom-small"><use xlink:href="#cat"></use></svg> <svg class="o-icon-large u-margin-bottom-small"><use xlink:href="#cat"></use></svg> <svg class="o-icon-huge"><use xlink:href="#cat"></use></svg>

ResponsiveDisabled

This is disabled by default. Enable block variable $object-icon-sizes-responsive or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<svg class="o-icon-tiny o-icon-regular@md o-icon-huge@lg"><use xlink:href="#cat"></use></svg>

Modifiers

A list of modifiers for the icon component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

CircleDisabled

By default, the icon will have the default square focus area which all elements share. This is why when the first icon is focused, the yellow area is square.

This approach means the focus area looks a little weird with circular icons, so the o-icon--circle modifier was created. Try focusing the second icon and you will notice the focus area is now circular.

This is disabled by default. Enable block variable $object-icon-circle-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)


<p class="u-align-center"> <a href="/" class="o-icon-huge u-margin-bottom-regular"><svg><use xlink:href="#test-icon"></use></svg></a><br /> <a href="/" class="o-icon-huge o-icon--circle"><svg><use xlink:href="#test-icon"></use></svg></a> </p>

FlipDisabled

A suite of modifiers to rotate icons in 90deg sets.

This is disabled by default. Enable block variable $object-icon-flip-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<svg class="o-icon-huge u-margin-bottom-regular"><use xlink:href="#test-icon"></use></svg> <svg class="o-icon-huge o-icon--flip u-margin-bottom-regular"><use xlink:href="#test-icon"></use></svg> <svg class="o-icon-huge o-icon--flip-1/4 u-margin-bottom-regular"><use xlink:href="#test-icon"></use></svg> <svg class="o-icon-huge o-icon--flip-3/4"><use xlink:href="#test-icon"></use></svg>