General information

These styles are not applied to everything by default. This is a design decision in order to allow styles to rolled out piece by piece

You must add css class giosg to an element that contains the part where you want these styles to apply.

For example if you want the whole page to use giosg ui-toolkit style then you can just place the class for body i.e.

<body class="giosg">... page content... <body>

Or you can just pick parts of the page where you want to apply styles


              <section >... no ui-toolkit here... <section> 

              <section class="giosg">... apply styles here... <section>

Page background

To get the same gradient background as this page just add bg-page-background to your container element

All icons have common baseclass .giosg-icon

Icons

.giosg-icon..giosg-condition-circle

.giosg-icon .giosg-goal-circle

.giosg-icon .giosg-room-circle

.giosg-icon .giosg-target-circle

.giosg-icon .giosg-api

.giosg-icon .giosg-condition

.giosg-icon .giosg-goal

.giosg-icon .giosg-lock

.giosg-icon .giosg-markup

.giosg-icon .giosg-network

.giosg-icon .giosg-panel

.giosg-icon .giosg-room

.giosg-icon .giosg-screen

.giosg-icon .giosg-settings

.giosg-icon .giosg-swimlane

.giosg-icon .giosg-target

.giosg-icon .giosg-tree

.giosg-icon .giosg-users

.giosg-icon .giosg-play

.giosg-icon .giosg-play-circle

.giosg-icon .giosg-apps

.giosg-icon .giosg-basket

.giosg-icon .giosg-canned-answers

.giosg-icon .giosg-chatbot

Background colors

Can use these to set background color for any element

.bg-purple

.bg-green

.bg-dark-green

.bg-blue

.bg-light-blue

.bg-violet

.bg-dark

.bg-light-grey

.bg-target-color

Panels

Panel heading

.panel .panel-purple

Panel heading

.panel .panel-green

Panel heading

.panel .panel-dark-green

Panel heading

.panel .panel-blue

Panel heading

.panel .panel-light-blue

Panel heading

.panel .panel-violet

Panel heading

.panel .panel-dark

Panel heading

.panel .panel-light-grey

Panel heading

.panel .bg-target-color

Buttons

These come support default bootstrap classes

Normal buttons

.btn-block .btn-lg .btn-sm .btn-xs

Inverted button colors

Just combine .btn-round with .btn-[color]-inverse

Round buttons

Just add .btn-round

Inverted rounded buttons

Just combine .btn-round with .btn-[color]-inverse

Text colors

These work just like bootstrap text colors, just add the class to any element

.giosg-text-purple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra faucibus volutpat. Quisque at orci turpis. Ut tortor nunc, interdum ac justo et, volutpat commodo ex. Fusce maximus hendrerit nunc non scelerisque.

.giosg-text-green

.giosg-text-dark-green

.giosg-text-blue

.giosg-text-light-blue

.giosg-text-violet

.giosg-text-dark

.giosg-text-light-grey

Labels

.label-purple .label-green .label-dark-green .label-blue .label-light-blue .label-violet .label-dark .label-light-grey .bg-target-color

Round labels

Just add .label-round

label-purple label-green label-dark-green label-blue label-light-blue label-violet label-dark label-light-grey bg-target-color

Inline inputs

Just apply class .input-inline-edit to any <input type="text" ...> element