colors

variables

st-tropaz

$st-tropaz: #266092;

Description

Primary color, mostly used for the selected elements and to draw attention to the important elements of interaction.

Type

Color

rio-grande

$rio-grande: #C3D600;

Description

Secondary color

Type

Color

scooter

$scooter: #3DB0D6;

Description

Contextual color for informational alert messages

Type

Color

limeade

$limeade: #8ABC00;

Description

Linked to valid/validated/validation elements.

Type

Color

pirate-gold

$pirate-gold: #B78001;

Description

Used for validation message in inputs

Type

Color

lightning-yellow

$lightning-yellow: #FEB914;

Description

Used to notify invalid elements or warning information.

Type

Color

chestnut-rose

$chestnut-rose: #CE6464;

Description

Used for errors.

Type

Color

black

$black: #000;

Description

Used for labels, titles.

Type

Color

mine-shaft

$mine-shaft: #333;

Description

Used for some labels

Type

Color

dove-gray

$dove-gray: #666;

Description

Used for subtitles.

Type

Color

silver

$silver: #C0C0C0;

Description

Used for backgrounds.

Type

Color

alto

$alto: #DEDEDE;

Description

Used for backgrounds etc.

Type

Color

concrete

$concrete: #F2F2F2;

Description

Used for panels.

Type

Color

white

$white: #FFF;

Description

Used for empty spaces, toolbar-panels etc.

Type

Color

smalt-blue

$smalt-blue: #4F8992;

Description

Used for default color theme

Type

Color

shadow

$shadow: rgba(0, 0, 0, 0.2);

Description

Used for shadows

Type

Color

Used by

guidelines

variables

breadcrumb-items-color

$breadcrumb-items-color: $brand-primary !default;

Description

Breadcrumb not selected items color

Type

Color

breadcrumb-items-max-width

$breadcrumb-items-max-width: 250px !default;

Description

Breadcrumb items max width

Type

Number

breadcrumb-separator-color

$breadcrumb-separator-color: $breadcrumb-color !default;

Description

Breadcrumb separator color

Type

Color

breadcrumb-separator-padding

$breadcrumb-separator-padding: $padding-larger !default;

Description

Breadcrumb separator padding

Type

Number

btn-font-size

$btn-font-size: 12px !default;

Description

Button font size

Type

Number (unit)

btn-box-shadow-width

$btn-box-shadow-width: 3px !default;

Description

Button box shadow width

Type

Number (unit)

Used by

btn-background-tint-percent

$btn-background-tint-percent: 10 !default;

Description

Button background tinting percent

Type

Number (unitless)

Used by

btn-xs-svg-size

$btn-xs-svg-size: 0.8rem !default;

Description

Extra small button svg size

Type

Number (unitless)

btn-sm-svg-size

$btn-sm-svg-size: 1.2rem !default;

Description

Small button svg size

Type

Number (unitless)

btn-md-svg-size

$btn-md-svg-size: 1.6rem !default;

Description

Default button svg size

Type

Number (unitless)

btn-lg-svg-size

$btn-lg-svg-size: 2.5rem !default;

Description

Large button svg size

Type

Number (unitless)

dropdown-caret-size

$dropdown-caret-size: $caret-width-large !default;

Description

Dropdown caret size

Type

Number (unit)

input-group-btn-padding

$input-group-btn-padding: 5px !default;

Description

Input group button padding

Type

Number (unit)

input-group-addon-padding

$input-group-addon-padding: 8px !default;

Description

Input group add-on padding

Type

Number (unit)

modal-header-bg

$modal-header-bg: $brand-primary !default;

Description

Modal header background color

Type

Color

modal-header-color

$modal-header-color: $white !default;

Description

Modal header color

Type

Color

navbar-brand-logo-width

$navbar-brand-logo-width: 75px !default;

Description

Navbar brand logo width

Type

Number (unit)

navbar-form-margin

$navbar-form-margin: 0 !default;

Description

Navbar form top and bottom width

Type

Number (unit)

navbar-search-btn-color

$navbar-search-btn-color: #000 !default;

Description

Navbar search text and border bottom color

Type

Color

navbar-search-btn-width

$navbar-search-btn-width: 40px !default;

Description

Navbar search btn width

Type

Number (unit)

paddings

variables

padding-smaller

$padding-smaller: 5px !default;

Description

Smaller

Type

Number (unit)

padding-small

$padding-small: 10px !default;

Description

Small

Type

Number (unit)

padding-normal

$padding-normal: 15px !default;

Description

Normal

Type

Number (unit)

padding-large

$padding-large: 20px !default;

Description

Large

Type

Number (unit)

padding-larger

$padding-larger: 30px !default;

Description

Larger

Type

Number (unit)

General

functions

tint

@function tint($color, $percentage) { ... }

Description

Slightly lighten a color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

color to tint

Colornone
$percentage

percentage of $color in returned color

Numbernone

Returns

Color

Used by

Links

shade

@function shade($color, $percentage) { ... }

Description

Slightly darken a color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

color to shade

Colornone
$percentage

percentage of $color in returned color

Numbernone

Returns

Color

Links

mixins

btn-colors

@mixin btn-colors($btn-bg: $btn-default-bg) { ... }

Description

Define button colors based on its background

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$btn-bg

button background color to tint

Color$btn-default-bg

Requires

dropdown-caret-color

@mixin dropdown-caret-color($dropdown-caret-color) { ... }

Description

Dropdown caret default color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$dropdown-caret-color

Caret color

Colornone

Content

This mixin allows extra content to be passed (through the @content directive). Role: Borders and box-shadow color variation