projekt kivitendo

/* ------------------------------------------------------------- */

/* DEVELOPING DEMO (developing_demo.less) */

/* ------------------------------------------------------------- */

//

// DEVELOPERS DEMO

//

// ----------------------------------------------------------------------------

// DESCRIPTION: All colors for the demo color page in /css/developing/farben-demo.html

// use following statement for creating the demo-css-file:

// lessc developing-demo.less ../css/developement/farben-demo.css

//

// For creating the HTML demo blocks from variables.less use following grep patterns

// @([a-z-]+)[ ]*:[ ]*[@][0-9a-z-]+[ ]*; replace with:

// .\1 { background-color: @\1 } or .$1 { background-color: @$1 }

// ----------------------------------------------------------------------------

// --------------

// Grey shades

.gray-verydark { background-color: @gray-verydark }

.gray-dark { background-color: @gray-dark }

.gray-standard { background-color: @gray-standard }

.gray-light { background-color: @gray-light }

.gray-lighter { background-color: @gray-lighter }

// Divers Color Specications

// for message and other coloured stuff

// error

.color-red-strong { background-color: @color-red-strong }

.color-red-light { background-color: @color-red-light }

// ok

.color-green-strong { background-color: @color-green-strong }

.color-green-light { background-color: @color-green-light }

// info/hint

.color-blue-strong { background-color: @color-blue-strong }

.color-blue-light { background-color: @color-blue-light }

// warning

.color-orange-strong { background-color: @color-orange-strong } // more brown

.color-orange-light { background-color: @color-orange-light }

// divers

.rainbow-green { background-color: @rainbow-green }

.rainbow-blue { background-color: @rainbow-blue }

.rainbow-red { background-color: @rainbow-red }

.rainbow-yellow { background-color: @rainbow-yellow }

// --------------

// Brand colors

// Text (Label & data)

.brand-primary { background-color: @brand-primary }

.brand-label { background-color: @brand-label }

.brand-label-bg { background-color: @brand-label-bg }

// Messages & info types

.brand-info { background-color: @brand-info }

.brand-info-bg { background-color: @brand-info-bg }

.brand-ok { background-color: @brand-ok }

.brand-ok-bg { background-color: @brand-ok-bg }

.brand-warning { background-color: @brand-warning }

.brand-warning-bg { background-color: @brand-warning-bg }

.brand-error { background-color: @brand-error }

.brand-error-bg { background-color: @brand-error-bg }

// Positive & negative colors

.brand-positive { background-color: @brand-positive }

.brand-positive-bg { background-color: @brand-positive-bg }

.brand-negative { background-color: @brand-negative }

.brand-negative-bg { background-color: @brand-negative-bg }

// Buttons

// Button with manipulation (submit etc.)

.button-strong { background-color: @button-strong }

.button-strong-bg { background-color: @button-strong-bg }

.button-strong-border { background-color: @button-strong-border }

.button-strong-hover { background-color: @button-strong-hover }

.button-strong-hover-bg { background-color: @button-strong-hover-bg }

.button-strong-hover-border { background-color: @button-strong-hover-border }

.button-strong-active { background-color: @button-strong-active }

.button-strong-active-bg { background-color: @button-strong-active-bg }

.button-strong-active-border { background-color: @button-strong-active-border }

// button withoud data manipulation (reset, cancel, open, show etc.)

.button-soft { background-color: @button-soft }

.button-soft-bg { background-color: @button-soft-bg }

.button-soft-border { background-color: @button-soft-border }

.button-soft-hover { background-color: @button-soft-hover }

.button-soft-hover-bg { background-color: @button-soft-hover-bg }

.button-soft-hover-border { background-color: @button-soft-hover-border }

.button-soft-active { background-color: @button-soft-active }

.button-soft-active-bg { background-color: @button-soft-active-bg }

.button-soft-active-border { background-color: @button-soft-active-border }

// --------------------------------------

// SCAFFOLDING

// --------------------------------------

.tabs-bg { background-color: @tabs-bg } // background tabs panel (data/content)

.heading-bg { background-color: @heading-bg } // controlpanels & other stuff

.text-color { background-color: @text-color }

.heading-color { background-color: @heading-color } // labels & table headings

.caption-color { background-color: @caption-color } // caption

#demo{

h1,

h2{

clear: both;

margin: 0 ;

}

h1 { font-size: 14pt; padding-top: 1.0em ; }

h2 { font-size: 12pt; margin-top: 0.2em ; }

div.selector{

display: block ;

width: 8.0em ;

float: left ;

margin: 0 1.0em 0 0 ;

overflow: hidden ;

padding: 0 ;

h3{

font-weight: normal;

height: 2.8em ;

display: table-cell;

vertical-align: bottom ;

}

div.color{

width: 8.0em ;

height: 8.0em ;

display: block;

overflow: hidden ;

padding: 0 ;

margin: 0;

border: 1px #000 solid ;

}

}

.group {

display: inline-block;

float: left;

overflow: hidden ;

}

}

/* Colors for Developers Color Demo */

/* -------------------------------------- */

// -----------------------

// GREY SHADES

// -----------------------

.gray-superdark: #000000 ; // Black

.gray-verydark: #222222 ;

.gray-darker: #555555 ;

.gray-dark: #888888 ;

.gray-standard: #aaaaaa ;

.gray-light: #cfcfcf ;

.gray-lighter: #dedede ;

.gray-verylight: #ececec ;

.gray-superlight: #ffffff ; // White

// -----------------------

// BRAND COLORS

// -----------------------

.brand-superdark: @gray-superdark ; // Black

.brand-verydark: @gray-verydark ;

.brand-darker: @gray-darker ;

.brand-dark: @gray-dark ;

.brand-standard: @gray-standard ;

.brand-light: @gray-light ;

.brand-lighter: @gray-lighter ;

.brand-verylight: @gray-verylight ;

.brand-superlight: @gray-superlight ; // White

// Special Color Specifications for messages

// -----------------------

.color-green-strong: #003c18;

.color-green-light: #9ccb21;

.color-red-strong: #ae0014;

.color-red-light: #ffd6d6;

.color-blue-strong: #209ec8;

.color-blue-light: #b6e6e5;

.color-orange-strong: #8D6A00; // more brown

.color-orange-light: #f6d972;

.rainbow-green: #408000;

.rainbow-blue: #0080FF;

.rainbow-red: #FF0000;

.rainbow-yellow: #FFFF00;