css/design40/less/_developing_styles.less

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11 @import 'variables_color_style';
  12
  13
  14
  15
  16 // --------------------------------------
  17 // CLASSES FOR DESIGNERS
  18 // --------------------------------------
  19
  20 // Output in designer/developer CSS File (just for developer)
  21 // don't hesitage to deactivate the following code
  22 // these classed are not used in kivitendo
  23
  24 h1::after { content: " @{colorstyle}"; } // display style name
  25
  26
  27 :root {
  28
  29
  30   --gray-standard:      @gray-standard;
  31   --gray-superdark:     @gray-superdark; // Black
  32   --gray-verydark:      @gray-verydark;
  33   --gray-darker:        @gray-darker;
  34   --gray-dark:          @gray-dark;
  35   --gray-light:         @gray-light;
  36   --gray-lighter:       @gray-lighter;
  37   --gray-verylight:     @gray-verylight;
  38   --gray-superlight:    @gray-superlight; // White
  39
  40   --color-standard:     @base-standard;
  41   --color-superlight:   @base-superlight;
  42   --color-verylight:    @base-verylight;
  43   --color-lighter:      @base-lighter;
  44   --color-light:        @base-light;
  45   --color-dark:         @base-dark;
  46   --color-darker:       @base-darker;
  47   --color-verydark:     @base-verydark;
  48   --color-superdark:    @base-superdark;
  49
  50 //  --msg-ok-strong:        @color-green-strong;
  51 //  --msg-ok-light:         @color-green-light;
  52 //  --msg-error-strong:     @color-red-strong;
  53 //  --msg-error-light:      @color-red-light;
  54 //  --msg-hint-strong:      @color-blue-strong;
  55 //  --msg-hint-light:       @color-blue-light;
  56 //  --msg-warning-strong:   @color-orange-strong;
  57 //  --msg-warning-light:    @color-orange-light;
  58   --msg-ok-strong:        @msg-green-strong;
  59   --msg-ok-light:         @msg-green-light;
  60   --msg-error-strong:     @msg-red-strong;
  61   --msg-error-light:      @msg-red-light;
  62   --msg-hint-strong:      @msg-blue-strong;
  63   --msg-hint-light:       @msg-blue-light;
  64   --msg-warning-strong:   @msg-orange-strong;
  65   --msg-warning-light:    @msg-orange-light;
  66
  67   --color-green-strong:   @color-green-strong;
  68   --color-green-light:    @color-green-light;
  69   --color-red-strong:     @color-red-strong;
  70   --color-red-light:      @color-red-light;
  71   --color-blue-strong:    @color-blue-strong;
  72   --color-blue-light:     @color-blue-light;
  73   --color-orange-strong:  @color-orange-strong;
  74   --color-orange-light:   @color-orange-light;
  75
  76
  77
  78   --spin_60 : spin(@base-standard,  60);
  79   --spin_120: spin(@base-standard, 120);
  80   --spin_180: spin(@base-standard, 180);
  81   --spin_240: spin(@base-standard, 240);
  82
  83   --style-ocean:            @style_ocean;
  84   --style-light_blue:       @style_light_blue;
  85   --style-aqua:             @style_aqua;
  86   --style-turquoise:        @style_turquoise;
  87   --style-pine:             @style_pine;
  88   --style-asparagus:        @style_asparagus;
  89   --style-petrol:           @style_petrol;
  90   --style-salmona:          @style_salmona;
  91   --style-salmon:           @style_salmon;
  92   --style-tangerine:        @style_tangerine;
  93   --style-marascino:        @style_marascino;
  94   --style-maroon:           @style_maroon;
  95   --style-strawberry:       @style_strawberry;
  96   --style-pure_red:         @style_pure_red;
  97   --style-old_lemon:        @style_old_lemon;
  98   --style-yellow_to_green:  @style_yellow_to_green;
  99   --style-eggplant:         @style_eggplant;
 100   --style-plum:             @style_plum;
 101   --style-grape:            @style_grape;
 102   --style-magenta:          @style_magenta;
 103   --style-lavender:         @style_lavender;
 104   --style-cayenne:          @style_cayenne;
 105   --style-mocha:            @style_mocha;
 106   --style-cantaloupe:       @style_cantaloupe;
 107   --style-dark_brown:       @style_dark_brown;
 108   --style-orange_brown:     @style_orange_brown;
 109   --style-smack_brown:      @style_smack_brown;
 110   --style-green_brown:      @style_green_brown;
 111
 112
 113 }
 114
 115 .color-standard   { color: var(--color-standard); }
 116 .color-superlight { color: var(--color-superlight); }
 117 .color-verylight  { color: var(--color-verylight); }
 118 .color-lighter    { color: var(--color-lighter); }
 119 .color-light      { color: var(--color-light); }
 120 .color-dark       { color: var(--color-dark); }
 121 .color-darker     { color: var(--color-darker); }
 122 .color-verydark   { color: var(--color-verydark); }
 123 .color-superdark  { color: var(--color-superdark); }
 124
 125 .bg-standard      { background-color: var(--color-standard); }
 126 .bg-superlight    { background-color: var(--color-superlight); }
 127 .bg-verylight     { background-color: var(--color-verylight); }
 128 .bg-lighter       { background-color: var(--color-lighter); }
 129 .bg-light         { background-color: var(--color-light); }
 130 .bg-dark          { background-color: var(--color-dark); }
 131 .bg-darker        { background-color: var(--color-darker); }
 132 .bg-verydark      { background-color: var(--color-verydark); }
 133 .bg-superdark     { background-color: var(--color-superdark); }
 134
 135
 136 // Messages
 137 .msg-ok                 { background-color: var(--msg-ok-light);       color: var(--msg-ok-strong);       border-color: var(--msg-ok-strong); }
 138 .msg-error              { background-color: var(--msg-error-light);    color: var(--msg-error-strong);    border-color: var(--msg-error-strong); }
 139 .msg-hint               { background-color: var(--msg-hint-light);     color: var(--msg-hint-strong);     border-color: var(--msg-hint-strong); }
 140 .msg-warning            { background-color: var(--msg-warning-light);  color: var(--msg-warning-strong);  border-color: var(--msg-warning-strong); }
 141 // Message Original Colors
 142 .color-ok               { background-color: var(--color-green-light);  color: var(--color-green-strong);  border-color: var(--color-green-strong); }
 143 .color-error            { background-color: var(--color-red-light);    color: var(--color-red-strong);    border-color: var(--color-red-strong); }
 144 .color-hint             { background-color: var(--color-blue-light);   color: var(--color-blue-strong);   border-color: var(--color-blue-strong); }
 145 .color-warning          { background-color: var(--color-orange-light); color: var(--color-orange-strong); border-color: var(--color-orange-strong); }
 146
 147 .style-ocean            { background-color: var( --style-ocean ); }
 148 .style-light_blue       { background-color: var( --style-light_blue ); }
 149 .style-aqua             { background-color: var( --style-aqua ); }
 150 .style-turquoise        { background-color: var( --style-turquoise ); }
 151 .style-pine             { background-color: var( --style-pine ); }
 152 .style-asparagus        { background-color: var( --style-asparagus ); }
 153 .style-petrol           { background-color: var( --style-petrol ); }
 154 .style-salmona          { background-color: var( --style-salmona ); }
 155 .style-salmon           { background-color: var( --style-salmon ); }
 156 .style-tangerine        { background-color: var( --style-tangerine ); }
 157 .style-marascino        { background-color: var( --style-marascino ); }
 158 .style-maroon           { background-color: var( --style-maroon ); }
 159 .style-strawberry       { background-color: var( --style-strawberry ); }
 160 .style-pure_red         { background-color: var( --style-pure_red ); }
 161 .style-old_lemon        { background-color: var( --style-old_lemon ); }
 162 .style-yellow_to_green  { background-color: var( --style-yellow_to_green ); }
 163 .style-eggplant         { background-color: var( --style-eggplant ); }
 164 .style-plum             { background-color: var( --style-plum ); }
 165 .style-grape            { background-color: var( --style-grape ); }
 166 .style-magenta          { background-color: var( --style-magenta ); }
 167 .style-lavender         { background-color: var( --style-lavender ); }
 168 .style-cayenne          { background-color: var( --style-cayenne ); }
 169 .style-mocha            { background-color: var( --style-mocha ); }
 170 .style-cantaloupe       { background-color: var( --style-cantaloupe ); }
 171 .style-dark_brown       { background-color: var( --style-dark_brown ); }
 172 .style-orange_brown     { background-color: var( --style-orange_brown ); }
 173 .style-smack_brown      { background-color: var( --style-smack_brown ); }
 174 .style-green_brown      { background-color: var( --style-green_brown ); }