aboutsummaryrefslogtreecommitdiff
path: root/src/components/button_unstyled.style.js
diff options
context:
space:
mode:
authorHenry Jameson <me@hjkos.com>2024-02-12 17:26:08 +0200
committerHenry Jameson <me@hjkos.com>2024-02-12 17:26:08 +0200
commitae345d2c458bd0952d9b85c2e03060b2d286d320 (patch)
treecc0055345936b37b8431e4d2b9bded6f77714231 /src/components/button_unstyled.style.js
parent1c5f156af04b6df4cbce8fcf999d752e2500089c (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.js88
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'
+ }
+ }
+ ]
+}