_variables.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. //
  2. // Core: Variables
  3. //
  4. // COLORS
  5. // --------------------------------------------------------
  6. $blue: #0073b7 !default;
  7. $lightblue: #3c8dbc !default;
  8. $navy: #001f3f !default;
  9. $teal: #39cccc !default;
  10. $olive: #3d9970 !default;
  11. $lime: #01ff70 !default;
  12. $orange: #ff851b !default;
  13. $fuchsia: #f012be !default;
  14. $purple: #605ca8 !default;
  15. $maroon: #d81b60 !default;
  16. $black: #111 !default;
  17. $gray-x-light: #d2d6de !default;
  18. $colors: map-merge((
  19. 'lightblue': $lightblue,
  20. 'navy': $navy,
  21. 'olive': $olive,
  22. 'lime': $lime,
  23. 'fuchsia': $fuchsia,
  24. 'maroon': $maroon,
  25. ), $colors);
  26. // LAYOUT
  27. // --------------------------------------------------------
  28. $font-size-root: 1rem !default;
  29. // Sidebar
  30. //$sidebar-width: $sidebar-width !default;
  31. $sidebar-padding-x: 0.5rem !default;
  32. $sidebar-padding-y: 0 !default;
  33. // Boxed layout maximum width
  34. $boxed-layout-max-width: 1250px !default;
  35. // When to show the smaller logo
  36. $screen-header-collapse: map-get($grid-breakpoints, md) !default;
  37. // Body background (Affects main content background only)
  38. $main-bg: #f4f6f9 !default;
  39. // Content padding
  40. $content-padding-y: 0 !default;
  41. $content-padding-x: $navbar-padding-x !default;
  42. // IMAGE SIZES
  43. // --------------------------------------------------------
  44. $img-size-sm: 1.875rem !default;
  45. $img-size-md: 3.75rem !default;
  46. $img-size-lg: 6.25rem !default;
  47. $img-size-push: .625rem !default;
  48. // MAIN HEADER
  49. // --------------------------------------------------------
  50. $main-header-bottom-border-width: $border-width !default;
  51. $main-header-bottom-border-color: $gray-300 !default;
  52. $main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
  53. $main-header-link-padding-y: $navbar-padding-y !default;
  54. $main-header-link-padding-x: $navbar-padding-x !default;
  55. $main-header-brand-padding-y: $navbar-brand-padding-y !default;
  56. $main-header-brand-padding-x: $navbar-padding-x !default;
  57. $main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
  58. $main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;
  59. $nav-link-sm-padding-y: .35rem !default;
  60. $nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
  61. $main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
  62. $main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}) !default;
  63. // Main header skins
  64. $main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
  65. $main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
  66. $main-header-dark-form-control-focused-color: $gray-800 !default;
  67. $main-header-dark-form-control-border: 0 !default;
  68. $main-header-dark-form-control-focused-border: 0 !default;
  69. $main-header-dark-placeholder-color: hsla(100, 100%, 100%, 0.6) !default;
  70. $main-header-light-form-control-bg: darken($gray-100, 2%) !default;
  71. $main-header-light-form-control-focused-bg: $gray-200 !default;
  72. $main-header-light-form-control-focused-color: $gray-800 !default;
  73. $main-header-light-form-control-border: 0 !default;
  74. $main-header-light-form-control-focused-border: 0 !default;
  75. $main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
  76. // MAIN FOOTER
  77. // --------------------------------------------------------
  78. $main-footer-padding: 1rem !default;
  79. $main-footer-padding-sm: $main-footer-padding * .812 !default;
  80. $main-footer-border-top-width: 0 !default;
  81. $main-footer-border-top-color: $gray-300 !default;
  82. $main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
  83. $main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
  84. $main-footer-height: calc(#{$main-footer-height-inner} + #{$main-footer-border-top-width}) !default;
  85. $main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
  86. $main-footer-height-sm: calc(#{$main-footer-height-sm-inner} + #{$main-footer-border-top-width}) !default;
  87. $main-footer-bg: transparent !default;
  88. // SIDEBAR SKINS
  89. // --------------------------------------------------------
  90. // Dark sidebar
  91. //$sidebar-dark-bg: darken(#505b6b, 14%) !default;
  92. //$sidebar-dark-bg: #1e1e2d !default;
  93. //$sidebar-dark-bg: lighten(#1a1a27, 1%) !default;
  94. //$sidebar-dark-bg: #263238!default;
  95. //$sidebar-dark-bg: $body-dark-color!default;
  96. //$sidebar-dark-hover-bg: transparent !default;
  97. //$sidebar-dark-color: $body-dark-font-color!default;
  98. //$sidebar-dark-hover-color: $white !default;
  99. //$sidebar-dark-active-bg: $body-darker-color !default;
  100. //$sidebar-dark-active-color: $white !default;
  101. //$sidebar-dark-submenu-bg: transparent !default;
  102. ////$sidebar-dark-submenu-color: lighten(#C2C7D0, 6%) !default;
  103. //$sidebar-dark-submenu-color: $body-dark-font-color!default;
  104. //$sidebar-dark-submenu-hover-color: $white !default;
  105. //$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
  106. //$sidebar-dark-submenu-active-color: $white !default;
  107. //$sidebar-dark-submenu-active-bg: $sidebar-dark-active-bg !default;
  108. //$sidebar-dark-header-color: hsla(0,0%,100%,.7) !default;
  109. // #262d37 #313a46 lighten(#8391a2, 8%) #242939
  110. // icon lighten(#4B5575, 3%) #989EB3
  111. $sidebar-dark-bg: lighten(#3a4452, 2%)!default;
  112. $sidebar-dark-hover-bg: transparent !default;
  113. $sidebar-dark-color: hsla(0,0%,100%,.95)!default;
  114. $sidebar-dark-icon-color: $sidebar-dark-color!default;
  115. $sidebar-dark-hover-color: lighten($sidebar-dark-color, 10%) !default;
  116. $sidebar-dark-active-bg: transparent !default;
  117. $sidebar-dark-active-color: $white !default;
  118. $sidebar-dark-submenu-bg: transparent !default;
  119. //$sidebar-dark-submenu-color: lighten(#C2C7D0, 6%) !default;
  120. $sidebar-dark-submenu-color: $sidebar-dark-color!default;
  121. $sidebar-dark-submenu-hover-color: $white !default;
  122. $sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
  123. $sidebar-dark-submenu-active-color: $white !default;
  124. $sidebar-dark-submenu-active-bg: transparent !default;
  125. $sidebar-dark-header-color: hsla(0,0%,100%,.8) !default;
  126. // #505b6b #49525f
  127. // Light sidebar
  128. $sidebar-light-bg: $white !default;
  129. $sidebar-light-hover-bg: transparent !default;
  130. $sidebar-light-color: #555 !default;
  131. $sidebar-light-hover-color: $sidebar-light-color !default;
  132. $sidebar-light-active-color: $white !default;
  133. $sidebar-light-submenu-bg: transparent !default;
  134. $sidebar-light-submenu-color: $sidebar-light-color !default;
  135. $sidebar-light-submenu-hover-color: #000 !default;
  136. $sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
  137. $sidebar-light-submenu-active-color: $sidebar-light-color !default;
  138. $sidebar-light-submenu-active-bg: linear-gradient(118deg, $primary, rgba($primary,.7));
  139. $sidebar-light-header-color: $gray-800 !default;
  140. // SIDEBAR PADDING
  141. $sidebar-item-padding: 10px 10px 10px 25px;
  142. $sidebar-tree-item-padding: 5px 10px 7px 25px;
  143. // SIDEBAR MINI
  144. // --------------------------------------------------------
  145. $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 3 !default;
  146. $sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 3) !default;
  147. $sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 3) !default;
  148. // CONTROL SIDEBAR
  149. // --------------------------------------------------------
  150. $control-sidebar-width: $sidebar-width !default;
  151. // Cards
  152. // --------------------------------------------------------
  153. $card-border-color: $gray-100 !default;
  154. $card-dark-border-color: lighten($gray-900, 10%) !default;
  155. $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
  156. $card-title-font-size: 1.1rem !default;
  157. $card-title-font-size-sm: 1rem !default;
  158. $card-title-font-weight: $font-weight-normal !default;
  159. $card-nav-link-padding-sm-y: .4rem !default;
  160. $card-nav-link-padding-sm-x: .8rem !default;
  161. $card-img-size: $img-size-sm !default;
  162. // PROGRESS BARS
  163. // --------------------------------------------------------
  164. $progress-bar-border-radius: 1px !default;
  165. $progress-bar-sm-border-radius: 1px !default;
  166. $progress-bar-xs-border-radius: 1px !default;
  167. // DIRECT CHAT
  168. // --------------------------------------------------------
  169. $direct-chat-height: 250px !default;
  170. $direct-chat-default-msg-bg: $gray-x-light !default;
  171. $direct-chat-default-font-color: #444 !default;
  172. $direct-chat-default-msg-border-color: $gray-x-light !default;
  173. // CHAT WIDGET
  174. // --------------------------------------------------------
  175. $attachment-border-radius: 3px !default;
  176. // Z-INDEX
  177. // --------------------------------------------------------
  178. $zindex-main-header: $zindex-fixed + 4 !default;
  179. $zindex-main-sidebar: $zindex-fixed + 8 !default;
  180. $zindex-main-footer: $zindex-fixed + 2 !default;
  181. $zindex-control-sidebar: $zindex-fixed + 1 !default;
  182. $zindex-sidebar-mini-links: 010 !default;
  183. $zindex-toasts: $zindex-main-sidebar + 2 !default;
  184. // TRANSITIONS SETTINGS
  185. // --------------------------------------------------------
  186. // Transition global options
  187. $transition-speed: 0.3s !default;
  188. $transition-fn: ease-in-out !default;
  189. // TEXT
  190. // --------------------------------------------------------
  191. $font-size-xs: ($font-size-base * .75) !default;
  192. $font-size-xl: ($font-size-base * 2) !default;
  193. // BUTTON
  194. // --------------------------------------------------------
  195. $button-default-background-color: $gray-100 !default;
  196. $button-default-color: #444 !default;
  197. $button-default-border-color: #ddd !default;
  198. $button-padding-y-xs: .125rem !default;
  199. $button-padding-x-xs: .25rem !default;
  200. $button-line-height-xs: $line-height-sm !default;
  201. $button-font-size-xs: ($font-size-base * .75) !default;
  202. $button-border-radius-xs: .15rem !default;
  203. // ELEVATION
  204. // --------------------------------------------------------
  205. $elevations: ();
  206. $elevations: map-merge((
  207. 1: unquote('0 1px 3px ' + rgba($black, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
  208. 2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
  209. 3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
  210. 4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
  211. 5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.22)),
  212. ), $elevations);
  213. // RIBBON
  214. // --------------------------------------------------------
  215. $ribbon-border-size: 3px !default;
  216. $ribbon-line-height: 100% !default;
  217. $ribbon-padding: .375rem 0 !default;
  218. $ribbon-font-size: .8rem !default;
  219. $ribbon-width: 90px !default;
  220. $ribbon-wrapper-size: 70px !default;
  221. $ribbon-top: 10px !default;
  222. $ribbon-right: -2px !default;
  223. $ribbon-lg-wrapper-size: 120px !default;
  224. $ribbon-lg-width: 160px !default;
  225. $ribbon-lg-top: 26px !default;
  226. $ribbon-lg-right: 0px !default;
  227. $ribbon-xl-wrapper-size: 180px !default;
  228. $ribbon-xl-width: 240px !default;
  229. $ribbon-xl-top: 47px !default;
  230. $ribbon-xl-right: 4px !default;