Add CSS for tab components and color schemes.

Review Request #10387 — Created Jan. 22, 2019 and submitted — Latest diff uploaded

Information

Review Board
release-4.0.x

Reviewers

This introduces common CSS for defining tab navigation for content.
It's meant to be generic enough to be used in a variety of cases, but
also to be extendable for additional presentation modes going forward.

Tabs are defined by creating a ul.rb-c-tabs element, with
li.rb-c-tabs__tab elements inside of it. Each has a label, which can
optionally have a short version for mobile devices.

On mobile devices, tabs are also horizontally scrollable, keeping the
tabs from wrapping around awkwardly.

Mixin functions are available to customize tab presentation.
.set-color-scheme() defines the colors used by the tabs, and
.set-flush-with-border() makes the tabs flush with a border of a
content container.

Tabs make use of another new CSS addition, color schemes. We constantly
define colors throughout our UI, rarely making use of centralized
variables for them. In an effort to both standardize colors and to make
it easy to apply them, the beginnings of a set of namespaced color
definitions and pre-defined color schemes (grouping together
backgrounds, borders, etc.) now exist in colors.less. Color schemes
can be passed currently to .set-color_scheme(), and other functions
down the road, to give a standard way of customizing components.

Made use of this with the Issue Summary Table.

Tested the full and short labels in mobile/desktop modes, and tested
the horizontal scrolling in mobile mode.

Tested the mixins in different conditions.

Commits

Files