Tabs

Molecules · Updated on 21 March 2017

Documentation is WIP, check open issues and start improving!

Tabs component is used for navigation between same context items such as — Nearby Departures/Stops, Times groups or Track directions.

You can pass specific color to this component, however, by default it uses ‘CP1’. It also has hover and click states.

<tabs>
  <tabs-content>
    <tabs-item path="/featured">
      Stops
    </tabs-item>
    <tabs-item path="/feed" active>
      Departures
    </tabs-item>
  </tabs-content>
</tabs>

Stops

Departures

Today

Weekdays

Saturday

Sunday

Documentation

Specifications

// Base

$tabs-padding                           : unit(4.5);
$tabs-background-color                  : palette(cb1);
$tabs-line-height                       : unit(0.5);

// Text

$tabs-text-type                         : 'label';
$tabs-text-color                        : palette(cd3);
$tabs-text-color-active                 : palette(cd1);

// States

$tabs-focused-darkness-unit             : 0.02;                              // 0.02
$tabs-clicked-darkness-unit             : ($tabs-focused-darkness-unit * 2); // 0.04

$tabs-focused-background-color          : rgba(palette(cd1), $tabs-focused-darkness-unit);
$tabs-clicked-background-color          : rgba(palette(cd1), $tabs-clicked-darkness-unit);

API

Name	Values	Default
color	string	CP2