Bez popisu
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_variables-dark.scss 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. // Variables
  2. // Variables should follow the `$component-state-property-size` formula for
  3. // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
  4. // (C) Custom variables for extended components of bootstrap only
  5. // ! _variable-dark.scss file overrides _variable.scss file.
  6. // Colors
  7. // *******************************************************************************
  8. // scss-docs-start gray-color-variables
  9. $white-dark: #fff !default;
  10. $black-dark: #393a5a !default;
  11. $base-dark: #e6e6f1 !default; // (C)
  12. // Instead of using a card bg, use a paper bg.
  13. $paper-bg-dark: #2b2c40 !default; // (C)
  14. $paper-bg-rgb-dark: #{to-rgb($paper-bg-dark)} !default; // (C)
  15. $base-rgb-dark: #{to-rgb($base-dark)} !default; // (C)
  16. $gray-25-dark: #38394c !default; // (C)
  17. $gray-60-dark: #434463 !default; // (C)
  18. $gray-80-dark: #474866 !default; // (C)
  19. $gray-100-dark: #4a4b69 !default;
  20. $gray-200-dark: #4e4f6c !default;
  21. $gray-300-dark: #6d6e87 !default;
  22. $gray-400-dark: #7e7f96 !default;
  23. $gray-500-dark: #8f90a5 !default;
  24. $gray-600-dark: #a1a1b5 !default;
  25. $gray-700-dark: #b2b2c4 !default;
  26. $gray-800-dark: #c3c4d3 !default;
  27. $gray-900-dark: #d5d5e2 !default;
  28. // scss-docs-end gray-color-variables
  29. // scss-docs-start gray-colors-map
  30. $grays-dark: (
  31. "25": $gray-25-dark,
  32. "60": $gray-60-dark,
  33. "80": $gray-80-dark,
  34. "100": $gray-100-dark,
  35. "200": $gray-200-dark,
  36. "300": $gray-300-dark,
  37. "400": $gray-400-dark,
  38. "500": $gray-500-dark,
  39. "600": $gray-600-dark,
  40. "700": $gray-700-dark,
  41. "800": $gray-800-dark,
  42. "900": $gray-900-dark,
  43. ) !default;
  44. // scss-docs-end gray-colors-map
  45. // scss-docs-start color-variables
  46. $blue-dark: #007bff !default;
  47. $indigo-dark: #6610f2 !default;
  48. $purple-dark: #696cff !default;
  49. $pink-dark: #e83e8c !default;
  50. $red-dark: #ff3e1d !default;
  51. $orange-dark: #fd7e14 !default;
  52. $yellow-dark: #ffab00 !default;
  53. $green-dark: #71dd37 !default;
  54. $teal-dark: #20c997 !default;
  55. $cyan-dark: #03c3ec !default;
  56. // scss-docs-end color-variables
  57. // scss-docs-start theme-color-variables
  58. $primary-dark: $purple-dark !default;
  59. $secondary-dark: #8592a3 !default;
  60. $success-dark: $green-dark !default;
  61. $info-dark: $cyan-dark !default;
  62. $warning-dark: $yellow-dark !default;
  63. $danger-dark: $red-dark !default;
  64. $light-dark: #494a5d !default;
  65. $dark-dark: #6b6c9d !default;
  66. $gray-dark: $gray-500-dark !default; // (C)
  67. // scss-docs-end theme-color-variables
  68. // scss-docs-start theme-colors-map
  69. $theme-colors-dark: (
  70. "primary": $primary-dark,
  71. "secondary": $secondary-dark,
  72. "success": $success-dark,
  73. "info": $info-dark,
  74. "warning": $warning-dark,
  75. "danger": $danger-dark,
  76. "light": $light-dark,
  77. "dark": $dark-dark,
  78. "gray": $gray-dark
  79. ) !default;
  80. // scss-docs-end theme-colors-map
  81. $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
  82. // Typography
  83. // *******************************************************************************
  84. $blockquote-footer-color-dark: $gray-600-dark !default;
  85. $body-bg-dark: #232333 !default;
  86. // scss-docs-start theme-text-dark-variables
  87. $light-text-emphasis-dark: $gray-700-dark !default;
  88. $dark-text-emphasis-dark: $base-dark !default;
  89. // scss-docs-end theme-text-dark-variables
  90. $bg-label-tint-amount-dark: 84% !default; // (C)
  91. $border-subtle-amount-dark: 76% !default; // (C)
  92. // scss-docs-start theme-bg-subtle-dark-variables
  93. $primary-bg-subtle-dark: shade-color($primary-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  94. $secondary-bg-subtle-dark: shade-color($secondary-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  95. $success-bg-subtle-dark: shade-color($success-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  96. $info-bg-subtle-dark: shade-color($info-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  97. $warning-bg-subtle-dark: shade-color($warning-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  98. $danger-bg-subtle-dark: shade-color($danger-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  99. $light-bg-subtle-dark: shade-color($light-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  100. $dark-bg-subtle-dark: shade-color($dark-dark, $bg-label-tint-amount-dark, $paper-bg-dark) !default;
  101. // scss-docs-end theme-bg-subtle-dark-variables
  102. // scss-docs-start theme-border-subtle-dark-variables
  103. $primary-border-subtle-dark: shift-color($primary-dark, $border-subtle-amount-dark, $black-dark) !default;
  104. $secondary-border-subtle-dark: shift-color($secondary-dark, $border-subtle-amount-dark, $black-dark) !default;
  105. $success-border-subtle-dark: shift-color($success-dark, $border-subtle-amount-dark, $black-dark) !default;
  106. $info-border-subtle-dark: shift-color($info-dark, $border-subtle-amount-dark, $black-dark) !default;
  107. $warning-border-subtle-dark: shift-color($warning-dark, $border-subtle-amount-dark, $black-dark) !default;
  108. $danger-border-subtle-dark: shift-color($danger-dark, $border-subtle-amount-dark, $black-dark) !default;
  109. $light-border-subtle-dark: shift-color($light-dark, $border-subtle-amount-dark, $black-dark) !default;
  110. $dark-border-subtle-dark: shift-color($dark-dark, $border-subtle-amount-dark, $black-dark) !default;
  111. // scss-docs-end theme-border-subtle-dark-variables
  112. // Body
  113. // *******************************************************************************
  114. $body-color-dark: $gray-700-dark !default;
  115. $body-secondary-color-dark: $gray-400-dark !default;
  116. $body-secondary-bg-dark: $gray-200-dark !default;
  117. $body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
  118. $body-tertiary-bg-dark: mix($gray-100-dark, $body-bg-dark, 90%) !default;
  119. // Components
  120. // *******************************************************************************
  121. $border-color-dark: $gray-200-dark !default;
  122. // scss-docs-start box-shadow-variables
  123. $shadow-bg-dark: #14141d !default; // (C)
  124. $box-shadow-dark: 0 .1875rem .5rem 0 rgba($shadow-bg-dark, .22) !default;
  125. $box-shadow-xs-dark: 0 .0625rem .3175rem 0 rgba($shadow-bg-dark, .18) !default;
  126. $box-shadow-sm-dark: 0 .125rem .375rem 0 rgba($shadow-bg-dark, .2) !default;
  127. $box-shadow-lg-dark: 0 .25rem .75rem 0 rgba($shadow-bg-dark, .24) !default;
  128. $box-shadow-xl-dark: 0 .3125rem 1.375rem 0 rgba($shadow-bg-dark, .26) !default;
  129. // scss-docs-end box-shadow-variables
  130. // Typography
  131. // *******************************************************************************
  132. $headings-color-dark: $gray-900-dark !default;
  133. $table-striped-bg-factor-dark: .025 !default;
  134. $table-hover-bg-factor-dark: .75 !default;
  135. $table-active-bg-factor-dark: .75 !default;
  136. // Accordion
  137. // *******************************************************************************
  138. $accordion-button-color-dark: $headings-color-dark !default;
  139. $accordion-button-active-color-dark: $headings-color-dark !default;
  140. $accordion-icon-color-dark: $headings-color-dark !default;
  141. $accordion-icon-active-color-dark: $headings-color-dark !default;
  142. $accordion-button-icon-dark: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='bx-chevron-down'%3e%3cpath id='Vector' d='M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z' fill='#{$accordion-icon-active-color-dark}' fill-opacity='0.9'/%3e%3c/g%3e%3c/svg%3e") !default;
  143. $accordion-button-active-icon-dark: $accordion-button-icon-dark !default;
  144. $accordion-custom-button-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$accordion-icon-active-color-dark}' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z'%3E%3C/path%3E%3C/svg%3E") !default; // (C)
  145. $accordion-custom-button-active-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$accordion-icon-active-color-dark}' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h14v2H5z'%3E%3C/path%3E%3C/svg%3E") !default; // (C)
  146. // Forms
  147. // *******************************************************************************
  148. $input-border-color-dark: color-mix(in srgb, $base-dark 22%, $black-dark) !default;
  149. $input-disabled-border-color-dark: rgba($base-dark, .23) !default;
  150. $input-group-addon-border-color-dark: $input-border-color-dark !default;
  151. $form-switch-bg-image-dark: url("data:image/svg+xml,%3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg filter='url(%23a)'%3e%3ccircle cx='12' cy='11' r='8.5' fill='#{$white-dark}'/%3e%3c/g%3e%3cdefs%3e%3cfilter id='a' x='0' y='0' width='22' height='22' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e%3cfeOffset dy='2'/%3e%3cfeGaussianBlur stdDeviation='2'/%3e%3cfeColorMatrix values='0 0 0 0 0.180392 0 0 0 0 0.14902 0 0 0 0 0.239216 0 0 0 0.16 0'/%3e%3cfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_6488_3264'/%3e%3cfeBlend in='SourceGraphic' in2='effect1_dropShadow_6488_3264' result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e") !default;
  152. $form-select-indicator-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"><path d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="#{$white-dark}" fill-opacity="0.9"/></svg>') !default;
  153. $form-select-disabled-indicator-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"><path d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="#{$body-secondary-color-dark}" fill-opacity="0.9"/></svg>') !default; // (C)
  154. // scss-docs-start form-validation-colors-dark
  155. $form-valid-color-dark: $success-dark !default;
  156. $form-valid-border-color-dark: $success-dark !default;
  157. $form-invalid-color-dark: $danger-dark !default;
  158. $form-invalid-border-color-dark: $danger-dark !default;
  159. // scss-docs-end form-validation-colors-dark
  160. // Navbar
  161. // *******************************************************************************
  162. // For main navbar
  163. $navbar-box-shadow-dark: 0 0 10px $border-color-dark !default; // (C)
  164. // Cards
  165. // *******************************************************************************
  166. $card-bg-dark: #2b2c40 !default;
  167. $card-subtitle-color-dark: color-mix(in srgb, $base-dark 55%, $black-dark) !default;
  168. // Toasts
  169. // *******************************************************************************
  170. $toast-color-dark: tint-color($body-bg-dark, 15%) !default;
  171. $toast-header-color-dark: $toast-color-dark !default;
  172. // Modals
  173. // *******************************************************************************
  174. $modal-backdrop-bg-dark: #1d1d2a !default;
  175. $modal-backdrop-opacity-dark: .6 !default;
  176. // Dropdowns
  177. // *******************************************************************************
  178. $dropdown-link-hover-bg-dark: rgba($base-dark, .06) !default;
  179. // Close
  180. // *******************************************************************************
  181. $btn-close-color-dark: $body-secondary-color-dark !default;
  182. // Progress
  183. // *******************************************************************************
  184. $progress-bg-dark: rgba($base-dark, .08) !default;
  185. // offcanvas
  186. // *******************************************************************************
  187. $offcanvas-backdrop-bg-dark: $modal-backdrop-bg-dark !default;
  188. $offcanvas-backdrop-opacity-dark: $modal-backdrop-opacity-dark !default;