|
|
@ -2,10 +2,10 @@ export default {
|
|
|
|
name: 'ButtonUnstyled',
|
|
|
|
name: 'ButtonUnstyled',
|
|
|
|
selector: '.button-unstyled',
|
|
|
|
selector: '.button-unstyled',
|
|
|
|
states: {
|
|
|
|
states: {
|
|
|
|
|
|
|
|
toggled: '.toggled',
|
|
|
|
disabled: ':disabled',
|
|
|
|
disabled: ':disabled',
|
|
|
|
hover: ':hover:not(:disabled)',
|
|
|
|
hover: ':hover:not(:disabled)',
|
|
|
|
focused: ':focus-within',
|
|
|
|
focused: ':focus-within'
|
|
|
|
toggled: '.toggled'
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
validInnerComponents: [
|
|
|
|
validInnerComponents: [
|
|
|
|
'Text',
|
|
|
|
'Text',
|
|
|
@ -41,29 +41,37 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
component: 'Text',
|
|
|
|
component: 'Icon',
|
|
|
|
parent: {
|
|
|
|
parent: {
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
state: ['disabled']
|
|
|
|
state: ['toggled', 'hover']
|
|
|
|
},
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
directives: {
|
|
|
|
textOpacity: 0.25,
|
|
|
|
textColor: '--parent--text'
|
|
|
|
textOpacityMode: 'blend'
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
component: 'Text',
|
|
|
|
component: 'Icon',
|
|
|
|
parent: {
|
|
|
|
parent: {
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
state: ['disabled', 'hover']
|
|
|
|
state: ['toggled', 'focused']
|
|
|
|
},
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
directives: {
|
|
|
|
textOpacity: 0.25,
|
|
|
|
textColor: '--parent--text'
|
|
|
|
textOpacityMode: 'blend'
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
component: 'Icon',
|
|
|
|
component: 'Icon',
|
|
|
|
|
|
|
|
parent: {
|
|
|
|
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
|
|
|
|
state: ['toggled', 'focused', 'hover']
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
directives: {
|
|
|
|
|
|
|
|
textColor: '--parent--text'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
component: 'Text',
|
|
|
|
parent: {
|
|
|
|
parent: {
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
state: ['disabled']
|
|
|
|
state: ['disabled']
|
|
|
@ -77,7 +85,7 @@ export default {
|
|
|
|
component: 'Icon',
|
|
|
|
component: 'Icon',
|
|
|
|
parent: {
|
|
|
|
parent: {
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
component: 'ButtonUnstyled',
|
|
|
|
state: ['disabled', 'hover']
|
|
|
|
state: ['disabled']
|
|
|
|
},
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
directives: {
|
|
|
|
textOpacity: 0.25,
|
|
|
|
textOpacity: 0.25,
|
|
|
|