Add CSS for tab components and color schemes.

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

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.

Summary ID
Add CSS for tab components and color schemes.
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.
eef71df27e38dd35ec87f2ee152eb65b68111ab3
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-4.0.x (eed2d6a)