_variables.scss 6.9 KB

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