sdc-workflow-designer-ui/src/app/paletx/assets/themes/NIV/NIV-theme.less

   1 //color
   2 @blue-1: #e7f4fd;
   3 @blue-2: #cfe9fc;
   4 @blue-3: #a0d3f8;
   5 @blue-4: #70bef5;
   6 @blue-5: #40a8f2;
   7 @blue-6: #108ee9;
   8 @blue-7: #0d75bf;
   9 @blue-8: #0c66a7;
  10 @blue-9: #084977;
  11 @blue-10: #073a5f;
  12
  13 @green-1: #e5f6ee;
  14 @green-2: #cceedd;
  15 @green-3: #99dcbb;
  16 @green-4: #66cb98;
  17 @green-5: #33b976;
  18 @green-6: #00a854;
  19 @green-7: #00994d;
  20 @green-8: #008040;
  21 @green-9: #006633;
  22 @green-10: #004d26;
  23
  24 @red-1: #fdeae8;
  25 @red-2: #fad4d1;
  26 @red-3: #f8bfba;
  27 @red-4: #f5aaa3;
  28 @red-5: #ee6a5d;
  29 @red-6: #ea4335;
  30 @red-7: #e72918;
  31 @red-8: #b92113;
  32 @red-9: #a21d11;
  33 @red-10: #8a190f;
  34
  35 @yellow-1: #fff8e6;
  36 @yellow-2: #fef2cd;
  37 @yellow-3: #fde59b;
  38 @yellow-4: #fdde81;
  39 @yellow-5: #fcca36;
  40 @yellow-6: #f3b709;
  41 @yellow-7: #c99703;
  42 @yellow-8: #977202;
  43 @yellow-9: #7e5f02;
  44 @yellow-10: #644c02;
  45
  46 @orange-1: #fff1e6;
  47 @orange-2: #ffe2cc;
  48 @orange-3: #ffd4b3;
  49 @orange-4: #ffb780;
  50 @orange-5: #ff8b33;
  51 @orange-6: #f56a30;
  52 @orange-7: #cc5800;
  53 @orange-8: #994200;
  54 @orange-9: #803700;
  55 @orange-10: #662c00;
  56
  57 @purple-1: #f5e9f7;
  58 @purple-2: #ebd4ef;
  59 @purple-3: #d7a9df;
  60 @purple-4: #c47cd0;
  61 @purple-5: #ad49be;
  62 @purple-6: #9c27b0;
  63 @purple-7: #862097;
  64 @purple-8: #6f1c7d;
  65 @purple-9: #60166d;
  66 @purple-10: #51145c;
  67
  68 @pink-1: #fde8ef;
  69 @pink-2: #fad1df;
  70 @pink-3: #f8bace;
  71 @pink-4: #ff84af;
  72 @pink-5: #ee5d8e;
  73 @pink-6: #e81e63;
  74 @pink-7: #d01654;
  75 @pink-8: #b9134a;
  76 @pink-9: #a21141;
  77 @pink-10: #8a0f38;
  78
  79 @cyan-1: #ebf8f9;
  80 @cyan-2: #cfedf0;
  81 @cyan-3: #a7dfe3;
  82 @cyan-4: #76cdd3;
  83 @cyan-5: #3db8c1;
  84 @cyan-6: #00a2ae;
  85 @cyan-7: #008997;
  86 @cyan-8: #00707f;
  87 @cyan-9: #005667;
  88 @cyan-10: #003c4e;
  89
  90 @lemon-1: #fffdeb;
  91 @lemon-2: #ffface;
  92 @lemon-3: #fff7b1;
  93 @lemon-4: #fff59d;
  94 @lemon-5: #fff175;
  95 @lemon-6: #ffeb3b;
  96 @lemon-7: #f7e225;
  97 @lemon-8: #e8d211;
  98 @lemon-9: #d3bf0b;
  99 @lemon-10: #c3b003;
 100
 101 @brown-1: #f5f1ef;
 102 @brown-2: #ece3df;
 103 @brown-3: #d9c6bf;
 104 @brown-4: #c6aa9f;
 105 @brown-5: #9f7160;
 106 @brown-6: #795548;
 107 @brown-7: #604439;
 108 @brown-8: #503830;
 109 @brown-9: #402d26;
 110 @brown-10: #30221d;
 111
 112 @indigo-1: #eceef8;
 113 @indigo-2: #d9ddf2;
 114 @indigo-3: #c6cceb;
 115 @indigo-4: #a1aade;
 116 @indigo-5: #6877ca;
 117 @indigo-6: #3f51b5;
 118 @indigo-7: #354497;
 119 @indigo-8: #2e3b84;
 120 @indigo-9: #212a5e;
 121 @indigo-10: #1b224b;
 122
 123 @lime-1: #f3f9ec;
 124 @lime-2: #e6f2d9;
 125 @lime-3: #daecc6;
 126 @lime-4: #b5d98c;
 127 @lime-5: #9ccc66;
 128 @lime-6: #8bc24a;
 129 @lime-7: #77ac39;
 130 @lime-8: #699933;
 131 @lime-9: #4f7326;
 132 @lime-10: #426020;
 133
 134 @bluegray-1: #f0f3f5;
 135 @bluegray-2: #d2dbe0;
 136 @bluegray-3: #b4c3cb;
 137 @bluegray-4: #96abb6;
 138 @bluegray-5: #7893a1;
 139 @bluegray-6: #607d8b;
 140 @bluegray-7: #546c78;
 141 @bluegray-8: #495f69;
 142 @bluegray-9: #34444b;
 143 @bluegray-10: #2a363c;
 144
 145 @default-white: #ffffff;
 146 @default-black: #000000;
 147
 148 @default-blue: @blue-6;
 149 @hover-blue: @blue-7;
 150 @active-blue: @blue-8;
 151
 152 @nav-default-blue: @default-blue;
 153 @nav-hover-blue: @hover-blue;
 154 @nav-active-blue: @active-blue;
 155
 156 @default-green: @green-6;
 157 @hover-green: @green-7;
 158 @active-green: @green-8;
 159
 160 @default-red: @red-6;
 161 @hover-red: @red-7;
 162 @active-red: @red-8;
 163
 164 @default-yellow: @yellow-6;
 165 @hover-yellow: @yellow-7;
 166 @active-yellow: @yellow-8;
 167
 168 @gray-grade-1: #212121;
 169 @gray-grade-2: #404040;
 170 @gray-grade-3: #595959;
 171 @gray-grade-4: #737373;
 172 @gray-grade-5: #999999;
 173 @gray-grade-6: #bfbfbf;
 174 @gray-grade-7: #d9d9d9;
 175 @gray-grade-8: #e9e9e9;
 176 @gray-grade-9: #f5f5f5;
 177
 178 //font
 179 @font-family:            'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei';
 180
 181 @font-size-normal:       14px;
 182 @font-size-xl:           24px;
 183 @font-size-lg:           20px;
 184 @font-size-sm:           12px;
 185
 186 @font-gray-normal:       @gray-grade-3;
 187 @font-gray-light:        @gray-grade-5;
 188 @font-gray-lightest:     @gray-grade-6;
 189 @font-gray-dark:         @gray-grade-2;
 190
 191 @font-weight-normal:     400;
 192 @font-weight-bold:       500;
 193 @title-font-weight:      500;
 194
 195 .font(@font-size: @font-size-normal, @color:@font-gray-normal, @font-weight: @font-weight-normal) {
 196   font-family: @font-family;
 197   font-weight: @font-weight;
 198   font-size: @font-size;
 199   line-height: @font-size;
 200   color: @color;
 201 }
 202
 203 .input-font(@font-size: @font-size-normal, @color:@font-gray-normal) {
 204   .font(@font-size, @color, @font-weight-bold);
 205 }
 206
 207 //disabled
 208 @disabled-font:          @font-gray-lightest;
 209 @disabled-background:    @gray-grade-9;
 210 @disabled-border-color:  rgba(191, 191, 191, 0.5);
 211
 212 //hover
 213 @hover-background:       @blue-1;
 214 @hover-border-color:     @default-blue;
 215
 216 //active
 217 @active-background:      @gray-grade-9;
 218
 219 //highlight
 220 @highlight-background:   @gray-grade-6;
 221
 222 //border
 223 @border-color:        @gray-grade-7;
 224 @border-base:         1px solid @border-color;
 225 @border-radius-base:  3px;
 226 @box-shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 227
 228 //height
 229 @component-height-lg: 32px;
 230 @component-height-md: 28px;
 231 @component-height-sm: 24px;
 232 @line-height-base:    1.5;
 233
 234 //spacing
 235 @spacing-within-item:   10px;
 236 @spacing-between-item:  20px;
 237
 238 //z-index
 239 @z-index-affix           : 10;
 240 @z-index-back-top        : 10;
 241 @z-index-modal-mask      : 1000;
 242 @z-index-modal           : 1000;
 243 @z-index-notification    : 1010;
 244 @z-index-message         : 1010;
 245 @z-index-popover         : 1030;
 246 @z-index-picker          : 1050;
 247 @z-index-dropdown        : 1050;
 248 @z-index-tooltip         : 1060;
 249
 250 //input
 251 @input-padding-both-side: 10px;
 252 @input-width: 400px;
 253
 254 //overlay
 255 @overlay-margin-top: 5px;
 256 @overlay-item-padding-left: 10px;
 257
 258 //clear icon
 259 @hover-clear-icon-bg: @gray-grade-9;
 260 @clear-icon-color: @gray-grade-5;
 261
 262 //button
 263 @button-width:           88px;
 264 @button-border:          0;
 265 @button-border-color:    @border-base;
 266
 267 //tab
 268 @tab-height: 36px;
 269 @tab-active-line-height: 2px;
 270 @tab-line-height: @tab-height - @tab-active-line-height;
 271 @icon-menu-active-bg: @blue-2;