We're updating the issue view to help you get more done. 

Change Table Styles

Description

Our current table styles don't leave much room for color variation to meaning. The following changes are meant to improve readability and allow for more complexity in OpenLMIS tables.

Change Reasons

  • Zebra stripes generally aid readability on printed forms, but give OpenLMIS forms lots of visual noise because of the amount of text

    • Adding a mouseover/focus highlight to a table row will help with visual styling more

  • Using secondary colors for semantic meaning allows for more intuitive designs

    • Currently, there are implementations of tables that have "parent and child" relationships in the same table — those relationships need a stronger visual relationship

    • Creating CSS classes to undo zebra striping for tables that don't need it will be harder to maintain

Acceptance Criteria

  • Remove zebra stripes

    • Default tables are white

  • Add Styleguide page and Sass mixin for gray table style

  • Add mouse over highlight

    • Highlight should be based on $brand-primary color

Examples
Requisition Screen

Local Fulfillment Screen

Status

Assignee

Klaudia Pałkowska

Reporter

Nick Reid

Labels

Story Points

3

Time tracking

16h

Components

Sprint

None

Fix versions

Priority

Major