github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

dark mode with bootstrap complete components 

Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0
pull/3698/head
Daniel 2021-05-12 04:21:49 +05:30
parent bd43001eb4
commit bfaffd9ea8
88 changed files with 4117 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/.eslintrc.json
View File

@ -6,7 +6,7 @@
"parserOptions": { "parserOptions": {
"sourceType": "script" "sourceType": "script"
}, },
"extends": "../../.eslintrc.json", "extends": "../.eslintrc.json",
"rules": { "rules": {
"no-console": "off", "no-console": "off",
"strict": "error", "strict": "error",

15
package.json
View File

@ -7,19 +7,22 @@
"main": "dist/js/adminlte.min.js", "main": "dist/js/adminlte.min.js",
"scripts": { "scripts": {
"bundlewatch": "bundlewatch --config .bundlewatch.config.json", "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
"css-all": "npm-run-all --parallel css css-splits", "css-all": "npm-run-all css css-splits",
"css-splits": "npm-run-all css-compile-splits css-prefix-splits css-rtl-splits css-minify-splits", "css-splits": "npm-run-all css-compile-splits css-prefix-splits css-rtl-splits css-minify-splits",
"css": "npm-run-all css-compile css-prefix css-minify", "css": "npm-run-all css-compile css-prefix css-minify",
"css-compile-bash": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css", "css-compile-bash": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css",
"css-compile": "npm run css-compile-bash -- scss/adminlte.scss:dist/css/adminlte.css", "css-compile": "npm run css-compile-bash -- scss/adminlte.scss:dist/css/adminlte.css",
"css-compile-splits": "npm run css-compile-bash -- scss/parts/:dist/css/alt/", "css-compile-splits": "npm-run-all --parallel css-compile-dark-splits",
"css-compile-dark-splits": "npm run css-compile-bash -- scss/dark/:dist/css/dark/",
"css-prefix-bash": "postcss --config build/postcss.config.js --replace", "css-prefix-bash": "postcss --config build/postcss.config.js --replace",
"css-prefix": "npm run css-prefix-bash -- \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/alt/*.css\"", "css-prefix": "npm run css-prefix-bash -- \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/dark/*.css\" \"!dist/css/rtl/*.css\"",
"css-prefix-splits": "npm run css-prefix-bash -- \"dist/css/alt/*.css\" \"!dist/css/alt/*.min.css\" \"!dist/css/alt/*.rtl.css\"", "css-prefix-splits": "npm run css-prefix-bash -- \"dist/css/**/*.css\" \"!dist/css/rtl/*.css\" \"!dist/css/**/*.min.css\"",
"css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --replace \"dist/css/alt/*.rtl.css\" \"!dist/css/alt/*.min.css\"", "css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css/rtl\" --ext \".rtl.css\" \"dist/css/*.css\" \"dist/css/**/*.css\" \"!dist/css/**/*.rtl.css\" \"!dist/css/*.min.css\" \"!dist/css/**/*.min.css\"",
"css-minify-bash": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output ", "css-minify-bash": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output ",
"css-minify": "npm run css-minify-bash -- dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"", "css-minify": "npm run css-minify-bash -- dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"",
"css-minify-splits": "npm run css-minify-bash -- dist/css/alt/ --batch --batch-suffix \".min\" \"dist/css/alt/*.css\" \"!dist/css/alt/*.min.css\"", "css-minify-splits": "npm-run-all --parallel css-minify-split:dark css-minify-split:rtl",
"css-minify-split:dark": "npm run css-minify-bash -- dist/css/dark/ --batch --batch-suffix \".min\" \"dist/css/dark/*.css\" \"!dist/css/dark/*.min.css\"",
"css-minify-split:rtl": "npm run css-minify-bash -- dist/css/rtl/ --batch --batch-suffix \".min\" \"dist/css/rtl/*.css\" \"!dist/css/rtl/*.min.css\"",
"css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache", "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
"dev": "npm-run-all --parallel watch sync", "dev": "npm-run-all --parallel watch sync",
"lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json", "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",

0
scss/_bootstrap-components.scss
View File

44
scss/_bootstrap-dark.scss Normal file
View File

@ -0,0 +1,44 @@
/*
* ---------- Dark Mode ------------------------------------------------------
*/
// Layout & components
@import "dark/bootstrap/root";
@import "dark/bootstrap/reboot";
@import "dark/bootstrap/type";
@import "dark/bootstrap/images";
// no colors in containers
// no colors in grid
@import "dark/bootstrap/tables";
@import "dark/bootstrap/forms";
@import "dark/bootstrap/buttons";
// no colors in transitions
@import "dark/bootstrap/dropdown";
@import "dark/bootstrap/button-group";
@import "dark/bootstrap/nav";
@import "dark/bootstrap/navbar";
@import "dark/bootstrap/card";
@import "dark/bootstrap/accordion";
@import "dark/bootstrap/breadcrumb";
@import "dark/bootstrap/pagination";
@import "dark/bootstrap/badge";
@import "dark/bootstrap/alert";
@import "dark/bootstrap/progress";
@import "dark/bootstrap/list-group";
@import "dark/bootstrap/close";
@import "dark/bootstrap/toasts";
@import "dark/bootstrap/modal";
@import "dark/bootstrap/tooltip";
@import "dark/bootstrap/popover";
@import "dark/bootstrap/carousel";
// no colors in spinners
@import "dark/bootstrap/offcanvas";
// Helpers
@import "dark/bootstrap/helpers";
// Utilities
@import "dark/bootstrap/utilities/api";
// Unique to dark-mode
@import "dark/bootstrap/dark";

87
scss/_bootstrap-variables-alt.scss
View File

@ -1,87 +0,0 @@
//
// Color system (PCS - prefers-color-scheme)
//
$white-alt: $white !default;
$gray-100-alt: $gray-100 !default;
$gray-200-alt: $gray-200 !default;
$gray-300-alt: $gray-300 !default;
$gray-400-alt: $gray-400 !default;
$gray-500-alt: $gray-500 !default;
$gray-600-alt: $gray-600 !default;
$gray-700-alt: $gray-700 !default;
$gray-800-alt: $gray-800 !default;
$gray-900-alt: $gray-900 !default;
$black-alt: $black !default;
// stylelint-disable
$grays-alt: () !default;
$grays-alt: map-merge((
"100": $gray-100-alt,
"200": $gray-200-alt,
"300": $gray-300-alt,
"400": $gray-400-alt,
"500": $gray-500-alt,
"600": $gray-600-alt,
"700": $gray-700-alt,
"800": $gray-800-alt,
"900": $gray-900-alt
), $grays-alt);
// stylelint-enable
$blue-alt: #0d6efd !default;
$indigo-alt: #6610f2 !default;
$purple-alt: #6f42c1 !default;
$pink-alt: #d63384 !default;
$red-alt: #dc3545 !default;
$orange-alt: #fd7e14 !default;
$yellow-alt: #ffc107 !default;
$green-alt: #198754 !default;
$teal-alt: #20c997 !default;
$cyan-alt: #0dcaf0 !default;
// stylelint-disable
$colors-alt: () !default;
$colors-alt: map-merge((
"blue": $blue-alt,
"indigo": $indigo-alt,
"purple": $purple-alt,
"pink": $pink-alt,
"red": $red-alt,
"orange": $orange-alt,
"yellow": $yellow-alt,
"green": $green-alt,
"teal": $teal-alt,
"cyan": $cyan-alt,
"white": $white-alt,
"gray": $gray-600-alt,
"gray-dark": $gray-800-alt
), $colors-alt);
// stylelint-enable
// Color scheme
$primary-alt: $blue-alt !default;
$secondary-alt: $gray-600-alt !default;
$success-alt: $green-alt !default;
$info-alt: $cyan-alt !default;
$warning-alt: $yellow-alt !default;
$danger-alt: $red-alt !default;
$light-alt: $gray-100-alt !default;
$dark-alt: $gray-800-alt !default;
// stylelint-disable
$theme-colors-alt: () !default;
$theme-colors-alt: map-merge((
"primary": $primary-alt,
"secondary": $secondary-alt,
"success": $success-alt,
"info": $info-alt,
"warning": $warning-alt,
"danger": $danger-alt,
"light": $light-alt,
"dark": $dark-alt
), $theme-colors-alt);
// stylelint-enable
//

136
scss/_bootstrap-variables.scss
View File

@ -1,136 +0,0 @@
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
//
// Color system
//
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// stylelint-disable
$grays: () !default;
$grays: map-merge((
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
), $grays);
// stylelint-enable
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// stylelint-disable
$colors: () !default;
$colors: map-merge((
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
), $colors);
// stylelint-enable
// Color scheme
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
// stylelint-disable
$theme-colors: () !default;
$theme-colors: map-merge((
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
), $theme-colors);
// stylelint-enable
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
// Prefix for :root CSS variables
$variable-prefix: bs- !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;
// Links
//
// Style anchor elements.
$link-color: $primary !default;
$link-decoration: none !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
//

2
scss/_utilities.scss → scss/_custom-utilities.scss
View File

@ -18,5 +18,3 @@ $utilities: (
) )
) )
); );
//

124
scss/_custom-variables.scss Normal file
View File

@ -0,0 +1,124 @@
// Variables for AdminLTE
// LAYOUT
// --------------------------------------------------------
$font-size-root: 1rem !default;
// TRANSITIONS SETTINGS
// --------------------------------------------------------
// Transition global options
$transition-speed: .3s !default;
$transition-fn: ease-in-out !default;
// Sidebar
// --------------------------------------------------------
$sidebar-width: 250px !default;
$sidebar-padding-x: .5rem !default;
$sidebar-padding-y: .5rem !default;
$sidebar-custom-height: 4rem !default;
$sidebar-custom-height-lg: 6rem !default;
$sidebar-custom-height-xl: 8rem !default;
$sidebar-custom-padding-x: .85rem !default;
$sidebar-custom-padding-y: .5rem !default;
$sidebar-transition: min-width $transition-speed $transition-fn,
max-width $transition-speed $transition-fn,
margin-top $transition-speed $transition-fn,
margin-left $transition-speed $transition-fn,
margin-right $transition-speed $transition-fn,
transform $transition-speed $transition-fn;
// SIDEBAR SKINS
// --------------------------------------------------------
// Dark sidebar
$sidebar-dark-bg: $dark !default;
$sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
$sidebar-dark-color: #c2c7d0 !default;
$sidebar-dark-hover-color: $white !default;
$sidebar-dark-active-color: $white !default;
$sidebar-dark-submenu-bg: transparent !default;
$sidebar-dark-submenu-color: #c2c7d0 !default;
$sidebar-dark-submenu-hover-color: $white !default;
$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
$sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
$sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
// Light sidebar
$sidebar-light-bg: $white !default;
$sidebar-light-hover-bg: rgba($black, .1) !default;
$sidebar-light-color: $gray-800 !default;
$sidebar-light-hover-color: $gray-900 !default;
$sidebar-light-active-color: $black !default;
$sidebar-light-submenu-bg: transparent !default;
$sidebar-light-submenu-color: #777 !default;
$sidebar-light-submenu-hover-color: $black !default;
$sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
$sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
// SIDEBAR MINI
// --------------------------------------------------------
$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
// SIDEBAR HORIZONTAL
// --------------------------------------------------------
$sidebar-horizontal-width: 100%;
$sidebar-horizontal-height: 80px !default;
// CONTROL SIDEBAR
// --------------------------------------------------------
$control-sidebar-width: $sidebar-width !default;
// MAIN HEADER
// --------------------------------------------------------
$main-header-bottom-border-width: $border-width !default;
$main-header-bottom-border-color: $gray-300 !default;
$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
$main-header-link-padding-y: $navbar-padding-y !default;
$main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height: add($main-header-height-inner, $main-header-bottom-border-width) !default;
$nav-link-sm-padding-y: .35rem !default;
$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
// MAIN FOOTER
// --------------------------------------------------------
$main-footer-padding: 1rem !default;
$main-footer-padding-sm: $main-footer-padding * .812 !default;
$main-footer-border-top-width: 1px !default;
$main-footer-border-top-color: $gray-300 !default;
$main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
$main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
$main-footer-height: add($main-footer-height-inner, $main-footer-border-top-width) !default;
$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
$main-footer-height-sm: add($main-footer-height-sm-inner, $main-footer-border-top-width) !default;
$main-footer-bg: $white !default;
$main-footer-color: tint-color($gray-700, 25%) !default;
// BRAND LINK
// --------------------------------------------------------
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
$brand-link-border-buttom: 1px;
// Z-INDEX
// --------------------------------------------------------
$zindex-main-header: $zindex-fixed + 4 !default;
$zindex-sidebar: $zindex-fixed + 8 !default;
$zindex-main-footer: $zindex-fixed + 2 !default;
$zindex-sidebar-horizontal: $zindex-main-header - 2 !default;
$zindex-control-sidebar: $zindex-fixed + 1 !default;
$zindex-toasts: $zindex-sidebar + 2 !default;
$zindex-content-wrapper: $zindex-sidebar - 2 !default;
$zindex-preloader: $zindex-toasts + 2 !default;
// Body background (Affects main content background only)
$main-bg: #f4f6f9 !default;
$main-color: $black !default;
// Dark mode
$enable-dark-mode: false !default;

3
scss/_layout-dark.scss Normal file
View File

@ -0,0 +1,3 @@
@import "dark/layout/main-header";
@import "dark/layout/content-wrapper";
@import "dark/layout/main-footer";

2
scss/_layout.scss
View File

@ -9,5 +9,3 @@
@import "layout/content-wrapper"; @import "layout/content-wrapper";
@import "layout/main-footer"; @import "layout/main-footer";
@import "layout/layout-fixed"; @import "layout/layout-fixed";
//

3
scss/_mixins.scss
View File

@ -3,9 +3,6 @@
// //
@import "mixins/animations"; @import "mixins/animations";
@import "mixins/dark-mode";
@import "mixins/scrollbar"; @import "mixins/scrollbar";
@import "mixins/sidebar-theme"; @import "mixins/sidebar-theme";
@import "mixins/miscellaneous"; @import "mixins/miscellaneous";
//

256
scss/_variables.scss
View File

@ -1,126 +1,134 @@
// Variables for AdminLTE // Variables
//
// LAYOUT // Variables should follow the `$component-state-property-size` formula for
// -------------------------------------------------------- // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
$font-size-root: 1rem !default;
// TRANSITIONS SETTINGS
// --------------------------------------------------------
// Transition global options
$transition-speed: .3s !default;
$transition-fn: ease-in-out !default;
// Sidebar
// --------------------------------------------------------
$sidebar-width: 250px !default;
$sidebar-padding-x: .5rem !default;
$sidebar-padding-y: .5rem !default;
$sidebar-custom-height: 4rem !default;
$sidebar-custom-height-lg: 6rem !default;
$sidebar-custom-height-xl: 8rem !default;
$sidebar-custom-padding-x: .85rem !default;
$sidebar-custom-padding-y: .5rem !default;
$sidebar-transition: min-width $transition-speed $transition-fn,
max-width $transition-speed $transition-fn,
margin-top $transition-speed $transition-fn,
margin-left $transition-speed $transition-fn,
margin-right $transition-speed $transition-fn,
transform $transition-speed $transition-fn;
// SIDEBAR SKINS
// --------------------------------------------------------
// Dark sidebar
$sidebar-dark-bg: $dark !default;
$sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
$sidebar-dark-color: #c2c7d0 !default;
$sidebar-dark-hover-color: $white !default;
$sidebar-dark-active-color: $white !default;
$sidebar-dark-submenu-bg: transparent !default;
$sidebar-dark-submenu-color: #c2c7d0 !default;
$sidebar-dark-submenu-hover-color: $white !default;
$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
$sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
$sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
// Light sidebar
$sidebar-light-bg: $white !default;
$sidebar-light-hover-bg: rgba($black, .1) !default;
$sidebar-light-color: $gray-800 !default;
$sidebar-light-hover-color: $gray-900 !default;
$sidebar-light-active-color: $black !default;
$sidebar-light-submenu-bg: transparent !default;
$sidebar-light-submenu-color: #777 !default;
$sidebar-light-submenu-hover-color: $black !default;
$sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
$sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
// SIDEBAR MINI
// --------------------------------------------------------
$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
// SIDEBAR HORIZONTAL
// --------------------------------------------------------
$sidebar-horizontal-width: 100%;
$sidebar-horizontal-height: 80px !default;
// CONTROL SIDEBAR
// --------------------------------------------------------
$control-sidebar-width: $sidebar-width !default;
// MAIN HEADER
// --------------------------------------------------------
$main-header-bottom-border-width: $border-width !default;
$main-header-bottom-border-color: $gray-300 !default;
$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
$main-header-link-padding-y: $navbar-padding-y !default;
$main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height: add($main-header-height-inner, $main-header-bottom-border-width) !default;
$nav-link-sm-padding-y: .35rem !default;
$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
// MAIN FOOTER
// --------------------------------------------------------
$main-footer-padding: 1rem !default;
$main-footer-padding-sm: $main-footer-padding * .812 !default;
$main-footer-border-top-width: 1px !default;
$main-footer-border-top-color: $gray-300 !default;
$main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
$main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
$main-footer-height: add($main-footer-height-inner, $main-footer-border-top-width) !default;
$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
$main-footer-height-sm: add($main-footer-height-sm-inner, $main-footer-border-top-width) !default;
$main-footer-bg: $white !default;
$main-footer-color: tint-color($gray-700, 25%) !default;
// BRAND LINK
// --------------------------------------------------------
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
$brand-link-border-buttom: 1px;
// Z-INDEX
// --------------------------------------------------------
$zindex-main-header: $zindex-fixed + 4 !default;
$zindex-sidebar: $zindex-fixed + 8 !default;
$zindex-main-footer: $zindex-fixed + 2 !default;
$zindex-sidebar-horizontal: $zindex-main-header - 2 !default;
$zindex-control-sidebar: $zindex-fixed + 1 !default;
$zindex-toasts: $zindex-sidebar + 2 !default;
$zindex-content-wrapper: $zindex-sidebar - 2 !default;
$zindex-preloader: $zindex-toasts + 2 !default;
// Body background (Affects main content background only)
$main-bg: #f4f6f9 !default;
$main-color: $black !default;
// Dark mode
$enable-dark-mode: false !default;
// //
// Color system
//
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// stylelint-disable
$grays: () !default;
$grays: map-merge((
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
), $grays);
// stylelint-enable
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// stylelint-disable
$colors: () !default;
$colors: map-merge((
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
), $colors);
// stylelint-enable
// Color scheme
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
// stylelint-disable
$theme-colors: () !default;
$theme-colors: map-merge((
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
), $theme-colors);
// stylelint-enable
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
// Prefix for :root CSS variables
$variable-prefix: bs- !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;
// Links
//
// Style anchor elements.
$link-color: $primary !default;
$link-decoration: none !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;

19
scss/adminlte.scss
View File

@ -8,17 +8,22 @@
// Bootstrap // Bootstrap
// --------------------------------------------------- // ---------------------------------------------------
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap-variables"; @import "variables"; // little modified are here
@import "utilities"; @import "bootstrap/scss/variables";
@import "dark/variables-alt"; // dark color set is here
@import "bootstrap/scss/mixins";
@import "dark/bootstrap/mixins";
@import "custom-utilities";
@import "bootstrap/scss/utilities";
@import "dark/bootstrap/utilities";
@import "dark/bootstrap/patch"; // missing from BS, unsupported patch/hack
@import "dark/bootstrap/color-scheme";
@import "bootstrap/scss/bootstrap"; @import "bootstrap/scss/bootstrap";
// Variables and Mixins // Variables and Mixins
// --------------------------------------------------- // ---------------------------------------------------
@import "bootstrap-variables-alt"; @import "custom-variables";
@import "variables"; @import "dark/custom-variables-alt"; // dark color set is here
@import "variables-alt";
@import "mixins"; @import "mixins";
@import "parts/core"; @import "parts/core";
//

6
scss/_variables-alt.scss → scss/dark/_custom-variables-alt.scss
View File

@ -1,9 +1,7 @@
// MAIN FOOTER // MAIN FOOTER
// -------------------------------------------------------- // --------------------------------------------------------
$main-footer-bg-alt: $dark !default; $main-footer-bg-alt: $dark-alt !default;
// Body background (Affects main content background only) // Body background (Affects main content background only)
$main-bg-alt: tint-color($dark-alt, 7.5%) !default; $main-bg-alt: tint-color($dark-alt, 7.5%) !default;
$main-color-alt: $white !default; $main-color-alt: $white-alt !default;
//

666
scss/dark/_variables-alt.scss Normal file
View File

@ -0,0 +1,666 @@
// Alternate Variables (for use in Dark Mode variant)
// Color system
// ______________________________________
$default-color-scheme: light !default;
$color-schemes: (
light,
dark
) !default;
// items marked //** from https://bootswatch.com/darkly/
// items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
$white-alt: $white !default;
$gray-100-alt: $gray-100 !default; //~~
$gray-200-alt: $gray-200 !default; //~~
$gray-300-alt: $gray-300 !default; //~~
$gray-400-alt: $gray-400 !default; //~~
$gray-500-alt: $gray-500 !default; //~~
$gray-600-alt: $gray-600 !default; //~~
$gray-700-alt: $gray-700 !default; //~~
$gray-800-alt: $gray-800 !default; //~~
$gray-900-alt: $gray-900 !default; //~~
$black-alt: $black !default; //~~
// fusv-disable
$grays-alt: (
"100": $gray-100-alt,
"200": $gray-200-alt,
"300": $gray-300-alt,
"400": $gray-400-alt,
"500": $gray-500-alt,
"600": $gray-600-alt,
"700": $gray-700-alt,
"800": $gray-800-alt,
"900": $gray-900-alt
) !default;
// fusv-enable
$blue-alt: #375a7f !default;
$indigo-alt: #673ab7 !default; //~~
$purple-alt: #654ea3 !default; // Panatone CotY 2018
$pink-alt: #e83e8c !default;
$red-alt: #e74c3c !default; //**
$orange-alt: #fd7e14 !default;
$yellow-alt: #f39c12 !default; //**
$green-alt: #00bc8c !default; //**
$teal-alt: #45b5aa !default; // Panatone CotY 2010
$cyan-alt: #17a2b8 !default;
$colors-alt: (
"blue": $blue-alt,
"indigo": $indigo-alt,
"purple": $purple-alt,
"pink": $pink-alt,
"red": $red-alt,
"orange": $orange-alt,
"yellow": $yellow-alt,
"green": $green-alt,
"teal": $teal-alt,
"cyan": $cyan-alt,
"white": $white-alt,
"black": $black-alt,
"gray": #7e7e7e, // $gray-600,
"gray-dark": #121212 //$gray-800
) !default;
$primary-alt: $blue-alt !default;
$secondary-alt: $gray-600-alt !default;
$success-alt: $green-alt !default;
$info-alt: $cyan-alt !default;
$warning-alt: $yellow-alt !default;
$danger-alt: $red-alt !default;
$light-alt: $gray-400-alt !default;
$dark-alt: $gray-800-alt !default;
$theme-colors-alt: (
"primary": $primary-alt,
"secondary": $secondary-alt,
"success": $success-alt,
"info": $info-alt,
"warning": $warning-alt,
"danger": $danger-alt,
"light": $light-alt,
"dark": $dark-alt
) !default;
// 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.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio-alt: 2.5 !default;
$color-contrast-dark-alt: $black-alt !default;
$color-contrast-light-alt: $white-alt !default;
// Gradient
// ______________________________________
// The gradient which is added to components if `$enable-gradients` is `true`
// This gradient is also added to elements with `.bg-gradient`
$gradient-alt: linear-gradient(180deg, rgba($black-alt, .15), rgba($black-alt, 0)) !default;
// Body
// ______________________________________
// Settings for the `<body>` element.
$body-bg-alt: $gray-900-alt !default; // $white !default;
$body-color-alt: $gray-100-alt !default; // $gray-900 !default;
// Links
// ______________________________________
// Style anchor elements.
$link-color-alt: shift-color($primary-alt, -15%) !default;
$link-shade-percentage-alt: 20% !default; // TODO: should be -20%;
$link-hover-color-alt: tint-color($link-color-alt, $link-shade-percentage-alt) !default; // TODO: shift-color
// Components
// ______________________________________
// Define common padding and border radius sizes and more.
$border-color-alt: $gray-700-alt !default;
$box-shadow-alt: 0 .5rem 1rem rgba($black-alt, .15) !default;
$box-shadow-sm-alt: 0 .125rem .25rem rgba($black-alt, .075) !default;
$box-shadow-lg-alt: 0 1rem 3rem rgba($black-alt, .175) !default;
$box-shadow-inset-alt: inset 0 1px 2px rgba($black-alt, .075) !default;
$component-active-color-alt: $white-alt !default;
$component-active-bg-alt: $primary-alt !default;
// Typography
// ______________________________________
// Font, line-height, and color for body text, headings, and more.
$headings-color-alt: null !default;
$text-muted-alt: $gray-400-alt !default;
$blockquote-footer-color-alt: $gray-600-alt !default;
$hr-color-alt: $white-alt !default;
$hr-opacity-alt: .1 !default;
$mark-bg-alt: rgba($yellow-alt, .5) !default;
// Tables
// ______________________________________
// Customizes the `.table` component with basic values, each used across all table variations.
$table-color-alt: $body-color-alt !default;
$table-bg-alt: transparent !default;
$table-striped-color-alt: $table-color-alt !default;
$table-striped-bg-factor-alt: .05 !default;
$table-striped-bg-alt: rgba($black-alt, $table-striped-bg-factor-alt) !default;
$table-active-color-alt: $table-color-alt !default;
$table-active-bg-factor-alt: .1 !default;
$table-active-bg-alt: rgba($black-alt, $table-active-bg-factor-alt) !default;
$table-hover-color-alt: $table-color-alt !default;
$table-hover-bg-factor-alt: .075 !default;
$table-hover-bg-alt: rgba($black-alt, $table-hover-bg-factor-alt) !default;
$table-border-factor-alt: .1 !default;
$table-border-color-alt: $border-color-alt !default;
$table-group-separator-color-alt: currentColor !default;
$table-caption-color-alt: $text-muted-alt !default;
$table-bg-scale-alt: 50% !default;
$table-variants-alt: (
"primary": shift-color($primary-alt, $table-bg-scale-alt),
"secondary": shift-color($secondary-alt, $table-bg-scale-alt),
"success": shift-color($success-alt, $table-bg-scale-alt),
"info": shift-color($info-alt, $table-bg-scale-alt),
"warning": shift-color($warning-alt, $table-bg-scale-alt),
"danger": shift-color($danger-alt, $table-bg-scale-alt),
"light": $light-alt,
"dark": $dark-alt,
) !default;
// Buttons + Forms
// ______________________________________
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-focus-color-opacity-alt: .25 !default;
$input-btn-focus-color-alt: rgba($component-active-bg-alt, $input-btn-focus-color-opacity-alt) !default;
$input-btn-focus-blur-alt: 0 !default;
$input-btn-focus-box-shadow-alt: 0 0 $input-btn-focus-blur-alt $input-btn-focus-width $input-btn-focus-color-alt !default;
// Buttons
// ______________________________________
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-box-shadow-alt: inset 0 1px 0 rgba($white-alt, .15), 0 1px 1px rgba($black-alt, .075) !default;
$btn-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
$btn-disabled-opacity-alt: .65 !default;
$btn-active-box-shadow-alt: inset 0 3px 5px rgba($black-alt, .125) !default;
$btn-link-color-alt: $link-color-alt !default;
$btn-link-hover-color-alt: $link-hover-color-alt !default;
$btn-link-disabled-color-alt: $gray-600-alt !default;
$btn-hover-bg-shade-amount-alt: 15% !default;
$btn-hover-bg-tint-amount-alt: 15% !default;
$btn-hover-border-shade-amount-alt: 20% !default;
$btn-hover-border-tint-amount-alt: 10% !default;
$btn-active-bg-shade-amount-alt: 20% !default;
$btn-active-bg-tint-amount-alt: 20% !default;
$btn-active-border-shade-amount-alt: 25% !default;
$btn-active-border-tint-amount-alt: 10% !default;
// Forms
// ______________________________________
$form-text-color-alt: $text-muted-alt !default;
$form-label-color-alt: null !default;
$input-bg-alt: $gray-800-alt !default;
$input-disabled-bg-alt: $gray-900-alt !default;
$input-disabled-border-color-alt: null !default;
$input-color-alt: $gray-300-alt !default;
$input-border-color-alt: $gray-700-alt !default;
$input-box-shadow-alt: $box-shadow-inset-alt !default;
$input-focus-bg-alt: $input-bg-alt !default;
$input-focus-border-color-alt: tint-color($component-active-bg-alt, 50%) !default;
$input-focus-color-alt: $input-color-alt !default;
$input-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
$input-placeholder-color-alt: mix($gray-600-alt, $gray-700-alt, 50%) !default;
$input-plaintext-color-alt: $body-color-alt !default;
$form-check-label-color-alt: null !default;
$form-check-input-active-filter-alt: brightness(90%) !default; // TODO: test
$form-check-input-bg-alt: $input-bg-alt !default;
$form-check-input-border-alt: 1px solid rgba($white, .25) !default;
$form-check-input-focus-border-alt: $input-focus-border-color-alt !default;
$form-check-input-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
$form-check-input-checked-color-alt: $component-active-color-alt !default;
$form-check-input-checked-bg-color-alt: $component-active-bg-alt !default;
$form-check-input-checked-border-color-alt: $form-check-input-checked-bg-color-alt !default;
$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;
$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;
$form-check-input-indeterminate-color-alt: $component-active-color-alt !default;
$form-check-input-indeterminate-bg-color-alt: $component-active-bg-alt !default;
$form-check-input-indeterminate-border-color-alt: $form-check-input-indeterminate-bg-color-alt !default;
$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;
$form-check-input-disabled-opacity-alt: .5 !default;
$form-check-label-disabled-opacity-alt: $form-check-input-disabled-opacity-alt !default;
$form-check-btn-check-disabled-opacity-alt: $btn-disabled-opacity-alt !default;
$form-switch-color-alt: rgba(255, 255, 255, .25) !default;
$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;
$form-switch-focus-color-alt: $input-focus-border-color-alt !default;
$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;
$form-switch-checked-color-alt: $component-active-color-alt !default;
$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;
$input-group-addon-color-alt: $input-color-alt !default;
$input-group-addon-bg-alt: $gray-800-alt !default;
$input-group-addon-border-color-alt: $input-border-color-alt !default;
$form-select-color-alt: $input-color-alt !default;
$form-select-disabled-color-alt: null !default;
$form-select-bg-alt: $input-bg-alt !default;
$form-select-disabled-bg-alt: $gray-800-alt !default;
$form-select-disabled-border-color-alt: $input-disabled-border-color-alt !default;
$form-select-indicator-color-alt: $gray-200-alt !default;
$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;
$form-select-border-color-alt: $input-border-color-alt !default;
$form-select-box-shadow-alt: $box-shadow-inset-alt !default;
$form-select-focus-border-color-alt: $input-focus-border-color-alt !default;
$form-select-focus-box-shadow-alt: 0 0 0 $form-select-focus-width $input-btn-focus-color-alt !default;
$form-range-track-bg-alt: $gray-700-alt !default;
$form-range-track-box-shadow-alt: $box-shadow-inset-alt !default;
$form-range-thumb-bg-alt: $component-active-bg-alt !default;
$form-range-thumb-border-alt: 0 !default;
$form-range-thumb-box-shadow-alt: 0 .1rem .25rem rgba($black-alt, .1) !default;
$form-range-thumb-focus-box-shadow-alt: 0 0 0 1px $body-bg-alt, $input-focus-box-shadow-alt !default;
$form-range-thumb-active-bg-alt: tint-color($component-active-bg-alt, 70%) !default;
$form-range-thumb-disabled-bg-alt: $gray-500-alt !default;
$form-file-button-color-alt: $input-color-alt !default;
$form-file-button-bg-alt: $input-group-addon-bg-alt !default;
$form-file-button-hover-bg-alt: shade-color($form-file-button-bg-alt, 5%) !default;
$form-floating-label-opacity-alt: .65 !default;
// Form validation
// ______________________________________
$form-feedback-valid-color-alt: $success-alt !default;
$form-feedback-invalid-color-alt: $danger-alt !default;
$form-feedback-icon-valid-color-alt: $form-feedback-valid-color-alt !default;
$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;
$form-feedback-icon-invalid-color-alt: $form-feedback-invalid-color-alt !default;
$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;
$form-validation-states-alt: (
"valid": (
"color": $form-feedback-valid-color-alt,
"icon": $form-feedback-icon-valid-alt
),
"invalid": (
"color": $form-feedback-invalid-color-alt,
"icon": $form-feedback-icon-invalid-alt
)
) !default;
// Navs
// ______________________________________
$nav-link-color-alt: $link-color-alt !default;
$nav-link-hover-color-alt: $link-hover-color-alt !default;
$nav-link-disabled-color-alt: $gray-400-alt !default;
$nav-tabs-border-color-alt: $gray-700-alt !default;
$nav-tabs-link-hover-border-color-alt: $gray-800-alt $gray-800-alt $nav-tabs-border-color-alt !default;
$nav-tabs-link-active-color-alt: $gray-300-alt !default;
$nav-tabs-link-active-bg-alt: $body-bg-alt !default;
$nav-tabs-link-active-border-color-alt: $gray-700-alt $gray-700-alt $nav-tabs-link-active-bg-alt !default;
$nav-pills-link-active-color-alt: $component-active-color-alt !default;
$nav-pills-link-active-bg-alt: $component-active-bg-alt !default;
// Navbar
// ______________________________________ // TODO: revisit colors
$navbar-dark-color-alt: rgba($white-alt, .55) !default;
$navbar-dark-hover-color-alt: rgba($white-alt, .75) !default;
$navbar-dark-active-color-alt: $white-alt !default;
$navbar-dark-disabled-color-alt: rgba($white-alt, .25) !default;
$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;
$navbar-dark-toggler-border-color-alt: rgba($white-alt, .1) !default;
$navbar-light-color-alt: rgba($white-alt, .55) !default;
$navbar-light-hover-color-alt: rgba($white-alt, .7) !default;
$navbar-light-active-color-alt: rgba($white-alt, .9) !default;
$navbar-light-disabled-color-alt: rgba($white-alt, .3) !default;
$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;
$navbar-light-toggler-border-color-alt: rgba($white-alt, .1) !default;
$navbar-light-brand-color-alt: $navbar-light-active-color-alt !default;
$navbar-light-brand-hover-color-alt: $navbar-light-active-color-alt !default;
$navbar-dark-brand-color-alt: $navbar-dark-active-color-alt !default;
$navbar-dark-brand-hover-color-alt: $navbar-dark-active-color-alt !default;
// Dropdowns
// ______________________________________
// Dropdown menu container and contents.
$dropdown-color-alt: $body-color-alt !default;
$dropdown-bg-alt: $black-alt !default;
$dropdown-border-color-alt: rgba($white-alt, .15) !default;
$dropdown-divider-bg-alt: $dropdown-border-color-alt !default;
$dropdown-box-shadow-alt: $box-shadow-alt !default;
$dropdown-link-color-alt: $gray-100 !default;
$dropdown-link-hover-color-alt: shade-color($gray-100, 10%) !default;
$dropdown-link-hover-bg-alt: $gray-800 !default;
$dropdown-link-active-color-alt: $component-active-color-alt !default;
$dropdown-link-active-bg-alt: $component-active-bg-alt !default;
$dropdown-link-disabled-color-alt: $gray-500-alt !default;
$dropdown-header-color-alt: $gray-400-alt !default;
$dropdown-dark-color-alt: $gray-700-alt !default;
$dropdown-dark-bg-alt: $gray-200-alt !default;
$dropdown-dark-border-color-alt: $dropdown-border-color-alt !default;
$dropdown-dark-divider-bg-alt: $dropdown-divider-bg-alt !default;
$dropdown-dark-box-shadow-alt: null !default;
$dropdown-dark-link-color-alt: $dropdown-dark-color-alt !default;
$dropdown-dark-link-hover-color-alt: $black-alt !default;
$dropdown-dark-link-hover-bg-alt: rgba($black-alt, .15) !default;
$dropdown-dark-link-active-color-alt: $dropdown-link-active-color-alt !default;
$dropdown-dark-link-active-bg-alt: $dropdown-link-active-bg-alt !default;
$dropdown-dark-link-disabled-color-alt: $gray-500-alt !default;
$dropdown-dark-header-color-alt: $gray-500-alt !default;
// Pagination
// ______________________________________
$pagination-color-alt: $link-color-alt !default;
$pagination-bg-alt: $gray-800-alt !default;
$pagination-border-color-alt: $gray-700-alt !default;
$pagination-focus-color-alt: $link-hover-color-alt !default;
$pagination-focus-bg-alt: $gray-800-alt !default;
$pagination-focus-box-shadow-alt: $input-btn-focus-box-shadow-alt !default;
$pagination-focus-outline-alt: 0 !default; // ???
$pagination-hover-color-alt: $link-hover-color-alt !default;
$pagination-hover-bg-alt: $gray-700-alt !default;
$pagination-hover-border-color-alt: mix($gray-700-alt, $gray-700-alt, 50%) !default;
$pagination-active-color-alt: $component-active-color-alt !default;
$pagination-active-bg-alt: $component-active-bg-alt !default;
$pagination-active-border-color-alt: $pagination-active-bg-alt !default;
$pagination-disabled-color-alt: mix($gray-600-alt, $gray-700-alt, 50%) !default;
$pagination-disabled-bg-alt: $gray-900-alt !default;
$pagination-disabled-border-color-alt: $gray-700-alt !default;
// Cards
// ______________________________________
$card-border-color-alt: rgba($white-alt, .125) !default;
$card-cap-bg-alt: rgba($white-alt, .03) !default;
$card-cap-color-alt: null !default;
$card-color-alt: null !default;
$card-bg-alt: $gray-900-alt !default;
// Accordion
// ______________________________________
$accordion-color-alt: $body-color-alt !default;
$accordion-bg-alt: $body-bg-alt !default;
$accordion-border-color-alt: rgba($white-alt, .125) !default;
$accordion-button-color-alt: $accordion-color-alt !default;
$accordion-button-bg-alt: $accordion-bg-alt !default;
$accordion-button-active-bg-alt: shade-color($component-active-bg-alt, 50%) !default;
$accordion-button-active-color-alt: tint-color($primary-alt, 40%) !default;
$accordion-button-focus-border-color-alt: $input-focus-border-color-alt !default;
$accordion-button-focus-box-shadow-alt: $btn-focus-box-shadow-alt !default;
$accordion-icon-color-alt: $accordion-color-alt !default;
$accordion-icon-active-color-alt: $accordion-button-active-color-alt !default;
$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;
$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;
// Tooltips
// ______________________________________
$tooltip-color-alt: $black-alt !default;
$tooltip-bg-alt: $white-alt !default;
$tooltip-opacity-alt: .9 !default;
$tooltip-arrow-color-alt: $tooltip-bg-alt !default;
$form-feedback-tooltip-opacity-alt: $tooltip-opacity-alt !default;
// Popovers
// ______________________________________
$popover-bg-alt: $black-alt !default;
$popover-border-color-alt: rgba($white-alt, .2) !default;
$popover-box-shadow-alt: $box-shadow-alt !default;
$popover-header-bg-alt: tint-color($popover-bg-alt, 6%) !default;
$popover-header-color-alt: $headings-color-alt !default;
$popover-body-color-alt: $body-color-alt !default;
$popover-arrow-color-alt: $popover-bg-alt !default;
$popover-arrow-outer-color-alt: fade-in($popover-border-color-alt, .05) !default;
// Toasts
// ______________________________________
$toast-color-alt: null !default;
$toast-background-color-alt: rgba($black-alt, .85) !default;
$toast-border-color-alt: rgba(255, 255, 255, .1) !default;
$toast-box-shadow-alt: $box-shadow-alt !default;
$toast-header-color-alt: $gray-400-alt !default;
$toast-header-background-color-alt: rgba($black-alt, .85) !default;
$toast-header-border-color-alt: rgba(255, 255, 255, .05) !default;
// Badges
// ______________________________________
$badge-color-alt: $white-alt !default;
// Modals
// ______________________________________
$modal-content-color-alt: null !default;
$modal-content-bg-alt: mix($gray-800-alt, $gray-900-alt, 50%) !default;
$modal-content-border-color-alt: rgba($white-alt, .2) !default;
$modal-content-box-shadow-xs-alt: $box-shadow-sm-alt !default;
$modal-content-box-shadow-sm-up-alt: $box-shadow-alt !default;
$modal-backdrop-bg-alt: $black-alt !default;
$modal-backdrop-opacity-alt: .85 !default;
$modal-header-border-color-alt: $border-color-alt !default;
$modal-footer-border-color-alt: $modal-header-border-color-alt !default;
// Alerts
// ______________________________________
// Define alert colors, border radius, and padding.
$alert-bg-scale-alt: 50% !default;
$alert-border-scale-alt: 40% !default;
$alert-color-scale-alt: -30% !default;
// Progress bars
// ______________________________________
$progress-bg-alt: $gray-800-alt !default;
$progress-box-shadow-alt: $box-shadow-inset-alt !default;
$progress-bar-color-alt: $black-alt !default;
$progress-bar-bg-alt: $primary-alt !default;
// List group
// ______________________________________
$list-group-color-alt: $gray-100-alt !default;
$list-group-bg-alt: $gray-900-alt !default; // $white !default;
$list-group-border-color-alt: rgba($white-alt, .125) !default;
$list-group-item-bg-scale-alt: 50% !default;
$list-group-item-color-scale-alt: -30% !default;
$list-group-hover-bg-alt: mix($gray-800-alt, $gray-900-alt, 50%) !default;
$list-group-active-color-alt: $component-active-color-alt !default;
$list-group-active-bg-alt: $component-active-bg-alt !default;
$list-group-active-border-color-alt: $list-group-active-bg-alt !default;
$list-group-disabled-color-alt: $gray-400-alt !default;
$list-group-disabled-bg-alt: $list-group-bg-alt !default;
$list-group-action-color-alt: $gray-300-alt !default;
$list-group-action-hover-color-alt: $list-group-action-color-alt !default;
$list-group-action-active-color-alt: $body-color-alt !default;
$list-group-action-active-bg-alt: $gray-800-alt !default;
// Image thumbnails
// ______________________________________
$thumbnail-bg-alt: $body-bg-alt !default;
$thumbnail-border-color-alt: $gray-700-alt !default;
$thumbnail-box-shadow-alt: $box-shadow-sm-alt !default;
// Figures
// ______________________________________
$figure-caption-color-alt: $gray-400-alt !default;
// Breadcrumbs
// ______________________________________
$breadcrumb-bg-alt: $gray-800-alt !default; // null !default;
$breadcrumb-divider-color-alt: $gray-400-alt !default;
$breadcrumb-active-color-alt: $gray-400-alt !default;
// Carousel
// ______________________________________
$carousel-control-color-alt: $white-alt !default;
$carousel-control-opacity-alt: .5 !default;
$carousel-control-hover-opacity-alt: .9 !default;
$carousel-indicator-opacity-alt: .5 !default;
$carousel-indicator-active-bg-alt: $black-alt !default;
$carousel-indicator-active-opacity-alt: 1 !default;
$carousel-caption-color-alt: $black-alt !default;
$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;
$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;
$carousel-dark-indicator-active-bg-alt: $white-alt !default;
$carousel-dark-caption-color-alt: $white-alt !default;
$carousel-dark-control-icon-filter-alt: invert(1) grayscale(100) !default;
// Spinners
// ______________________________________
// ...nada
// Close
// ______________________________________
$btn-close-color-alt: $white-alt !default;
$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;
$btn-close-focus-shadow-alt: $input-btn-focus-box-shadow-alt !default;
$btn-close-opacity-alt: .5 !default;
$btn-close-hover-opacity-alt: .75 !default;
$btn-close-focus-opacity-alt: 1 !default;
$btn-close-disabled-opacity-alt: .25 !default;
$btn-close-white-filter-alt: invert(1) grayscale(100%) brightness(200%) !default;
// Offcanvas
// ______________________________________
$offcanvas-border-color-alt: $modal-content-border-color-alt !default;
$offcanvas-bg-color-alt: $modal-content-bg-alt !default;
$offcanvas-color-alt: $modal-content-color-alt !default;
$offcanvas-box-shadow-alt: $modal-content-box-shadow-xs-alt !default;
// Code
// ______________________________________
$code-color-alt: $teal-alt !default;
$kbd-color-alt: $gray-100-alt !default;
$kbd-bg-alt: $gray-800-alt !default;
$pre-color-alt: $gray-100-alt !default;
// Unique to Dark!!
// **************************************
// Text Selection
// ______________________________________
$selection-color-alt: $gray-200-alt !default;
$selection-bg-alt: rgba($cyan-alt, .5) !default;

15
scss/dark/adminlte-dark.scss Normal file
View File

@ -0,0 +1,15 @@
// Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0
// Dark mode Enable using prefers-color-scheme
$enable-dark-mode: true;
// AdminLTE
// ---------------------------------------------------
@import "../adminlte";
// stylelint-disable no-invalid-position-at-import-rule
@include color-scheme-alt(alternative-color-scheme($default-color-scheme)) {
@import "../parts/dark";
}
// Additional Global Utilities
@import "../dark/bootstrap/utilities/api-all";

51
scss/dark/bootstrap/_accordion.scss Normal file
View File

@ -0,0 +1,51 @@
// Base styles
.accordion-button {
color: $accordion-button-color-alt;
background-color: $accordion-button-bg-alt;
&:not(.collapsed) {
color: $accordion-button-active-color-alt;
background-color: $accordion-button-active-bg-alt;
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color-alt;
&::after {
background-image: escape-svg($accordion-button-active-icon-alt);
}
}
// Accordion icon
&::after {
background-image: escape-svg($accordion-button-icon-alt);
}
&:hover {
z-index: 2;
}
&:focus {
border-color: $accordion-button-focus-border-color-alt;
box-shadow: $accordion-button-focus-box-shadow-alt;
}
}
.accordion-item {
background-color: $accordion-bg-alt;
border: $accordion-border-width solid $accordion-border-color-alt;
}
// Flush accordion items
.accordion-flush {
.accordion-collapse {
border-width: 0;
}
.accordion-item {
border-right: 0;
border-left: 0;
&:first-child { border-top: 0; }
&:last-child { border-bottom: 0; }
}
}

25
scss/dark/bootstrap/_alert.scss Normal file
View File

@ -0,0 +1,25 @@
// Base styles
// NOT NEEDED
// .alert {
// border: $alert-border-width solid transparent;
// }
// Headings for larger alerts
.alert-heading {
color: inherit;
}
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors-alt {
$alert-background-alt: shift-color($value, $alert-bg-scale-alt);
$alert-border-alt: shift-color($value, $alert-border-scale-alt);
$alert-color-alt: shift-color($value, $alert-color-scale-alt);
@if (contrast-ratio($alert-background-alt, $alert-color-alt) < $min-contrast-ratio-alt) {
$alert-color-alt: mix($value, color-contrast($alert-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($alert-color-scale-alt));
}
.alert-#{$state} {
@include alert-variant($alert-background-alt, $alert-border-alt, $alert-color-alt);
}
}

7
scss/dark/bootstrap/_badge.scss Normal file
View File

@ -0,0 +1,7 @@
// Base class
.badge {
color: $badge-color-alt;
// THIS DOES NOTHING
// @include gradient-bg();
}

20
scss/dark/bootstrap/_breadcrumb.scss Normal file
View File

@ -0,0 +1,20 @@
.breadcrumb {
background-color: $breadcrumb-bg-alt;
}
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding-x;
&::before {
color: $breadcrumb-divider-color-alt;
// TODO: DO I NEED THIS?
// content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
}
}
&.active {
color: $breadcrumb-active-color-alt;
}
}

9
scss/dark/bootstrap/_button-group.scss Normal file
View File

@ -0,0 +1,9 @@
.btn-group.show .dropdown-toggle {
@include box-shadow($btn-active-box-shadow-alt);
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
}
}

65
scss/dark/bootstrap/_buttons.scss Normal file
View File

@ -0,0 +1,65 @@
// Base styles
.btn {
color: $body-color-alt;
background-color: transparent;
border: $btn-border-width solid transparent;
&:hover {
color: $body-color-alt;
}
.btn-check:focus + &,
&:focus {
box-shadow: $btn-focus-box-shadow-alt;
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active {
@include box-shadow($btn-active-box-shadow-alt);
&:focus {
@include box-shadow($btn-focus-box-shadow-alt, $btn-active-box-shadow-alt);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
opacity: $btn-disabled-opacity-alt;
@include box-shadow(none);
}
}
// Alternate buttons
@each $color, $value in $theme-colors-alt {
.btn-#{$color} {
@include button-variant-alt($value, $value);
}
}
@each $color, $value in $theme-colors-alt {
.btn-outline-#{$color} {
@include button-outline-variant-alt($value);
}
}
// Link buttons
// Make a button look and behave like a link
.btn-link {
color: $btn-link-color-alt;
&:hover {
color: $btn-link-hover-color-alt;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color-alt;
}
}

35
scss/dark/bootstrap/_card.scss Normal file
View File

@ -0,0 +1,35 @@
// Base styles
.card {
background-color: $card-bg-alt;
border: $card-border-width solid $card-border-color-alt;
}
.card-body {
color: $card-color-alt;
}
// Optional textual caps
.card-header {
color: $card-cap-color-alt;
background-color: $card-cap-bg-alt;
border-bottom: $card-border-width solid $card-border-color-alt;
}
.card-footer {
color: $card-cap-color-alt;
background-color: $card-cap-bg-alt;
border-top: $card-border-width solid $card-border-color-alt;
}
// Header navs
.card-header-tabs {
@if $nav-tabs-link-active-bg != $card-bg {
.nav-link.active {
background-color: $card-bg-alt;
border-bottom-color: $card-bg-alt;
}
}
}

64
scss/dark/bootstrap/_carousel.scss Normal file
View File

@ -0,0 +1,64 @@
// Left/right controls for nav
.carousel-control-prev,
.carousel-control-next {
color: $carousel-control-color-alt;
opacity: $carousel-control-opacity-alt;
// Hover/focus state
&:hover,
&:focus {
color: $carousel-control-color-alt;
opacity: $carousel-control-hover-opacity-alt;
}
}
.carousel-control-prev {
background-image: if($enable-gradients, linear-gradient(90deg, rgba($white-alt, .25), rgba($white-alt, .001)), null);
}
.carousel-control-next {
background-image: if($enable-gradients, linear-gradient(270deg, rgba($white, .25), rgba($white, .001)), null);
}
// Icons for within
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg-alt);
}
.carousel-control-next-icon {
background-image: escape-svg($carousel-control-next-icon-bg-alt);
}
// Optional indicator pips/controls
.carousel-indicators {
[data-bs-target] {
background-color: $carousel-indicator-active-bg-alt;
opacity: $carousel-indicator-opacity-alt;
}
.active {
opacity: $carousel-indicator-active-opacity-alt;
}
}
// Optional captions
.carousel-caption {
color: $carousel-caption-color-alt;
}
// Dark mode carousel
.carousel-dark {
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter-alt;
}
.carousel-indicators [data-bs-target] {
background-color: $carousel-dark-indicator-active-bg-alt;
}
.carousel-caption {
color: $carousel-dark-caption-color-alt;
}
}

26
scss/dark/bootstrap/_close.scss Normal file
View File

@ -0,0 +1,26 @@
.btn-close {
color: $btn-close-color-alt;
background: transparent escape-svg($btn-close-bg-alt) center / $btn-close-width auto no-repeat; // include transparent for button elements
opacity: $btn-close-opacity-alt;
// Override <a>'s hover style
&:hover {
color: $btn-close-color-alt;
opacity: $btn-close-hover-opacity-alt;
}
&:focus {
box-shadow: $btn-close-focus-shadow-alt;
opacity: $btn-close-focus-opacity-alt;
}
&:disabled,
&.disabled {
opacity: $btn-close-disabled-opacity-alt;
}
}
.btn-close-white {
filter: $btn-close-white-filter-alt;
}

3
scss/dark/bootstrap/_color-scheme.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
@include color-scheme-property($default-color-scheme, true);
}

7
scss/dark/bootstrap/_dark.scss Normal file
View File

@ -0,0 +1,7 @@
// from Chris Coyier on Jul 26, 2016: https://css-tricks.com/overriding-the-default-text-selection-color-with-css/
body::selection {
color: $selection-color-alt;
background: $selection-bg-alt;
}

92
scss/dark/bootstrap/_dropdown.scss Normal file
View File

@ -0,0 +1,92 @@
// The dropdown menu
.dropdown-menu {
color: $dropdown-color-alt;
background-color: $dropdown-bg-alt;
border: $dropdown-border-width solid $dropdown-border-color-alt;
@include box-shadow($dropdown-box-shadow-alt);
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
border-top: 1px solid $dropdown-divider-bg-alt;
}
// Links, buttons, and more within the dropdown menu
.dropdown-item {
color: $dropdown-link-color-alt;
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
&:hover,
&:focus {
color: $dropdown-link-hover-color-alt;
@include gradient-bg($dropdown-link-hover-bg-alt);
}
&.active,
&:active {
color: $dropdown-link-active-color-alt;
@include gradient-bg($dropdown-link-active-bg-alt);
}
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color-alt;
background-color: transparent;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
}
}
// Dropdown section headers
.dropdown-header {
color: $dropdown-header-color-alt;
}
// Dropdown text
.dropdown-item-text {
color: $dropdown-link-color-alt;
}
// Dark dropdowns
.dropdown-menu-dark {
color: $dropdown-dark-color-alt;
background-color: $dropdown-dark-bg-alt;
border-color: $dropdown-dark-border-color-alt;
@include box-shadow($dropdown-dark-box-shadow-alt);
.dropdown-item {
color: $dropdown-dark-link-color-alt;
&:hover,
&:focus {
color: $dropdown-dark-link-hover-color-alt;
@include gradient-bg($dropdown-dark-link-hover-bg-alt);
}
&.active,
&:active {
color: $dropdown-dark-link-active-color-alt;
@include gradient-bg($dropdown-dark-link-active-bg-alt);
}
&.disabled,
&:disabled {
color: $dropdown-dark-link-disabled-color-alt;
}
}
.dropdown-divider {
border-color: $dropdown-dark-divider-bg-alt;
}
.dropdown-item-text {
color: $dropdown-dark-link-color-alt;
}
.dropdown-header {
color: $dropdown-dark-header-color-alt;
}
}

9
scss/dark/bootstrap/_forms.scss Normal file
View File

@ -0,0 +1,9 @@
@import "forms/labels";
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/form-range";
@import "forms/floating-labels";
@import "forms/input-group";
@import "forms/validation";

7
scss/dark/bootstrap/_helpers.scss Normal file
View File

@ -0,0 +1,7 @@
// @import "helpers/clearfix"; // no colors here
@import "helpers/colored-links";
// @import "helpers/ratio"; // no colors here
// @import "helpers/position"; // no colors here
// @import "helpers/visually-hidden"; // no colors here
// @import "helpers/stretched-link"; // no colors here
// @import "helpers/text-truncation"; // no colors here

14
scss/dark/bootstrap/_images.scss Normal file
View File

@ -0,0 +1,14 @@
// Image thumbnails
.img-thumbnail {
background-color: $thumbnail-bg-alt;
border: $thumbnail-border-width solid $thumbnail-border-color-alt;
@include box-shadow($thumbnail-box-shadow-alt);
}
//
// Figures
//
.figure-caption {
color: $figure-caption-color-alt;
}

63
scss/dark/bootstrap/_list-group.scss Normal file
View File

@ -0,0 +1,63 @@
// Interactive list items
.list-group-item-action {
color: $list-group-action-color-alt;
// Hover state
&:hover,
&:focus {
color: $list-group-action-hover-color-alt;
background-color: $list-group-hover-bg-alt;
}
&:active {
color: $list-group-action-active-color-alt;
background-color: $list-group-action-active-bg-alt;
}
}
// Individual list items
.list-group-item {
color: $list-group-color-alt;
background-color: $list-group-bg-alt;
border: $list-group-border-width solid $list-group-border-color-alt;
&.disabled,
&:disabled {
color: $list-group-disabled-color-alt;
background-color: $list-group-disabled-bg-alt;
}
// Include both here for `<a>`s and `<button>`s
&.active {
color: $list-group-active-color-alt;
background-color: $list-group-active-bg-alt;
border-color: $list-group-active-border-color-alt;
}
}
// Flush list items
.list-group-flush {
> .list-group-item {
border-width: 0 0 $list-group-border-width; // needed for nightshade variants
&:last-child {
border-bottom-width: 0;
}
}
}
// List group contextual variants
@each $state, $value in $theme-colors-alt {
$list-group-background-alt: shift-color($value, $list-group-item-bg-scale-alt);
$list-group-color-alt: shift-color($value, $list-group-item-color-scale-alt);
@if (contrast-ratio($list-group-background-alt, $list-group-color-alt) < $min-contrast-ratio-alt) {
$list-group-color-alt: mix($value, color-contrast($list-group-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($list-group-item-color-scale-alt));
}
@include list-group-item-variant($state, $list-group-background-alt, $list-group-color-alt);
}

4
scss/dark/bootstrap/_mixins.scss Normal file
View File

@ -0,0 +1,4 @@
@import "mixins/color-scheme";
@import "mixins/buttons";
@import "mixins/forms";
@import "mixins/table-variants";

36
scss/dark/bootstrap/_modal.scss Normal file
View File

@ -0,0 +1,36 @@
// Actual modal
.modal-content {
color: $modal-content-color-alt;
background-color: $modal-content-bg-alt;
border: $modal-content-border-width solid $modal-content-border-color-alt;
@include box-shadow($modal-content-box-shadow-xs-alt);
}
// Modal background
.modal-backdrop {
background-color: $modal-backdrop-bg-alt;
// Fade for backdrop
&.fade { opacity: 0; }
&.show { opacity: $modal-backdrop-opacity-alt; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
border-bottom: $modal-header-border-width solid $modal-header-border-color-alt;
}
// Footer (for actions)
.modal-footer {
border-top: $modal-footer-border-width solid $modal-footer-border-color-alt;
}
// Scale up the modal
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-content {
@include box-shadow($modal-content-box-shadow-sm-up-alt);
}
}

64
scss/dark/bootstrap/_nav.scss Normal file
View File

@ -0,0 +1,64 @@
// Base class
.nav-link {
color: $nav-link-color-alt;
&:hover,
&:focus {
color: $nav-link-hover-color-alt;
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color-alt;
}
}
//
// Tabs
//
.nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color-alt;
.nav-link {
// background: none;
border: $nav-tabs-border-width solid transparent;
&:hover,
&:focus {
border-color: $nav-tabs-link-hover-border-color-alt;
}
&.disabled {
color: $nav-link-disabled-color-alt;
background-color: transparent;
border-color: transparent;
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: $nav-tabs-link-active-color-alt;
background-color: $nav-tabs-link-active-bg-alt;
border-color: $nav-tabs-link-active-border-color-alt;
}
}
//
// Pills
//
.nav-pills {
// .nav-link {
// background: none;
// border: 0;
// }
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color-alt;
@include gradient-bg($nav-pills-link-active-bg-alt);
}
}

117
scss/dark/bootstrap/_navbar.scss Normal file
View File

@ -0,0 +1,117 @@
// Navbar
// THIS DOES NOTHING
// .navbar {
// @include gradient-bg();
// }
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
// &:focus {
// box-shadow: 0 0 0 $navbar-toggler-focus-width;
// }
}
// Navbar themes
.navbar-light {
.navbar-brand {
color: $navbar-light-brand-color-alt;
&:hover,
&:focus {
color: $navbar-light-brand-hover-color-alt;
}
}
.navbar-nav {
.nav-link {
color: $navbar-light-color-alt;
&:hover,
&:focus {
color: $navbar-light-hover-color-alt;
}
&.disabled {
color: $navbar-light-disabled-color-alt;
}
}
.show > .nav-link,
.nav-link.active {
color: $navbar-light-active-color-alt;
}
}
.navbar-toggler {
color: $navbar-light-color-alt;
border-color: $navbar-light-toggler-border-color-alt;
}
.navbar-toggler-icon {
background-image: escape-svg($navbar-light-toggler-icon-bg-alt);
}
.navbar-text {
color: $navbar-light-color-alt;
a,
a:hover,
a:focus {
color: $navbar-light-active-color-alt;
}
}
}
// White links against a dark background
.navbar-dark {
.navbar-brand {
color: $navbar-dark-brand-color-alt;
&:hover,
&:focus {
color: $navbar-dark-brand-hover-color-alt;
}
}
.navbar-nav {
.nav-link {
color: $navbar-dark-color-alt;
&:hover,
&:focus {
color: $navbar-dark-hover-color-alt;
}
&.disabled {
color: $navbar-dark-disabled-color-alt;
}
}
.show > .nav-link,
.nav-link.active {
color: $navbar-dark-active-color-alt;
}
}
.navbar-toggler {
color: $navbar-dark-color-alt;
border-color: $navbar-dark-toggler-border-color-alt;
}
.navbar-toggler-icon {
background-image: escape-svg($navbar-dark-toggler-icon-bg-alt);
}
.navbar-text {
color: $navbar-dark-color-alt;
a,
a:hover,
a:focus {
color: $navbar-dark-active-color-alt;
}
}
}

22
scss/dark/bootstrap/_offcanvas.scss Normal file
View File

@ -0,0 +1,22 @@
.offcanvas {
color: $offcanvas-color-alt;
background-color: $offcanvas-bg-color-alt;
@include box-shadow($offcanvas-box-shadow-alt);
}
.offcanvas-start {
border-right: $offcanvas-border-width solid $offcanvas-border-color-alt;
}
.offcanvas-end {
border-left: $offcanvas-border-width solid $offcanvas-border-color-alt;
}
.offcanvas-top {
border-bottom: $offcanvas-border-width solid $offcanvas-border-color-alt;
}
.offcanvas-bottom {
border-top: $offcanvas-border-width solid $offcanvas-border-color-alt;
}

33
scss/dark/bootstrap/_pagination.scss Normal file
View File

@ -0,0 +1,33 @@
.page-link {
color: $pagination-color-alt;
background-color: $pagination-bg-alt;
border: $pagination-border-width solid $pagination-border-color-alt;
&:hover {
color: $pagination-hover-color-alt;
background-color: $pagination-hover-bg-alt;
border-color: $pagination-hover-border-color-alt;
}
&:focus {
color: $pagination-focus-color-alt;
background-color: $pagination-focus-bg-alt;
outline: $pagination-focus-outline-alt;
box-shadow: $pagination-focus-box-shadow-alt;
}
}
.page-item {
&.active .page-link {
color: $pagination-active-color-alt;
@include gradient-bg($pagination-active-bg-alt);
border-color: $pagination-active-border-color-alt;
}
&.disabled .page-link {
color: $pagination-disabled-color-alt;
background-color: $pagination-disabled-bg-alt;
border-color: $pagination-disabled-border-color-alt;
}
}

50
scss/dark/bootstrap/_patch.scss Normal file
View File

@ -0,0 +1,50 @@
//
// Patch some items missing in BS5
// @see: https://getbootstrap.com/docs/5.0/utilities/api/
//
// @import "functions";
// @import "variables";
// @import "utilities";
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
$colors,
(
"black": $black
)
);
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
$utilities,
(
"border-color": map-merge(
map-get($utilities, "border-color"),
(
values: map-merge(
map-get(map-get($utilities, "border-color"), "values"),
("black": $black),
),
),
),
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
("black": $black),
),
),
),
"background-color": map-merge(
map-get($utilities, "background-color"),
(
values: map-merge(
map-get(map-get($utilities, "background-color"), "values"),
("black": $black),
),
),
),
)
);

82
scss/dark/bootstrap/_popover.scss Normal file
View File

@ -0,0 +1,82 @@
.popover {
background-color: $popover-bg-alt;
border: $popover-border-width solid $popover-border-color-alt;
@include box-shadow($popover-box-shadow-alt);
.popover-arrow {
&::before,
&::after {
border-color: transparent;
border-style: solid;
}
}
}
.bs-popover-top,
.bs-popover-auto[data-popper-placement^="top"] { // see note below
> .popover-arrow {
&::before {
border-top-color: $popover-arrow-outer-color-alt;
}
&::after {
border-top-color: $popover-arrow-color-alt;
}
}
}
.bs-popover-end,
.bs-popover-auto[data-popper-placement^="right"] { // see note below
> .popover-arrow {
&::before {
border-right-color: $popover-arrow-outer-color-alt;
}
&::after {
border-right-color: $popover-arrow-color-alt;
}
}
}
.bs-popover-bottom,
.bs-popover-auto[data-popper-placement^="bottom"] { // see note below
> .popover-arrow {
&::before {
border-bottom-color: $popover-arrow-outer-color-alt;
}
&::after {
border-bottom-color: $popover-arrow-color-alt;
}
}
.popover-header::before {
border-bottom: $popover-border-width solid $popover-header-bg-alt;
}
}
.bs-popover-start,
.bs-popover-auto[data-popper-placement^="left"] { // see note below
> .popover-arrow {
&::before {
border-left-color: $popover-arrow-outer-color-alt;
}
&::after {
border-left-color: $popover-arrow-color-alt;
}
}
}
// ***NOTE***: Do not use @extend as that would extend the base class and the dark class
// Offset the popover to account for the popover arrow
.popover-header {
color: $popover-header-color-alt;
background-color: $popover-header-bg-alt;
border-bottom: $popover-border-width solid shade-color($popover-header-bg-alt, 10%);
}
.popover-body {
color: $popover-body-color-alt;
}

15
scss/dark/bootstrap/_progress.scss Normal file
View File

@ -0,0 +1,15 @@
.progress {
background-color: $progress-bg-alt;
@include box-shadow($progress-box-shadow-alt);
}
.progress-bar {
color: $progress-bar-color-alt;
background-color: $progress-bar-bg-alt;
}
.progress-bar-striped {
// THIS DOES NOTHING
// @include gradient-striped();
}

91
scss/dark/bootstrap/_reboot.scss Normal file
View File

@ -0,0 +1,91 @@
// xxxstylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css ... (see core `_reboot.scss` file)
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Body
body {
color: $body-color-alt;
background-color: $body-bg-alt; // 2
}
// Content grouping
hr {
color: $hr-color-alt; // 1
// background-color: currentColor;
opacity: $hr-opacity-alt;
}
// Typography
%heading {
color: $headings-color-alt;
}
// Mark
mark {
background-color: $mark-bg-alt;
}
// Links
a {
color: $link-color-alt;
&:hover {
color: $link-hover-color-alt;
}
}
a:not([href]):not([class]) {
&,
&:hover {
color: inherit;
}
}
// Code
pre {
color: $pre-color-alt;
// Account for some code outputs that place code tags in pre tags
code {
color: inherit;
}
}
code {
color: $code-color-alt;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
}
kbd {
color: $kbd-color-alt;
background-color: $kbd-bg-alt;
}
// Tables
//
// Prevent double borders
caption {
color: $table-caption-color-alt;
}

12
scss/dark/bootstrap/_root.scss Normal file
View File

@ -0,0 +1,12 @@
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors-alt {
--#{$variable-prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors-alt {
--#{$variable-prefix}#{$color}: #{$value};
}
--#{$variable-prefix}gradient: #{$gradient-alt};
}

65
scss/dark/bootstrap/_tables.scss Normal file
View File

@ -0,0 +1,65 @@
//
// Basic Bootstrap table
//
.table {
--#{$variable-prefix}table-bg: #{$table-bg-alt};
--#{$variable-prefix}table-striped-color: #{$table-striped-color-alt};
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg-alt};
--#{$variable-prefix}table-active-color: #{$table-active-color-alt};
--#{$variable-prefix}table-active-bg: #{$table-active-bg-alt};
--#{$variable-prefix}table-hover-color: #{$table-hover-color-alt};
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg-alt};
color: $table-color-alt;
border-color: $table-border-color-alt;
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
// Target th & td
// xstylelint-disable-next-line selector-max-universal
// > :not(caption) > * > * {
// background-color: var(--#{$variable-prefix}table-bg);
// box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
// }
// Highlight border color between thead, tbody and tfoot.
// > :not(:last-child) > :last-child > * {
// border-bottom-color: $table-group-separator-color-alt;
// }
}
// Zebra-striping
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
// .table-striped {
// > tbody > tr:nth-of-type(#{$table-striped-order}) {
// --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
// color: var(--#{$variable-prefix}table-striped-color);
// }
// }
// Active table
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
// .table-active {
// --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
// color: var(--#{$variable-prefix}table-active-color);
// }
// Hover effect
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
// .table-hover {
// > tbody > tr:hover {
// --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
// color: var(--#{$variable-prefix}table-hover-color);
// }
// }
// Table variants
@each $color, $value in $table-variants-alt {
@include table-variant-alt($color, $value);
}

17
scss/dark/bootstrap/_toasts.scss Normal file
View File

@ -0,0 +1,17 @@
.toast {
color: $toast-color-alt;
background-color: $toast-background-color-alt;
border: $toast-border-width solid $toast-border-color-alt;
box-shadow: $toast-box-shadow-alt;
// DO I NEED THIS?
// &:not(.showing):not(.show) {
// opacity: 0;
// }
}
.toast-header {
color: $toast-header-color-alt;
background-color: $toast-header-background-color-alt;
border-bottom: $toast-border-width solid $toast-header-border-color-alt;
}

50
scss/dark/bootstrap/_tooltip.scss Normal file
View File

@ -0,0 +1,50 @@
// Base class
.tooltip {
opacity: 0;
&.show { opacity: $tooltip-opacity-alt; }
}
.bs-tooltip-top,
.bs-tooltip-auto[data-popper-placement^="top"] {
.tooltip-arrow {
&::before {
border-top-color: $tooltip-arrow-color-alt;
}
}
}
.bs-tooltip-end,
.bs-tooltip-auto[data-popper-placement^="right"] {
.tooltip-arrow {
&::before {
border-right-color: $tooltip-arrow-color-alt;
}
}
}
.bs-tooltip-bottom,
.bs-tooltip-auto[data-popper-placement^="bottom"] {
.tooltip-arrow {
&::before {
border-bottom-color: $tooltip-arrow-color-alt;
}
}
}
.bs-tooltip-start,
.bs-tooltip-auto[data-popper-placement^="left"] {
.tooltip-arrow {
&::before {
border-left-color: $tooltip-arrow-color-alt;
}
}
}
// ***NOTE***: Do not use @extend as that would extend the base class and the dark class
// Wrapper for the tooltip content
.tooltip-inner {
color: $tooltip-color-alt;
background-color: $tooltip-bg-alt;
}

7
scss/dark/bootstrap/_type.scss Normal file
View File

@ -0,0 +1,7 @@
//
// Misc
//
.blockquote-footer {
color: $blockquote-footer-color-alt;
}

95
scss/dark/bootstrap/_utilities.scss Normal file
View File

@ -0,0 +1,95 @@
// Utilities
$utilities-alt: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities-alt: map-merge(
(
"shadow": (
property: box-shadow,
class: shadow,
values: (
null: $box-shadow-alt,
sm: $box-shadow-sm-alt,
lg: $box-shadow-lg-alt,
)
),
"border": (
property: border,
values: (
null: $border-width solid $border-color-alt,
)
),
"border-top": (
property: border-top,
values: (
null: $border-width solid $border-color-alt,
)
),
"border-end": (
property: border-right,
class: border-end,
values: (
null: $border-width solid $border-color-alt,
)
),
"border-bottom": (
property: border-bottom,
values: (
null: $border-width solid $border-color-alt,
)
),
"border-start": (
property: border-left,
class: border-start,
values: (
null: $border-width solid $border-color-alt,
)
),
"border-color": (
property: border-color,
class: border,
values: map-merge(
$theme-colors-alt,
(
"white": $white-alt,
"black": $black-alt
)
)
),
// Text
// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
// "gradient": (
// property: background-image,
// class: bg,
// values: (gradient: var(--#{$variable-prefix}gradient))
// )
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors-alt,
(
"body": $body-color-alt,
"muted": $text-muted-alt,
"white": $white-alt,
"black": $black-alt,
"white-50": rgba($white-alt, .5),
"black-50": rgba($black-alt, .5)
)
)
),
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors-alt,
(
"body": $body-bg-alt,
"white": $white-alt,
"black": $black-alt
)
)
)
),
$utilities-alt
);

409
scss/dark/bootstrap/_variables-map-alt-to-core.scss Normal file
View File

@ -0,0 +1,409 @@
// ===========================================================================
// ||| This file is auto generated. Do not Edit. |||
// ||| Remember to run `npm run map-dark-vars` to re-map SCSS variables. |||
// ===========================================================================
// !! Don't remove the next 2 lines
// stylelint-disable
// fusv-disable
// --- Color system ---
$white: $white-alt;
$gray-100: $gray-100-alt;
$gray-200: $gray-200-alt;
$gray-300: $gray-300-alt;
$gray-400: $gray-400-alt;
$gray-500: $gray-500-alt;
$gray-600: $gray-600-alt;
$gray-700: $gray-700-alt;
$gray-800: $gray-800-alt;
$gray-900: $gray-900-alt;
$black: $black-alt;
$grays: $grays-alt;
$blue: $blue-alt;
$indigo: $indigo-alt;
$purple: $purple-alt;
$pink: $pink-alt;
$red: $red-alt;
$orange: $orange-alt;
$yellow: $yellow-alt;
$green: $green-alt;
$teal: $teal-alt;
$cyan: $cyan-alt;
$colors: $colors-alt;
$primary: $primary-alt;
$secondary: $secondary-alt;
$success: $success-alt;
$info: $info-alt;
$warning: $warning-alt;
$danger: $danger-alt;
$light: $light-alt;
$dark: $dark-alt;
$theme-colors: $theme-colors-alt;
$min-contrast-ratio: $min-contrast-ratio-alt;
$color-contrast-dark: $color-contrast-dark-alt;
$color-contrast-light: $color-contrast-light-alt;
// --- Gradient ---
$gradient: $gradient-alt;
// --- Body ---
$body-bg: $body-bg-alt;
$body-color: $body-color-alt;
// --- Links ---
$link-color: $link-color-alt;
$link-shade-percentage: $link-shade-percentage-alt;
$link-hover-color: $link-hover-color-alt;
// --- Components ---
$border-color: $border-color-alt;
$box-shadow: $box-shadow-alt;
$box-shadow-sm: $box-shadow-sm-alt;
$box-shadow-lg: $box-shadow-lg-alt;
$box-shadow-inset: $box-shadow-inset-alt;
$component-active-color: $component-active-color-alt;
$component-active-bg: $component-active-bg-alt;
// --- Typography ---
$headings-color: $headings-color-alt;
$text-muted: $text-muted-alt;
$blockquote-footer-color: $blockquote-footer-color-alt;
$hr-color: $hr-color-alt;
$hr-opacity: $hr-opacity-alt;
$mark-bg: $mark-bg-alt;
// --- Tables ---
$table-color: $table-color-alt;
$table-bg: $table-bg-alt;
$table-striped-color: $table-striped-color-alt;
$table-striped-bg-factor: $table-striped-bg-factor-alt;
$table-striped-bg: $table-striped-bg-alt;
$table-active-color: $table-active-color-alt;
$table-active-bg-factor: $table-active-bg-factor-alt;
$table-active-bg: $table-active-bg-alt;
$table-hover-color: $table-hover-color-alt;
$table-hover-bg-factor: $table-hover-bg-factor-alt;
$table-hover-bg: $table-hover-bg-alt;
$table-border-factor: $table-border-factor-alt;
$table-border-color: $table-border-color-alt;
$table-group-separator-color: $table-group-separator-color-alt;
$table-caption-color: $table-caption-color-alt;
$table-bg-scale: $table-bg-scale-alt;
$table-variants: $table-variants-alt;
// --- Buttons + Forms ---
$input-btn-focus-color-opacity: $input-btn-focus-color-opacity-alt;
$input-btn-focus-color: $input-btn-focus-color-alt;
$input-btn-focus-blur: $input-btn-focus-blur-alt;
$input-btn-focus-box-shadow: $input-btn-focus-box-shadow-alt;
// --- Buttons ---
$btn-box-shadow: $btn-box-shadow-alt;
$btn-focus-box-shadow: $btn-focus-box-shadow-alt;
$btn-disabled-opacity: $btn-disabled-opacity-alt;
$btn-active-box-shadow: $btn-active-box-shadow-alt;
$btn-link-color: $btn-link-color-alt;
$btn-link-hover-color: $btn-link-hover-color-alt;
$btn-link-disabled-color: $btn-link-disabled-color-alt;
$btn-hover-bg-shade-amount: $btn-hover-bg-shade-amount-alt;
$btn-hover-bg-tint-amount: $btn-hover-bg-tint-amount-alt;
$btn-hover-border-shade-amount: $btn-hover-border-shade-amount-alt;
$btn-hover-border-tint-amount: $btn-hover-border-tint-amount-alt;
$btn-active-bg-shade-amount: $btn-active-bg-shade-amount-alt;
$btn-active-bg-tint-amount: $btn-active-bg-tint-amount-alt;
$btn-active-border-shade-amount: $btn-active-border-shade-amount-alt;
$btn-active-border-tint-amount: $btn-active-border-tint-amount-alt;
// --- Forms ---
$form-text-color: $form-text-color-alt;
$form-label-color: $form-label-color-alt;
$input-bg: $input-bg-alt;
$input-disabled-bg: $input-disabled-bg-alt;
$input-disabled-border-color: $input-disabled-border-color-alt;
$input-color: $input-color-alt;
$input-border-color: $input-border-color-alt;
$input-box-shadow: $input-box-shadow-alt;
$input-focus-bg: $input-focus-bg-alt;
$input-focus-border-color: $input-focus-border-color-alt;
$input-focus-color: $input-focus-color-alt;
$input-focus-box-shadow: $input-focus-box-shadow-alt;
$input-placeholder-color: $input-placeholder-color-alt;
$input-plaintext-color: $input-plaintext-color-alt;
$form-check-label-color: $form-check-label-color-alt;
$form-check-input-active-filter: $form-check-input-active-filter-alt;
$form-check-input-bg: $form-check-input-bg-alt;
$form-check-input-border: $form-check-input-border-alt;
$form-check-input-focus-border: $form-check-input-focus-border-alt;
$form-check-input-focus-box-shadow: $form-check-input-focus-box-shadow-alt;
$form-check-input-checked-color: $form-check-input-checked-color-alt;
$form-check-input-checked-bg-color: $form-check-input-checked-bg-color-alt;
$form-check-input-checked-border-color: $form-check-input-checked-border-color-alt;
$form-check-input-checked-bg-image: $form-check-input-checked-bg-image-alt;
$form-check-radio-checked-bg-image: $form-check-radio-checked-bg-image-alt;
$form-check-input-indeterminate-color: $form-check-input-indeterminate-color-alt;
$form-check-input-indeterminate-bg-color: $form-check-input-indeterminate-bg-color-alt;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-border-color-alt;
$form-check-input-indeterminate-bg-image: $form-check-input-indeterminate-bg-image-alt;
$form-check-input-disabled-opacity: $form-check-input-disabled-opacity-alt;
$form-check-label-disabled-opacity: $form-check-label-disabled-opacity-alt;
$form-check-btn-check-disabled-opacity: $form-check-btn-check-disabled-opacity-alt;
$form-switch-color: $form-switch-color-alt;
$form-switch-bg-image: $form-switch-bg-image-alt;
$form-switch-focus-color: $form-switch-focus-color-alt;
$form-switch-focus-bg-image: $form-switch-focus-bg-image-alt;
$form-switch-checked-color: $form-switch-checked-color-alt;
$form-switch-checked-bg-image: $form-switch-checked-bg-image-alt;
$input-group-addon-color: $input-group-addon-color-alt;
$input-group-addon-bg: $input-group-addon-bg-alt;
$input-group-addon-border-color: $input-group-addon-border-color-alt;
$form-select-color: $form-select-color-alt;
$form-select-disabled-color: $form-select-disabled-color-alt;
$form-select-bg: $form-select-bg-alt;
$form-select-disabled-bg: $form-select-disabled-bg-alt;
$form-select-disabled-border-color: $form-select-disabled-border-color-alt;
$form-select-indicator-color: $form-select-indicator-color-alt;
$form-select-indicator: $form-select-indicator-alt;
$form-select-border-color: $form-select-border-color-alt;
$form-select-box-shadow: $form-select-box-shadow-alt;
$form-select-focus-border-color: $form-select-focus-border-color-alt;
$form-select-focus-box-shadow: $form-select-focus-box-shadow-alt;
$form-range-track-bg: $form-range-track-bg-alt;
$form-range-track-box-shadow: $form-range-track-box-shadow-alt;
$form-range-thumb-bg: $form-range-thumb-bg-alt;
$form-range-thumb-border: $form-range-thumb-border-alt;
$form-range-thumb-box-shadow: $form-range-thumb-box-shadow-alt;
$form-range-thumb-focus-box-shadow: $form-range-thumb-focus-box-shadow-alt;
$form-range-thumb-active-bg: $form-range-thumb-active-bg-alt;
$form-range-thumb-disabled-bg: $form-range-thumb-disabled-bg-alt;
$form-file-button-color: $form-file-button-color-alt;
$form-file-button-bg: $form-file-button-bg-alt;
$form-file-button-hover-bg: $form-file-button-hover-bg-alt;
$form-floating-label-opacity: $form-floating-label-opacity-alt;
// --- Form validation ---
$form-feedback-valid-color: $form-feedback-valid-color-alt;
$form-feedback-invalid-color: $form-feedback-invalid-color-alt;
$form-feedback-icon-valid-color: $form-feedback-icon-valid-color-alt;
$form-feedback-icon-valid: $form-feedback-icon-valid-alt;
$form-feedback-icon-invalid-color: $form-feedback-icon-invalid-color-alt;
$form-feedback-icon-invalid: $form-feedback-icon-invalid-alt;
$form-validation-states: $form-validation-states-alt;
// --- Navs ---
$nav-link-color: $nav-link-color-alt;
$nav-link-hover-color: $nav-link-hover-color-alt;
$nav-link-disabled-color: $nav-link-disabled-color-alt;
$nav-tabs-border-color: $nav-tabs-border-color-alt;
$nav-tabs-link-hover-border-color: $nav-tabs-link-hover-border-color-alt;
$nav-tabs-link-active-color: $nav-tabs-link-active-color-alt;
$nav-tabs-link-active-bg: $nav-tabs-link-active-bg-alt;
$nav-tabs-link-active-border-color: $nav-tabs-link-active-border-color-alt;
$nav-pills-link-active-color: $nav-pills-link-active-color-alt;
$nav-pills-link-active-bg: $nav-pills-link-active-bg-alt;
// --- Navbar ---
$navbar-dark-color: $navbar-dark-color-alt;
$navbar-dark-hover-color: $navbar-dark-hover-color-alt;
$navbar-dark-active-color: $navbar-dark-active-color-alt;
$navbar-dark-disabled-color: $navbar-dark-disabled-color-alt;
$navbar-dark-toggler-icon-bg: $navbar-dark-toggler-icon-bg-alt;
$navbar-dark-toggler-border-color: $navbar-dark-toggler-border-color-alt;
$navbar-light-color: $navbar-light-color-alt;
$navbar-light-hover-color: $navbar-light-hover-color-alt;
$navbar-light-active-color: $navbar-light-active-color-alt;
$navbar-light-disabled-color: $navbar-light-disabled-color-alt;
$navbar-light-toggler-icon-bg: $navbar-light-toggler-icon-bg-alt;
$navbar-light-toggler-border-color: $navbar-light-toggler-border-color-alt;
$navbar-light-brand-color: $navbar-light-brand-color-alt;
$navbar-light-brand-hover-color: $navbar-light-brand-hover-color-alt;
$navbar-dark-brand-color: $navbar-dark-brand-color-alt;
$navbar-dark-brand-hover-color: $navbar-dark-brand-hover-color-alt;
// --- Dropdowns ---
$dropdown-color: $dropdown-color-alt;
$dropdown-bg: $dropdown-bg-alt;
$dropdown-border-color: $dropdown-border-color-alt;
$dropdown-divider-bg: $dropdown-divider-bg-alt;
$dropdown-box-shadow: $dropdown-box-shadow-alt;
$dropdown-link-color: $dropdown-link-color-alt;
$dropdown-link-hover-color: $dropdown-link-hover-color-alt;
$dropdown-link-hover-bg: $dropdown-link-hover-bg-alt;
$dropdown-link-active-color: $dropdown-link-active-color-alt;
$dropdown-link-active-bg: $dropdown-link-active-bg-alt;
$dropdown-link-disabled-color: $dropdown-link-disabled-color-alt;
$dropdown-header-color: $dropdown-header-color-alt;
$dropdown-dark-color: $dropdown-dark-color-alt;
$dropdown-dark-bg: $dropdown-dark-bg-alt;
$dropdown-dark-border-color: $dropdown-dark-border-color-alt;
$dropdown-dark-divider-bg: $dropdown-dark-divider-bg-alt;
$dropdown-dark-box-shadow: $dropdown-dark-box-shadow-alt;
$dropdown-dark-link-color: $dropdown-dark-link-color-alt;
$dropdown-dark-link-hover-color: $dropdown-dark-link-hover-color-alt;
$dropdown-dark-link-hover-bg: $dropdown-dark-link-hover-bg-alt;
$dropdown-dark-link-active-color: $dropdown-dark-link-active-color-alt;
$dropdown-dark-link-active-bg: $dropdown-dark-link-active-bg-alt;
$dropdown-dark-link-disabled-color: $dropdown-dark-link-disabled-color-alt;
$dropdown-dark-header-color: $dropdown-dark-header-color-alt;
// --- Pagination ---
$pagination-color: $pagination-color-alt;
$pagination-bg: $pagination-bg-alt;
$pagination-border-color: $pagination-border-color-alt;
$pagination-focus-color: $pagination-focus-color-alt;
$pagination-focus-bg: $pagination-focus-bg-alt;
$pagination-focus-box-shadow: $pagination-focus-box-shadow-alt;
$pagination-focus-outline: $pagination-focus-outline-alt;
$pagination-hover-color: $pagination-hover-color-alt;
$pagination-hover-bg: $pagination-hover-bg-alt;
$pagination-hover-border-color: $pagination-hover-border-color-alt;
$pagination-active-color: $pagination-active-color-alt;
$pagination-active-bg: $pagination-active-bg-alt;
$pagination-active-border-color: $pagination-active-border-color-alt;
$pagination-disabled-color: $pagination-disabled-color-alt;
$pagination-disabled-bg: $pagination-disabled-bg-alt;
$pagination-disabled-border-color: $pagination-disabled-border-color-alt;
// --- Cards ---
$card-border-color: $card-border-color-alt;
$card-cap-bg: $card-cap-bg-alt;
$card-cap-color: $card-cap-color-alt;
$card-color: $card-color-alt;
$card-bg: $card-bg-alt;
// --- Accordion ---
$accordion-color: $accordion-color-alt;
$accordion-bg: $accordion-bg-alt;
$accordion-border-color: $accordion-border-color-alt;
$accordion-button-color: $accordion-button-color-alt;
$accordion-button-bg: $accordion-button-bg-alt;
$accordion-button-active-bg: $accordion-button-active-bg-alt;
$accordion-button-active-color: $accordion-button-active-color-alt;
$accordion-button-focus-border-color: $accordion-button-focus-border-color-alt;
$accordion-button-focus-box-shadow: $accordion-button-focus-box-shadow-alt;
$accordion-icon-color: $accordion-icon-color-alt;
$accordion-icon-active-color: $accordion-icon-active-color-alt;
$accordion-button-icon: $accordion-button-icon-alt;
$accordion-button-active-icon: $accordion-button-active-icon-alt;
// --- Tooltips ---
$tooltip-color: $tooltip-color-alt;
$tooltip-bg: $tooltip-bg-alt;
$tooltip-opacity: $tooltip-opacity-alt;
$tooltip-arrow-color: $tooltip-arrow-color-alt;
$form-feedback-tooltip-opacity: $form-feedback-tooltip-opacity-alt;
// --- Popovers ---
$popover-bg: $popover-bg-alt;
$popover-border-color: $popover-border-color-alt;
$popover-box-shadow: $popover-box-shadow-alt;
$popover-header-bg: $popover-header-bg-alt;
$popover-header-color: $popover-header-color-alt;
$popover-body-color: $popover-body-color-alt;
$popover-arrow-color: $popover-arrow-color-alt;
$popover-arrow-outer-color: $popover-arrow-outer-color-alt;
// --- Toasts ---
$toast-color: $toast-color-alt;
$toast-background-color: $toast-background-color-alt;
$toast-border-color: $toast-border-color-alt;
$toast-box-shadow: $toast-box-shadow-alt;
$toast-header-color: $toast-header-color-alt;
$toast-header-background-color: $toast-header-background-color-alt;
$toast-header-border-color: $toast-header-border-color-alt;
// --- Badges ---
$badge-color: $badge-color-alt;
// --- Modals ---
$modal-content-color: $modal-content-color-alt;
$modal-content-bg: $modal-content-bg-alt;
$modal-content-border-color: $modal-content-border-color-alt;
$modal-content-box-shadow-xs: $modal-content-box-shadow-xs-alt;
$modal-content-box-shadow-sm-up: $modal-content-box-shadow-sm-up-alt;
$modal-backdrop-bg: $modal-backdrop-bg-alt;
$modal-backdrop-opacity: $modal-backdrop-opacity-alt;
$modal-header-border-color: $modal-header-border-color-alt;
$modal-footer-border-color: $modal-footer-border-color-alt;
// --- Alerts ---
$alert-bg-scale: $alert-bg-scale-alt;
$alert-border-scale: $alert-border-scale-alt;
$alert-color-scale: $alert-color-scale-alt;
// --- Progress bars ---
$progress-bg: $progress-bg-alt;
$progress-box-shadow: $progress-box-shadow-alt;
$progress-bar-color: $progress-bar-color-alt;
$progress-bar-bg: $progress-bar-bg-alt;
// --- List group ---
$list-group-color: $list-group-color-alt;
$list-group-bg: $list-group-bg-alt;
$list-group-border-color: $list-group-border-color-alt;
$list-group-item-bg-scale: $list-group-item-bg-scale-alt;
$list-group-item-color-scale: $list-group-item-color-scale-alt;
$list-group-hover-bg: $list-group-hover-bg-alt;
$list-group-active-color: $list-group-active-color-alt;
$list-group-active-bg: $list-group-active-bg-alt;
$list-group-active-border-color: $list-group-active-border-color-alt;
$list-group-disabled-color: $list-group-disabled-color-alt;
$list-group-disabled-bg: $list-group-disabled-bg-alt;
$list-group-action-color: $list-group-action-color-alt;
$list-group-action-hover-color: $list-group-action-hover-color-alt;
$list-group-action-active-color: $list-group-action-active-color-alt;
$list-group-action-active-bg: $list-group-action-active-bg-alt;
// --- Image thumbnails ---
$thumbnail-bg: $thumbnail-bg-alt;
$thumbnail-border-color: $thumbnail-border-color-alt;
$thumbnail-box-shadow: $thumbnail-box-shadow-alt;
// --- Figures ---
$figure-caption-color: $figure-caption-color-alt;
// --- Breadcrumbs ---
$breadcrumb-bg: $breadcrumb-bg-alt;
$breadcrumb-divider-color: $breadcrumb-divider-color-alt;
$breadcrumb-active-color: $breadcrumb-active-color-alt;
// --- Carousel ---
$carousel-control-color: $carousel-control-color-alt;
$carousel-control-opacity: $carousel-control-opacity-alt;
$carousel-control-hover-opacity: $carousel-control-hover-opacity-alt;
$carousel-indicator-opacity: $carousel-indicator-opacity-alt;
$carousel-indicator-active-bg: $carousel-indicator-active-bg-alt;
$carousel-indicator-active-opacity: $carousel-indicator-active-opacity-alt;
$carousel-caption-color: $carousel-caption-color-alt;
$carousel-control-prev-icon-bg: $carousel-control-prev-icon-bg-alt;
$carousel-control-next-icon-bg: $carousel-control-next-icon-bg-alt;
$carousel-dark-indicator-active-bg: $carousel-dark-indicator-active-bg-alt;
$carousel-dark-caption-color: $carousel-dark-caption-color-alt;
$carousel-dark-control-icon-filter: $carousel-dark-control-icon-filter-alt;
// --- Close ---
$btn-close-color: $btn-close-color-alt;
$btn-close-bg: $btn-close-bg-alt;
$btn-close-focus-shadow: $btn-close-focus-shadow-alt;
$btn-close-opacity: $btn-close-opacity-alt;
$btn-close-hover-opacity: $btn-close-hover-opacity-alt;
$btn-close-focus-opacity: $btn-close-focus-opacity-alt;
$btn-close-disabled-opacity: $btn-close-disabled-opacity-alt;
$btn-close-white-filter: $btn-close-white-filter-alt;
// --- Offcanvas ---
$offcanvas-border-color: $offcanvas-border-color-alt;
$offcanvas-bg-color: $offcanvas-bg-color-alt;
$offcanvas-color: $offcanvas-color-alt;
$offcanvas-box-shadow: $offcanvas-box-shadow-alt;
// --- Code ---
$code-color: $code-color-alt;
$kbd-color: $kbd-color-alt;
$kbd-bg: $kbd-bg-alt;
$pre-color: $pre-color-alt;
// !! Don't remove the next 2 lines
// fusv-enable
// stylelint-enable
// Generated: Wed Apr 21 2021 14:50:18 GMT+1000 (Australian Eastern Standard Time)

409
scss/dark/bootstrap/_variables-map-core-to-temp.scss Normal file
View File

@ -0,0 +1,409 @@
// ===========================================================================
// ||| This file is auto generated. Do not Edit. |||
// ||| Remember to run `npm run map-dark-vars` to re-map SCSS variables. |||
// ===========================================================================
// !! Don't remove the next 2 lines
// stylelint-disable
// fusv-disable
// --- Color system ---
$white-temp-dnu: $white;
$gray-100-temp-dnu: $gray-100;
$gray-200-temp-dnu: $gray-200;
$gray-300-temp-dnu: $gray-300;
$gray-400-temp-dnu: $gray-400;
$gray-500-temp-dnu: $gray-500;
$gray-600-temp-dnu: $gray-600;
$gray-700-temp-dnu: $gray-700;
$gray-800-temp-dnu: $gray-800;
$gray-900-temp-dnu: $gray-900;
$black-temp-dnu: $black;
$grays-temp-dnu: $grays;
$blue-temp-dnu: $blue;
$indigo-temp-dnu: $indigo;
$purple-temp-dnu: $purple;
$pink-temp-dnu: $pink;
$red-temp-dnu: $red;
$orange-temp-dnu: $orange;
$yellow-temp-dnu: $yellow;
$green-temp-dnu: $green;
$teal-temp-dnu: $teal;
$cyan-temp-dnu: $cyan;
$colors-temp-dnu: $colors;
$primary-temp-dnu: $primary;
$secondary-temp-dnu: $secondary;
$success-temp-dnu: $success;
$info-temp-dnu: $info;
$warning-temp-dnu: $warning;
$danger-temp-dnu: $danger;
$light-temp-dnu: $light;
$dark-temp-dnu: $dark;
$theme-colors-temp-dnu: $theme-colors;
$min-contrast-ratio-temp-dnu: $min-contrast-ratio;
$color-contrast-dark-temp-dnu: $color-contrast-dark;
$color-contrast-light-temp-dnu: $color-contrast-light;
// --- Gradient ---
$gradient-temp-dnu: $gradient;
// --- Body ---
$body-bg-temp-dnu: $body-bg;
$body-color-temp-dnu: $body-color;
// --- Links ---
$link-color-temp-dnu: $link-color;
$link-shade-percentage-temp-dnu: $link-shade-percentage;
$link-hover-color-temp-dnu: $link-hover-color;
// --- Components ---
$border-color-temp-dnu: $border-color;
$box-shadow-temp-dnu: $box-shadow;
$box-shadow-sm-temp-dnu: $box-shadow-sm;
$box-shadow-lg-temp-dnu: $box-shadow-lg;
$box-shadow-inset-temp-dnu: $box-shadow-inset;
$component-active-color-temp-dnu: $component-active-color;
$component-active-bg-temp-dnu: $component-active-bg;
// --- Typography ---
$headings-color-temp-dnu: $headings-color;
$text-muted-temp-dnu: $text-muted;
$blockquote-footer-color-temp-dnu: $blockquote-footer-color;
$hr-color-temp-dnu: $hr-color;
$hr-opacity-temp-dnu: $hr-opacity;
$mark-bg-temp-dnu: $mark-bg;
// --- Tables ---
$table-color-temp-dnu: $table-color;
$table-bg-temp-dnu: $table-bg;
$table-striped-color-temp-dnu: $table-striped-color;
$table-striped-bg-factor-temp-dnu: $table-striped-bg-factor;
$table-striped-bg-temp-dnu: $table-striped-bg;
$table-active-color-temp-dnu: $table-active-color;
$table-active-bg-factor-temp-dnu: $table-active-bg-factor;
$table-active-bg-temp-dnu: $table-active-bg;
$table-hover-color-temp-dnu: $table-hover-color;
$table-hover-bg-factor-temp-dnu: $table-hover-bg-factor;
$table-hover-bg-temp-dnu: $table-hover-bg;
$table-border-factor-temp-dnu: $table-border-factor;
$table-border-color-temp-dnu: $table-border-color;
$table-group-separator-color-temp-dnu: $table-group-separator-color;
$table-caption-color-temp-dnu: $table-caption-color;
$table-bg-scale-temp-dnu: $table-bg-scale;
$table-variants-temp-dnu: $table-variants;
// --- Buttons + Forms ---
$input-btn-focus-color-opacity-temp-dnu: $input-btn-focus-color-opacity;
$input-btn-focus-color-temp-dnu: $input-btn-focus-color;
$input-btn-focus-blur-temp-dnu: $input-btn-focus-blur;
$input-btn-focus-box-shadow-temp-dnu: $input-btn-focus-box-shadow;
// --- Buttons ---
$btn-box-shadow-temp-dnu: $btn-box-shadow;
$btn-focus-box-shadow-temp-dnu: $btn-focus-box-shadow;
$btn-disabled-opacity-temp-dnu: $btn-disabled-opacity;
$btn-active-box-shadow-temp-dnu: $btn-active-box-shadow;
$btn-link-color-temp-dnu: $btn-link-color;
$btn-link-hover-color-temp-dnu: $btn-link-hover-color;
$btn-link-disabled-color-temp-dnu: $btn-link-disabled-color;
$btn-hover-bg-shade-amount-temp-dnu: $btn-hover-bg-shade-amount;
$btn-hover-bg-tint-amount-temp-dnu: $btn-hover-bg-tint-amount;
$btn-hover-border-shade-amount-temp-dnu: $btn-hover-border-shade-amount;
$btn-hover-border-tint-amount-temp-dnu: $btn-hover-border-tint-amount;
$btn-active-bg-shade-amount-temp-dnu: $btn-active-bg-shade-amount;
$btn-active-bg-tint-amount-temp-dnu: $btn-active-bg-tint-amount;
$btn-active-border-shade-amount-temp-dnu: $btn-active-border-shade-amount;
$btn-active-border-tint-amount-temp-dnu: $btn-active-border-tint-amount;
// --- Forms ---
$form-text-color-temp-dnu: $form-text-color;
$form-label-color-temp-dnu: $form-label-color;
$input-bg-temp-dnu: $input-bg;
$input-disabled-bg-temp-dnu: $input-disabled-bg;
$input-disabled-border-color-temp-dnu: $input-disabled-border-color;
$input-color-temp-dnu: $input-color;
$input-border-color-temp-dnu: $input-border-color;
$input-box-shadow-temp-dnu: $input-box-shadow;
$input-focus-bg-temp-dnu: $input-focus-bg;
$input-focus-border-color-temp-dnu: $input-focus-border-color;
$input-focus-color-temp-dnu: $input-focus-color;
$input-focus-box-shadow-temp-dnu: $input-focus-box-shadow;
$input-placeholder-color-temp-dnu: $input-placeholder-color;
$input-plaintext-color-temp-dnu: $input-plaintext-color;
$form-check-label-color-temp-dnu: $form-check-label-color;
$form-check-input-active-filter-temp-dnu: $form-check-input-active-filter;
$form-check-input-bg-temp-dnu: $form-check-input-bg;
$form-check-input-border-temp-dnu: $form-check-input-border;
$form-check-input-focus-border-temp-dnu: $form-check-input-focus-border;
$form-check-input-focus-box-shadow-temp-dnu: $form-check-input-focus-box-shadow;
$form-check-input-checked-color-temp-dnu: $form-check-input-checked-color;
$form-check-input-checked-bg-color-temp-dnu: $form-check-input-checked-bg-color;
$form-check-input-checked-border-color-temp-dnu: $form-check-input-checked-border-color;
$form-check-input-checked-bg-image-temp-dnu: $form-check-input-checked-bg-image;
$form-check-radio-checked-bg-image-temp-dnu: $form-check-radio-checked-bg-image;
$form-check-input-indeterminate-color-temp-dnu: $form-check-input-indeterminate-color;
$form-check-input-indeterminate-bg-color-temp-dnu: $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-border-color-temp-dnu: $form-check-input-indeterminate-border-color;
$form-check-input-indeterminate-bg-image-temp-dnu: $form-check-input-indeterminate-bg-image;
$form-check-input-disabled-opacity-temp-dnu: $form-check-input-disabled-opacity;
$form-check-label-disabled-opacity-temp-dnu: $form-check-label-disabled-opacity;
$form-check-btn-check-disabled-opacity-temp-dnu: $form-check-btn-check-disabled-opacity;
$form-switch-color-temp-dnu: $form-switch-color;
$form-switch-bg-image-temp-dnu: $form-switch-bg-image;
$form-switch-focus-color-temp-dnu: $form-switch-focus-color;
$form-switch-focus-bg-image-temp-dnu: $form-switch-focus-bg-image;
$form-switch-checked-color-temp-dnu: $form-switch-checked-color;
$form-switch-checked-bg-image-temp-dnu: $form-switch-checked-bg-image;
$input-group-addon-color-temp-dnu: $input-group-addon-color;
$input-group-addon-bg-temp-dnu: $input-group-addon-bg;
$input-group-addon-border-color-temp-dnu: $input-group-addon-border-color;
$form-select-color-temp-dnu: $form-select-color;
$form-select-disabled-color-temp-dnu: $form-select-disabled-color;
$form-select-bg-temp-dnu: $form-select-bg;
$form-select-disabled-bg-temp-dnu: $form-select-disabled-bg;
$form-select-disabled-border-color-temp-dnu: $form-select-disabled-border-color;
$form-select-indicator-color-temp-dnu: $form-select-indicator-color;
$form-select-indicator-temp-dnu: $form-select-indicator;
$form-select-border-color-temp-dnu: $form-select-border-color;
$form-select-box-shadow-temp-dnu: $form-select-box-shadow;
$form-select-focus-border-color-temp-dnu: $form-select-focus-border-color;
$form-select-focus-box-shadow-temp-dnu: $form-select-focus-box-shadow;
$form-range-track-bg-temp-dnu: $form-range-track-bg;
$form-range-track-box-shadow-temp-dnu: $form-range-track-box-shadow;
$form-range-thumb-bg-temp-dnu: $form-range-thumb-bg;
$form-range-thumb-border-temp-dnu: $form-range-thumb-border;
$form-range-thumb-box-shadow-temp-dnu: $form-range-thumb-box-shadow;
$form-range-thumb-focus-box-shadow-temp-dnu: $form-range-thumb-focus-box-shadow;
$form-range-thumb-active-bg-temp-dnu: $form-range-thumb-active-bg;
$form-range-thumb-disabled-bg-temp-dnu: $form-range-thumb-disabled-bg;
$form-file-button-color-temp-dnu: $form-file-button-color;
$form-file-button-bg-temp-dnu: $form-file-button-bg;
$form-file-button-hover-bg-temp-dnu: $form-file-button-hover-bg;
$form-floating-label-opacity-temp-dnu: $form-floating-label-opacity;
// --- Form validation ---
$form-feedback-valid-color-temp-dnu: $form-feedback-valid-color;
$form-feedback-invalid-color-temp-dnu: $form-feedback-invalid-color;
$form-feedback-icon-valid-color-temp-dnu: $form-feedback-icon-valid-color;
$form-feedback-icon-valid-temp-dnu: $form-feedback-icon-valid;
$form-feedback-icon-invalid-color-temp-dnu: $form-feedback-icon-invalid-color;
$form-feedback-icon-invalid-temp-dnu: $form-feedback-icon-invalid;
$form-validation-states-temp-dnu: $form-validation-states;
// --- Navs ---
$nav-link-color-temp-dnu: $nav-link-color;
$nav-link-hover-color-temp-dnu: $nav-link-hover-color;
$nav-link-disabled-color-temp-dnu: $nav-link-disabled-color;
$nav-tabs-border-color-temp-dnu: $nav-tabs-border-color;
$nav-tabs-link-hover-border-color-temp-dnu: $nav-tabs-link-hover-border-color;
$nav-tabs-link-active-color-temp-dnu: $nav-tabs-link-active-color;
$nav-tabs-link-active-bg-temp-dnu: $nav-tabs-link-active-bg;
$nav-tabs-link-active-border-color-temp-dnu: $nav-tabs-link-active-border-color;
$nav-pills-link-active-color-temp-dnu: $nav-pills-link-active-color;
$nav-pills-link-active-bg-temp-dnu: $nav-pills-link-active-bg;
// --- Navbar ---
$navbar-dark-color-temp-dnu: $navbar-dark-color;
$navbar-dark-hover-color-temp-dnu: $navbar-dark-hover-color;
$navbar-dark-active-color-temp-dnu: $navbar-dark-active-color;
$navbar-dark-disabled-color-temp-dnu: $navbar-dark-disabled-color;
$navbar-dark-toggler-icon-bg-temp-dnu: $navbar-dark-toggler-icon-bg;
$navbar-dark-toggler-border-color-temp-dnu: $navbar-dark-toggler-border-color;
$navbar-light-color-temp-dnu: $navbar-light-color;
$navbar-light-hover-color-temp-dnu: $navbar-light-hover-color;
$navbar-light-active-color-temp-dnu: $navbar-light-active-color;
$navbar-light-disabled-color-temp-dnu: $navbar-light-disabled-color;
$navbar-light-toggler-icon-bg-temp-dnu: $navbar-light-toggler-icon-bg;
$navbar-light-toggler-border-color-temp-dnu: $navbar-light-toggler-border-color;
$navbar-light-brand-color-temp-dnu: $navbar-light-brand-color;
$navbar-light-brand-hover-color-temp-dnu: $navbar-light-brand-hover-color;
$navbar-dark-brand-color-temp-dnu: $navbar-dark-brand-color;
$navbar-dark-brand-hover-color-temp-dnu: $navbar-dark-brand-hover-color;
// --- Dropdowns ---
$dropdown-color-temp-dnu: $dropdown-color;
$dropdown-bg-temp-dnu: $dropdown-bg;
$dropdown-border-color-temp-dnu: $dropdown-border-color;
$dropdown-divider-bg-temp-dnu: $dropdown-divider-bg;
$dropdown-box-shadow-temp-dnu: $dropdown-box-shadow;
$dropdown-link-color-temp-dnu: $dropdown-link-color;
$dropdown-link-hover-color-temp-dnu: $dropdown-link-hover-color;
$dropdown-link-hover-bg-temp-dnu: $dropdown-link-hover-bg;
$dropdown-link-active-color-temp-dnu: $dropdown-link-active-color;
$dropdown-link-active-bg-temp-dnu: $dropdown-link-active-bg;
$dropdown-link-disabled-color-temp-dnu: $dropdown-link-disabled-color;
$dropdown-header-color-temp-dnu: $dropdown-header-color;
$dropdown-dark-color-temp-dnu: $dropdown-dark-color;
$dropdown-dark-bg-temp-dnu: $dropdown-dark-bg;
$dropdown-dark-border-color-temp-dnu: $dropdown-dark-border-color;
$dropdown-dark-divider-bg-temp-dnu: $dropdown-dark-divider-bg;
$dropdown-dark-box-shadow-temp-dnu: $dropdown-dark-box-shadow;
$dropdown-dark-link-color-temp-dnu: $dropdown-dark-link-color;
$dropdown-dark-link-hover-color-temp-dnu: $dropdown-dark-link-hover-color;
$dropdown-dark-link-hover-bg-temp-dnu: $dropdown-dark-link-hover-bg;
$dropdown-dark-link-active-color-temp-dnu: $dropdown-dark-link-active-color;
$dropdown-dark-link-active-bg-temp-dnu: $dropdown-dark-link-active-bg;
$dropdown-dark-link-disabled-color-temp-dnu: $dropdown-dark-link-disabled-color;
$dropdown-dark-header-color-temp-dnu: $dropdown-dark-header-color;
// --- Pagination ---
$pagination-color-temp-dnu: $pagination-color;
$pagination-bg-temp-dnu: $pagination-bg;
$pagination-border-color-temp-dnu: $pagination-border-color;
$pagination-focus-color-temp-dnu: $pagination-focus-color;
$pagination-focus-bg-temp-dnu: $pagination-focus-bg;
$pagination-focus-box-shadow-temp-dnu: $pagination-focus-box-shadow;
$pagination-focus-outline-temp-dnu: $pagination-focus-outline;
$pagination-hover-color-temp-dnu: $pagination-hover-color;
$pagination-hover-bg-temp-dnu: $pagination-hover-bg;
$pagination-hover-border-color-temp-dnu: $pagination-hover-border-color;
$pagination-active-color-temp-dnu: $pagination-active-color;
$pagination-active-bg-temp-dnu: $pagination-active-bg;
$pagination-active-border-color-temp-dnu: $pagination-active-border-color;
$pagination-disabled-color-temp-dnu: $pagination-disabled-color;
$pagination-disabled-bg-temp-dnu: $pagination-disabled-bg;
$pagination-disabled-border-color-temp-dnu: $pagination-disabled-border-color;
// --- Cards ---
$card-border-color-temp-dnu: $card-border-color;
$card-cap-bg-temp-dnu: $card-cap-bg;
$card-cap-color-temp-dnu: $card-cap-color;
$card-color-temp-dnu: $card-color;
$card-bg-temp-dnu: $card-bg;
// --- Accordion ---
$accordion-color-temp-dnu: $accordion-color;
$accordion-bg-temp-dnu: $accordion-bg;
$accordion-border-color-temp-dnu: $accordion-border-color;
$accordion-button-color-temp-dnu: $accordion-button-color;
$accordion-button-bg-temp-dnu: $accordion-button-bg;
$accordion-button-active-bg-temp-dnu: $accordion-button-active-bg;
$accordion-button-active-color-temp-dnu: $accordion-button-active-color;
$accordion-button-focus-border-color-temp-dnu: $accordion-button-focus-border-color;
$accordion-button-focus-box-shadow-temp-dnu: $accordion-button-focus-box-shadow;
$accordion-icon-color-temp-dnu: $accordion-icon-color;
$accordion-icon-active-color-temp-dnu: $accordion-icon-active-color;
$accordion-button-icon-temp-dnu: $accordion-button-icon;
$accordion-button-active-icon-temp-dnu: $accordion-button-active-icon;
// --- Tooltips ---
$tooltip-color-temp-dnu: $tooltip-color;
$tooltip-bg-temp-dnu: $tooltip-bg;
$tooltip-opacity-temp-dnu: $tooltip-opacity;
$tooltip-arrow-color-temp-dnu: $tooltip-arrow-color;
$form-feedback-tooltip-opacity-temp-dnu: $form-feedback-tooltip-opacity;
// --- Popovers ---
$popover-bg-temp-dnu: $popover-bg;
$popover-border-color-temp-dnu: $popover-border-color;
$popover-box-shadow-temp-dnu: $popover-box-shadow;
$popover-header-bg-temp-dnu: $popover-header-bg;
$popover-header-color-temp-dnu: $popover-header-color;
$popover-body-color-temp-dnu: $popover-body-color;
$popover-arrow-color-temp-dnu: $popover-arrow-color;
$popover-arrow-outer-color-temp-dnu: $popover-arrow-outer-color;
// --- Toasts ---
$toast-color-temp-dnu: $toast-color;
$toast-background-color-temp-dnu: $toast-background-color;
$toast-border-color-temp-dnu: $toast-border-color;
$toast-box-shadow-temp-dnu: $toast-box-shadow;
$toast-header-color-temp-dnu: $toast-header-color;
$toast-header-background-color-temp-dnu: $toast-header-background-color;
$toast-header-border-color-temp-dnu: $toast-header-border-color;
// --- Badges ---
$badge-color-temp-dnu: $badge-color;
// --- Modals ---
$modal-content-color-temp-dnu: $modal-content-color;
$modal-content-bg-temp-dnu: $modal-content-bg;
$modal-content-border-color-temp-dnu: $modal-content-border-color;
$modal-content-box-shadow-xs-temp-dnu: $modal-content-box-shadow-xs;
$modal-content-box-shadow-sm-up-temp-dnu: $modal-content-box-shadow-sm-up;
$modal-backdrop-bg-temp-dnu: $modal-backdrop-bg;
$modal-backdrop-opacity-temp-dnu: $modal-backdrop-opacity;
$modal-header-border-color-temp-dnu: $modal-header-border-color;
$modal-footer-border-color-temp-dnu: $modal-footer-border-color;
// --- Alerts ---
$alert-bg-scale-temp-dnu: $alert-bg-scale;
$alert-border-scale-temp-dnu: $alert-border-scale;
$alert-color-scale-temp-dnu: $alert-color-scale;
// --- Progress bars ---
$progress-bg-temp-dnu: $progress-bg;
$progress-box-shadow-temp-dnu: $progress-box-shadow;
$progress-bar-color-temp-dnu: $progress-bar-color;
$progress-bar-bg-temp-dnu: $progress-bar-bg;
// --- List group ---
$list-group-color-temp-dnu: $list-group-color;
$list-group-bg-temp-dnu: $list-group-bg;
$list-group-border-color-temp-dnu: $list-group-border-color;
$list-group-item-bg-scale-temp-dnu: $list-group-item-bg-scale;
$list-group-item-color-scale-temp-dnu: $list-group-item-color-scale;
$list-group-hover-bg-temp-dnu: $list-group-hover-bg;
$list-group-active-color-temp-dnu: $list-group-active-color;
$list-group-active-bg-temp-dnu: $list-group-active-bg;
$list-group-active-border-color-temp-dnu: $list-group-active-border-color;
$list-group-disabled-color-temp-dnu: $list-group-disabled-color;
$list-group-disabled-bg-temp-dnu: $list-group-disabled-bg;
$list-group-action-color-temp-dnu: $list-group-action-color;
$list-group-action-hover-color-temp-dnu: $list-group-action-hover-color;
$list-group-action-active-color-temp-dnu: $list-group-action-active-color;
$list-group-action-active-bg-temp-dnu: $list-group-action-active-bg;
// --- Image thumbnails ---
$thumbnail-bg-temp-dnu: $thumbnail-bg;
$thumbnail-border-color-temp-dnu: $thumbnail-border-color;
$thumbnail-box-shadow-temp-dnu: $thumbnail-box-shadow;
// --- Figures ---
$figure-caption-color-temp-dnu: $figure-caption-color;
// --- Breadcrumbs ---
$breadcrumb-bg-temp-dnu: $breadcrumb-bg;
$breadcrumb-divider-color-temp-dnu: $breadcrumb-divider-color;
$breadcrumb-active-color-temp-dnu: $breadcrumb-active-color;
// --- Carousel ---
$carousel-control-color-temp-dnu: $carousel-control-color;
$carousel-control-opacity-temp-dnu: $carousel-control-opacity;
$carousel-control-hover-opacity-temp-dnu: $carousel-control-hover-opacity;
$carousel-indicator-opacity-temp-dnu: $carousel-indicator-opacity;
$carousel-indicator-active-bg-temp-dnu: $carousel-indicator-active-bg;
$carousel-indicator-active-opacity-temp-dnu: $carousel-indicator-active-opacity;
$carousel-caption-color-temp-dnu: $carousel-caption-color;
$carousel-control-prev-icon-bg-temp-dnu: $carousel-control-prev-icon-bg;
$carousel-control-next-icon-bg-temp-dnu: $carousel-control-next-icon-bg;
$carousel-dark-indicator-active-bg-temp-dnu: $carousel-dark-indicator-active-bg;
$carousel-dark-caption-color-temp-dnu: $carousel-dark-caption-color;
$carousel-dark-control-icon-filter-temp-dnu: $carousel-dark-control-icon-filter;
// --- Close ---
$btn-close-color-temp-dnu: $btn-close-color;
$btn-close-bg-temp-dnu: $btn-close-bg;
$btn-close-focus-shadow-temp-dnu: $btn-close-focus-shadow;
$btn-close-opacity-temp-dnu: $btn-close-opacity;
$btn-close-hover-opacity-temp-dnu: $btn-close-hover-opacity;
$btn-close-focus-opacity-temp-dnu: $btn-close-focus-opacity;
$btn-close-disabled-opacity-temp-dnu: $btn-close-disabled-opacity;
$btn-close-white-filter-temp-dnu: $btn-close-white-filter;
// --- Offcanvas ---
$offcanvas-border-color-temp-dnu: $offcanvas-border-color;
$offcanvas-bg-color-temp-dnu: $offcanvas-bg-color;
$offcanvas-color-temp-dnu: $offcanvas-color;
$offcanvas-box-shadow-temp-dnu: $offcanvas-box-shadow;
// --- Code ---
$code-color-temp-dnu: $code-color;
$kbd-color-temp-dnu: $kbd-color;
$kbd-bg-temp-dnu: $kbd-bg;
$pre-color-temp-dnu: $pre-color;
// !! Don't remove the next 2 lines
// fusv-enable
// stylelint-enable
// Generated: Wed Apr 21 2021 14:50:18 GMT+1000 (Australian Eastern Standard Time)

409
scss/dark/bootstrap/_variables-map-temp-to-alt.scss Normal file
View File

@ -0,0 +1,409 @@
// ===========================================================================
// ||| This file is auto generated. Do not Edit. |||
// ||| Remember to run `npm run map-dark-vars` to re-map SCSS variables. |||
// ===========================================================================
// !! Don't remove the next 2 lines
// stylelint-disable
// fusv-disable
// --- Color system ---
$white-alt: $white-temp-dnu;
$gray-100-alt: $gray-100-temp-dnu;
$gray-200-alt: $gray-200-temp-dnu;
$gray-300-alt: $gray-300-temp-dnu;
$gray-400-alt: $gray-400-temp-dnu;
$gray-500-alt: $gray-500-temp-dnu;
$gray-600-alt: $gray-600-temp-dnu;
$gray-700-alt: $gray-700-temp-dnu;
$gray-800-alt: $gray-800-temp-dnu;
$gray-900-alt: $gray-900-temp-dnu;
$black-alt: $black-temp-dnu;
$grays-alt: $grays-temp-dnu;
$blue-alt: $blue-temp-dnu;
$indigo-alt: $indigo-temp-dnu;
$purple-alt: $purple-temp-dnu;
$pink-alt: $pink-temp-dnu;
$red-alt: $red-temp-dnu;
$orange-alt: $orange-temp-dnu;
$yellow-alt: $yellow-temp-dnu;
$green-alt: $green-temp-dnu;
$teal-alt: $teal-temp-dnu;
$cyan-alt: $cyan-temp-dnu;
$colors-alt: $colors-temp-dnu;
$primary-alt: $primary-temp-dnu;
$secondary-alt: $secondary-temp-dnu;
$success-alt: $success-temp-dnu;
$info-alt: $info-temp-dnu;
$warning-alt: $warning-temp-dnu;
$danger-alt: $danger-temp-dnu;
$light-alt: $light-temp-dnu;
$dark-alt: $dark-temp-dnu;
$theme-colors-alt: $theme-colors-temp-dnu;
$min-contrast-ratio-alt: $min-contrast-ratio-temp-dnu;
$color-contrast-dark-alt: $color-contrast-dark-temp-dnu;
$color-contrast-light-alt: $color-contrast-light-temp-dnu;
// --- Gradient ---
$gradient-alt: $gradient-temp-dnu;
// --- Body ---
$body-bg-alt: $body-bg-temp-dnu;
$body-color-alt: $body-color-temp-dnu;
// --- Links ---
$link-color-alt: $link-color-temp-dnu;
$link-shade-percentage-alt: $link-shade-percentage-temp-dnu;
$link-hover-color-alt: $link-hover-color-temp-dnu;
// --- Components ---
$border-color-alt: $border-color-temp-dnu;
$box-shadow-alt: $box-shadow-temp-dnu;
$box-shadow-sm-alt: $box-shadow-sm-temp-dnu;
$box-shadow-lg-alt: $box-shadow-lg-temp-dnu;
$box-shadow-inset-alt: $box-shadow-inset-temp-dnu;
$component-active-color-alt: $component-active-color-temp-dnu;
$component-active-bg-alt: $component-active-bg-temp-dnu;
// --- Typography ---
$headings-color-alt: $headings-color-temp-dnu;
$text-muted-alt: $text-muted-temp-dnu;
$blockquote-footer-color-alt: $blockquote-footer-color-temp-dnu;
$hr-color-alt: $hr-color-temp-dnu;
$hr-opacity-alt: $hr-opacity-temp-dnu;
$mark-bg-alt: $mark-bg-temp-dnu;
// --- Tables ---
$table-color-alt: $table-color-temp-dnu;
$table-bg-alt: $table-bg-temp-dnu;
$table-striped-color-alt: $table-striped-color-temp-dnu;
$table-striped-bg-factor-alt: $table-striped-bg-factor-temp-dnu;
$table-striped-bg-alt: $table-striped-bg-temp-dnu;
$table-active-color-alt: $table-active-color-temp-dnu;
$table-active-bg-factor-alt: $table-active-bg-factor-temp-dnu;
$table-active-bg-alt: $table-active-bg-temp-dnu;
$table-hover-color-alt: $table-hover-color-temp-dnu;
$table-hover-bg-factor-alt: $table-hover-bg-factor-temp-dnu;
$table-hover-bg-alt: $table-hover-bg-temp-dnu;
$table-border-factor-alt: $table-border-factor-temp-dnu;
$table-border-color-alt: $table-border-color-temp-dnu;
$table-group-separator-color-alt: $table-group-separator-color-temp-dnu;
$table-caption-color-alt: $table-caption-color-temp-dnu;
$table-bg-scale-alt: $table-bg-scale-temp-dnu;
$table-variants-alt: $table-variants-temp-dnu;
// --- Buttons + Forms ---
$input-btn-focus-color-opacity-alt: $input-btn-focus-color-opacity-temp-dnu;
$input-btn-focus-color-alt: $input-btn-focus-color-temp-dnu;
$input-btn-focus-blur-alt: $input-btn-focus-blur-temp-dnu;
$input-btn-focus-box-shadow-alt: $input-btn-focus-box-shadow-temp-dnu;
// --- Buttons ---
$btn-box-shadow-alt: $btn-box-shadow-temp-dnu;
$btn-focus-box-shadow-alt: $btn-focus-box-shadow-temp-dnu;
$btn-disabled-opacity-alt: $btn-disabled-opacity-temp-dnu;
$btn-active-box-shadow-alt: $btn-active-box-shadow-temp-dnu;
$btn-link-color-alt: $btn-link-color-temp-dnu;
$btn-link-hover-color-alt: $btn-link-hover-color-temp-dnu;
$btn-link-disabled-color-alt: $btn-link-disabled-color-temp-dnu;
$btn-hover-bg-shade-amount-alt: $btn-hover-bg-shade-amount-temp-dnu;
$btn-hover-bg-tint-amount-alt: $btn-hover-bg-tint-amount-temp-dnu;
$btn-hover-border-shade-amount-alt: $btn-hover-border-shade-amount-temp-dnu;
$btn-hover-border-tint-amount-alt: $btn-hover-border-tint-amount-temp-dnu;
$btn-active-bg-shade-amount-alt: $btn-active-bg-shade-amount-temp-dnu;
$btn-active-bg-tint-amount-alt: $btn-active-bg-tint-amount-temp-dnu;
$btn-active-border-shade-amount-alt: $btn-active-border-shade-amount-temp-dnu;
$btn-active-border-tint-amount-alt: $btn-active-border-tint-amount-temp-dnu;
// --- Forms ---
$form-text-color-alt: $form-text-color-temp-dnu;
$form-label-color-alt: $form-label-color-temp-dnu;
$input-bg-alt: $input-bg-temp-dnu;
$input-disabled-bg-alt: $input-disabled-bg-temp-dnu;
$input-disabled-border-color-alt: $input-disabled-border-color-temp-dnu;
$input-color-alt: $input-color-temp-dnu;
$input-border-color-alt: $input-border-color-temp-dnu;
$input-box-shadow-alt: $input-box-shadow-temp-dnu;
$input-focus-bg-alt: $input-focus-bg-temp-dnu;
$input-focus-border-color-alt: $input-focus-border-color-temp-dnu;
$input-focus-color-alt: $input-focus-color-temp-dnu;
$input-focus-box-shadow-alt: $input-focus-box-shadow-temp-dnu;
$input-placeholder-color-alt: $input-placeholder-color-temp-dnu;
$input-plaintext-color-alt: $input-plaintext-color-temp-dnu;
$form-check-label-color-alt: $form-check-label-color-temp-dnu;
$form-check-input-active-filter-alt: $form-check-input-active-filter-temp-dnu;
$form-check-input-bg-alt: $form-check-input-bg-temp-dnu;
$form-check-input-border-alt: $form-check-input-border-temp-dnu;
$form-check-input-focus-border-alt: $form-check-input-focus-border-temp-dnu;
$form-check-input-focus-box-shadow-alt: $form-check-input-focus-box-shadow-temp-dnu;
$form-check-input-checked-color-alt: $form-check-input-checked-color-temp-dnu;
$form-check-input-checked-bg-color-alt: $form-check-input-checked-bg-color-temp-dnu;
$form-check-input-checked-border-color-alt: $form-check-input-checked-border-color-temp-dnu;
$form-check-input-checked-bg-image-alt: $form-check-input-checked-bg-image-temp-dnu;
$form-check-radio-checked-bg-image-alt: $form-check-radio-checked-bg-image-temp-dnu;
$form-check-input-indeterminate-color-alt: $form-check-input-indeterminate-color-temp-dnu;
$form-check-input-indeterminate-bg-color-alt: $form-check-input-indeterminate-bg-color-temp-dnu;
$form-check-input-indeterminate-border-color-alt: $form-check-input-indeterminate-border-color-temp-dnu;
$form-check-input-indeterminate-bg-image-alt: $form-check-input-indeterminate-bg-image-temp-dnu;
$form-check-input-disabled-opacity-alt: $form-check-input-disabled-opacity-temp-dnu;
$form-check-label-disabled-opacity-alt: $form-check-label-disabled-opacity-temp-dnu;
$form-check-btn-check-disabled-opacity-alt: $form-check-btn-check-disabled-opacity-temp-dnu;
$form-switch-color-alt: $form-switch-color-temp-dnu;
$form-switch-bg-image-alt: $form-switch-bg-image-temp-dnu;
$form-switch-focus-color-alt: $form-switch-focus-color-temp-dnu;
$form-switch-focus-bg-image-alt: $form-switch-focus-bg-image-temp-dnu;
$form-switch-checked-color-alt: $form-switch-checked-color-temp-dnu;
$form-switch-checked-bg-image-alt: $form-switch-checked-bg-image-temp-dnu;
$input-group-addon-color-alt: $input-group-addon-color-temp-dnu;
$input-group-addon-bg-alt: $input-group-addon-bg-temp-dnu;
$input-group-addon-border-color-alt: $input-group-addon-border-color-temp-dnu;
$form-select-color-alt: $form-select-color-temp-dnu;
$form-select-disabled-color-alt: $form-select-disabled-color-temp-dnu;
$form-select-bg-alt: $form-select-bg-temp-dnu;
$form-select-disabled-bg-alt: $form-select-disabled-bg-temp-dnu;
$form-select-disabled-border-color-alt: $form-select-disabled-border-color-temp-dnu;
$form-select-indicator-color-alt: $form-select-indicator-color-temp-dnu;
$form-select-indicator-alt: $form-select-indicator-temp-dnu;
$form-select-border-color-alt: $form-select-border-color-temp-dnu;
$form-select-box-shadow-alt: $form-select-box-shadow-temp-dnu;
$form-select-focus-border-color-alt: $form-select-focus-border-color-temp-dnu;
$form-select-focus-box-shadow-alt: $form-select-focus-box-shadow-temp-dnu;
$form-range-track-bg-alt: $form-range-track-bg-temp-dnu;
$form-range-track-box-shadow-alt: $form-range-track-box-shadow-temp-dnu;
$form-range-thumb-bg-alt: $form-range-thumb-bg-temp-dnu;
$form-range-thumb-border-alt: $form-range-thumb-border-temp-dnu;
$form-range-thumb-box-shadow-alt: $form-range-thumb-box-shadow-temp-dnu;
$form-range-thumb-focus-box-shadow-alt: $form-range-thumb-focus-box-shadow-temp-dnu;
$form-range-thumb-active-bg-alt: $form-range-thumb-active-bg-temp-dnu;
$form-range-thumb-disabled-bg-alt: $form-range-thumb-disabled-bg-temp-dnu;
$form-file-button-color-alt: $form-file-button-color-temp-dnu;
$form-file-button-bg-alt: $form-file-button-bg-temp-dnu;
$form-file-button-hover-bg-alt: $form-file-button-hover-bg-temp-dnu;
$form-floating-label-opacity-alt: $form-floating-label-opacity-temp-dnu;
// --- Form validation ---
$form-feedback-valid-color-alt: $form-feedback-valid-color-temp-dnu;
$form-feedback-invalid-color-alt: $form-feedback-invalid-color-temp-dnu;
$form-feedback-icon-valid-color-alt: $form-feedback-icon-valid-color-temp-dnu;
$form-feedback-icon-valid-alt: $form-feedback-icon-valid-temp-dnu;
$form-feedback-icon-invalid-color-alt: $form-feedback-icon-invalid-color-temp-dnu;
$form-feedback-icon-invalid-alt: $form-feedback-icon-invalid-temp-dnu;
$form-validation-states-alt: $form-validation-states-temp-dnu;
// --- Navs ---
$nav-link-color-alt: $nav-link-color-temp-dnu;
$nav-link-hover-color-alt: $nav-link-hover-color-temp-dnu;
$nav-link-disabled-color-alt: $nav-link-disabled-color-temp-dnu;
$nav-tabs-border-color-alt: $nav-tabs-border-color-temp-dnu;
$nav-tabs-link-hover-border-color-alt: $nav-tabs-link-hover-border-color-temp-dnu;
$nav-tabs-link-active-color-alt: $nav-tabs-link-active-color-temp-dnu;
$nav-tabs-link-active-bg-alt: $nav-tabs-link-active-bg-temp-dnu;
$nav-tabs-link-active-border-color-alt: $nav-tabs-link-active-border-color-temp-dnu;
$nav-pills-link-active-color-alt: $nav-pills-link-active-color-temp-dnu;
$nav-pills-link-active-bg-alt: $nav-pills-link-active-bg-temp-dnu;
// --- Navbar ---
$navbar-dark-color-alt: $navbar-dark-color-temp-dnu;
$navbar-dark-hover-color-alt: $navbar-dark-hover-color-temp-dnu;
$navbar-dark-active-color-alt: $navbar-dark-active-color-temp-dnu;
$navbar-dark-disabled-color-alt: $navbar-dark-disabled-color-temp-dnu;
$navbar-dark-toggler-icon-bg-alt: $navbar-dark-toggler-icon-bg-temp-dnu;
$navbar-dark-toggler-border-color-alt: $navbar-dark-toggler-border-color-temp-dnu;
$navbar-light-color-alt: $navbar-light-color-temp-dnu;
$navbar-light-hover-color-alt: $navbar-light-hover-color-temp-dnu;
$navbar-light-active-color-alt: $navbar-light-active-color-temp-dnu;
$navbar-light-disabled-color-alt: $navbar-light-disabled-color-temp-dnu;
$navbar-light-toggler-icon-bg-alt: $navbar-light-toggler-icon-bg-temp-dnu;
$navbar-light-toggler-border-color-alt: $navbar-light-toggler-border-color-temp-dnu;
$navbar-light-brand-color-alt: $navbar-light-brand-color-temp-dnu;
$navbar-light-brand-hover-color-alt: $navbar-light-brand-hover-color-temp-dnu;
$navbar-dark-brand-color-alt: $navbar-dark-brand-color-temp-dnu;
$navbar-dark-brand-hover-color-alt: $navbar-dark-brand-hover-color-temp-dnu;
// --- Dropdowns ---
$dropdown-color-alt: $dropdown-color-temp-dnu;
$dropdown-bg-alt: $dropdown-bg-temp-dnu;
$dropdown-border-color-alt: $dropdown-border-color-temp-dnu;
$dropdown-divider-bg-alt: $dropdown-divider-bg-temp-dnu;
$dropdown-box-shadow-alt: $dropdown-box-shadow-temp-dnu;
$dropdown-link-color-alt: $dropdown-link-color-temp-dnu;
$dropdown-link-hover-color-alt: $dropdown-link-hover-color-temp-dnu;
$dropdown-link-hover-bg-alt: $dropdown-link-hover-bg-temp-dnu;
$dropdown-link-active-color-alt: $dropdown-link-active-color-temp-dnu;
$dropdown-link-active-bg-alt: $dropdown-link-active-bg-temp-dnu;
$dropdown-link-disabled-color-alt: $dropdown-link-disabled-color-temp-dnu;
$dropdown-header-color-alt: $dropdown-header-color-temp-dnu;
$dropdown-dark-color-alt: $dropdown-dark-color-temp-dnu;
$dropdown-dark-bg-alt: $dropdown-dark-bg-temp-dnu;
$dropdown-dark-border-color-alt: $dropdown-dark-border-color-temp-dnu;
$dropdown-dark-divider-bg-alt: $dropdown-dark-divider-bg-temp-dnu;
$dropdown-dark-box-shadow-alt: $dropdown-dark-box-shadow-temp-dnu;
$dropdown-dark-link-color-alt: $dropdown-dark-link-color-temp-dnu;
$dropdown-dark-link-hover-color-alt: $dropdown-dark-link-hover-color-temp-dnu;
$dropdown-dark-link-hover-bg-alt: $dropdown-dark-link-hover-bg-temp-dnu;
$dropdown-dark-link-active-color-alt: $dropdown-dark-link-active-color-temp-dnu;
$dropdown-dark-link-active-bg-alt: $dropdown-dark-link-active-bg-temp-dnu;
$dropdown-dark-link-disabled-color-alt: $dropdown-dark-link-disabled-color-temp-dnu;
$dropdown-dark-header-color-alt: $dropdown-dark-header-color-temp-dnu;
// --- Pagination ---
$pagination-color-alt: $pagination-color-temp-dnu;
$pagination-bg-alt: $pagination-bg-temp-dnu;
$pagination-border-color-alt: $pagination-border-color-temp-dnu;
$pagination-focus-color-alt: $pagination-focus-color-temp-dnu;
$pagination-focus-bg-alt: $pagination-focus-bg-temp-dnu;
$pagination-focus-box-shadow-alt: $pagination-focus-box-shadow-temp-dnu;
$pagination-focus-outline-alt: $pagination-focus-outline-temp-dnu;
$pagination-hover-color-alt: $pagination-hover-color-temp-dnu;
$pagination-hover-bg-alt: $pagination-hover-bg-temp-dnu;
$pagination-hover-border-color-alt: $pagination-hover-border-color-temp-dnu;
$pagination-active-color-alt: $pagination-active-color-temp-dnu;
$pagination-active-bg-alt: $pagination-active-bg-temp-dnu;
$pagination-active-border-color-alt: $pagination-active-border-color-temp-dnu;
$pagination-disabled-color-alt: $pagination-disabled-color-temp-dnu;
$pagination-disabled-bg-alt: $pagination-disabled-bg-temp-dnu;
$pagination-disabled-border-color-alt: $pagination-disabled-border-color-temp-dnu;
// --- Cards ---
$card-border-color-alt: $card-border-color-temp-dnu;
$card-cap-bg-alt: $card-cap-bg-temp-dnu;
$card-cap-color-alt: $card-cap-color-temp-dnu;
$card-color-alt: $card-color-temp-dnu;
$card-bg-alt: $card-bg-temp-dnu;
// --- Accordion ---
$accordion-color-alt: $accordion-color-temp-dnu;
$accordion-bg-alt: $accordion-bg-temp-dnu;
$accordion-border-color-alt: $accordion-border-color-temp-dnu;
$accordion-button-color-alt: $accordion-button-color-temp-dnu;
$accordion-button-bg-alt: $accordion-button-bg-temp-dnu;
$accordion-button-active-bg-alt: $accordion-button-active-bg-temp-dnu;
$accordion-button-active-color-alt: $accordion-button-active-color-temp-dnu;
$accordion-button-focus-border-color-alt: $accordion-button-focus-border-color-temp-dnu;
$accordion-button-focus-box-shadow-alt: $accordion-button-focus-box-shadow-temp-dnu;
$accordion-icon-color-alt: $accordion-icon-color-temp-dnu;
$accordion-icon-active-color-alt: $accordion-icon-active-color-temp-dnu;
$accordion-button-icon-alt: $accordion-button-icon-temp-dnu;
$accordion-button-active-icon-alt: $accordion-button-active-icon-temp-dnu;
// --- Tooltips ---
$tooltip-color-alt: $tooltip-color-temp-dnu;
$tooltip-bg-alt: $tooltip-bg-temp-dnu;
$tooltip-opacity-alt: $tooltip-opacity-temp-dnu;
$tooltip-arrow-color-alt: $tooltip-arrow-color-temp-dnu;
$form-feedback-tooltip-opacity-alt: $form-feedback-tooltip-opacity-temp-dnu;
// --- Popovers ---
$popover-bg-alt: $popover-bg-temp-dnu;
$popover-border-color-alt: $popover-border-color-temp-dnu;
$popover-box-shadow-alt: $popover-box-shadow-temp-dnu;
$popover-header-bg-alt: $popover-header-bg-temp-dnu;
$popover-header-color-alt: $popover-header-color-temp-dnu;
$popover-body-color-alt: $popover-body-color-temp-dnu;
$popover-arrow-color-alt: $popover-arrow-color-temp-dnu;
$popover-arrow-outer-color-alt: $popover-arrow-outer-color-temp-dnu;
// --- Toasts ---
$toast-color-alt: $toast-color-temp-dnu;
$toast-background-color-alt: $toast-background-color-temp-dnu;
$toast-border-color-alt: $toast-border-color-temp-dnu;
$toast-box-shadow-alt: $toast-box-shadow-temp-dnu;
$toast-header-color-alt: $toast-header-color-temp-dnu;
$toast-header-background-color-alt: $toast-header-background-color-temp-dnu;
$toast-header-border-color-alt: $toast-header-border-color-temp-dnu;
// --- Badges ---
$badge-color-alt: $badge-color-temp-dnu;
// --- Modals ---
$modal-content-color-alt: $modal-content-color-temp-dnu;
$modal-content-bg-alt: $modal-content-bg-temp-dnu;
$modal-content-border-color-alt: $modal-content-border-color-temp-dnu;
$modal-content-box-shadow-xs-alt: $modal-content-box-shadow-xs-temp-dnu;
$modal-content-box-shadow-sm-up-alt: $modal-content-box-shadow-sm-up-temp-dnu;
$modal-backdrop-bg-alt: $modal-backdrop-bg-temp-dnu;
$modal-backdrop-opacity-alt: $modal-backdrop-opacity-temp-dnu;
$modal-header-border-color-alt: $modal-header-border-color-temp-dnu;
$modal-footer-border-color-alt: $modal-footer-border-color-temp-dnu;
// --- Alerts ---
$alert-bg-scale-alt: $alert-bg-scale-temp-dnu;
$alert-border-scale-alt: $alert-border-scale-temp-dnu;
$alert-color-scale-alt: $alert-color-scale-temp-dnu;
// --- Progress bars ---
$progress-bg-alt: $progress-bg-temp-dnu;
$progress-box-shadow-alt: $progress-box-shadow-temp-dnu;
$progress-bar-color-alt: $progress-bar-color-temp-dnu;
$progress-bar-bg-alt: $progress-bar-bg-temp-dnu;
// --- List group ---
$list-group-color-alt: $list-group-color-temp-dnu;
$list-group-bg-alt: $list-group-bg-temp-dnu;
$list-group-border-color-alt: $list-group-border-color-temp-dnu;
$list-group-item-bg-scale-alt: $list-group-item-bg-scale-temp-dnu;
$list-group-item-color-scale-alt: $list-group-item-color-scale-temp-dnu;
$list-group-hover-bg-alt: $list-group-hover-bg-temp-dnu;
$list-group-active-color-alt: $list-group-active-color-temp-dnu;
$list-group-active-bg-alt: $list-group-active-bg-temp-dnu;
$list-group-active-border-color-alt: $list-group-active-border-color-temp-dnu;
$list-group-disabled-color-alt: $list-group-disabled-color-temp-dnu;
$list-group-disabled-bg-alt: $list-group-disabled-bg-temp-dnu;
$list-group-action-color-alt: $list-group-action-color-temp-dnu;
$list-group-action-hover-color-alt: $list-group-action-hover-color-temp-dnu;
$list-group-action-active-color-alt: $list-group-action-active-color-temp-dnu;
$list-group-action-active-bg-alt: $list-group-action-active-bg-temp-dnu;
// --- Image thumbnails ---
$thumbnail-bg-alt: $thumbnail-bg-temp-dnu;
$thumbnail-border-color-alt: $thumbnail-border-color-temp-dnu;
$thumbnail-box-shadow-alt: $thumbnail-box-shadow-temp-dnu;
// --- Figures ---
$figure-caption-color-alt: $figure-caption-color-temp-dnu;
// --- Breadcrumbs ---
$breadcrumb-bg-alt: $breadcrumb-bg-temp-dnu;
$breadcrumb-divider-color-alt: $breadcrumb-divider-color-temp-dnu;
$breadcrumb-active-color-alt: $breadcrumb-active-color-temp-dnu;
// --- Carousel ---
$carousel-control-color-alt: $carousel-control-color-temp-dnu;
$carousel-control-opacity-alt: $carousel-control-opacity-temp-dnu;
$carousel-control-hover-opacity-alt: $carousel-control-hover-opacity-temp-dnu;
$carousel-indicator-opacity-alt: $carousel-indicator-opacity-temp-dnu;
$carousel-indicator-active-bg-alt: $carousel-indicator-active-bg-temp-dnu;
$carousel-indicator-active-opacity-alt: $carousel-indicator-active-opacity-temp-dnu;
$carousel-caption-color-alt: $carousel-caption-color-temp-dnu;
$carousel-control-prev-icon-bg-alt: $carousel-control-prev-icon-bg-temp-dnu;
$carousel-control-next-icon-bg-alt: $carousel-control-next-icon-bg-temp-dnu;
$carousel-dark-indicator-active-bg-alt: $carousel-dark-indicator-active-bg-temp-dnu;
$carousel-dark-caption-color-alt: $carousel-dark-caption-color-temp-dnu;
$carousel-dark-control-icon-filter-alt: $carousel-dark-control-icon-filter-temp-dnu;
// --- Close ---
$btn-close-color-alt: $btn-close-color-temp-dnu;
$btn-close-bg-alt: $btn-close-bg-temp-dnu;
$btn-close-focus-shadow-alt: $btn-close-focus-shadow-temp-dnu;
$btn-close-opacity-alt: $btn-close-opacity-temp-dnu;
$btn-close-hover-opacity-alt: $btn-close-hover-opacity-temp-dnu;
$btn-close-focus-opacity-alt: $btn-close-focus-opacity-temp-dnu;
$btn-close-disabled-opacity-alt: $btn-close-disabled-opacity-temp-dnu;
$btn-close-white-filter-alt: $btn-close-white-filter-temp-dnu;
// --- Offcanvas ---
$offcanvas-border-color-alt: $offcanvas-border-color-temp-dnu;
$offcanvas-bg-color-alt: $offcanvas-bg-color-temp-dnu;
$offcanvas-color-alt: $offcanvas-color-temp-dnu;
$offcanvas-box-shadow-alt: $offcanvas-box-shadow-temp-dnu;
// --- Code ---
$code-color-alt: $code-color-temp-dnu;
$kbd-color-alt: $kbd-color-temp-dnu;
$kbd-bg-alt: $kbd-bg-temp-dnu;
$pre-color-alt: $pre-color-temp-dnu;
// !! Don't remove the next 2 lines
// fusv-enable
// stylelint-enable
// Generated: Wed Apr 21 2021 14:50:18 GMT+1000 (Australian Eastern Standard Time)

26
scss/dark/bootstrap/forms/_floating-labels.scss Normal file
View File

@ -0,0 +1,26 @@
.form-floating {
// > label {
// border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
// }
> .form-control {
// &::placeholder {
// color: transparent;
// }
}
> .form-control:focus,
> .form-control:not(:placeholder-shown),
> .form-select {
~ label {
opacity: $form-floating-label-opacity-alt;
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
opacity: $form-floating-label-opacity-alt;
}
}
}

93
scss/dark/bootstrap/forms/_form-check.scss Normal file
View File

@ -0,0 +1,93 @@
// Check/radio
.form-check-input {
background-color: $form-check-input-bg-alt;
border: $form-check-input-border-alt;
&:active {
filter: $form-check-input-active-filter-alt;
}
&:focus {
border-color: $form-check-input-focus-border-alt;
box-shadow: $form-check-input-focus-box-shadow-alt;
}
&:checked {
background-color: $form-check-input-checked-bg-color-alt;
border-color: $form-check-input-checked-border-color-alt;
&[type="checkbox"] {
@if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-checked-bg-image-alt);
}
}
&[type="radio"] {
@if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image-alt);
}
}
}
&[type="checkbox"]:indeterminate {
background-color: $form-check-input-indeterminate-bg-color-alt;
border-color: $form-check-input-indeterminate-border-color-alt;
@if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image-alt), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image-alt);
}
}
&:disabled {
opacity: $form-check-input-disabled-opacity-alt;
}
// Use disabled attribute in addition of :disabled pseudo-class
&[disabled],
&:disabled {
~ .form-check-label {
opacity: $form-check-label-disabled-opacity-alt;
}
}
}
.form-check-label {
color: $form-check-label-color-alt;
}
// Switch
.form-switch {
.form-check-input {
background-image: escape-svg($form-switch-bg-image-alt);
&:focus {
background-image: escape-svg($form-switch-focus-bg-image-alt);
}
&:checked {
@if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-switch-checked-bg-image-alt);
}
}
}
}
.btn-check {
&[disabled],
&:disabled {
+ .btn {
opacity: $form-check-btn-check-disabled-opacity-alt;
}
}
}

64
scss/dark/bootstrap/forms/_form-control.scss Normal file
View File

@ -0,0 +1,64 @@
//
// General form controls (plus a few specific high-level interventions)
//
.form-control {
color: $input-color-alt;
background-color: $input-bg-alt;
border: $input-border-width solid $input-border-color-alt;
@include box-shadow($input-box-shadow-alt);
// Customize the `:focus` state to imitate native WebKit styles.
&:focus {
color: $input-focus-color-alt;
background-color: $input-focus-bg-alt;
border-color: $input-focus-border-color-alt;
@if $enable-shadows {
@include box-shadow($input-box-shadow-alt, $input-focus-box-shadow-alt);
} @else {
box-shadow: $input-focus-box-shadow-alt;
}
}
// Placeholder
&::placeholder {
color: $input-placeholder-color-alt;
}
// Disabled and read-only inputs
&:disabled,
&:read-only {
background-color: $input-disabled-bg-alt;
border-color: $input-disabled-border-color-alt;
}
// File input buttons theming
&::file-selector-button {
color: $form-file-button-color-alt;
@include gradient-bg($form-file-button-bg-alt);
border-color: inherit;
}
&:hover:not(:disabled):not(:read-only)::file-selector-button {
background-color: $form-file-button-hover-bg-alt;
}
&::-webkit-file-upload-button {
color: $form-file-button-color-alt;
@include gradient-bg($form-file-button-bg-alt);
border-color: inherit;
}
&:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
background-color: $form-file-button-hover-bg-alt;
}
}
// Readonly controls as plain text
.form-control-plaintext {
color: $input-plaintext-color-alt;
background-color: transparent;
border: solid transparent;
}

56
scss/dark/bootstrap/forms/_form-range.scss Normal file
View File

@ -0,0 +1,56 @@
// Range
.form-range {
// background-color: transparent;
&:focus {
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
}
&::-webkit-slider-thumb {
@include gradient-bg($form-range-thumb-bg-alt);
border: $form-range-thumb-border-alt;
@include box-shadow($form-range-thumb-box-shadow-alt);
&:active {
@include gradient-bg($form-range-thumb-active-bg-alt);
}
}
&::-webkit-slider-runnable-track {
// color: transparent; // Why?
background-color: $form-range-track-bg-alt;
// border-color: transparent;
@include box-shadow($form-range-track-box-shadow-alt);
}
&::-moz-range-thumb {
@include gradient-bg($form-range-thumb-bg-alt);
border: $form-range-thumb-border-alt;
@include box-shadow($form-range-thumb-box-shadow-alt);
&:active {
@include gradient-bg($form-range-thumb-active-bg-alt);
}
}
&::-moz-range-track {
// color: transparent;
background-color: $form-range-track-bg-alt;
// border-color: transparent; // Firefox specific?
@include box-shadow($form-range-track-box-shadow-alt);
}
&:disabled {
pointer-events: none;
&::-webkit-slider-thumb {
background-color: $form-range-thumb-disabled-bg-alt;
}
&::-moz-range-thumb {
background-color: $form-range-thumb-disabled-bg-alt;
}
}
}

35
scss/dark/bootstrap/forms/_form-select.scss Normal file
View File

@ -0,0 +1,35 @@
// Select
.form-select {
color: $form-select-color-alt;
background-color: $form-select-bg-alt;
background-image: escape-svg($form-select-indicator-alt);
border: $form-select-border-width solid $form-select-border-color-alt;
@include box-shadow($form-select-box-shadow-alt);
&:focus {
border-color: $form-select-focus-border-color-alt;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow-alt, $form-select-focus-box-shadow-alt);
} @else {
box-shadow: $form-select-focus-box-shadow-alt;
}
}
&[multiple],
&[size]:not([size="1"]) {
background-image: none;
}
&:disabled {
color: $form-select-disabled-color-alt;
background-color: $form-select-disabled-bg-alt;
border-color: $form-select-disabled-border-color-alt;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $form-select-color-alt;
}
}

5
scss/dark/bootstrap/forms/_form-text.scss Normal file
View File

@ -0,0 +1,5 @@
// Form text
.form-text {
color: $form-text-color-alt;
}

16
scss/dark/bootstrap/forms/_input-group.scss Normal file
View File

@ -0,0 +1,16 @@
// Textual addons
.input-group-text {
color: $input-group-addon-color-alt;
background-color: $input-group-addon-bg-alt;
border: $input-border-width solid $input-group-addon-border-color-alt;
}
// Rounded corners
.input-group {
$validation-messages: "";
@each $state in map-keys($form-validation-states-alt) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}
} // WHAT DOES THIS DO???

9
scss/dark/bootstrap/forms/_labels.scss Normal file
View File

@ -0,0 +1,9 @@
// Labels
.form-label {
color: $form-label-color-alt;
}
.col-form-label {
color: $form-label-color-alt;
}

5
scss/dark/bootstrap/forms/_validation.scss Normal file
View File

@ -0,0 +1,5 @@
// Form validation
@each $state, $data in $form-validation-states-alt {
@include form-validation-state-alt($state, $data...);
}

12
scss/dark/bootstrap/helpers/_colored-links.scss Normal file
View File

@ -0,0 +1,12 @@
@each $color, $value in $theme-colors-alt {
.link-#{$color} {
color: $value;
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: if(color-contrast($value, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt) == $color-contrast-light-alt, shade-color($value, $link-shade-percentage-alt), tint-color($value, $link-shade-percentage-alt));
}
}
}
}

119
scss/dark/bootstrap/mixins/_buttons.scss Normal file
View File

@ -0,0 +1,119 @@
// Button variants
@mixin button-variant-alt(
$background,
$border,
$color: color-contrast($background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
$hover-background: if($color == $color-contrast-light-alt, shade-color($background, $btn-hover-bg-shade-amount-alt), tint-color($background, $btn-hover-bg-tint-amount-alt)),
$hover-border: if($color == $color-contrast-light-alt, shade-color($border, $btn-hover-border-shade-amount-alt), tint-color($border, $btn-hover-border-tint-amount-alt)),
$hover-color: color-contrast($hover-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
$active-background: if($color == $color-contrast-light-alt, shade-color($background, $btn-active-bg-shade-amount-alt), tint-color($background, $btn-active-bg-tint-amount-alt)),
$active-border: if($color == $color-contrast-light-alt, shade-color($border, $btn-active-border-shade-amount-alt), tint-color($border, $btn-active-border-tint-amount-alt)),
$active-color: color-contrast($active-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
$btn-box-shadow: $btn-box-shadow-alt
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
}
.btn-check:focus + &,
&:focus {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
@if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: $active-color;
background-color: $active-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
}
&:disabled,
&.disabled {
color: $disabled-color;
background-color: $disabled-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $disabled-border;
}
}
@mixin button-outline-variant-alt(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background),
$btn-active-box-shadow: $btn-active-box-shadow-alt
) {
color: $color;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
.btn-check:focus + &,
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.dropdown-toggle.show {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
&:disabled,
&.disabled {
color: $color;
background-color: transparent;
}
}

45
scss/dark/bootstrap/mixins/_color-scheme.scss Normal file
View File

@ -0,0 +1,45 @@
// scss-docs-start mixin-color-scheme
@mixin color-scheme-alt($scheme: light) {
@if $scheme == dark {
@media (prefers-color-scheme: dark) {
@content;
}
} @else if $scheme == light {
@media (prefers-color-scheme: light) {
@content;
}
} @else {
// assume what gets passed here is not light or dark, thus is a CSS element,
// e.g. "html.dark", or "[data-theme-dark]"
#{$scheme} {
@content;
}
}
}
// scss-docs-end mixin-color-scheme
@mixin color-scheme-property($scheme: light, $dual: false) {
@if $dual {
@if $scheme == dark {
color-scheme: dark light;
} @else if $scheme == light {
color-scheme: light dark;
} // else ignore
} @else {
@if $scheme == dark {
color-scheme: dark;
} @else if $scheme == light {
color-scheme: light;
} // else ignore
}
}
@function alternative-color-scheme($scheme: light) {
@if $scheme == dark {
@return light;
} @else if $scheme == light {
@return dark;
} @else {
@return $scheme;
}
}

74
scss/dark/bootstrap/mixins/_forms.scss Normal file
View File

@ -0,0 +1,74 @@
@mixin form-validation-state-alt(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity-alt),
$focus-box-shadow: 0 0 $input-btn-focus-blur-alt $input-focus-width rgba($color, $input-btn-focus-color-opacity-alt)
) {
.#{$state}-feedback {
color: $color;
}
.#{$state}-tooltip {
color: $tooltip-color;
background-color: $tooltip-bg-color;
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
background-image: escape-svg($icon);
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
background-image: escape-svg($form-select-indicator-alt), escape-svg($icon);
}
&[multiple],
&[size]:not([size="1"]) {
background-image: escape-svg($icon);
}
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
}

19
scss/dark/bootstrap/mixins/_table-variants.scss Normal file
View File

@ -0,0 +1,19 @@
@mixin table-variant-alt($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg-alt, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor-alt));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor-alt));
$active-bg: mix($color, $background, percentage($table-active-bg-factor-alt));
--#{$variable-prefix}table-bg: #{$background};
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg};
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor-alt));
}
}

7
scss/dark/bootstrap/utilities/_api-all.scss Normal file
View File

@ -0,0 +1,7 @@
@use "sass:map";
@each $color-scheme in $color-schemes {
@include color-scheme-alt($color-scheme) {
@include generate-utility(map-get($utilities, "display"), "-#{$color-scheme}");
}
}

17
scss/dark/bootstrap/utilities/_api.scss Normal file
View File

@ -0,0 +1,17 @@
// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Loop over each utility property
@each $key, $utility in $utilities-alt {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
}
}

4
scss/dark/layout/_content-wrapper.scss Normal file
View File

@ -0,0 +1,4 @@
.content-wrapper {
background-color: $main-bg-alt;
color: $main-color-alt;
}

4
scss/dark/layout/_main-footer.scss Normal file
View File

@ -0,0 +1,4 @@
.main-footer {
background-color: $main-footer-bg-alt;
border-top-color: tint-color($dark-alt, 10%);
}

13
scss/dark/layout/_main-header.scss Normal file
View File

@ -0,0 +1,13 @@
.main-header {
background-color: $dark-alt;
border-bottom-color: tint-color($dark-alt, 10%);
.nav-link {
color: $gray-400-alt;
&:hover,
&:focus {
color: $white-alt;
}
}
}

7
scss/layout/_content-wrapper.scss
View File

@ -3,10 +3,3 @@
background-color: $main-bg; background-color: $main-bg;
color: $main-color; color: $main-color;
} }
@include dark-mode() {
.content-wrapper {
background-color: $main-bg-alt;
color: $main-color-alt;
}
}

2
scss/layout/_layout-fixed.scss
View File

@ -39,5 +39,3 @@
// stylelint-disable-next-line // stylelint-disable-next-line
height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width})); height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
} }
//

9
scss/layout/_main-footer.scss
View File

@ -26,12 +26,3 @@
margin-bottom: $main-footer-height; margin-bottom: $main-footer-height;
} }
} }
@include dark-mode() {
.main-footer {
background-color: $main-footer-bg-alt;
border-top-color: tint-color($dark, 10%);
}
}
//

18
scss/layout/_main-header.scss
View File

@ -28,21 +28,3 @@
// margin-top: $main-header-height; // margin-top: $main-header-height;
} }
} }
@include dark-mode() {
.main-header {
background-color: $dark-alt;
border-bottom-color: tint-color($dark-alt, 10%);
.nav-link {
color: $gray-400-alt;
&:hover,
&:focus {
color: $white-alt;
}
}
}
}
//

2
scss/layout/_main-sidebar.scss
View File

@ -73,5 +73,3 @@
display: block; display: block;
} }
} }
//

2
scss/layout/_sidebar-horizontal.scss
View File

@ -60,5 +60,3 @@
} }
} }
} }
//

2
scss/layout/_sidebar-mini.scss
View File

@ -112,5 +112,3 @@
visibility: visible; visibility: visible;
} }
} }
//

2
scss/layout/_wrapper.scss
View File

@ -15,5 +15,3 @@
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
min-height: 100vh; min-height: 100vh;
} }
//

2
scss/mixins/_animations.scss
View File

@ -115,5 +115,3 @@
transform: none; transform: none;
} }
} }
//

7
scss/mixins/_dark-mode.scss
View File

@ -1,7 +0,0 @@
@mixin dark-mode {
@if $enable-dark-mode {
@media (prefers-color-scheme: dark) {
@content;
}
}
}

2
scss/mixins/_miscellaneous.scss
View File

@ -29,5 +29,3 @@
// background-color: $color; // background-color: $color;
// background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop)); // background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
// } // }
//

2
scss/mixins/_scrollbar.scss
View File

@ -34,5 +34,3 @@
width: 0; width: 0;
} }
} }
//

2
scss/mixins/_sidebar-theme.scss
View File

@ -45,5 +45,3 @@
} }
} }
} }
//

2
scss/parts/_core.scss
View File

@ -3,5 +3,3 @@
// //
@import "../layout"; @import "../layout";
//

2
scss/parts/_dark.scss Normal file
View File

@ -0,0 +1,2 @@
@import "../bootstrap-dark";
@import "../layout-dark";

8
scss/parts/adminlte.pcs.rtl.scss
View File

@ -1,8 +0,0 @@
// Dark mode Enable using prefers-color-scheme
$enable-dark-mode: true;
// AdminLTE
// ---------------------------------------------------
@import "../adminlte";
//

8
scss/parts/adminlte.pcs.scss
View File

@ -1,8 +0,0 @@
// Dark mode Enable using prefers-color-scheme
$enable-dark-mode: true;
// AdminLTE
// ---------------------------------------------------
@import "../adminlte";
//

5
scss/parts/adminlte.rtl.scss
View File

@ -1,5 +0,0 @@
// AdminLTE
// ---------------------------------------------------
@import "../adminlte";
//