• 
      

    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