_variables-alt.scss 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. // Alternate Variables (for use in Dark Mode variant)
  2. // Color system
  3. // ______________________________________
  4. $default-color-scheme: light !default;
  5. $color-schemes: (
  6. light,
  7. dark
  8. ) !default;
  9. // items marked //** from https://bootswatch.com/darkly/
  10. // items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
  11. $white-alt: $white !default;
  12. $gray-100-alt: $gray-100 !default; //~~
  13. $gray-200-alt: $gray-200 !default; //~~
  14. $gray-300-alt: $gray-300 !default; //~~
  15. $gray-400-alt: $gray-400 !default; //~~
  16. $gray-500-alt: $gray-500 !default; //~~
  17. $gray-600-alt: $gray-600 !default; //~~
  18. $gray-700-alt: $gray-700 !default; //~~
  19. $gray-800-alt: $gray-800 !default; //~~
  20. $gray-900-alt: $gray-900 !default; //~~
  21. $black-alt: $black !default; //~~
  22. // fusv-disable
  23. $grays-alt: (
  24. "100": $gray-100-alt,
  25. "200": $gray-200-alt,
  26. "300": $gray-300-alt,
  27. "400": $gray-400-alt,
  28. "500": $gray-500-alt,
  29. "600": $gray-600-alt,
  30. "700": $gray-700-alt,
  31. "800": $gray-800-alt,
  32. "900": $gray-900-alt
  33. ) !default;
  34. // fusv-enable
  35. $blue-alt: #375a7f !default;
  36. $indigo-alt: #673ab7 !default; //~~
  37. $purple-alt: #654ea3 !default; // Panatone CotY 2018
  38. $pink-alt: #e83e8c !default;
  39. $red-alt: #e74c3c !default; //**
  40. $orange-alt: #fd7e14 !default;
  41. $yellow-alt: #f39c12 !default; //**
  42. $green-alt: #00bc8c !default; //**
  43. $teal-alt: #45b5aa !default; // Panatone CotY 2010
  44. $cyan-alt: #17a2b8 !default;
  45. $colors-alt: (
  46. "blue": $blue-alt,
  47. "indigo": $indigo-alt,
  48. "purple": $purple-alt,
  49. "pink": $pink-alt,
  50. "red": $red-alt,
  51. "orange": $orange-alt,
  52. "yellow": $yellow-alt,
  53. "green": $green-alt,
  54. "teal": $teal-alt,
  55. "cyan": $cyan-alt,
  56. "white": $white-alt,
  57. "black": $black-alt,
  58. "gray": #7e7e7e, // $gray-600,
  59. "gray-dark": #121212 //$gray-800
  60. ) !default;
  61. $primary-alt: $blue-alt !default;
  62. $secondary-alt: $gray-600-alt !default;
  63. $success-alt: $green-alt !default;
  64. $info-alt: $cyan-alt !default;
  65. $warning-alt: $yellow-alt !default;
  66. $danger-alt: $red-alt !default;
  67. $light-alt: $gray-400-alt !default;
  68. $dark-alt: $gray-800-alt !default;
  69. $theme-colors-alt: (
  70. "primary": $primary-alt,
  71. "secondary": $secondary-alt,
  72. "success": $success-alt,
  73. "info": $info-alt,
  74. "warning": $warning-alt,
  75. "danger": $danger-alt,
  76. "light": $light-alt,
  77. "dark": $dark-alt
  78. ) !default;
  79. // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
  80. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
  81. $min-contrast-ratio-alt: 2.5 !default;
  82. $color-contrast-dark-alt: $black-alt !default;
  83. $color-contrast-light-alt: $white-alt !default;
  84. // Gradient
  85. // ______________________________________
  86. // The gradient which is added to components if `$enable-gradients` is `true`
  87. // This gradient is also added to elements with `.bg-gradient`
  88. $gradient-alt: linear-gradient(180deg, rgba($black-alt, .15), rgba($black-alt, 0)) !default;
  89. // Body
  90. // ______________________________________
  91. // Settings for the `<body>` element.
  92. $body-bg-alt: $gray-900-alt !default; // $white !default;
  93. $body-color-alt: $gray-100-alt !default; // $gray-900 !default;
  94. // Links
  95. // ______________________________________
  96. // Style anchor elements.
  97. $link-color-alt: shift-color($primary-alt, -15%) !default;
  98. $link-shade-percentage-alt: 20% !default; // TODO: should be -20%;
  99. $link-hover-color-alt: tint-color($link-color-alt, $link-shade-percentage-alt) !default; // TODO: shift-color
  100. // Components
  101. // ______________________________________
  102. // Define common padding and border radius sizes and more.
  103. $border-color-alt: $gray-700-alt !default;
  104. $box-shadow-alt: 0 .5rem 1rem rgba($black-alt, .15) !default;
  105. $box-shadow-sm-alt: 0 .125rem .25rem rgba($black-alt, .075) !default;
  106. $box-shadow-lg-alt: 0 1rem 3rem rgba($black-alt, .175) !default;
  107. $box-shadow-inset-alt: inset 0 1px 2px rgba($black-alt, .075) !default;
  108. $component-active-color-alt: $white-alt !default;
  109. $component-active-bg-alt: $primary-alt !default;
  110. // Typography
  111. // ______________________________________
  112. // Font, line-height, and color for body text, headings, and more.
  113. $headings-color-alt: null !default;
  114. $text-muted-alt: $gray-400-alt !default;
  115. $blockquote-footer-color-alt: $gray-600-alt !default;
  116. $hr-color-alt: $white-alt !default;
  117. $hr-opacity-alt: .1 !default;
  118. $mark-bg-alt: rgba($yellow-alt, .5) !default;
  119. // Tables
  120. // ______________________________________
  121. // Customizes the `.table` component with basic values, each used across all table variations.
  122. $table-color-alt: $body-color-alt !default;
  123. $table-bg-alt: transparent !default;
  124. $table-striped-color-alt: $table-color-alt !default;
  125. $table-striped-bg-factor-alt: .05 !default;
  126. $table-striped-bg-alt: rgba($black-alt, $table-striped-bg-factor-alt) !default;
  127. $table-active-color-alt: $table-color-alt !default;
  128. $table-active-bg-factor-alt: .1 !default;
  129. $table-active-bg-alt: rgba($black-alt, $table-active-bg-factor-alt) !default;
  130. $table-hover-color-alt: $table-color-alt !default;
  131. $table-hover-bg-factor-alt: .075 !default;
  132. $table-hover-bg-alt: rgba($black-alt, $table-hover-bg-factor-alt) !default;
  133. $table-border-factor-alt: .1 !default;
  134. $table-border-color-alt: $border-color-alt !default;
  135. $table-group-separator-color-alt: currentColor !default;
  136. $table-caption-color-alt: $text-muted-alt !default;
  137. $table-bg-scale-alt: 50% !default;
  138. $table-variants-alt: (
  139. "primary": shift-color($primary-alt, $table-bg-scale-alt),
  140. "secondary": shift-color($secondary-alt, $table-bg-scale-alt),
  141. "success": shift-color($success-alt, $table-bg-scale-alt),
  142. "info": shift-color($info-alt, $table-bg-scale-alt),
  143. "warning": shift-color($warning-alt, $table-bg-scale-alt),
  144. "danger": shift-color($danger-alt, $table-bg-scale-alt),
  145. "light": $light-alt,
  146. "dark": $dark-alt,
  147. ) !default;
  148. // Buttons + Forms
  149. // ______________________________________
  150. // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
  151. $input-btn-focus-color-opacity-alt: .25 !default;
  152. $input-btn-focus-color-alt: rgba($component-active-bg-alt, $input-btn-focus-color-opacity-alt) !default;
  153. $input-btn-focus-blur-alt: 0 !default;
  154. $input-btn-focus-box-shadow-alt: 0 0 $input-btn-focus-blur-alt $input-btn-focus-width $input-btn-focus-color-alt !default;
  155. // Buttons
  156. // ______________________________________
  157. // For each of Bootstrap's buttons, define text, background, and border color.
  158. $btn-box-shadow-alt: inset 0 1px 0 rgba($white-alt, .15), 0 1px 1px rgba($black-alt, .075) !default;
  159. $btn-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
  160. $btn-disabled-opacity-alt: .65 !default;
  161. $btn-active-box-shadow-alt: inset 0 3px 5px rgba($black-alt, .125) !default;
  162. $btn-link-color-alt: $link-color-alt !default;
  163. $btn-link-hover-color-alt: $link-hover-color-alt !default;
  164. $btn-link-disabled-color-alt: $gray-600-alt !default;
  165. $btn-hover-bg-shade-amount-alt: 15% !default;
  166. $btn-hover-bg-tint-amount-alt: 15% !default;
  167. $btn-hover-border-shade-amount-alt: 20% !default;
  168. $btn-hover-border-tint-amount-alt: 10% !default;
  169. $btn-active-bg-shade-amount-alt: 20% !default;
  170. $btn-active-bg-tint-amount-alt: 20% !default;
  171. $btn-active-border-shade-amount-alt: 25% !default;
  172. $btn-active-border-tint-amount-alt: 10% !default;
  173. // Forms
  174. // ______________________________________
  175. $form-text-color-alt: $text-muted-alt !default;
  176. $form-label-color-alt: null !default;
  177. $input-bg-alt: $gray-800-alt !default;
  178. $input-disabled-bg-alt: $gray-900-alt !default;
  179. $input-disabled-border-color-alt: null !default;
  180. $input-color-alt: $gray-300-alt !default;
  181. $input-border-color-alt: $gray-700-alt !default;
  182. $input-box-shadow-alt: $box-shadow-inset-alt !default;
  183. $input-focus-bg-alt: $input-bg-alt !default;
  184. $input-focus-border-color-alt: tint-color($component-active-bg-alt, 50%) !default;
  185. $input-focus-color-alt: $input-color-alt !default;
  186. $input-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
  187. $input-placeholder-color-alt: mix($gray-600-alt, $gray-700-alt, 50%) !default;
  188. $input-plaintext-color-alt: $body-color-alt !default;
  189. $form-check-label-color-alt: null !default;
  190. $form-check-input-active-filter-alt: brightness(90%) !default; // TODO: test
  191. $form-check-input-bg-alt: $input-bg-alt !default;
  192. $form-check-input-border-alt: 1px solid rgba($white, .25) !default;
  193. $form-check-input-focus-border-alt: $input-focus-border-color-alt !default;
  194. $form-check-input-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
  195. $form-check-input-checked-color-alt: $component-active-color-alt !default;
  196. $form-check-input-checked-bg-color-alt: $component-active-bg-alt !default;
  197. $form-check-input-checked-border-color-alt: $form-check-input-checked-bg-color-alt !default;
  198. $form-check-input-checked-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
  199. $form-check-radio-checked-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color-alt}'/></svg>") !default;
  200. $form-check-input-indeterminate-color-alt: $component-active-color-alt !default;
  201. $form-check-input-indeterminate-bg-color-alt: $component-active-bg-alt !default;
  202. $form-check-input-indeterminate-border-color-alt: $form-check-input-indeterminate-bg-color-alt !default;
  203. $form-check-input-indeterminate-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
  204. $form-check-input-disabled-opacity-alt: .5 !default;
  205. $form-check-label-disabled-opacity-alt: $form-check-input-disabled-opacity-alt !default;
  206. $form-check-btn-check-disabled-opacity-alt: $btn-disabled-opacity-alt !default;
  207. $form-switch-color-alt: rgba(255, 255, 255, .25) !default;
  208. $form-switch-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-alt}'/></svg>") !default;
  209. $form-switch-focus-color-alt: $input-focus-border-color-alt !default;
  210. $form-switch-focus-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color-alt}'/></svg>") !default;
  211. $form-switch-checked-color-alt: $component-active-color-alt !default;
  212. $form-switch-checked-bg-image-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color-alt}'/></svg>") !default;
  213. $input-group-addon-color-alt: $input-color-alt !default;
  214. $input-group-addon-bg-alt: $gray-800-alt !default;
  215. $input-group-addon-border-color-alt: $input-border-color-alt !default;
  216. $form-select-color-alt: $input-color-alt !default;
  217. $form-select-disabled-color-alt: null !default;
  218. $form-select-bg-alt: $input-bg-alt !default;
  219. $form-select-disabled-bg-alt: $gray-800-alt !default;
  220. $form-select-disabled-border-color-alt: $input-disabled-border-color-alt !default;
  221. $form-select-indicator-color-alt: $gray-200-alt !default;
  222. $form-select-indicator-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
  223. $form-select-border-color-alt: $input-border-color-alt !default;
  224. $form-select-box-shadow-alt: $box-shadow-inset-alt !default;
  225. $form-select-focus-border-color-alt: $input-focus-border-color-alt !default;
  226. $form-select-focus-box-shadow-alt: 0 0 0 $form-select-focus-width $input-btn-focus-color-alt !default;
  227. $form-range-track-bg-alt: $gray-700-alt !default;
  228. $form-range-track-box-shadow-alt: $box-shadow-inset-alt !default;
  229. $form-range-thumb-bg-alt: $component-active-bg-alt !default;
  230. $form-range-thumb-border-alt: 0 !default;
  231. $form-range-thumb-box-shadow-alt: 0 .1rem .25rem rgba($black-alt, .1) !default;
  232. $form-range-thumb-focus-box-shadow-alt: 0 0 0 1px $body-bg-alt, $input-focus-box-shadow-alt !default;
  233. $form-range-thumb-active-bg-alt: tint-color($component-active-bg-alt, 70%) !default;
  234. $form-range-thumb-disabled-bg-alt: $gray-500-alt !default;
  235. $form-file-button-color-alt: $input-color-alt !default;
  236. $form-file-button-bg-alt: $input-group-addon-bg-alt !default;
  237. $form-file-button-hover-bg-alt: shade-color($form-file-button-bg-alt, 5%) !default;
  238. $form-floating-label-opacity-alt: .65 !default;
  239. // Form validation
  240. // ______________________________________
  241. $form-feedback-valid-color-alt: $success-alt !default;
  242. $form-feedback-invalid-color-alt: $danger-alt !default;
  243. $form-feedback-icon-valid-color-alt: $form-feedback-valid-color-alt !default;
  244. $form-feedback-icon-valid-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color-alt}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
  245. $form-feedback-icon-invalid-color-alt: $form-feedback-invalid-color-alt !default;
  246. $form-feedback-icon-invalid-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color-alt}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
  247. $form-validation-states-alt: (
  248. "valid": (
  249. "color": $form-feedback-valid-color-alt,
  250. "icon": $form-feedback-icon-valid-alt
  251. ),
  252. "invalid": (
  253. "color": $form-feedback-invalid-color-alt,
  254. "icon": $form-feedback-icon-invalid-alt
  255. )
  256. ) !default;
  257. // Navs
  258. // ______________________________________
  259. $nav-link-color-alt: $link-color-alt !default;
  260. $nav-link-hover-color-alt: $link-hover-color-alt !default;
  261. $nav-link-disabled-color-alt: $gray-400-alt !default;
  262. $nav-tabs-border-color-alt: $gray-700-alt !default;
  263. $nav-tabs-link-hover-border-color-alt: $gray-800-alt $gray-800-alt $nav-tabs-border-color-alt !default;
  264. $nav-tabs-link-active-color-alt: $gray-300-alt !default;
  265. $nav-tabs-link-active-bg-alt: $body-bg-alt !default;
  266. $nav-tabs-link-active-border-color-alt: $gray-700-alt $gray-700-alt $nav-tabs-link-active-bg-alt !default;
  267. $nav-pills-link-active-color-alt: $component-active-color-alt !default;
  268. $nav-pills-link-active-bg-alt: $component-active-bg-alt !default;
  269. // Navbar
  270. // ______________________________________ // TODO: revisit colors
  271. $navbar-dark-color-alt: rgba($white-alt, .55) !default;
  272. $navbar-dark-hover-color-alt: rgba($white-alt, .75) !default;
  273. $navbar-dark-active-color-alt: $white-alt !default;
  274. $navbar-dark-disabled-color-alt: rgba($white-alt, .25) !default;
  275. $navbar-dark-toggler-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color-alt}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
  276. $navbar-dark-toggler-border-color-alt: rgba($white-alt, .1) !default;
  277. $navbar-light-color-alt: rgba($white-alt, .55) !default;
  278. $navbar-light-hover-color-alt: rgba($white-alt, .7) !default;
  279. $navbar-light-active-color-alt: rgba($white-alt, .9) !default;
  280. $navbar-light-disabled-color-alt: rgba($white-alt, .3) !default;
  281. $navbar-light-toggler-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color-alt}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
  282. $navbar-light-toggler-border-color-alt: rgba($white-alt, .1) !default;
  283. $navbar-light-brand-color-alt: $navbar-light-active-color-alt !default;
  284. $navbar-light-brand-hover-color-alt: $navbar-light-active-color-alt !default;
  285. $navbar-dark-brand-color-alt: $navbar-dark-active-color-alt !default;
  286. $navbar-dark-brand-hover-color-alt: $navbar-dark-active-color-alt !default;
  287. // Dropdowns
  288. // ______________________________________
  289. // Dropdown menu container and contents.
  290. $dropdown-color-alt: $body-color-alt !default;
  291. $dropdown-bg-alt: $black-alt !default;
  292. $dropdown-border-color-alt: rgba($white-alt, .15) !default;
  293. $dropdown-divider-bg-alt: $dropdown-border-color-alt !default;
  294. $dropdown-box-shadow-alt: $box-shadow-alt !default;
  295. $dropdown-link-color-alt: $gray-100 !default;
  296. $dropdown-link-hover-color-alt: shade-color($gray-100, 10%) !default;
  297. $dropdown-link-hover-bg-alt: $gray-800 !default;
  298. $dropdown-link-active-color-alt: $component-active-color-alt !default;
  299. $dropdown-link-active-bg-alt: $component-active-bg-alt !default;
  300. $dropdown-link-disabled-color-alt: $gray-500-alt !default;
  301. $dropdown-header-color-alt: $gray-400-alt !default;
  302. $dropdown-dark-color-alt: $gray-700-alt !default;
  303. $dropdown-dark-bg-alt: $gray-200-alt !default;
  304. $dropdown-dark-border-color-alt: $dropdown-border-color-alt !default;
  305. $dropdown-dark-divider-bg-alt: $dropdown-divider-bg-alt !default;
  306. $dropdown-dark-box-shadow-alt: null !default;
  307. $dropdown-dark-link-color-alt: $dropdown-dark-color-alt !default;
  308. $dropdown-dark-link-hover-color-alt: $black-alt !default;
  309. $dropdown-dark-link-hover-bg-alt: rgba($black-alt, .15) !default;
  310. $dropdown-dark-link-active-color-alt: $dropdown-link-active-color-alt !default;
  311. $dropdown-dark-link-active-bg-alt: $dropdown-link-active-bg-alt !default;
  312. $dropdown-dark-link-disabled-color-alt: $gray-500-alt !default;
  313. $dropdown-dark-header-color-alt: $gray-500-alt !default;
  314. // Pagination
  315. // ______________________________________
  316. $pagination-color-alt: $link-color-alt !default;
  317. $pagination-bg-alt: $gray-800-alt !default;
  318. $pagination-border-color-alt: $gray-700-alt !default;
  319. $pagination-focus-color-alt: $link-hover-color-alt !default;
  320. $pagination-focus-bg-alt: $gray-800-alt !default;
  321. $pagination-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
  322. $pagination-focus-outline-alt: 0 !default; // ???
  323. $pagination-hover-color-alt: $link-hover-color-alt !default;
  324. $pagination-hover-bg-alt: $gray-700-alt !default;
  325. $pagination-hover-border-color-alt: mix($gray-700-alt, $gray-700-alt, 50%) !default;
  326. $pagination-active-color-alt: $component-active-color-alt !default;
  327. $pagination-active-bg-alt: $component-active-bg-alt !default;
  328. $pagination-active-border-color-alt: $pagination-active-bg-alt !default;
  329. $pagination-disabled-color-alt: mix($gray-600-alt, $gray-700-alt, 50%) !default;
  330. $pagination-disabled-bg-alt: $gray-900-alt !default;
  331. $pagination-disabled-border-color-alt: $gray-700-alt !default;
  332. // Cards
  333. // ______________________________________
  334. $card-border-color-alt: rgba($white-alt, .125) !default;
  335. $card-cap-bg-alt: rgba($white-alt, .03) !default;
  336. $card-cap-color-alt: null !default;
  337. $card-color-alt: null !default;
  338. $card-bg-alt: $gray-900-alt !default;
  339. // Accordion
  340. // ______________________________________
  341. $accordion-color-alt: $body-color-alt !default;
  342. $accordion-bg-alt: $body-bg-alt !default;
  343. $accordion-border-color-alt: rgba($white-alt, .125) !default;
  344. $accordion-button-color-alt: $accordion-color-alt !default;
  345. $accordion-button-bg-alt: $accordion-bg-alt !default;
  346. $accordion-button-active-bg-alt: shade-color($component-active-bg-alt, 50%) !default;
  347. $accordion-button-active-color-alt: tint-color($primary-alt, 40%) !default;
  348. $accordion-button-focus-border-color-alt: $input-focus-border-color-alt !default;
  349. $accordion-button-focus-box-shadow-alt: $btn-focus-box-shadow-alt !default;
  350. $accordion-icon-color-alt: $accordion-color-alt !default;
  351. $accordion-icon-active-color-alt: $accordion-button-active-color-alt !default;
  352. $accordion-button-icon-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-alt}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
  353. $accordion-button-active-icon-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-alt}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
  354. // Tooltips
  355. // ______________________________________
  356. $tooltip-color-alt: $black-alt !default;
  357. $tooltip-bg-alt: $white-alt !default;
  358. $tooltip-opacity-alt: .9 !default;
  359. $tooltip-arrow-color-alt: $tooltip-bg-alt !default;
  360. $form-feedback-tooltip-opacity-alt: $tooltip-opacity-alt !default;
  361. // Popovers
  362. // ______________________________________
  363. $popover-bg-alt: $black-alt !default;
  364. $popover-border-color-alt: rgba($white-alt, .2) !default;
  365. $popover-box-shadow-alt: $box-shadow-alt !default;
  366. $popover-header-bg-alt: tint-color($popover-bg-alt, 6%) !default;
  367. $popover-header-color-alt: $headings-color-alt !default;
  368. $popover-body-color-alt: $body-color-alt !default;
  369. $popover-arrow-color-alt: $popover-bg-alt !default;
  370. $popover-arrow-outer-color-alt: fade-in($popover-border-color-alt, .05) !default;
  371. // Toasts
  372. // ______________________________________
  373. $toast-color-alt: null !default;
  374. $toast-background-color-alt: rgba($black-alt, .85) !default;
  375. $toast-border-color-alt: rgba(255, 255, 255, .1) !default;
  376. $toast-box-shadow-alt: $box-shadow-alt !default;
  377. $toast-header-color-alt: $gray-400-alt !default;
  378. $toast-header-background-color-alt: rgba($black-alt, .85) !default;
  379. $toast-header-border-color-alt: rgba(255, 255, 255, .05) !default;
  380. // Badges
  381. // ______________________________________
  382. $badge-color-alt: $white-alt !default;
  383. // Modals
  384. // ______________________________________
  385. $modal-content-color-alt: null !default;
  386. $modal-content-bg-alt: mix($gray-800-alt, $gray-900-alt, 50%) !default;
  387. $modal-content-border-color-alt: rgba($white-alt, .2) !default;
  388. $modal-content-box-shadow-xs-alt: $box-shadow-sm-alt !default;
  389. $modal-content-box-shadow-sm-up-alt: $box-shadow-alt !default;
  390. $modal-backdrop-bg-alt: $black-alt !default;
  391. $modal-backdrop-opacity-alt: .85 !default;
  392. $modal-header-border-color-alt: $border-color-alt !default;
  393. $modal-footer-border-color-alt: $modal-header-border-color-alt !default;
  394. // Alerts
  395. // ______________________________________
  396. // Define alert colors, border radius, and padding.
  397. $alert-bg-scale-alt: 50% !default;
  398. $alert-border-scale-alt: 40% !default;
  399. $alert-color-scale-alt: -30% !default;
  400. // Progress bars
  401. // ______________________________________
  402. $progress-bg-alt: $gray-800-alt !default;
  403. $progress-box-shadow-alt: $box-shadow-inset-alt !default;
  404. $progress-bar-color-alt: $black-alt !default;
  405. $progress-bar-bg-alt: $primary-alt !default;
  406. // List group
  407. // ______________________________________
  408. $list-group-color-alt: $gray-100-alt !default;
  409. $list-group-bg-alt: $gray-900-alt !default; // $white !default;
  410. $list-group-border-color-alt: rgba($white-alt, .125) !default;
  411. $list-group-item-bg-scale-alt: 50% !default;
  412. $list-group-item-color-scale-alt: -30% !default;
  413. $list-group-hover-bg-alt: mix($gray-800-alt, $gray-900-alt, 50%) !default;
  414. $list-group-active-color-alt: $component-active-color-alt !default;
  415. $list-group-active-bg-alt: $component-active-bg-alt !default;
  416. $list-group-active-border-color-alt: $list-group-active-bg-alt !default;
  417. $list-group-disabled-color-alt: $gray-400-alt !default;
  418. $list-group-disabled-bg-alt: $list-group-bg-alt !default;
  419. $list-group-action-color-alt: $gray-300-alt !default;
  420. $list-group-action-hover-color-alt: $list-group-action-color-alt !default;
  421. $list-group-action-active-color-alt: $body-color-alt !default;
  422. $list-group-action-active-bg-alt: $gray-800-alt !default;
  423. // Image thumbnails
  424. // ______________________________________
  425. $thumbnail-bg-alt: $body-bg-alt !default;
  426. $thumbnail-border-color-alt: $gray-700-alt !default;
  427. $thumbnail-box-shadow-alt: $box-shadow-sm-alt !default;
  428. // Figures
  429. // ______________________________________
  430. $figure-caption-color-alt: $gray-400-alt !default;
  431. // Breadcrumbs
  432. // ______________________________________
  433. $breadcrumb-bg-alt: $gray-800-alt !default; // null !default;
  434. $breadcrumb-divider-color-alt: $gray-400-alt !default;
  435. $breadcrumb-active-color-alt: $gray-400-alt !default;
  436. // Carousel
  437. // ______________________________________
  438. $carousel-control-color-alt: $white-alt !default;
  439. $carousel-control-opacity-alt: .5 !default;
  440. $carousel-control-hover-opacity-alt: .9 !default;
  441. $carousel-indicator-opacity-alt: .5 !default;
  442. $carousel-indicator-active-bg-alt: $black-alt !default;
  443. $carousel-indicator-active-opacity-alt: 1 !default;
  444. $carousel-caption-color-alt: $black-alt !default;
  445. $carousel-control-prev-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color-alt}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
  446. $carousel-control-next-icon-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color-alt}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
  447. $carousel-dark-indicator-active-bg-alt: $white-alt !default;
  448. $carousel-dark-caption-color-alt: $white-alt !default;
  449. $carousel-dark-control-icon-filter-alt: invert(1) grayscale(100) !default;
  450. // Spinners
  451. // ______________________________________
  452. // ...nada
  453. // Close
  454. // ______________________________________
  455. $btn-close-color-alt: $white-alt !default;
  456. $btn-close-bg-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-alt}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
  457. $btn-close-focus-shadow-alt: $input-btn-focus-box-shadow-alt !default;
  458. $btn-close-opacity-alt: .5 !default;
  459. $btn-close-hover-opacity-alt: .75 !default;
  460. $btn-close-focus-opacity-alt: 1 !default;
  461. $btn-close-disabled-opacity-alt: .25 !default;
  462. $btn-close-white-filter-alt: invert(1) grayscale(100%) brightness(200%) !default;
  463. // Offcanvas
  464. // ______________________________________
  465. $offcanvas-border-color-alt: $modal-content-border-color-alt !default;
  466. $offcanvas-bg-color-alt: $modal-content-bg-alt !default;
  467. $offcanvas-color-alt: $modal-content-color-alt !default;
  468. $offcanvas-box-shadow-alt: $modal-content-box-shadow-xs-alt !default;
  469. // Code
  470. // ______________________________________
  471. $code-color-alt: $teal-alt !default;
  472. $kbd-color-alt: $gray-100-alt !default;
  473. $kbd-bg-alt: $gray-800-alt !default;
  474. $pre-color-alt: $gray-100-alt !default;
  475. // Unique to Dark!!
  476. // **************************************
  477. // Text Selection
  478. // ______________________________________
  479. $selection-color-alt: $gray-200-alt !default;
  480. $selection-bg-alt: rgba($cyan-alt, .5) !default;