_variables.scss 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  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. // Light sidebar
  110. $sidebar-light-bg: $white !default;
  111. $sidebar-light-hover-bg: #f7f7f9 !default;
  112. $sidebar-light-color: $pure-black !default;
  113. $sidebar-light-hover-color: $gray-900 !default;
  114. $sidebar-light-active-color: $white !default;
  115. $sidebar-light-submenu-bg: transparent !default;
  116. $sidebar-light-submenu-color: $sidebar-light-color !default;
  117. $sidebar-light-submenu-hover-color: #000 !default;
  118. $sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
  119. $sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
  120. $sidebar-light-submenu-active-bg: linear-gradient(118deg, $primary, rgba($primary,.7));
  121. $sidebar-light-header-color: $gray-800 !default;
  122. // SIDEBAR MINI
  123. // --------------------------------------------------------
  124. $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 3 !default;
  125. $sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 3) !default;
  126. $sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 3) !default;
  127. // CONTROL SIDEBAR
  128. // --------------------------------------------------------
  129. $control-sidebar-width: $sidebar-width !default;
  130. // Cards
  131. // --------------------------------------------------------
  132. $card-border-color: $gray-100 !default;
  133. $card-dark-border-color: lighten($gray-900, 10%) !default;
  134. $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
  135. $card-title-font-size: 1.1rem !default;
  136. $card-title-font-size-sm: 1rem !default;
  137. $card-title-font-weight: $font-weight-normal !default;
  138. $card-nav-link-padding-sm-y: .4rem !default;
  139. $card-nav-link-padding-sm-x: .8rem !default;
  140. $card-img-size: $img-size-sm !default;
  141. // PROGRESS BARS
  142. // --------------------------------------------------------
  143. $progress-bar-border-radius: 1px !default;
  144. $progress-bar-sm-border-radius: 1px !default;
  145. $progress-bar-xs-border-radius: 1px !default;
  146. // DIRECT CHAT
  147. // --------------------------------------------------------
  148. $direct-chat-height: 250px !default;
  149. $direct-chat-default-msg-bg: $gray-x-light !default;
  150. $direct-chat-default-font-color: #444 !default;
  151. $direct-chat-default-msg-border-color: $gray-x-light !default;
  152. // CHAT WIDGET
  153. // --------------------------------------------------------
  154. $attachment-border-radius: 3px !default;
  155. // Z-INDEX
  156. // --------------------------------------------------------
  157. $zindex-main-header: $zindex-fixed + 4 !default;
  158. $zindex-main-sidebar: $zindex-fixed + 8 !default;
  159. $zindex-main-footer: $zindex-fixed + 2 !default;
  160. $zindex-control-sidebar: $zindex-fixed + 1 !default;
  161. $zindex-sidebar-mini-links: 010 !default;
  162. $zindex-toasts: $zindex-main-sidebar + 2 !default;
  163. // TRANSITIONS SETTINGS
  164. // --------------------------------------------------------
  165. // Transition global options
  166. $transition-speed: 0.3s !default;
  167. $transition-fn: ease-in-out !default;
  168. // TEXT
  169. // --------------------------------------------------------
  170. $font-size-xs: ($font-size-base * .75) !default;
  171. $font-size-xl: ($font-size-base * 2) !default;
  172. // BUTTON
  173. // --------------------------------------------------------
  174. $button-default-background-color: $gray-100 !default;
  175. $button-default-color: #444 !default;
  176. $button-default-border-color: #ddd !default;
  177. $button-padding-y-xs: .125rem !default;
  178. $button-padding-x-xs: .25rem !default;
  179. $button-line-height-xs: $line-height-sm !default;
  180. $button-font-size-xs: ($font-size-base * .75) !default;
  181. $button-border-radius-xs: .15rem !default;
  182. // ELEVATION
  183. // --------------------------------------------------------
  184. $elevations: ();
  185. $elevations: map-merge((
  186. 1: unquote('0 1px 3px ' + rgba($black, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
  187. 2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
  188. 3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
  189. 4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
  190. 5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.22)),
  191. ), $elevations);
  192. // RIBBON
  193. // --------------------------------------------------------
  194. $ribbon-border-size: 3px !default;
  195. $ribbon-line-height: 100% !default;
  196. $ribbon-padding: .375rem 0 !default;
  197. $ribbon-font-size: .8rem !default;
  198. $ribbon-width: 90px !default;
  199. $ribbon-wrapper-size: 70px !default;
  200. $ribbon-top: 10px !default;
  201. $ribbon-right: -2px !default;
  202. $ribbon-lg-wrapper-size: 120px !default;
  203. $ribbon-lg-width: 160px !default;
  204. $ribbon-lg-top: 26px !default;
  205. $ribbon-lg-right: 0px !default;
  206. $ribbon-xl-wrapper-size: 180px !default;
  207. $ribbon-xl-width: 240px !default;
  208. $ribbon-xl-top: 47px !default;
  209. $ribbon-xl-right: 4px !default;