addons/website/static/src/less/colors.less

   1 /* Clean Colors */
   2
   3 @color-blue: #3498DB;
   4 @color-turquoise: #1ABC9C;
   5 @color-green: #2ECC71;
   6 @color-yellow: #F1C40F;
   7 @color-orange: #E67E22;
   8 @color-red: #E74C3C;
   9 @color-pink: #f74b94;
  10 @color-purple: #9B59B6;
  11 @color-brown: #7b5844;
  12
  13 @color-blue-dark: #2980B9;
  14 @color-turquoise-dark: #16A085;
  15 @color-green-dark: #27AE60;
  16 @color-yellow-dark: #f3ac12;
  17 @color-orange-dark: #D35400;
  18 @color-red-dark: #C0392B;
  19 @color-pink-dark: #ea3884;
  20 @color-purple-dark: #8E44AD;
  21 @color-brown-dark: #604434;
  22
  23 @color-blue-light: lighten(@color-blue, 20%);
  24 @color-turquoise-light: lighten(@color-turquoise, 20%);
  25 @color-green-light: lighten(@color-green, 20%);
  26 @color-yellow-light: lighten(@color-yellow, 20%);
  27 @color-orange-light: lighten(@color-orange, 20%);
  28 @color-red-light: lighten(@color-red, 20%);
  29 @color-pink-light: lighten(@color-pink, 20%);
  30 @color-purple-light: lighten(@color-purple, 20%);
  31 @color-brown-light: lighten(@color-brown, 20%);
  32
  33 @color-clouds: #ECF0F1;
  34 @color-silver: #BDC3C7;
  35 @color-concrete: #95A5A6;
  36 @color-stone: #7F8C8D;
  37 @color-asphalt: #34495E;
  38 @color-midnight: #2C3E50;
  39
  40
  41 @color-concrete-dark: #445b5c;
  42
  43 /* +++++ NEW COLORS +++++ */
  44
  45 @color-wind: #f7f7f7;
  46 @color-clay: #e1dcd5;
  47 @color-sand: #c5bcb1;
  48 @color-beach: #f3bf91;
  49 @color-forest: #254c3a;
  50 @color-twilight: #3b2c50;
  51 @color-burgundy: #8e362d;
  52 @color-marine: #212d3a;
  53
  54 /* GRAYS --------------------------------------------------------- */
  55
  56 @gray-darker:          lighten(#000, 20%);
  57 @gray-dark:            lighten(#000, 40%);
  58 @gray:                 lighten(#000, 55%);
  59 @gray-light:           lighten(#000, 70%);
  60 @gray-lighter:         lighten(#000, 80%);
  61
  62 /* Backgrounds Colors ------------------------------------------------*/
  63
  64 @bg-blue: background(@color-blue);
  65 @bg-turquoise: background(@color-turquoise);
  66 @bg-green: background(@color-green);
  67 @bg-yellow: background(@color-yellow);
  68 @bg-orange: background(@color-orange);
  69 @bg-red: background(@color-red);
  70 @bg-pink: background(@color-pink);
  71 @bg-purple: background(@color-purple);
  72 @bg-brown: background(@color-brown);
  73
  74
  75 /* ---- Default Color HTML Class ---- */
  76
  77 .bg-blue      { background-color: @color-blue;}
  78 .bg-turquoise { background-color: @color-turquoise;}
  79 .bg-green     { background-color: @color-green;}
  80 .bg-yellow    { background-color: @color-yellow;}
  81 .bg-orange    { background-color: @color-orange;}
  82 .bg-red       { background-color: @color-red;}
  83 .bg-pink      { background-color: @color-pink;}
  84 .bg-purple    { background-color: @color-purple;}
  85 .bg-brown     { background-color: @color-brown;}
  86
  87 .text-blue      { color: @color-blue;}
  88 .text-turquoise { color: @color-turquoise;}
  89 .text-green     { color: @color-green;}
  90 .text-yellow    { color: @color-yellow;}
  91 .text-orange    { color: @color-orange;}
  92 .text-red       { color: @color-red;}
  93 .text-pink      { color: @color-pink;}
  94 .text-purple    { color: @color-purple;}
  95 .text-brown     { color: @color-brown;}