Circle

Atoms · Updated on 31 May 2017

Documentation is WIP, check open issues and start improving!

Circle component in Trafi UI is mostly used to represent different kinds of transport Stops.

It has two different sizes — medium (24px) or large (32px) and similar margin_left or margin_right properties as Badge and Icon.

Inverse

Inverse circle uses passed color on it’s background, however, both Icon and circle-border are CL1 color.

Documentation

Specifications

// Base

$circle-border-radius            : unit(999);                      // 3996px

$circle-size                     : unit(6);                        // 24px
$circle-size-large               : unit(8);                        // 32px

$circle-border-thickness         : unit(0.25);                     // 1px
$circle-border-thickness-large   : unit(0.375);                    // 1.5px

$circle-padding                  : unit(1);                        // 4px
$circle-padding-large            : unit(1);                        // 4px

$circle-margins: (
  default                       : unit(2),                         // 8px
  large                         : unit(3),                         // 12px
);

$circle-margin-directions        : 'left', 'right';

API

Name	Values	Default
icon	component	nil
color	string	CP2
size	medium / large	medium
inverse	true / false	false
margin_left	true / false	false
margin_right	true / false	false