The action bar active class has been deemphasized too much in latest Cyclops style update

[guyaparker]

The action bar active class has been deemphasized too much in latest Cyclops style update.

The example at "http://assets.ctl.io/cyclops/1.8.2/components.html#actionToolbarActiveButton" works because all non-active actions have been disabled. This will likely not always be the case. For instance clicking the action may open a slide-well under the action bar where the active class will give an indication of context.

Would like to see a future update improve the style applied to the active class.

As a suggested starting point for a appropriate style the DCC UI will use an over ride:

html.cyclops .action-toolbar > li a.active, html.cyclops .action-toolbar-left > li a.active, html.cyclops .action-toolbar-right > li a.active, html.cyclops .action-toolbar > li button.active, html.cyclops .action-toolbar-left > li button.active, html.cyclops .action-toolbar-right > li button.active, html.cyclops .action-toolbar > li a:active, html.cyclops .action-toolbar-left > li a:active, html.cyclops .action-toolbar-right > li a:active, html.cyclops .action-toolbar > li button:active, html.cyclops .action-toolbar-left > li button:active, html.cyclops .action-toolbar-right > li button:active { background-color: #e0e0e0; color: #3cac30; } html.cyclops .action-toolbar > li a.active svg.cyclops-icon, html.cyclops .action-toolbar-left > li a.active svg.cyclops-icon, html.cyclops .action-toolbar-right > li a.active svg.cyclops-icon, html.cyclops .action-toolbar > li button.active svg.cyclops-icon, html.cyclops .action-toolbar-left > li button.active svg.cyclops-icon, html.cyclops .action-toolbar-right > li button.active svg.cyclops-icon, html.cyclops .action-toolbar > li a:active svg.cyclops-icon, html.cyclops .action-toolbar-left > li a:active svg.cyclops-icon, html.cyclops .action-toolbar-right > li a:active svg.cyclops-icon, html.cyclops .action-toolbar > li button:active svg.cyclops-icon, html.cyclops .action-toolbar-left > li button:active svg.cyclops-icon, html.cyclops .action-toolbar-right > li button:active svg.cyclops-icon { fill: #3cac30; } html.cyclops .action-toolbar-left>li a.active:enabled:hover svg.cyclops-icon, html.cyclops .action-toolbar-left>li button.active:enabled:hover svg.cyclops-icon, html.cyclops .action-toolbar-right>li a.active:enabled:hover svg.cyclops-icon, html.cyclops .action-toolbar-right>li button.active:enabled:hover svg.cyclops-icon, html.cyclops .action-toolbar>li a.active:enabled:hover svg.cyclops-icon, html.cyclops .action-toolbar>li button.active:enabled:hover svg.cyclops-icon { fill: #3cac30; }

Using standard cyclops style (delete is active):

Using over ride style (delete is active):

[pascualin]

@mattnickles Could you please take a look at this and provide a design update for the active style if needed?

[mattnickles]

@pascualin Let's change the button background color to #d5d5d5 and the text and svg to #333 on active. We should also carry over this active style to ".tree-in-pane .tree-item.selected" for consistency.

[pascualin]

Thank you @mattnickles. I was working on the updates but when I set the actionToolbar item to active I already get the specified styles ("archive" is active):

Are you talking about the items on actionToolbar @guyaparker ?

[guyaparker]

@pascualin - yes I am talking about the actionToolbar. If you look at http://assets.ctl.io/cyclops/1.8.2/components.html#actionToolbarActiveButton the button with class active doesn't have a style like your screenshot until you hover over it