_variables.scss 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. ////////// COLOR SYSTEM //////////
  2. $blue: #5E50F9;
  3. $indigo: #6610f2;
  4. $purple: #6a008a;
  5. $pink: #E91E63;
  6. $red: #f96868;
  7. $orange: #f2a654;
  8. $yellow: #f6e84e;
  9. $green: #46c35f;
  10. $teal: #58d8a3;
  11. $cyan: #57c7d4;
  12. $black: #000;
  13. $white: #ffffff;
  14. $white-smoke: #f2f7f8;
  15. $violet: #41478a;
  16. $darkslategray : #2e383e;
  17. $dodger-blue : #3498db;
  18. $colors: (
  19. blue: $blue,
  20. indigo: $indigo,
  21. purple: $purple,
  22. pink: $pink,
  23. red: $red,
  24. orange: $orange,
  25. yellow: $yellow,
  26. green: $green,
  27. teal: $teal,
  28. cyan: $cyan,
  29. white: $white,
  30. gray: #434a54,
  31. gray-light: #aab2bd,
  32. gray-lighter: #e8eff4,
  33. gray-lightest: #e6e9ed,
  34. gray-dark: #0f1531,
  35. black: #000000
  36. );
  37. $theme-colors: (
  38. primary: #b66dff,
  39. secondary: #d8d8d8,
  40. success: #1bcfb4,
  41. info: #198ae3,
  42. warning: #fed713,
  43. danger: #fe7c96,
  44. light: #f8f9fa,
  45. dark: #3e4b5b
  46. );
  47. $theme-gradient-colors: (
  48. primary: linear-gradient(to right, #da8cff, #9a55ff),
  49. secondary: linear-gradient(to right, #e7ebf0, #868e96),
  50. success: linear-gradient(to right, #84d9d2, #07cdae),
  51. info: linear-gradient(to right, #90caf9, #047edf 99%),
  52. warning: linear-gradient(to right, #f6e384, #ffd500),
  53. danger: linear-gradient(to right, #ffbf96, #fe7096),
  54. light: linear-gradient(to bottom, #f4f4f4, #e4e4e9),
  55. dark: linear-gradient(89deg, #5e7188, #3e4b5b)
  56. );
  57. ////////// COLOR SYSTEM //////////
  58. ////////// COLOR VARIABLES //////////
  59. $content-bg: #f2edf3;
  60. $footer-bg: $content-bg;
  61. $footer-color: color(dark);
  62. $border-color: #ebedf2;
  63. ////////// COLOR VARIABLES //////////
  64. ////////// SOCIAL COLORS //////////
  65. $social-colors: (
  66. twitter: #2caae1,
  67. facebook: #3b579d,
  68. google: #dc4a38,
  69. linkedin: #0177b5,
  70. pinterest: #cc2127,
  71. youtube: #e52d27,
  72. github: #333333,
  73. behance: #1769ff,
  74. dribbble: #ea4c89,
  75. reddit: #ff4500
  76. );
  77. ////////// SOCIAL COLORS //////////
  78. ////////// FONTS//
  79. $type1-light: 'ubuntu-light', sans-serif;
  80. $type1-regular: 'ubuntu-regular', sans-serif;
  81. $type1-medium: 'ubuntu-medium', sans-serif;
  82. $type1-bold: 'ubuntu-bold', sans-serif;
  83. $default-font-size: .875rem; // 14px as base font size
  84. $text-muted: #9c9fa6;
  85. $body-color: #343a40;
  86. ////////// FONT VARIABLES //////////
  87. ////////// SIDEBAR ////////
  88. $sidebar-width-lg: auto;
  89. $sidebar-width-mini: 185px;
  90. $sidebar-width-icon: 70px;
  91. $sidebar-light-bg: $white;
  92. $sidebar-light-menu-color: #3e4b5b;
  93. $sidebar-light-submenu-color: #888;
  94. $sidebar-light-menu-active-bg: $white;
  95. $sidebar-light-menu-active-color: theme-color(primary);
  96. $sidebar-light-menu-hover-bg: darken($sidebar-light-bg, 10%);
  97. $sidebar-light-menu-hover-color: darken($sidebar-light-menu-color, 10%);
  98. $sidebar-light-submenu-hover-color: darken($sidebar-light-submenu-color, 20%);
  99. $sidebar-light-menu-icon-color: #bba8bff5;
  100. $sidebar-light-menu-arrow-color: #9e9da0;
  101. $sidebar-light-menu-border-color: #f2edf3;
  102. $sidebar-dark-bg: #18151e;
  103. $sidebar-dark-menu-color: $white;
  104. $sidebar-dark-menu-active-bg: #282037;
  105. $sidebar-dark-menu-active-color: color(white);
  106. $sidebar-dark-menu-hover-bg: #282037;
  107. $sidebar-dark-menu-hover-color: color(white);
  108. $sidebar-dark-submenu-color: $sidebar-dark-menu-color;
  109. $sidebar-dark-submenu-hover-bg: initial;
  110. $sidebar-dark-submenu-hover-color: #ffffff;
  111. $sidebar-menu-font-size: $default-font-size;
  112. $sidebar-menu-padding-y: 1.125rem;
  113. $sidebar-menu-padding-x: 2.25rem;
  114. $sidebar-submenu-font-size: .8125rem;
  115. $sidebar-submenu-item-padding: .75rem 2rem .75rem 2rem;
  116. $sidebar-icon-font-size: 1.125rem;
  117. $sidebar-arrow-font-size: .625rem;
  118. $sidebar-profile-bg: transparent;
  119. $sidebar-profile-padding: .75rem 1.625rem .75rem 1.188rem;
  120. $sidebar-mini-menu-padding: .8125rem 1rem .8125rem 1rem;
  121. $sidebar-icon-only-menu-padding: .5rem 1.625rem .5rem 1.188rem;
  122. $sidebar-icon-only-submenu-padding: 0 0 0 1.5rem;
  123. $rtl-sidebar-submenu-padding: 0 1.5rem 0 0;
  124. $icon-only-collapse-width: 190px;
  125. $icon-only-menu-bg-light: $sidebar-light-menu-hover-bg;
  126. $icon-only-menu-bg-dark: $sidebar-dark-menu-hover-bg;
  127. ///////// SIDEBAR ////////
  128. ///////// SETTINGS PANEL ////////
  129. $settings-panel-width: 300px;
  130. ///////// HORIZONTAL MENU /////////
  131. $horizontal-menu-bg : #f6f8fa;
  132. $horizontal-menu-height : 4rem;
  133. $horizontal-menu-padding: 0 1rem;
  134. $horizontal-menu-item-color: #202339;
  135. $horizontal-menu-submenu-color: $horizontal-menu-item-color;
  136. $horizontal-menu-font-size: .875rem;
  137. $horizontal-menu-item-padding: .75rem 0;
  138. $horizontal-menu-icon-font-size: .9375rem;
  139. $horizontal-menu-submenu-item-padding: .85rem 0;
  140. $horizontal-boxed-menu-color: #9c9fa6;
  141. $horizontal-full-width-menu-color: #9c9fa6;
  142. ///////// HORIZONTAL MENU /////////
  143. ///////// NAVBAR ////////
  144. $navbar-height: 70px;
  145. $navbar-menu-color: #9c9fa6;
  146. $navbar-font-size: .875rem;
  147. $navbar-icon-font-size: 1.25rem;
  148. ///////// NAVBAR ////////
  149. ///////// BUTTONS ////////
  150. $button-fixed-width: 150px;
  151. $btn-padding-y: .875rem;
  152. $btn-padding-x: 2.5rem;
  153. $btn-line-height: 1;
  154. $btn-padding-y-xs: .5rem;
  155. $btn-padding-x-xs: .75rem;
  156. $btn-padding-y-sm: .50rem;
  157. $btn-padding-x-sm: .81rem;
  158. $btn-padding-y-lg: 1rem;
  159. $btn-padding-x-lg: 3rem;
  160. $btn-font-size: .875rem;
  161. $btn-font-size-xs: .625rem;
  162. $btn-font-size-sm: .875rem;
  163. $btn-font-size-lg: .875rem;
  164. $btn-border-radius: .1875rem;
  165. $btn-border-radius-xs: .1875rem;
  166. $btn-border-radius-sm: .1875rem;
  167. $btn-border-radius-lg: .1875rem;
  168. ///////// BUTTONS ////////
  169. ////////// TOOLTIP VARIABLES //////////
  170. //default styles
  171. $tooltip-font-size: .75rem;
  172. $tooltip-padding-y: .4rem;
  173. $tooltip-padding-x: .75rem;
  174. $tooltip-border-radius: .375rem;
  175. ////////// TOOLTIP VARIABLES //////////
  176. ///////// FORMS /////////
  177. $input-bg: color(white);
  178. $input-border-radius: 2px;
  179. $input-placeholder-color: #c9c8c8;
  180. $input-font-size: .8125rem;
  181. $input-padding-y: .875rem;
  182. $input-padding-x: 1.375rem;
  183. $input-line-height: 1;
  184. $input-padding-y-xs: .5rem;
  185. $input-padding-x-xs: .75rem;
  186. $input-padding-y-sm: .50rem;
  187. $input-padding-x-sm: .81rem;
  188. $input-padding-y-lg: .94rem;
  189. $input-padding-x-lg: 1.94rem;
  190. ///////// FORMS /////////
  191. //////// DROPDOWNS ///////
  192. $dropdown-border-color: $border-color;
  193. $dropdown-divider-bg: $border-color;
  194. $dropdown-link-color: $body-color;
  195. $dropdown-header-color: $body-color;
  196. //////// DROPDOWNS ///////
  197. //////// TABLES ////////
  198. $table-accent-bg: $content-bg;
  199. $table-hover-bg: $content-bg;
  200. $table-cell-padding: .9375rem;
  201. $table-border-color: $border-color;
  202. $table-inverse-bg: #2a2b32;
  203. $table-inverse-color: color(white);
  204. //////// TABLES ////////
  205. ////////// MEASUREMENT AND PROPERTY VARIABLES //////////
  206. $boxed-container-width: 1200px;
  207. $border-property: 1px solid $border-color;
  208. $card-spacing-y: 2.5rem;
  209. $card-padding-y: 2.5rem;
  210. $card-padding-x: 2.5rem;
  211. $card-border-radius: .3125rem;
  212. $card-description-color: #76838f;
  213. $grid-gutter-width: 40px;
  214. $action-transition-duration: 0.25s;
  215. $action-transition-timing-function: ease;
  216. ////////// OTHER VARIABLES //////////
  217. ////////// BREAD CRUMBS VARIABLES //////////
  218. // default styles
  219. $breadcrumb-padding-y: 0.56rem;
  220. $breadcrumb-padding-x: 1.13rem;
  221. $breadcrumb-item-padding: .5rem;
  222. $breadcrumb-margin-bottom: 1rem;
  223. $breadcrumb-font-size: $default-font-size;
  224. $breadcrumb-bg: transparent;
  225. $breadcrumb-border-color: $border-color;
  226. $breadcrumb-divider-color: $gray-600;
  227. $breadcrumb-active-color: $gray-700;
  228. $breadcrumb-divider: "/";
  229. // custom styles
  230. $breadcrumb-custom-padding-y: 0;
  231. $breadcrumb-custom-padding-x: 0;
  232. $breadcrumb-custom-item-padding-y: 0.56rem;
  233. $breadcrumb-custom-item-padding-x: 10px;
  234. $breadcrumb-custom-item-color: $black;
  235. $breadcrumb-item-bg: #dbe3e6;
  236. ////////// BREAD CRUMBS VARIABLES //////////
  237. ////////// MODALS VARIABLES //////////
  238. $modal-inner-padding: 15px;
  239. $modal-dialog-margin: 10px;
  240. $modal-dialog-margin-y-sm-up: 30px;
  241. $modal-title-line-height: $line-height-base;
  242. $modal-content-bg: $content-bg;
  243. $modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5);
  244. $modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5);
  245. $modal-backdrop-bg: $black;
  246. $modal-backdrop-opacity: .5;
  247. $modal-header-border-color: $border-color;
  248. $modal-content-border-color: $border-color;
  249. $modal-footer-border-color: $border-color;
  250. $modal-header-border-width: $border-width;
  251. $modal-content-border-width: $border-width;
  252. $modal-footer-border-width: $border-width;
  253. $modal-header-padding-x: 26px;
  254. $modal-header-padding-y: 25px;
  255. $modal-body-padding-x: 26px;
  256. $modal-body-padding-y: 35px;
  257. $modal-footer-padding-x: 31px;
  258. $modal-footer-padding-y: 15px;
  259. $modal-lg: 90%;
  260. $modal-md: 500px;
  261. $modal-sm: 300px;
  262. $modal-transition: transform .4s ease;
  263. ////////// MODALS VARIABLES //////////
  264. ///////// TABS VARIABLES //////////
  265. $nav-tabs-border-color: #ebedf2;
  266. $nav-tabs-link-bg: #f6f8fa;
  267. $nav-tabs-link-color: #000000;
  268. $nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color;
  269. $nav-tabs-link-active-color: $body-color;
  270. $nav-tabs-link-active-bg: $white;
  271. $nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-link-active-bg;
  272. $nav-pills-custom-bg: #fcfcfd;
  273. //////// TABS VARIABLES /////////
  274. //////// CALENDAR //////////////
  275. $fullcalendar-color: #a8b2b9;
  276. //////// CALENDAR //////////////