0.5.0 • Published 7 years ago
@trend/state
Licence
MIT
Version
0.5.0
Deps
2
Size
6 kB
Vulns
0
Weekly
0
States
Sass mixins for state transition for interactive elements.
Installation
npm install @trend/stateBasic 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. |