@trend/state
0.5.0 • Public • Published
States
Sass mixins for state transition for interactive elements.
Installation
Basic Usage
// Import all variables, mixins, and functions.
@import "@trend/state/styles";
// Import just variables.
@import "@trend/state/scss/variables";
// Import just mixins.
// NOTE: Will import variables and functions.
@import "@trend/state/scss/mixins";
// Import just functions.
// NOTE: Will import variables.
@import "@trend/state/scss/functions";
Variables
Name |
Type |
$tc-state-dark-color-opacities |
Map |
$tc-state-light-color-opacities |
Map |
Both maps provide: hover
, focus
, press
, selected
, and activated
keys.
Mixins
Name |
Arguments |
Description |
tc-state |
$color (required) |
Add state rules to a ruleset. |
tc-state-hover-opacity |
$opacity (required) |
Create ruleset to adjust hover state for a interactive element. |
tc-state-focus-opacity |
$opacity (required) |
Create ruleset to adjust focus state for a interactive element. |
tc-state-press-opacity |
$opacity (required) |
Create ruleset to adjust active state for a interactive element. |
tc-state-base-color |
$color (required) |
Add rule to ruleset to adjust background color of a interactive element. |
Functions
Name |
Arguments |
Description |
$tc-state-opacity |
$color (Valid theme option), $state
|
Returns opacity value for desire state and color passed. |
Package Sidebar
Install
Weekly Downloads