_variables.scss 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /*
  2. * Core: Variables
  3. * ---------------
  4. */
  5. // COLORS
  6. // --------------------------------------------------------
  7. $blue: #0073b7 !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. 'navy': $navy,
  20. 'olive': $olive,
  21. 'lime': $lime,
  22. 'fuchsia': $fuchsia,
  23. 'maroon': $maroon,
  24. ), $colors);
  25. // LAYOUT
  26. // --------------------------------------------------------
  27. $font-size-root: 1rem !default;
  28. // Sidebar
  29. $sidebar-width: 250px !default;
  30. $sidebar-padding-x: 0.5rem !default;
  31. $sidebar-padding-y: 0 !default;
  32. // Boxed layout maximum width
  33. $boxed-layout-max-width: 1250px !default;
  34. // When to show the smaller logo
  35. $screen-header-collapse: map-get($grid-breakpoints, md) !default;
  36. // Body background (Affects main content background only)
  37. $main-bg: #f4f6f9 !default;
  38. // Content padding
  39. $content-padding-y: 0 !default;
  40. $content-padding-x: $navbar-padding-x !default;
  41. // MAIN HEADER
  42. // --------------------------------------------------------
  43. $main-header-bottom-border-width: $border-width !default;
  44. $main-header-bottom-border-color: $gray-300 !default;
  45. $main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
  46. $main-header-link-padding-y: $navbar-padding-y !default;
  47. $main-header-link-padding-x: $navbar-padding-x !default;
  48. $main-header-brand-padding-y: $navbar-brand-padding-y !default;
  49. $main-header-brand-padding-x: $navbar-padding-x !default;
  50. $main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
  51. $main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;
  52. // Main header skins
  53. $main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
  54. $main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
  55. $main-header-dark-form-control-focused-color: $gray-800 !default;
  56. $main-header-dark-form-control-border: 0 !default;
  57. $main-header-dark-form-control-focused-border: 0 !default;
  58. $main-header-dark-placeholder-color: hsla(100, 100%, 100%, 0.6) !default;
  59. $main-header-light-form-control-bg: darken($gray-100, 2%) !default;
  60. $main-header-light-form-control-focused-bg: $gray-200 !default;
  61. $main-header-light-form-control-focused-color: $gray-800 !default;
  62. $main-header-light-form-control-border: 0 !default;
  63. $main-header-light-form-control-focused-border: 0 !default;
  64. $main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
  65. // MAIN FOOTER
  66. // --------------------------------------------------------
  67. $main-footer-padding: 1rem !default;
  68. $main-footer-border-top-width: 1px !default;
  69. $main-footer-border-top-color: $gray-300 !default;
  70. $main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
  71. $main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
  72. $main-footer-height: calc(#{$main-footer-height-inner} + #{$main-footer-border-top-width}) !default;
  73. $main-footer-bg: $white;
  74. // SIDEBAR SKINS
  75. // --------------------------------------------------------
  76. // Dark sidebar
  77. $sidebar-dark-bg: $dark !default;
  78. $sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
  79. $sidebar-dark-color: #C2C7D0 !default;
  80. $sidebar-dark-hover-color: $white !default;
  81. $sidebar-dark-active-color: $white !default;
  82. $sidebar-dark-submenu-bg: transparent !default;
  83. $sidebar-dark-submenu-color: #C2C7D0 !default;
  84. $sidebar-dark-submenu-hover-color: $white !default;
  85. $sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
  86. $sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
  87. $sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
  88. $sidebar-dark-header-color: $white !default;
  89. // Light sidebar
  90. $sidebar-light-bg: $white !default;
  91. $sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%) !default;
  92. $sidebar-light-color: $gray-800 !default;
  93. $sidebar-light-hover-color: $gray-900 !default;
  94. $sidebar-light-active-color: $white !default;
  95. $sidebar-light-submenu-bg: transparent !default;
  96. $sidebar-light-submenu-color: #777 !default;
  97. $sidebar-light-submenu-hover-color: #000 !default;
  98. $sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
  99. $sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
  100. $sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
  101. $sidebar-light-header-color: $gray-800 !default;
  102. // SIDEBAR MINI
  103. // --------------------------------------------------------
  104. $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
  105. $sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2);
  106. $sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2);
  107. // CONTROL SIDEBAR
  108. // --------------------------------------------------------
  109. $control-sidebar-width: $sidebar-width !default;
  110. // Cards
  111. // --------------------------------------------------------
  112. $card-border-color: #f4f4f4 !default;
  113. $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
  114. $card-title-font-size: $font-size-lg;
  115. $card-title-font-weight: $font-weight-normal;
  116. // PROGRESS BARS
  117. // --------------------------------------------------------
  118. $progress-bar-border-radius: 1px !default;
  119. $progress-bar-sm-border-radius: 1px !default;
  120. $progress-bar-xs-border-radius: 1px !default;
  121. // DIRECT CHAT
  122. // --------------------------------------------------------
  123. $direct-chat-height: 250px !default;
  124. $direct-chat-default-msg-bg: $gray-x-light !default;
  125. $direct-chat-default-font-color: #444 !default;
  126. $direct-chat-default-msg-border-color: $gray-x-light !default;
  127. // CHAT WIDGET
  128. // --------------------------------------------------------
  129. $attachment-border-radius: 3px !default;
  130. // Z-INDEX
  131. // --------------------------------------------------------
  132. $zindex-main-header: $zindex-fixed + 2 !default;
  133. $zindex-main-sidebar: $zindex-fixed + 6 !default;
  134. $zindex-sidebar-mini-links: 010 !default;
  135. // TRANSITIONS SETTINGS
  136. // --------------------------------------------------------
  137. // Transition global options
  138. $transition-speed: 0.3s !default;
  139. $transition-fn: ease-in-out !default;
  140. // TEXT
  141. // --------------------------------------------------------
  142. $font-size-xl: ($font-size-base * 2);
  143. // BUTTON
  144. // --------------------------------------------------------
  145. $button-default-background-color: #f4f4f4 !default;
  146. $button-default-color: #444 !default;
  147. $button-default-border-color: #ddd !default;
  148. // RIBBON
  149. // --------------------------------------------------------
  150. $ribbon-border-size: 3px !default;
  151. $ribbon-line-height: 100% !default;
  152. $ribbon-padding: .375rem 0 !default;
  153. $ribbon-font-size: .8rem !default;
  154. $ribbon-width: 110px !default;
  155. $ribbon-wrapper-size: 90px !default;
  156. $ribbon-top: 9px !default;
  157. $ribbon-right: -12px !default;
  158. $ribbon-lg-wrapper-size: 180px !default;
  159. $ribbon-lg-width: 160px !default;
  160. $ribbon-lg-top: 26px !default;
  161. $ribbon-lg-right: -59px !default;
  162. $ribbon-xl-wrapper-size: 240px !default;
  163. $ribbon-xl-width: 240px !default;
  164. $ribbon-xl-top: 59px !default;
  165. $ribbon-xl-right: -48px !default;