{{> head }} {{> spinner }} {{> topbar }} {{> menu }} {{> notification-center }}

Style quide and components


Panels

.panel

Basic panel example

Panel title

.panel-default

Panel title

.panel-default

.panel

.panel-success

Panel title

.panel-info

Panel title

.panel-warning

Panel title

.panel-danger

Panel state

Panel state is defined by adding a class "panel-state" and adding a "state state-[color]" div inside

Default color is gray available colors are: primary, success, info, warning, danger

To add text add "data-state" attibute


Text styles

Header 1

Header 2

Header 3

Header 4

Header 5

Lead paragraph

Paragraph


Icons


.icon-magic-wand

.icon-empty-set

.icon-drive

.icon-backup

.icon-umbrella

.icon-coffee

.icon-exclamation

.icon-hash

.icon-copy-to-clipboard

.icon-swap

.icon-force

.icon-unlock

.icon-lock

.icon-lock-error

.icon-revert

.icon-reset

.icon-play

.icon-pause

.icon-stop

.icon-merge

.icon-import

.icon-export

.icon-index

.icon-menu

.icon-newtab

.icon-arrow-up

.icon-arrow-right

.icon-arrow-down

.icon-arrow-left

.icon-arrow-filled-up

.icon-arrow-filled-right

.icon-arrow-filled-down

.icon-arrow-filled-left

.icon-cancel

.icon-collapse

.icon-checkbox

.icon-checkbox-on

.icon-code

.icon-database

.icon-document

.icon-document2

.icon-document-group

.icon-help

.icon-info

.icon-list

.icon-menu-collapse

.icon-menu-expand

.icon-notifications

.icon-plus

.icon-save

.icon-search

.icon-settings

.icon-trash

.icon-warning

.icon-danger

.icon-star-filled

.icon-star

.icon-recent

.icon-newline

.icon-indent

.icon-edit

.icon-copy

.icon-copy-to-clipboard

.icon-cut

.icon-paste

.icon-clone

.icon-circle

.icon-circle-filled

.icon-edited

.icon-check

Elements

Buttons


colors:

.active & .btn-checkable:

.active class ads a "inverse" efect to strongly indicate its state
.btn-checkable changes all icons diectly inside it into checkbox tick

sizes:

Addons:

Addons in btn-block:
Addons in btn-block with text-left:

description:

Hilights interactive buttons and links


code:

Global spinner


preview:

description:

Indicates background processess


code:

forms

.form-control

.input-group with .input-group-addon

addon

file-input

Select file...

Inline editor

234758972348  

If you want to add padding to the text please rememer to add padding classes (eg. ".padding.padding-sm") to both .statnic-name and .edit-inline.

Toggles

Basic


Supports bootstrap brand colors: .toggle-primary, .toggle-info etc.

Checkboxes without label text

Checkboxes with indeterminate state

Inline togglees

Disabled


Disabled state also supported.

Checkboxes

Basic


Supports bootstrap brand colors: .checkbox-primary, .checkbox-info etc.

Checkboxes without label text

Checkboxes with indeterminate state

Inline checkboxes

Circled


.checkbox-circle for roundness.

Disabled


Disabled state also supported.

Radios

Basic


Supports bootstrap brand colors: .radio-primary, .radio-danger etc.

Radios without label text

Inline radios

Disabled


Disabled state also supported.

As Checkboxes


Radios can be made to look like checkboxes.

Horizontal form

Helper classes

Labels

Default Primary Success Info Warning Danger

Contextual colors

.text-muted

.text-primary

.text-success

.text-info

.text-warning

.text-danger


Contextual backgrounds and padding classes

.bg-primary & .padding.padding-lg

.bg-success .padding

.bg-info & .padding.padding-sm

.bg-warning & .padding.padding-xs

.bg-danger


use on span for inline

Global properties-item

Priority:
Some other property:
Status:
Priority:
label:
Value with label
Stale
Stale
Stale

Badges

Inbox 42 badge-primary badge-success badge-info badge-warning badge-danger

Under development

{{> modals/includeAll }} {{> scripts }}