_variables.scss 5.3 KB

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