css/design40/less/developing_demo.less

   1 /* ------------------------------------------------------------- */
   2 /* DEVELOPING DEMO (developing_demo.less)                        */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // DEVELOPERS DEMO
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION: All colors for the demo color page in /css/developing/farben-demo.html
  11 // use following statement for creating the demo-css-file:
  12 //   lessc developing-demo.less ../css/developement/farben-demo.css
  13 //
  14 // For creating the HTML demo blocks from variables.less use following grep patterns
  15 //   @([a-z-]+)[ ]*:[ ]*[@][0-9a-z-]+[ ]*;         replace with:
  16 //   .\1 { background-color: @\1 } or .$1 { background-color: @$1 }
  17 // ----------------------------------------------------------------------------
  18
  19
  20 @import 'variables.less';
  21
  22 // --------------
  23 // Grey shades
  24 .gray-darker     { background-color: @gray-darker }
  25 .gray-verydark   { background-color: @gray-verydark }
  26 .gray-dark       { background-color: @gray-dark }
  27 .gray-standard   { background-color: @gray-standard }
  28 .gray-light     { background-color: @gray-light }
  29 .gray-lighter   { background-color: @gray-lighter }
  30 .gray-verylight { background-color: @gray-verylight }
  31 .gray-superlight{ background-color: @gray-superlight }
  32 // --------------
  33 // Divers Color Specications
  34 // for message and other coloured stuff
  35 // error
  36 .color-red-strong { background-color: @color-red-strong }
  37 .color-red-light { background-color: @color-red-light }
  38 // ok
  39 .color-green-strong { background-color: @color-green-strong }
  40 .color-green-light { background-color: @color-green-light }
  41 // info/hint
  42 .color-blue-strong { background-color: @color-blue-strong }
  43 .color-blue-light { background-color: @color-blue-light }
  44 // warning
  45 .color-orange-strong { background-color: @color-orange-strong } // more brown
  46 .color-orange-light { background-color: @color-orange-light }
  47 // divers
  48 .rainbow-green { background-color: @rainbow-green }
  49 .rainbow-blue { background-color: @rainbow-blue }
  50 .rainbow-red { background-color: @rainbow-red }
  51 .rainbow-yellow { background-color: @rainbow-yellow }
  52
  53 // --------------
  54 // Base colors
  55
  56 // Text (Label & data)
  57 .base-primary { background-color: @base-primary }
  58 .base-label { background-color: @base-label }
  59 .base-label-bg { background-color: @base-label-bg }
  60
  61 // Messages & info types
  62 .base-info { background-color: @base-info }
  63 .base-info-bg { background-color: @base-info-bg }
  64
  65 .base-ok { background-color: @base-ok }
  66 .base-ok-bg { background-color: @base-ok-bg }
  67
  68 .base-warning { background-color: @base-warning }
  69 .base-warning-bg { background-color: @base-warning-bg }
  70
  71 .base-error { background-color: @base-error }
  72 .base-error-bg { background-color: @base-error-bg }
  73
  74 // Positive & negative colors
  75 .base-positive { background-color: @base-positive }
  76 .base-positive-bg { background-color: @base-positive-bg }
  77 .base-negative { background-color: @base-negative }
  78 .base-negative-bg { background-color: @base-negative-bg }
  79
  80
  81 // Buttons
  82 // Button with manipulation (submit etc.)
  83 .button-strong { background-color: @button-strong }
  84 .button-strong-bg { background-color: @button-strong-bg }
  85 .button-strong-border { background-color: @button-strong-border }
  86 .button-strong-hover { background-color: @button-strong-hover }
  87 .button-strong-hover-bg { background-color: @button-strong-hover-bg }
  88 .button-strong-hover-border { background-color: @button-strong-hover-border }
  89 .button-strong-active { background-color: @button-strong-active }
  90 .button-strong-active-bg { background-color: @button-strong-active-bg }
  91 .button-strong-active-border { background-color: @button-strong-active-border }
  92 // button withoud data manipulation (reset, cancel, open, show etc.)
  93 .button-soft { background-color: @button-soft }
  94 .button-soft-bg { background-color: @button-soft-bg }
  95 .button-soft-border { background-color: @button-soft-border }
  96 .button-soft-hover { background-color: @button-soft-hover }
  97 .button-soft-hover-bg { background-color: @button-soft-hover-bg }
  98 .button-soft-hover-border { background-color: @button-soft-hover-border }
  99 .button-soft-active { background-color: @button-soft-active }
 100 .button-soft-active-bg { background-color: @button-soft-active-bg }
 101 .button-soft-active-border { background-color: @button-soft-active-border }
 102
 103
 104 // --------------------------------------
 105 // SCAFFOLDING
 106 // --------------------------------------
 107 .body-bg { background-color: @body-bg } // general PENDENT: obsolete
 108 .content-bg { background-color: @content-bg } // background first tabs
 109 .tabs-bg { background-color: @tabs-bg } // background tabs panel (data/content)
 110 .heading-bg { background-color: @heading-bg } // controlpanels & other stuff
 111 .controlpanel-bg { background-color: @controlpanel-bg-color } // controlpanels
 112
 113 .text-color { background-color: @text-color }
 114 .heading-color { background-color: @heading-color } // labels & table headings
 115 .caption-color { background-color: @caption-color } // caption
 116
 117 #demo{
 118   h1,
 119   h2{
 120     clear: both;
 121     color: @gray-standard !important;
 122     padding: 0 ;
 123     margin:  0 ;
 124   }
 125   h1 { font-size: 14pt; padding-top: 1.0em ; }
 126   h2 { font-size: 12pt; margin-top: 0.2em ; }
 127   div.selector{
 128     display: block ;
 129     width: 8.0em ;
 130     float: left ;
 131     margin: 0 1.0em 0 0 ;
 132     overflow: hidden ;
 133     padding: 0 ;
 134
 135     h3{
 136       color: @gray-standard !important;
 137       font-size: 9pt;
 138       font-weight: normal;
 139       height: 2.8em ;
 140       display: table-cell;
 141       vertical-align: bottom ;
 142     }
 143     div.color{
 144       width: 8.0em ;
 145       height: 8.0em ;
 146       display: block;
 147       overflow: hidden ;
 148       padding: 0 ;
 149       margin: 0;
 150       border: 1px #000 solid ;
 151     }
 152   }
 153   .group {
 154     display: inline-block;
 155     float: left;
 156     overflow: hidden ;
 157   }
 158 }
 159
 160
 161
 162
 163 /* -------------------------------------- */
 164 /* Colors for Developers Color Demo       */
 165 /* -------------------------------------- */
 166
 167
 168 // -----------------------
 169 // GREY SHADES
 170 // -----------------------
 171 .gray-superdark:    #000000 ; // Black
 172 .gray-verydark:      #222222 ;
 173 .gray-darker:        #555555 ;
 174 .gray-dark:          #888888 ;
 175
 176 .gray-standard:      #aaaaaa ;
 177
 178 .gray-light:        #cfcfcf ;
 179 .gray-lighter:      #dedede ;
 180 .gray-verylight:    #ececec ;
 181 .gray-superlight:    #ffffff ; // White
 182
 183
 184 // -----------------------
 185 // BASE COLORS
 186 // -----------------------
 187 .base-superdark:    @gray-superdark ; // Black
 188 .base-verydark:    @gray-verydark ;
 189 .base-darker:      @gray-darker ;
 190 .base-dark:        @gray-dark ;
 191
 192 .base-standard:    @gray-standard ;
 193
 194 .base-light:        @gray-light ;
 195 .base-lighter:      @gray-lighter ;
 196 .base-verylight:    @gray-verylight ;
 197 .base-superlight:  @gray-superlight ; // White
 198
 199
 200
 201 // -----------------------
 202 // Special Color Specifications for messages
 203 // -----------------------
 204
 205 // OK (Green)
 206 .color-green-strong:    #003c18;
 207 .color-green-light:     #9ccb21;
 208
 209 // Error (Red)
 210 .color-red-strong:      #ae0014;
 211 .color-red-light:       #ffd6d6;
 212
 213 // Info/Hint (Blue)
 214 .color-blue-strong:     #209ec8;
 215 .color-blue-light:      #b6e6e5;
 216
 217 // Warning (Orange)
 218 .color-orange-strong:   #8D6A00; // more brown
 219 .color-orange-light:    #f6d972;
 220
 221 // Divers
 222 .rainbow-green:         #408000;
 223 .rainbow-blue:          #0080FF;
 224 .rainbow-red:           #FF0000;
 225 .rainbow-yellow:        #FFFF00;
 226