States
Sass mixins for state transition for interactive elements.
Installation
npm install @trend/state
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. |
defo550