diff --git a/gulpfile.js b/gulpfile.js index 58c05843b..82f7a27f8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,7 +9,6 @@ const del = require('del') const esbuild = require('esbuild') const { src, dest, lastRun, watch, series } = require('gulp') const cleanCss = require('gulp-clean-css') -const dependents = require('gulp-dependents') const eslint = require('gulp-eslint7') const fileinclude = require('gulp-file-include') const npmDist = require('gulp-npm-dist') @@ -91,19 +90,12 @@ const scss = () => { .pipe(browserSync.stream()) } -/** - * Use superScss to build css along with Dark mode - */ - -const superScss = () => { - return src(paths.src.scss + '/**/*.scss', { - since: lastRun(scss), - sourcemaps: true - }) - .pipe(dependents()) +// Compile SCSS Dark +const scssDark = () => { + return src(paths.src.scss + '/dark/adminlte-dark-addon.scss', { sourcemaps: true }) .pipe(sass(sassOptions).on('error', sass.logError)) .pipe(postcss(postcssOptions)) - .pipe(dest(paths.temp.css, { sourcemaps: '.' })) + .pipe(dest(paths.temp.css + '/dark', { sourcemaps: '.' })) .pipe(browserSync.stream()) } @@ -183,23 +175,13 @@ const serve = () => { server: paths.temp.base }) - watch([paths.src.scss], { delay: 500 }, series(lintScss, scss)) + watch([paths.src.scss], series(lintScss)) + watch([paths.src.scss + '/**/*.scss', '!' + paths.src.scss + '/bootstrap-dark/**/*.scss', '!' + paths.src.scss + '/dark/**/*.scss'], series(scss)) + watch([paths.src.scss + '/bootstrap-dark/', paths.src.scss + '/dark/'], series(scssDark)) watch([paths.src.ts], series(lintTs, ts)) watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index)) watch([paths.src.assets], series(assets)) - watch([paths.src.vendor], series(vendor)) -} - -const superServe = () => { - browserSync.init({ - server: paths.temp.base - }) - - watch([paths.src.scss], { delay: 500 }, series(lintScss, superScss)) - watch([paths.src.ts], series(lintTs, ts)) - watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index)) - watch([paths.src.assets], series(assets)) - watch([paths.src.vendor], series(vendor)) + // watch([paths.src.vendor], series(vendor)) // Probably not required } // From here Dist will Start @@ -311,7 +293,4 @@ const copyDistVendor = () => { exports.build = series(lintScss, lintTs, cleanDist, copyDistCssAll, copyDistCssRtl, minifyDistCss, copyDistJs, minifyDistJs, copyDistHtml, copyDistHtmlIndex, copyDistAssets, copyDistVendor) // Default - Only for light mode AdminLTE -exports.default = series(scss, ts, html, index, assets, vendor, serve) - -// Super Dev mode for Dark anf Light mode -exports.super = series(superScss, ts, html, index, assets, vendor, superServe) +exports.default = series(scss, scssDark, ts, html, index, assets, vendor, serve) diff --git a/package-lock.json b/package-lock.json index 68a991792..2036ef923 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1830,27 +1830,6 @@ "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true }, - "contains-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-1.0.0.tgz", - "integrity": "sha1-NFizMhhWA+ju0Y9RjUoQiIo6vJE=", - "dev": true, - "requires": { - "normalize-path": "^2.1.1", - "path-starts-with": "^1.0.0" - }, - "dependencies": { - "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", - "dev": true, - "requires": { - "remove-trailing-separator": "^1.0.1" - } - } - } - }, "convert-source-map": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", @@ -2496,9 +2475,9 @@ } }, "esbuild": { - "version": "0.11.23", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.23.tgz", - "integrity": "sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==", + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.1.tgz", + "integrity": "sha512-WfQ00MKm/Y4ysz1u9PCUAsV66k5lbrcEvS6aG9jhBIavpB94FBdaWeBkaZXxCZB4w+oqh+j4ozJFWnnFprOXbg==", "dev": true }, "escalade": { @@ -2520,9 +2499,9 @@ "dev": true }, "eslint": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.26.0.tgz", - "integrity": "sha512-4R1ieRf52/izcZE7AlLy56uIHHDLT74Yzz2Iv2l6kDaYvEu9x+wMB5dZArVL8SYGXSYV2YAg70FcW5Y5nGGNIg==", + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz", + "integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==", "dev": true, "requires": { "@babel/code-frame": "7.12.11", @@ -2533,12 +2512,14 @@ "debug": "^4.0.1", "doctrine": "^3.0.0", "enquirer": "^2.3.5", + "escape-string-regexp": "^4.0.0", "eslint-scope": "^5.1.1", "eslint-utils": "^2.1.0", "eslint-visitor-keys": "^2.0.0", "espree": "^7.3.1", "esquery": "^1.4.0", "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", "file-entry-cache": "^6.0.1", "functional-red-black-tree": "^1.0.1", "glob-parent": "^5.0.0", @@ -2550,7 +2531,7 @@ "js-yaml": "^3.13.1", "json-stable-stringify-without-jsonify": "^1.0.1", "levn": "^0.4.1", - "lodash": "^4.17.21", + "lodash.merge": "^4.6.2", "minimatch": "^3.0.4", "natural-compare": "^1.4.0", "optionator": "^0.9.1", @@ -2559,7 +2540,7 @@ "semver": "^7.2.1", "strip-ansi": "^6.0.0", "strip-json-comments": "^3.1.0", - "table": "^6.0.4", + "table": "^6.0.9", "text-table": "^0.2.0", "v8-compile-cache": "^2.0.3" }, @@ -2598,6 +2579,12 @@ "supports-color": "^7.1.0" } }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true + }, "ignore": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", @@ -2688,14 +2675,13 @@ } }, "eslint-plugin-import": { - "version": "2.23.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.2.tgz", - "integrity": "sha512-LmNoRptHBxOP+nb0PIKz1y6OSzCJlB+0g0IGS3XV4KaKk2q4szqQ6s6F1utVf5ZRkxk/QOTjdxe7v4VjS99Bsg==", + "version": "2.23.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.3.tgz", + "integrity": "sha512-wDxdYbSB55F7T5CC7ucDjY641VvKmlRwT0Vxh7PkY1mI4rclVRFWYfsrjDgZvwYYDZ5ee0ZtfFKXowWjqvEoRQ==", "dev": true, "requires": { "array-includes": "^3.1.3", "array.prototype.flat": "^1.2.4", - "contains-path": "^1.0.0", "debug": "^2.6.9", "doctrine": "^2.1.0", "eslint-import-resolver-node": "^0.3.4", @@ -4437,29 +4423,6 @@ } } }, - "gulp-dependents": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/gulp-dependents/-/gulp-dependents-1.2.5.tgz", - "integrity": "sha512-zwZzr4yxEVKlW96Ch9DS6KsmA9XrHYWYFTdJ3q7GaG6uiVNAsZUR57BlLBRCV0YkVL0sfMozJcQOGdxyOxcjQA==", - "dev": true, - "requires": { - "fancy-log": "^1.3.3", - "through2": "^3.0.1", - "vinyl": "^2.2.0" - }, - "dependencies": { - "through2": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", - "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", - "dev": true, - "requires": { - "inherits": "^2.0.4", - "readable-stream": "2 || 3" - } - } - } - }, "gulp-eslint7": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/gulp-eslint7/-/gulp-eslint7-0.3.1.tgz", @@ -4769,15 +4732,6 @@ } } }, - "gulp-wait": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/gulp-wait/-/gulp-wait-0.0.2.tgz", - "integrity": "sha1-7Ov/REbhoNU3yx3Hc9vUWB0X+y0=", - "dev": true, - "requires": { - "map-stream": "0.0.4" - } - }, "gulplog": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz", @@ -5945,12 +5899,6 @@ "integrity": "sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==", "dev": true }, - "map-stream": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.4.tgz", - "integrity": "sha1-XsbekCE+9sey65Nn6a3o2k79tos=", - "dev": true - }, "map-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz", @@ -7357,26 +7305,6 @@ "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=", "dev": true }, - "path-starts-with": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/path-starts-with/-/path-starts-with-1.0.0.tgz", - "integrity": "sha1-soJDAV6LE43lcmgqxS2kLmRq2E4=", - "dev": true, - "requires": { - "normalize-path": "^2.1.1" - }, - "dependencies": { - "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", - "dev": true, - "requires": { - "remove-trailing-separator": "^1.0.1" - } - } - } - }, "path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -7588,14 +7516,14 @@ "dev": true }, "postcss": { - "version": "8.2.15", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz", - "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz", + "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==", "dev": true, "requires": { "colorette": "^1.2.2", "nanoid": "^3.1.23", - "source-map": "^0.6.1" + "source-map-js": "^0.6.2" } }, "postcss-html": { @@ -9383,6 +9311,12 @@ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true }, + "source-map-js": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", + "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==", + "dev": true + }, "source-map-resolve": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", diff --git a/package.json b/package.json index b44588c89..0ce0e2bfd 100644 --- a/package.json +++ b/package.json @@ -46,15 +46,14 @@ "browser-sync": "^2.26.14", "bundlewatch": "^0.3.2", "del": "^6.0.0", - "esbuild": "^0.11.23", - "eslint": "^7.26.0", + "esbuild": "^0.12.1", + "eslint": "^7.27.0", "eslint-config-xo": "^0.36.0", "eslint-config-xo-typescript": "^0.41.1", - "eslint-plugin-import": "^2.23.2", + "eslint-plugin-import": "^2.23.3", "eslint-plugin-unicorn": "^32.0.1", "gulp": "^4.0.2", "gulp-clean-css": "^4.3.0", - "gulp-dependents": "^1.2.5", "gulp-eslint7": "^0.3.1", "gulp-file-include": "^2.3.0", "gulp-npm-dist": "^1.0.3", @@ -62,10 +61,9 @@ "gulp-rename": "^2.0.0", "gulp-sass": "^4.1.0", "gulp-stylelint": "^13.0.0", - "gulp-wait": "0.0.2", "lockfile-lint": "^4.6.2", "npm-run-all": "^4.1.5", - "postcss": "^8.2.15", + "postcss": "^8.3.0", "rtlcss": "^3.1.2", "sass": "^1.32.13", "stylelint": "^13.13.1", diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss index 0df37490f..607ddf6c3 100644 --- a/src/scss/_main-sidebar.scss +++ b/src/scss/_main-sidebar.scss @@ -14,7 +14,8 @@ $lte-sidebar-dark-submenu-hover-color, $lte-sidebar-dark-submenu-hover-bg, $lte-sidebar-dark-submenu-active-color, - $lte-sidebar-dark-submenu-active-bg + $lte-sidebar-dark-submenu-active-bg, + $lte-sidebar-dark-header-color ); } @@ -30,7 +31,8 @@ $lte-sidebar-light-submenu-hover-color, $lte-sidebar-light-submenu-hover-bg, $lte-sidebar-light-submenu-active-color, - $lte-sidebar-light-submenu-active-bg + $lte-sidebar-light-submenu-active-bg, + $lte-sidebar-light-header-color ); } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 7b6c896e2..f5913f1bd 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -3,50 +3,77 @@ // 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 - -$gray-800: #343a40 !default; -$dark: $gray-800 !default; - // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-shadows: true !default; +$enable-shadows: true; // Links // // Style anchor elements. -$link-decoration: none !default; +$link-decoration: none; // Typography // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-sans-serif: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // stylelint-enable value-keyword-case // Tables // // Customizes the `.table` component with basic values, each used across all table variations. -$table-cell-padding-y: .75rem !default; -$table-cell-padding-x: .75rem !default; +$table-cell-padding-y: .75rem; +$table-cell-padding-x: .75rem; // Forms -$form-check-input-width: 1em !default; +$form-check-input-width: 1em; // Navbar -$navbar-nav-link-padding-x: 1rem !default; +$navbar-nav-link-padding-x: 1rem; // End of Bootstrap Variables // Variables for AdminLTE +// Dynamic Variables +// -------------------------------------------------------- +:root { + // Dark Sidebar Native Variables + --lte-sidebar-dark-bg: #343a40; + --lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1); + --lte-sidebar-dark-color: #c2c7d0; + --lte-sidebar-dark-hover-color: #{$white}; + --lte-sidebar-dark-active-color: #{$white}; + --lte-sidebar-dark-submenu-bg: transparent; + --lte-sidebar-dark-submenu-color: var(--lte-sidebar-dark-color); + --lte-sidebar-dark-submenu-hover-color: #{$white}; + --lte-sidebar-dark-submenu-hover-bg: var(--lte-sidebar-dark-hover-bg); + --lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-bg); + --lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9); + --lte-sidebar-dark-header-color: #{tint-color(#c2c7d0, 5%)}; + + // Light Sidebar Native Variables + --lte-sidebar-light-bg: #{$white}; + --lte-sidebar-light-hover-bg: rgba(#{$black}, .1); + --lte-sidebar-light-color: #{$gray-800}; + --lte-sidebar-light-hover-color: #{$gray-900}; + --lte-sidebar-light-active-color: #{$black}; + --lte-sidebar-light-submenu-bg: transparent; + --lte-sidebar-light-submenu-color: #777; + --lte-sidebar-light-submenu-hover-color: #{$black}; + --lte-sidebar-light-submenu-hover-bg: var(--lte-sidebar-light-hover-bg); + --lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-hover-color); + --lte-sidebar-light-submenu-active-bg: var(--lte-sidebar-light-submenu-hover-bg); + --lte-sidebar-light-header-color: #{shade-color($gray-800, 5%)}; +} + // LAYOUT // -------------------------------------------------------- @@ -85,30 +112,32 @@ $lte-sidebar-transition: min-width $lte-transition-speed $lte-transitio // -------------------------------------------------------- // Dark sidebar -$lte-sidebar-dark-bg: $dark !default; -$lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default; -$lte-sidebar-dark-color: #c2c7d0 !default; -$lte-sidebar-dark-hover-color: $white !default; -$lte-sidebar-dark-active-color: $white !default; -$lte-sidebar-dark-submenu-bg: transparent !default; -$lte-sidebar-dark-submenu-color: #c2c7d0 !default; -$lte-sidebar-dark-submenu-hover-color: $white !default; -$lte-sidebar-dark-submenu-hover-bg: $lte-sidebar-dark-hover-bg !default; -$lte-sidebar-dark-submenu-active-color: $lte-sidebar-dark-bg !default; -$lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default; +$lte-sidebar-dark-bg: var(--lte-sidebar-dark-bg) !default; +$lte-sidebar-dark-hover-bg: var(--lte-sidebar-dark-hover-bg) !default; +$lte-sidebar-dark-color: var(--lte-sidebar-dark-color) !default; +$lte-sidebar-dark-hover-color: var(--lte-sidebar-dark-hover-color) !default; +$lte-sidebar-dark-active-color: var(--lte-sidebar-dark-active-color) !default; +$lte-sidebar-dark-submenu-bg: var(--lte-sidebar-dark-submenu-bg) !default; +$lte-sidebar-dark-submenu-color: var(--lte-sidebar-dark-submenu-color) !default; +$lte-sidebar-dark-submenu-hover-color: var(--lte-sidebar-dark-submenu-hover-color) !default; +$lte-sidebar-dark-submenu-hover-bg: var(--lte-sidebar-dark-submenu-hover-bg) !default; +$lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-submenu-active-color) !default; +$lte-sidebar-dark-submenu-active-bg: var(--lte-sidebar-dark-submenu-active-bg) !default; +$lte-sidebar-dark-header-color: var(--lte-sidebar-dark-header-color) !default; // Light sidebar -$lte-sidebar-light-bg: $white !default; -$lte-sidebar-light-hover-bg: rgba($black, .1) !default; -$lte-sidebar-light-color: $gray-800 !default; -$lte-sidebar-light-hover-color: $gray-900 !default; -$lte-sidebar-light-active-color: $black !default; -$lte-sidebar-light-submenu-bg: transparent !default; -$lte-sidebar-light-submenu-color: #777 !default; -$lte-sidebar-light-submenu-hover-color: $black !default; -$lte-sidebar-light-submenu-hover-bg: $lte-sidebar-light-hover-bg !default; -$lte-sidebar-light-submenu-active-color: $lte-sidebar-light-hover-color !default; -$lte-sidebar-light-submenu-active-bg: $lte-sidebar-light-submenu-hover-bg !default; +$lte-sidebar-light-bg: var(--lte-sidebar-light-bg) !default; +$lte-sidebar-light-hover-bg: var(--lte-sidebar-light-hover-bg) !default; +$lte-sidebar-light-color: var(--lte-sidebar-light-color) !default; +$lte-sidebar-light-hover-color: var(--lte-sidebar-light-hover-color) !default; +$lte-sidebar-light-active-color: var(--lte-sidebar-light-active-color) !default; +$lte-sidebar-light-submenu-bg: var(--lte-sidebar-light-submenu-bg) !default; +$lte-sidebar-light-submenu-color: var(--lte-sidebar-light-submenu-color) !default; +$lte-sidebar-light-submenu-hover-color: var(--lte-sidebar-light-submenu-hover-color) !default; +$lte-sidebar-light-submenu-hover-bg: var(--lte-sidebar-light-submenu-hover-bg) !default; +$lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-submenu-active-color) !default; +$lte-sidebar-light-submenu-active-bg: var(--lte-sidebar-light-submenu-active-bg) !default; +$lte-sidebar-light-header-color: var(--lte-sidebar-light-header-color) !default; // SIDEBAR MINI // -------------------------------------------------------- diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss index fdbe9b580..cb535a082 100644 --- a/src/scss/adminlte.scss +++ b/src/scss/adminlte.scss @@ -10,9 +10,7 @@ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "variables"; // little modified are here -@import "bootstrap/scss/mixins"; @import "custom-utilities"; -@import "bootstrap/scss/utilities"; @import "bootstrap/scss/bootstrap"; // Variables and Mixins diff --git a/src/scss/bootstrap-dark/_list-group.scss b/src/scss/bootstrap-dark/_list-group.scss index 3a6bfba27..e125c30de 100644 --- a/src/scss/bootstrap-dark/_list-group.scss +++ b/src/scss/bootstrap-dark/_list-group.scss @@ -53,11 +53,11 @@ // 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)); + $list-group-variant-bg-alt: shift-color($value, $list-group-item-bg-scale-alt); + $list-group-variant-color-alt: shift-color($value, $list-group-item-color-scale-alt); + @if (contrast-ratio($list-group-variant-bg-alt, $list-group-variant-color-alt) < $min-contrast-ratio-alt) { + $list-group-variant-color-alt: mix($value, color-contrast($list-group-variant-bg-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); + @include list-group-item-variant($state, $list-group-variant-bg-alt, $list-group-variant-color-alt); } diff --git a/src/scss/bootstrap-dark/_tables.scss b/src/scss/bootstrap-dark/_tables.scss index 9b98d1561..cf919e98e 100644 --- a/src/scss/bootstrap-dark/_tables.scss +++ b/src/scss/bootstrap-dark/_tables.scss @@ -4,6 +4,7 @@ .table { --#{$variable-prefix}table-bg: #{$table-bg-alt}; + --#{$variable-prefix}table-accent-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}; diff --git a/src/scss/bootstrap-dark/_variables-alt.scss b/src/scss/bootstrap-dark/_variables-alt.scss index e9f232fb4..95ace1278 100644 --- a/src/scss/bootstrap-dark/_variables-alt.scss +++ b/src/scss/bootstrap-dark/_variables-alt.scss @@ -14,11 +14,11 @@ $color-schemes: ( // items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129 $white-alt: #f0f6fc !default; -$gray-100-alt: #f8f9fa !default; -$gray-200-alt: #e9ecef !default; -$gray-300-alt: #dee2e6 !default; -$gray-400-alt: #ced4da !default; -$gray-500-alt: #6c757d !default; +$gray-100-alt: #c9d1d9 !default; +$gray-200-alt: #b1bac4 !default; +$gray-300-alt: #8b949e !default; +$gray-400-alt: #6e7681 !default; +$gray-500-alt: #484f58 !default; $gray-600-alt: #30363d !default; $gray-700-alt: #21262d !default; $gray-800-alt: #161b22 !default; @@ -74,7 +74,7 @@ $info-alt: $cyan-alt !default; $warning-alt: $yellow-alt !default; $danger-alt: $red-alt !default; $light-alt: $gray-100-alt !default; -$dark-alt: $gray-900-alt !default; +$dark-alt: $gray-800-alt !default; $theme-colors-alt: ( "primary": $primary-alt, @@ -114,7 +114,7 @@ $body-color-alt: $gray-100-alt !default; // $gray-900 !default; // ______________________________________ // Style anchor elements. -$link-color-alt: shift-color($primary-alt, -15%) !default; +$link-color-alt: #58a6ff !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 @@ -235,7 +235,7 @@ $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-color-alt: $body-color-alt !default; $input-border-color-alt: $gray-700-alt !default; $input-box-shadow-alt: $box-shadow-inset-alt !default; @@ -310,7 +310,7 @@ $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-file-button-hover-bg-alt: tint-color($form-file-button-bg-alt, 5%) !default; $form-floating-label-opacity-alt: .65 !default; @@ -593,7 +593,7 @@ $figure-caption-color-alt: $gray-400-alt !default; // Breadcrumbs // ______________________________________ -$breadcrumb-bg-alt: $gray-800-alt !default; // null !default; +$breadcrumb-bg-alt: null !default; // null !default; $breadcrumb-divider-color-alt: $gray-400-alt !default; $breadcrumb-active-color-alt: $gray-400-alt !default; diff --git a/src/scss/bootstrap-dark/forms/_form-control.scss b/src/scss/bootstrap-dark/forms/_form-control.scss index 17b9cecff..f0345387d 100644 --- a/src/scss/bootstrap-dark/forms/_form-control.scss +++ b/src/scss/bootstrap-dark/forms/_form-control.scss @@ -28,7 +28,7 @@ // Disabled and read-only inputs &:disabled, - &:read-only { + &[readonly] { background-color: $input-disabled-bg-alt; border-color: $input-disabled-border-color-alt; } @@ -40,7 +40,7 @@ border-color: inherit; } - &:hover:not(:disabled):not(:read-only)::file-selector-button { + &:hover:not(:disabled):not([readonly])::file-selector-button { background-color: $form-file-button-hover-bg-alt; } @@ -50,7 +50,7 @@ border-color: inherit; } - &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button { + &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: $form-file-button-hover-bg-alt; } } diff --git a/src/scss/dark/_cards.scss b/src/scss/dark/_cards.scss index 69509eee8..8ec329b9e 100644 --- a/src/scss/dark/_cards.scss +++ b/src/scss/dark/_cards.scss @@ -8,11 +8,11 @@ } .card { - background-color: $dark-alt; + background-color: $gray-900-alt; color: $white-alt; .card { - background-color: tint-colors($dark-alt, 5%); + background-color: tint-colors($gray-900-alt, 5%); color: $white-alt; } .nav.flex-column > li { @@ -31,18 +31,18 @@ } .card-comments { - background-color: tint-colors($dark-alt, 1.25%); + background-color: tint-colors($gray-900-alt, 1.25%); .username { color: $gray-400-alt; } .card-comment { - border-bottom-color: tint-colors($dark-alt, 7.5%); + border-bottom-color: tint-colors($gray-900-alt, 7.5%); } } .todo-list > li { - background-color: tint-colors($dark-alt, 5%); - border-color: tint-colors($dark-alt, 7.5%); + background-color: tint-colors($gray-900-alt, 5%); + border-color: tint-colors($gray-900-alt, 7.5%); color: $white-alt; } diff --git a/src/scss/dark/_main-header.scss b/src/scss/dark/_main-header.scss index 7afc4c0d5..c95fb5ec5 100644 --- a/src/scss/dark/_main-header.scss +++ b/src/scss/dark/_main-header.scss @@ -3,7 +3,7 @@ border-bottom-color: tint-color($dark-alt, 10%); .nav-link { - color: $gray-400-alt; + color: $body-color-alt; &:hover, &:focus { diff --git a/src/scss/dark/_main-sidebar.scss b/src/scss/dark/_main-sidebar.scss deleted file mode 100644 index 5b190755a..000000000 --- a/src/scss/dark/_main-sidebar.scss +++ /dev/null @@ -1,39 +0,0 @@ -// -// Core: Main Sidebar -// - -.sidebar-bg-dark { - @include nav-treeview-dark ( - $lte-sidebar-dark-bg-alt, - $lte-sidebar-dark-hover-bg-alt, - $lte-sidebar-dark-color-alt, - $lte-sidebar-dark-hover-color-alt, - $lte-sidebar-dark-active-color-alt, - $lte-sidebar-dark-submenu-bg-alt, - $lte-sidebar-dark-submenu-color-alt, - $lte-sidebar-dark-submenu-hover-color-alt, - $lte-sidebar-dark-submenu-hover-bg-alt, - $lte-sidebar-dark-submenu-active-color-alt, - $lte-sidebar-dark-submenu-active-bg-alt - ); -} - -.sidebar-bg-light { - @include nav-treeview-light ( - $lte-sidebar-light-bg-alt, - $lte-sidebar-light-hover-bg-alt, - $lte-sidebar-light-color-alt, - $lte-sidebar-light-hover-color-alt, - $lte-sidebar-light-active-color-alt, - $lte-sidebar-light-submenu-bg-alt, - $lte-sidebar-light-submenu-color-alt, - $lte-sidebar-light-submenu-hover-color-alt, - $lte-sidebar-light-submenu-hover-bg-alt, - $lte-sidebar-light-submenu-active-color-alt, - $lte-sidebar-light-submenu-active-bg-alt - ); -} - -.sidebar-color-primary { - @include sidebar-color($primary-alt); -} diff --git a/src/scss/dark/_variables-alt.scss b/src/scss/dark/_variables-alt.scss index 46fe00bf2..9c29bd159 100644 --- a/src/scss/dark/_variables-alt.scss +++ b/src/scss/dark/_variables-alt.scss @@ -1,36 +1,18 @@ -// SIDEBAR SKINS +// Dynamic Variables // -------------------------------------------------------- -// Dark sidebar -$lte-sidebar-dark-bg-alt: $dark-alt !default; -$lte-sidebar-dark-hover-bg-alt: rgba(255, 255, 255, .1) !default; -$lte-sidebar-dark-color-alt: #c2c7d0 !default; -$lte-sidebar-dark-hover-color-alt: $white-alt !default; -$lte-sidebar-dark-active-color-alt: $white-alt !default; -$lte-sidebar-dark-submenu-bg-alt: transparent !default; -$lte-sidebar-dark-submenu-color-alt: #c2c7d0 !default; -$lte-sidebar-dark-submenu-hover-color-alt: $white-alt !default; -$lte-sidebar-dark-submenu-hover-bg-alt: $lte-sidebar-dark-hover-bg-alt !default; -$lte-sidebar-dark-submenu-active-color-alt: $lte-sidebar-dark-bg-alt !default; -$lte-sidebar-dark-submenu-active-bg-alt: rgba(255, 255, 255, .9) !default; +:root { + // Dark Sidebar Native Variables + --lte-sidebar-dark-bg: #{$dark-alt}; -// Light sidebar -$lte-sidebar-light-bg-alt: $white-alt !default; -$lte-sidebar-light-hover-bg-alt: rgba($black-alt, .1) !default; -$lte-sidebar-light-color-alt: $gray-800-alt !default; -$lte-sidebar-light-hover-color-alt: $gray-900-alt !default; -$lte-sidebar-light-active-color-alt: $black-alt !default; -$lte-sidebar-light-submenu-bg-alt: transparent !default; -$lte-sidebar-light-submenu-color-alt: #777 !default; -$lte-sidebar-light-submenu-hover-color-alt: $black-alt !default; -$lte-sidebar-light-submenu-hover-bg-alt: $lte-sidebar-light-hover-bg-alt !default; -$lte-sidebar-light-submenu-active-color-alt: $lte-sidebar-light-hover-color-alt !default; -$lte-sidebar-light-submenu-active-bg-alt: $lte-sidebar-light-submenu-hover-bg-alt !default; + // Light Sidebar Native Variables + --lte-sidebar-light-bg: #{$white-alt}; +} // MAIN FOOTER // -------------------------------------------------------- $lte-main-footer-bg-alt: $dark-alt !default; // Body background (Affects main content background only) -$lte-main-bg-alt: $black-alt !default; +$lte-main-bg-alt: $gray-900-alt !default; $lte-main-color-alt: $white-alt !default; diff --git a/src/scss/dark/parts/_core.scss b/src/scss/dark/parts/_core.scss index 730abe208..20271f604 100644 --- a/src/scss/dark/parts/_core.scss +++ b/src/scss/dark/parts/_core.scss @@ -1,4 +1,4 @@ @import "../main-header"; -@import "../main-sidebar"; +// @import "../main-sidebar"; @import "../content-wrapper"; @import "../main-footer"; diff --git a/src/scss/mixins/_nav-treeview-dark.scss b/src/scss/mixins/_nav-treeview-dark.scss index 89ded68c7..e29d48f5e 100644 --- a/src/scss/mixins/_nav-treeview-dark.scss +++ b/src/scss/mixins/_nav-treeview-dark.scss @@ -9,7 +9,8 @@ $lte-sidebar-submenu-hover-color, $lte-sidebar-submenu-hover-bg, $lte-sidebar-submenu-active-color, - $lte-sidebar-submenu-active-bg + $lte-sidebar-submenu-active-bg, + $lte-sidebar-header-color ) { // Sidebar background color background-color: $lte-sidebar-bg; @@ -45,7 +46,7 @@ // Section Heading .nav-header { background-color: inherit; //darken($lte-sidebar-bg, 3%); - color: tint-color($lte-sidebar-color, 5%); + color: $lte-sidebar-header-color; } // All links within the sidebar menu diff --git a/src/scss/mixins/_nav-treeview-light.scss b/src/scss/mixins/_nav-treeview-light.scss index 3f43b73c2..b84cf8c19 100644 --- a/src/scss/mixins/_nav-treeview-light.scss +++ b/src/scss/mixins/_nav-treeview-light.scss @@ -9,7 +9,8 @@ $lte-sidebar-submenu-hover-color, $lte-sidebar-submenu-hover-bg, $lte-sidebar-submenu-active-color, - $lte-sidebar-submenu-active-bg + $lte-sidebar-submenu-active-bg, + $lte-sidebar-header-color ) { // Sidebar background color background-color: $lte-sidebar-bg; @@ -45,7 +46,7 @@ // Section Heading .nav-header { background-color: inherit; - color: shade-color($lte-sidebar-color, 5%); + color: $lte-sidebar-header-color; } // All links within the sidebar menu