_variables.scss 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /*
  2. * Customizable variables
  3. * Update these variable to create theme
  4. */
  5. /*
  6. * General
  7. */
  8. $background-color: #f8fafc;
  9. $text-color: #8B9AA7;
  10. $dim-text-color: #c0c6cc;
  11. $error-text-color: #c7254e;
  12. $link-color: #70C2A5;
  13. $hover-link-color: #1cacfc;
  14. @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
  15. $font: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  16. $font-size: 14px;
  17. /*
  18. * Sidebar
  19. */
  20. $sidebar-width: 250px;
  21. $sidebar-background-color: #019875;
  22. $sidebar-contrast-background-color: #018E68;
  23. $sidebar-contrast-text-color: #50B994;
  24. $sidebar-arrow-color: #0E674D;
  25. $sidebar-hover-arrow-color: #FDBB5E;
  26. $sidebar-action-color: #66C2A3;
  27. $sidebar-hover-action-color: #FDBB5E;
  28. $sidebar-title-action-color: #fff;
  29. $sidebar-hover-title-action-item-color: #FDBB5E;
  30. $sidebar-text-color: #66C2A3;
  31. $sidebar-icon-color: #49B692;
  32. $sidebar-link-color: #B6E2D3;
  33. $sidebar-hover-link-color: #fff;
  34. $sidebar-hover-background-color: #018E68;
  35. $sidebar-popup-search-input-background-color: #fff;
  36. $sidebar-popup-search-input-text-color: #7f8fa4;
  37. $sidebar-popup-search-input-placeholder-color: #93959b;
  38. $sidebar-popup-background-color: #f7f8fa;
  39. $sidebar-popup-text-color: #7f8fa4;
  40. $sidebar-popup-overlay-color: #000;
  41. $sidebar-popup-link-text-color: #7f8fa4;
  42. $sidebar-popup-hover-link-color: #fff;
  43. $sidebar-popup-hover-link-background-color: #1cacfc;
  44. /*
  45. * Top
  46. */
  47. $top-height: 32px;
  48. $top-text-color: #8B9EAB;
  49. $top-separator-color: #C6D8E4;
  50. $top-link-color: #C6D8E4;
  51. $top-hover-link-color: #1cacfc;
  52. $top-border-color: #dce0e6;
  53. $top-icon-color: #2faa60;
  54. $top-dropdown-background-color: #03ad86;
  55. $top-dropdown-border-color: #02996e;
  56. $top-dropdown-text-color: #fff;
  57. $top-dropdown-link-color: #beebdb;
  58. $top-dropdown-hover-link-color: #fff;
  59. /*
  60. * Content
  61. */
  62. $content-background-color: #fff;
  63. $content-contrast-background-color: #F8FAFC; //inline list bg
  64. $content-contrast2-background-color: #E3ECF2; //table header
  65. $content-contrast3-background-color: #EEF3F7; //dashboard, delete collapsable
  66. $content-selected-background-color: #FFFDDB;
  67. $content-contrast2-text-color: $text-color;
  68. $content-border-color: #f1f2f4; //row bottom
  69. $content-border2-color: #D5E3EC; //table bottom
  70. $content-selected-border-color: #EFEDC8;
  71. $tab-selected-border-color: #1cacfc;
  72. $tab-error-border-color: #c7254e;
  73. /*
  74. * Buttons
  75. */
  76. $button-background-color: #E3ECF2;
  77. $button-hover-background-color: #1cacfc;
  78. $button-active-background-color: #2faa60;
  79. $button-text-color: #7f8fa4;
  80. $button-hover-text-color: #fff;
  81. $button-active-text-color: #fff;
  82. $primary-button-background-color: #2faa60;
  83. $primary-button-text-color: #fff;
  84. $danger-button-background-color: #c7254e;
  85. $danger-button-text-color: #fff;
  86. $background-button-background-color: #fff;
  87. $background-button-text-color: #7f8fa4;
  88. /*
  89. * Inputs
  90. */
  91. $input-background-color: #fff;
  92. $input-contrast-background-color: #E3ECF2;
  93. $input-border-color: #EDEDED;
  94. $input-hover-background-color: #1cacfc;
  95. $input-icon-color: #2faa60;
  96. $input-text-color: $text-color;
  97. $input-contrast-text-color: #7f8fa4;
  98. $input-hover-text-color: #fff;
  99. $input-selected-text-color: #2faa60;
  100. $input-disabled-text-color: $dim-text-color;
  101. $input-placeholder-color: #999;
  102. $input-shadow-color: transparentize(#2faa60, 0.25);
  103. $background-input-background-color: #fff;
  104. $background-input-border-color: #fff;
  105. $background-input-text-color: $text-color;
  106. /*
  107. * Messages
  108. */
  109. $warning-color: #e75e40;
  110. $warning-text-color: #fff;
  111. $info-color: #FCA326;
  112. $info-text-color: #fff;
  113. $success-color: #2d9fd8;
  114. $success-text-color: #fff;
  115. /*
  116. * Login
  117. */
  118. $login-background-color: $sidebar-background-color;
  119. $login-title-text-color: #aaddcc;
  120. $login-title-contrast-text-color: #fff;
  121. $login-header-background-color: $content-contrast2-background-color;
  122. $login-header-text-color: $content-contrast2-text-color;
  123. $login-content-background-color: #fff;
  124. /*
  125. * jQuery UI
  126. */
  127. $jquery-ui-buttonpane-background: $content-contrast2-background-color;
  128. $jquery-ui-state-default-background-color: $input-background-color;
  129. $jquery-ui-state-default-border-color: $input-border-color;
  130. $jquery-ui-state-default-text-color: $input-text-color;
  131. $jquery-ui-state-hover-background-color: $button-hover-background-color;
  132. $jquery-ui-state-hover-border-color: $button-hover-background-color;
  133. $jquery-ui-state-hover-text-color: $button-hover-text-color;
  134. $jquery-ui-state-active-background-color: $button-active-background-color;
  135. $jquery-ui-state-active-border-color: $button-active-background-color;
  136. $jquery-ui-state-active-text-color: $button-active-text-color;
  137. $jquery-ui-state-highlight-background-color: $input-background-color;
  138. $jquery-ui-state-highlight-border-color: $hover-link-color;
  139. $jquery-ui-state-highlight-text-color: $hover-link-color;
  140. $jquery-ui-overlay-color: #000;
  141. $jquery-ui-tooltip-background-color: #000;
  142. $jquery-ui-tooltip-text-color: #fff;
  143. /*
  144. * Charts
  145. */
  146. $chart-fillColor: transparentize($hover-link-color, 0.75);
  147. $chart-strokeColor: $hover-link-color;
  148. $chart-pointColor: #fff;
  149. $chart-pointHighlightFill: $hover-link-color;
  150. $chart-scaleGridLineColor: transparentize(#000, 0.9);
  151. $chart-scaleLineColor: transparentize(#000, 0.9);
  152. $chart-scaleFontColor: $content-contrast2-text-color;