mirror of https://github.com/ColorlibHQ/AdminLTE
improve dark mode with variables
Daniel
parent
c88680e30c
commit
e5a668aa45
39
gulpfile.js
39
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)
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
10
package.json
10
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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// --------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
border-bottom-color: tint-color($dark-alt, 10%);
|
||||
|
||||
.nav-link {
|
||||
color: $gray-400-alt;
|
||||
color: $body-color-alt;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../main-header";
|
||||
@import "../main-sidebar";
|
||||
// @import "../main-sidebar";
|
||||
@import "../content-wrapper";
|
||||
@import "../main-footer";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue