diff options
| -rw-r--r-- | src/components/button_unstyled.style.js | 30 |
1 files changed, 19 insertions, 11 deletions
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js index a47701db..65b5c57b 100644 --- a/src/components/button_unstyled.style.js +++ b/src/components/button_unstyled.style.js @@ -2,10 +2,10 @@ export default { name: 'ButtonUnstyled', selector: '.button-unstyled', states: { + toggled: '.toggled', disabled: ':disabled', hover: ':hover:not(:disabled)', - focused: ':focus-within', - toggled: '.toggled' + focused: ':focus-within' }, validInnerComponents: [ 'Text', @@ -41,31 +41,39 @@ export default { } }, { - component: 'Text', + component: 'Icon', parent: { component: 'ButtonUnstyled', - state: ['disabled'] + state: ['toggled', 'hover'] }, directives: { - textOpacity: 0.25, - textOpacityMode: 'blend' + textColor: '--parent--text' } }, { - component: 'Text', + component: 'Icon', parent: { component: 'ButtonUnstyled', - state: ['disabled', 'hover'] + state: ['toggled', 'focused'] }, directives: { - textOpacity: 0.25, - textOpacityMode: 'blend' + textColor: '--parent--text' } }, { component: 'Icon', parent: { component: 'ButtonUnstyled', + state: ['toggled', 'focused', 'hover'] + }, + directives: { + textColor: '--parent--text' + } + }, + { + component: 'Text', + parent: { + component: 'ButtonUnstyled', state: ['disabled'] }, directives: { @@ -77,7 +85,7 @@ export default { component: 'Icon', parent: { component: 'ButtonUnstyled', - state: ['disabled', 'hover'] + state: ['disabled'] }, directives: { textOpacity: 0.25, |