View source

Opacity Utility

The opacity utility contains helper classes for the opacity CSS property.

Installation

npm install --save-dev iotacss-utils-opacity

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-utils-opacity-namespace String opacity- Class Namespace
$iota-utils-opacity-sizes Map () Opacity sizes

Class Syntax

Simple Class

1
.[utility-namespace][opacity-namespace][opacity-size]

Example

1
2
3
4
$iota-utils-opacity-sizes: (
  30 : 0.3,
  60 : 0.6
);

1
2
<h2 class="u-opacity-30">A 30% opacity heading</h2>
<p class="u-opacity-60">A 60% opacity paragraph</p>