Colors
In Metro UI you can easily convey information through color. Presence of predefined colors and classes for working with them makes the process of color transfer very simple.
Accent colors
For some elements (such as buttons, inputs, panes, ...) of Metro UI, special accentuating color classes are also defined.
Color | Button | Input |
---|---|---|
.primary | ||
.secondary | ||
.success | ||
.alert | ||
.warning | ||
.yellow | ||
.info | ||
.dark | ||
.light |
Predefined colors
Metro UI contains many predefined colors.
These colors can be used through special color classes.
Example: to define background color - .bg-*
and to define text color .fg-*
.
<div class="bg-red fg-white">
This is a test color
</div>
Color tables
In tables below presents colors defined in Metro UI.
Simple colors
Color | Normal |
---|
Additional colors
Color | Light | Normal | Dark |
---|
Additional colors
In metro-colors.css
are defined additional classes to set colors for: border
, outline
, active
, hover
, focus
, opacity
, before
and after
.
Target | Class |
background | bg-* |
text color | fg-* |
border | bd-* |
outline | ol-* |
active | bg-*-active, fg-*-active, bd-*-active, ol-*-active |
hover | bg-*-hover, fg-*-hover, bd-*-hover, ol-*-hover |
focus | bg-*-focus, fg-*-focus, bd-*-focus, ol-*-focus |
ribbed | ribbed-* |
opacity | op-* |
before | before-bg-*, before-fg-* |
after | after-bg-*, after-fg-* |
<button class="button ribbed-red fg-white border bd-amber">...</button>
<button class="button bg-cyan bg-lightGreen-hover bg-darkRed-active fg-white">...</button>
Utils
You can use classes .inherit-colors
, .inherit-background
, .inherit-color
to inherit colors form parent.