Skip to content

Make hover/focus/active states consistent for dropdowns

Resources

FE @alfredo1

Problem

We currently have several styles for dropdowns. These three different versions are taken from the Issues list page:

Resting Hover Active
Screenshot_2016-11-03_18.13.37 Screenshot_2016-11-03_18.13.41 Screenshot_2016-11-03_18.14.03
Screenshot_2016-11-03_18.14.10 Screenshot_2016-11-03_18.14.10 Screenshot_2016-11-03_18.14.46
Screenshot_2016-11-03_18.15.00 Screenshot_2016-11-03_18.15.10 Screenshot_2016-11-03_18.15.16

Proposal

The dropdowns will all use fa-chevron-down from Font Awesome. The border and chevron will change color for hover, focus and active states.

The following table shows the colors to be used for each state:

ce_24150__make-dropdowns-consistent--border-chevron

The text color to be used for each type of dropdown is as follows:

ce_24150__make-dropdowns-consistent--text-color

Edited by Pedro Moreira da Silva