diff options
| author | Henry Jameson <me@hjkos.com> | 2024-02-12 17:26:08 +0200 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2024-02-12 17:26:08 +0200 |
| commit | ae345d2c458bd0952d9b85c2e03060b2d286d320 (patch) | |
| tree | cc0055345936b37b8431e4d2b9bded6f77714231 /src/components/button_unstyled.style.js | |
| parent | 1c5f156af04b6df4cbce8fcf999d752e2500089c (diff) | |
buttons look great now, including unstyled ones menu items work too
Diffstat (limited to 'src/components/button_unstyled.style.js')
| -rw-r--r-- | src/components/button_unstyled.style.js | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js new file mode 100644 index 00000000..d0ca03a5 --- /dev/null +++ b/src/components/button_unstyled.style.js @@ -0,0 +1,88 @@ +export default { + name: 'ButtonUnstyled', + selector: '.button-unstyled', + states: { + disabled: ':disabled', + toggled: '.toggled', + pressed: ':active', + hover: ':hover', + focused: ':focus-within' + }, + validInnerComponents: [ + 'Text', + 'Icon' + ], + defaultRules: [ + { + directives: { + background: '--fg', + shadow: [], + opacity: 0 + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['hover'] + }, + directives: { + textColor: '--parent--text' + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['toggled'] + }, + directives: { + textColor: '--parent--text' + } + }, + { + component: 'Text', + parent: { + component: 'ButtonUnstyled', + state: ['disabled'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + }, + { + component: 'Text', + parent: { + component: 'ButtonUnstyled', + state: ['disabled', 'hover'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['disabled'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['disabled', 'hover'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + } + ] +} |
