Selected state button interactions
Problem
We have implemented an intermediate .selected
styling based on the conversation in #498 (closed). However, this makes it so that buttons in a selected state are limited in their interaction (active, focused, or hovered). As you can see we have no interaction on the selected buttons:
Proposal
Create designs and affect the following:
Tertiary
tertiary .selected - hover
tertiary .selected - active
tertiary .selected - focus
Secondary
secondary info .selected - hover
secondary info .selected - active
secondary info .selected - focus
secondary success .selected - hover
secondary success .selected - active
secondary success .selected - focus
secondary warning .selected - hover
secondary warning .selected - active
secondary warning .selected - focus
secondary danger .selected - hover
secondary danger .selected - active
secondary danger .selected - focus
Primary
primary info .selected - hover
primary info .selected - active
primary info .selected - focus
primary success .selected - hover
primary success .selected - active
primary success .selected - focus
primary warning .selected - hover
primary warning .selected - active
primary warning .selected - focus
primary danger .selected - hover
primary danger .selected - active
primary danger .selected - focus
Other
.disabled .selected