diff --git a/.prettierrc b/.prettierrc
index 35b5ef642..875e86d6e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,7 +4,17 @@
"printWidth": 320,
"proseWrap": "always",
"semi": false,
- "singleQuote": false,
+ "singleQuote": true,
+ "quoteProps": "consistent",
"tabWidth": 2,
- "trailingComma": "all"
+ "useTabs": false,
+ "trailingComma": "all",
+ "overrides": [
+ {
+ "files": "*.scss",
+ "options": {
+ "parser": "scss"
+ }
+ }
+ ]
}
diff --git a/core/.build/compare-variables.mjs b/core/.build/compare-variables.mjs
new file mode 100644
index 000000000..804480b58
--- /dev/null
+++ b/core/.build/compare-variables.mjs
@@ -0,0 +1,82 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get __dirname in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// File paths (relative to core/.build directory)
+const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss');
+const tablerPath = path.join(__dirname, '../scss/_variables.scss');
+
+// Function to extract variable names from SCSS file
+function extractVariables(filePath) {
+ const content = fs.readFileSync(filePath, 'utf8');
+ const variables = new Set();
+
+ // Regex to find SCSS variables
+ // Looks for patterns like: $variable-name: value
+ // Includes variables in maps and lists
+ const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g;
+
+ let match;
+ while ((match = variableRegex.exec(content)) !== null) {
+ const varName = match[1];
+ variables.add(varName);
+ }
+
+ return variables;
+}
+
+// Main function
+function compareVariables() {
+ console.log('Analyzing Bootstrap variables...');
+ const bootstrapVars = extractVariables(bootstrapPath);
+ console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`);
+
+ console.log('Analyzing Tabler variables...');
+ const tablerVars = extractVariables(tablerPath);
+ console.log(`Found ${tablerVars.size} variables in Tabler\n`);
+
+ // Find variables that are in Bootstrap but not in Tabler
+ const missingInTabler = [];
+ for (const varName of bootstrapVars) {
+ if (!tablerVars.has(varName)) {
+ missingInTabler.push(varName);
+ }
+ }
+
+ // Sort alphabetically
+ missingInTabler.sort();
+
+ console.log('='.repeat(60));
+ console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`);
+ console.log('='.repeat(60));
+
+ if (missingInTabler.length === 0) {
+ console.log('All Bootstrap variables are present in Tabler!');
+ } else {
+ console.log('\nList of missing variables:\n');
+ missingInTabler.forEach((varName, index) => {
+ console.log(`${(index + 1).toString().padStart(4)}. $${varName}`);
+ });
+ }
+
+ // Optionally: show statistics
+ console.log('\n' + '='.repeat(60));
+ console.log('Statistics:');
+ console.log(` Bootstrap: ${bootstrapVars.size} variables`);
+ console.log(` Tabler: ${tablerVars.size} variables`);
+ console.log(` Missing: ${missingInTabler.length} variables`);
+ console.log(` Coverage: ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`);
+ console.log('='.repeat(60));
+}
+
+// Run analysis
+try {
+ compareVariables();
+} catch (error) {
+ console.error('Error during analysis:', error.message);
+ process.exit(1);
+}
\ No newline at end of file
diff --git a/core/js/src/autosize.js b/core/js/src/autosize.js
index 56409f049..71bef9fd5 100644
--- a/core/js/src/autosize.js
+++ b/core/js/src/autosize.js
@@ -1,7 +1,8 @@
// Autosize plugin
-const elements = document.querySelectorAll('[data-bs-toggle="autosize"]');
+const elements = document.querySelectorAll('[data-bs-toggle="autosize"]')
+
if (elements.length) {
- elements.forEach(function (element) {
- window.autosize && window.autosize(element);
- });
-}
\ No newline at end of file
+ elements.forEach(function (element) {
+ window.autosize && window.autosize(element)
+ })
+}
diff --git a/core/js/src/bootstrap.js b/core/js/src/bootstrap.js
index b4854dd10..5d2d8ff3f 100644
--- a/core/js/src/bootstrap.js
+++ b/core/js/src/bootstrap.js
@@ -1,3 +1,3 @@
-export * as Popper from '@popperjs/core';
+export * as Popper from '@popperjs/core'
-export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap';
\ No newline at end of file
+export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap'
diff --git a/core/js/src/countup.js b/core/js/src/countup.js
index 37f4b0f02..619879b01 100644
--- a/core/js/src/countup.js
+++ b/core/js/src/countup.js
@@ -1,23 +1,25 @@
-const elements = document.querySelectorAll('[data-countup]');
+const elements = document.querySelectorAll('[data-countup]')
if (elements.length) {
- elements.forEach(function (element) {
- let options = {};
- try {
- const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
- options = Object.assign({
- 'enableScrollSpy': true
- }, dataOptions);
-
- } catch (error) {}
+ elements.forEach(function (element) {
+ let options = {}
+ try {
+ const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
+ options = Object.assign(
+ {
+ enableScrollSpy: true,
+ },
+ dataOptions,
+ )
+ } catch (error) {}
- const value = parseInt(element.innerHTML, 10);
+ const value = parseInt(element.innerHTML, 10)
- if (window.countUp && window.countUp.CountUp) {
- const countUp = new window.countUp.CountUp(element, value, options);
- if (!countUp.error) {
- countUp.start();
- }
- }
- });
+ if (window.countUp && window.countUp.CountUp) {
+ const countUp = new window.countUp.CountUp(element, value, options)
+ if (!countUp.error) {
+ countUp.start()
+ }
+ }
+ })
}
diff --git a/core/js/src/dropdown.js b/core/js/src/dropdown.js
index 6a98950bd..caba3c072 100644
--- a/core/js/src/dropdown.js
+++ b/core/js/src/dropdown.js
@@ -1,12 +1,12 @@
-import { Dropdown } from './bootstrap';
+import { Dropdown } from './bootstrap'
/*
Core dropdowns
*/
-let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
+let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'))
dropdownTriggerList.map(function (dropdownTriggerEl) {
- let options = {
- boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
- }
- return new Dropdown(dropdownTriggerEl, options);
-});
+ let options = {
+ boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
+ }
+ return new Dropdown(dropdownTriggerEl, options)
+})
diff --git a/core/js/src/input-mask.js b/core/js/src/input-mask.js
index 9f561153b..5f62cc79e 100644
--- a/core/js/src/input-mask.js
+++ b/core/js/src/input-mask.js
@@ -1,9 +1,10 @@
// Input mask plugin
-var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'));
+var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
- window.IMask && new window.IMask(maskEl, {
- mask: maskEl.dataset.mask,
- lazy: maskEl.dataset['mask-visible'] === 'true'
- })
-});
\ No newline at end of file
+ window.IMask &&
+ new window.IMask(maskEl, {
+ mask: maskEl.dataset.mask,
+ lazy: maskEl.dataset['mask-visible'] === 'true',
+ })
+})
diff --git a/core/js/src/popover.js b/core/js/src/popover.js
index 0756095e1..9785ed0ee 100644
--- a/core/js/src/popover.js
+++ b/core/js/src/popover.js
@@ -1,14 +1,14 @@
-import { Popover } from './bootstrap';
+import { Popover } from './bootstrap'
/*
Core popovers
*/
-let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
popoverTriggerList.map(function (popoverTriggerEl) {
- let options = {
- delay: {show: 50, hide: 50},
- html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
- placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
- };
- return new Popover(popoverTriggerEl, options);
-});
\ No newline at end of file
+ let options = {
+ delay: { show: 50, hide: 50 },
+ html: popoverTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
+ placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
+ }
+ return new Popover(popoverTriggerEl, options)
+})
diff --git a/core/js/src/sortable.js b/core/js/src/sortable.js
index c98f8d882..093599267 100644
--- a/core/js/src/sortable.js
+++ b/core/js/src/sortable.js
@@ -2,24 +2,22 @@
// Initializes Sortable on elements marked with [data-sortable]
// Allows options via JSON in data attribute: data-sortable='{"animation":150}'
-const sortableElements = document.querySelectorAll('[data-sortable]');
+const sortableElements = document.querySelectorAll('[data-sortable]')
if (sortableElements.length) {
sortableElements.forEach(function (element) {
- let options = {};
+ let options = {}
try {
- const rawOptions = element.getAttribute('data-sortable');
- options = rawOptions ? JSON.parse(rawOptions) : {};
+ const rawOptions = element.getAttribute('data-sortable')
+ options = rawOptions ? JSON.parse(rawOptions) : {}
} catch (e) {
// ignore invalid JSON
}
if (window.Sortable) {
// eslint-disable-next-line no-new
- new window.Sortable(element, options);
+ new window.Sortable(element, options)
}
- });
+ })
}
-
-
diff --git a/core/js/src/switch-icon.js b/core/js/src/switch-icon.js
index 8ba95423a..2267857fe 100644
--- a/core/js/src/switch-icon.js
+++ b/core/js/src/switch-icon.js
@@ -1,11 +1,11 @@
/*
Switch icons
*/
-let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'));
+let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'))
switchesTriggerList.map(function (switchTriggerEl) {
- switchTriggerEl.addEventListener('click', (e) => {
- e.stopPropagation();
+ switchTriggerEl.addEventListener('click', (e) => {
+ e.stopPropagation()
- switchTriggerEl.classList.toggle('active');
- });
-});
\ No newline at end of file
+ switchTriggerEl.classList.toggle('active')
+ })
+})
diff --git a/core/js/src/tab.js b/core/js/src/tab.js
index a2de30fab..daeb14e4a 100644
--- a/core/js/src/tab.js
+++ b/core/js/src/tab.js
@@ -1,15 +1,15 @@
-import { Tab } from './bootstrap';
+import { Tab } from './bootstrap'
export const EnableActivationTabsFromLocationHash = () => {
- const locationHash = window.location.hash;
+ const locationHash = window.location.hash
if (locationHash) {
- const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
- const matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
+ const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
+ const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
- matchedTabs.map(tab => {
- new Tab(tab).show();
- });
+ matchedTabs.map((tab) => {
+ new Tab(tab).show()
+ })
}
}
diff --git a/core/js/src/tabler.js b/core/js/src/tabler.js
index 1300cd98f..c40c91f8d 100644
--- a/core/js/src/tabler.js
+++ b/core/js/src/tabler.js
@@ -10,8 +10,8 @@ export const getColor = (color, opacity = 1) => {
const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
if (opacity !== 1) {
- return hexToRgba(c, opacity)
+ return hexToRgba(c, opacity)
}
return c
-}
\ No newline at end of file
+}
diff --git a/core/js/src/toast.js b/core/js/src/toast.js
index b8146cbba..6326db4e4 100644
--- a/core/js/src/toast.js
+++ b/core/js/src/toast.js
@@ -1,17 +1,17 @@
-import { Toast } from './bootstrap';
+import { Toast } from './bootstrap'
/*
Toasts
*/
-let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
+let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'))
toastsTriggerList.map(function (toastTriggerEl) {
- if (!toastTriggerEl.hasAttribute('data-bs-target')) {
- return;
- }
+ if (!toastTriggerEl.hasAttribute('data-bs-target')) {
+ return
+ }
- const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'));
+ const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
- toastTriggerEl.addEventListener('click', () => {
- toastEl.show()
- });
-});
\ No newline at end of file
+ toastTriggerEl.addEventListener('click', () => {
+ toastEl.show()
+ })
+})
diff --git a/core/js/src/tooltip.js b/core/js/src/tooltip.js
index 7d61cd8c2..b528eb1c4 100644
--- a/core/js/src/tooltip.js
+++ b/core/js/src/tooltip.js
@@ -1,11 +1,11 @@
-import { Tooltip } from './bootstrap';
+import { Tooltip } from './bootstrap'
-let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
- let options = {
- delay: {show: 50, hide: 50},
- html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
- placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
- };
- return new Tooltip(tooltipTriggerEl, options);
-});
\ No newline at end of file
+ let options = {
+ delay: { show: 50, hide: 50 },
+ html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
+ placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
+ }
+ return new Tooltip(tooltipTriggerEl, options)
+})
diff --git a/core/js/tabler-theme.js b/core/js/tabler-theme.js
index 45df216f1..df1efb253 100644
--- a/core/js/tabler-theme.js
+++ b/core/js/tabler-theme.js
@@ -4,32 +4,32 @@
* This will prevent any flashes of the light theme (default) before switching.
*/
const themeConfig = {
- "theme": "light",
- "theme-base": "gray",
- "theme-font": "sans-serif",
- "theme-primary": "blue",
- "theme-radius": "1",
+ 'theme': 'light',
+ 'theme-base': 'gray',
+ 'theme-font': 'sans-serif',
+ 'theme-primary': 'blue',
+ 'theme-radius': '1',
}
const params = new Proxy(new URLSearchParams(window.location.search), {
- get: (searchParams, prop) => searchParams.get(prop),
+ get: (searchParams, prop) => searchParams.get(prop),
})
for (const key in themeConfig) {
- const param = params[key]
- let selectedValue
+ const param = params[key]
+ let selectedValue
- if (!!param) {
- localStorage.setItem('tabler-' + key, param)
- selectedValue = param
- } else {
- const storedTheme = localStorage.getItem('tabler-' + key)
- selectedValue = storedTheme ? storedTheme : themeConfig[key]
- }
+ if (!!param) {
+ localStorage.setItem('tabler-' + key, param)
+ selectedValue = param
+ } else {
+ const storedTheme = localStorage.getItem('tabler-' + key)
+ selectedValue = storedTheme ? storedTheme : themeConfig[key]
+ }
- if (selectedValue !== themeConfig[key]) {
- document.documentElement.setAttribute('data-bs-' + key, selectedValue)
- } else {
- document.documentElement.removeAttribute('data-bs-' + key)
- }
-}
\ No newline at end of file
+ if (selectedValue !== themeConfig[key]) {
+ document.documentElement.setAttribute('data-bs-' + key, selectedValue)
+ } else {
+ document.documentElement.removeAttribute('data-bs-' + key)
+ }
+}
diff --git a/core/js/tabler.js b/core/js/tabler.js
index e4f5bdeb4..2983123e3 100644
--- a/core/js/tabler.js
+++ b/core/js/tabler.js
@@ -1,28 +1,15 @@
-import "./src/autosize"
-import "./src/countup"
-import "./src/input-mask"
-import "./src/dropdown"
-import "./src/tooltip"
-import "./src/popover"
-import "./src/switch-icon"
-import "./src/tab"
-import "./src/toast"
-import "./src/sortable"
+import './src/autosize'
+import './src/countup'
+import './src/input-mask'
+import './src/dropdown'
+import './src/tooltip'
+import './src/popover'
+import './src/switch-icon'
+import './src/tab'
+import './src/toast'
+import './src/sortable'
-export * as bootstrap from "bootstrap"
-export * as tabler from "./src/tabler"
+export * as bootstrap from 'bootstrap'
+export * as tabler from './src/tabler'
-export {
- Alert,
- Modal,
- Toast,
- Tooltip,
- Tab,
- Button,
- Carousel,
- Collapse,
- Dropdown,
- Popover,
- ScrollSpy,
- Offcanvas
-} from 'bootstrap'
+export { Alert, Modal, Toast, Tooltip, Tab, Button, Carousel, Collapse, Dropdown, Popover, ScrollSpy, Offcanvas } from 'bootstrap'
diff --git a/core/package.json b/core/package.json
index a36c6287a..04e319dbf 100644
--- a/core/package.json
+++ b/core/package.json
@@ -15,6 +15,8 @@
"css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
+ "css-lint": "pnpm run css-lint-variables",
+ "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
"js": "pnpm run js-compile && pnpm run js-minify",
"js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
"js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
@@ -34,8 +36,8 @@
"watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
"bundlewatch": "bundlewatch",
"generate-sri": "node .build/generate-sri.js",
- "format:check": "prettier --check src/**/*.{js,scss} --cache",
- "format:write": "prettier --write src/**/*.{js,scss} --cache"
+ "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
+ "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
},
"repository": {
"type": "git",
@@ -157,6 +159,7 @@
"clipboard": "^2.0.11",
"countup.js": "^2.9.0",
"dropzone": "^6.0.0-beta.2",
+ "find-unused-sass-variables": "^6.1.0",
"flatpickr": "^4.6.13",
"fslightbox": "^3.7.4",
"fullcalendar": "^6.1.19",
diff --git a/core/scss/_bootstrap-components.scss b/core/scss/_bootstrap-components.scss
index 9b3720774..9d7cb3e9a 100644
--- a/core/scss/_bootstrap-components.scss
+++ b/core/scss/_bootstrap-components.scss
@@ -1,30 +1,30 @@
// Layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/containers';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/tables';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/toasts';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/carousel';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/offcanvas';
+@import 'bootstrap/scss/placeholders';
// Utilities
-@import "bootstrap/scss/utilities/api";
+@import 'bootstrap/scss/utilities/api';
diff --git a/core/scss/_bootstrap-config.scss b/core/scss/_bootstrap-config.scss
index ecd74bec5..ffa02416b 100644
--- a/core/scss/_bootstrap-config.scss
+++ b/core/scss/_bootstrap-config.scss
@@ -1,6 +1,6 @@
// Config
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+// @import "bootstrap/scss/variables";
+// @import "bootstrap/scss/variables-dark";
+// @import "bootstrap/scss/maps";
+@import 'bootstrap/scss/mixins';
+// @import "bootstrap/scss/utilities";
diff --git a/core/scss/_bootstrap-override.scss b/core/scss/_bootstrap-override.scss
index fa99a19b5..f57b90e3e 100644
--- a/core/scss/_bootstrap-override.scss
+++ b/core/scss/_bootstrap-override.scss
@@ -1,14 +1,14 @@
-@use "sass:color";
+@use 'sass:color';
@mixin caret($direction: down) {
- $selector: "after";
+ $selector: 'after';
- @if $direction == "left" {
- $selector: "before";
+ @if $direction == 'left' {
+ $selector: 'before';
}
&:#{$selector} {
- content: "";
+ content: '';
display: inline-block;
vertical-align: $caret-vertical-align;
width: $caret-width;
@@ -17,7 +17,7 @@
border-left: 1px var(--#{$prefix}border-style);
margin-right: 0.1em;
- @if $direction != "left" {
+ @if $direction != 'left' {
margin-left: $caret-spacing;
} @else {
margin-right: $caret-spacing;
@@ -34,7 +34,7 @@
}
}
- @if $direction == "left" {
+ @if $direction == 'left' {
&:after {
content: none;
}
@@ -45,30 +45,11 @@
// Override bootstrap core
}
-@mixin button-variant(
- $background: null,
- $border: null,
- $color: null,
- $hover-background: null,
- $hover-border: null,
- $hover-color: null,
- $active-background: null,
- $active-border: null,
- $active-color: null,
- $disabled-background: null,
- $disabled-border: null,
- $disabled-color: null
-) {
+@mixin button-variant($background: null, $border: null, $color: null, $hover-background: null, $hover-border: null, $hover-color: null, $active-background: null, $active-border: null, $active-color: null, $disabled-background: null, $disabled-border: null, $disabled-color: null) {
// Override bootstrap core
}
-@mixin button-outline-variant(
- $color: null,
- $color-hover: null,
- $active-background: null,
- $active-border: null,
- $active-color: null
-) {
+@mixin button-outline-variant($color: null, $color-hover: null, $active-background: null, $active-border: null, $active-color: null) {
// Override bootstrap core
}
diff --git a/core/scss/_config.scss b/core/scss/_config.scss
index 488812d21..55073afd3 100644
--- a/core/scss/_config.scss
+++ b/core/scss/_config.scss
@@ -1,9 +1,8 @@
+@import 'mixins';
+@import 'variables';
+@import 'variables-dark';
+@import 'maps';
+@import 'utilities';
-
-@import "mixins";
-@import "variables";
-@import "variables-dark";
-@import "utilities";
-
-@import "bootstrap-config";
-@import "bootstrap-override";
+@import 'bootstrap-config';
+@import 'bootstrap-override';
diff --git a/core/scss/_core.scss b/core/scss/_core.scss
index 28324f971..dd0c0d61c 100644
--- a/core/scss/_core.scss
+++ b/core/scss/_core.scss
@@ -1,84 +1,79 @@
-@import "config";
-@import "bootstrap-components";
+@import 'config';
+@import 'bootstrap-components';
-@import "props";
+@import 'props';
-@import "fonts/webfonts";
+@import 'fonts/webfonts';
-@import "layout/root";
-@import "layout/animations";
-@import "layout/core";
-@import "layout/navbar";
-@import "layout/page";
-@import "layout/footer";
-@import "layout/dark";
+@import 'layout/root';
+@import 'layout/animations';
+@import 'layout/core';
+@import 'layout/navbar';
+@import 'layout/page';
+@import 'layout/footer';
+@import 'layout/dark';
-@import "ui/accordion";
-@import "ui/alerts";
-@import "ui/avatars";
-@import "ui/badges";
-@import "ui/breadcrumbs";
-@import "ui/buttons";
-@import "ui/button-group";
-@import "ui/calendars";
-@import "ui/carousel";
-@import "ui/cards";
-@import "ui/close";
-@import "ui/dropdowns";
-@import "ui/datagrid";
-@import "ui/empty";
-@import "ui/grid";
-@import "ui/icons";
-@import "ui/images";
-@import "ui/forms";
-@import "ui/forms/form-icon";
-@import "ui/forms/form-colorinput";
-@import "ui/forms/form-imagecheck";
-@import "ui/forms/form-selectgroup";
-@import "ui/forms/form-custom";
-@import "ui/forms/form-check";
-@import "ui/forms/validation";
-@import "ui/legend";
-@import "ui/lists";
-@import "ui/loaders";
-@import "ui/login";
-@import "ui/modals";
-@import "ui/nav";
-@import "ui/stars";
-@import "ui/pagination";
-@import "ui/popovers";
-@import "ui/progress";
-@import "ui/ribbons";
-@import "ui/markdown";
-@import "ui/placeholder";
-@import "ui/segmented";
-@import "ui/steps";
-@import "ui/status";
-@import "ui/switch-icon";
-@import "ui/tables";
-@import "ui/tags";
-@import "ui/toasts";
-@import "ui/toolbar";
-@import "ui/tracking";
-@import "ui/timeline";
-@import "ui/type";
-@import "ui/charts";
-@import "ui/offcanvas";
-@import "ui/chat";
-@import "ui/signature";
+@import 'ui/accordion';
+@import 'ui/alerts';
+@import 'ui/avatars';
+@import 'ui/badges';
+@import 'ui/breadcrumbs';
+@import 'ui/buttons';
+@import 'ui/button-group';
+@import 'ui/calendars';
+@import 'ui/carousel';
+@import 'ui/cards';
+@import 'ui/close';
+@import 'ui/dropdowns';
+@import 'ui/datagrid';
+@import 'ui/empty';
+@import 'ui/grid';
+@import 'ui/icons';
+@import 'ui/images';
+@import 'ui/forms';
+@import 'ui/forms/form-icon';
+@import 'ui/forms/form-colorinput';
+@import 'ui/forms/form-imagecheck';
+@import 'ui/forms/form-selectgroup';
+@import 'ui/forms/form-custom';
+@import 'ui/forms/form-check';
+@import 'ui/forms/validation';
+@import 'ui/legend';
+@import 'ui/lists';
+@import 'ui/loaders';
+@import 'ui/login';
+@import 'ui/modals';
+@import 'ui/nav';
+@import 'ui/stars';
+@import 'ui/pagination';
+@import 'ui/popovers';
+@import 'ui/progress';
+@import 'ui/ribbons';
+@import 'ui/markdown';
+@import 'ui/placeholder';
+@import 'ui/segmented';
+@import 'ui/steps';
+@import 'ui/status';
+@import 'ui/switch-icon';
+@import 'ui/tables';
+@import 'ui/tags';
+@import 'ui/toasts';
+@import 'ui/toolbar';
+@import 'ui/tracking';
+@import 'ui/timeline';
+@import 'ui/type';
+@import 'ui/charts';
+@import 'ui/offcanvas';
+@import 'ui/chat';
+@import 'ui/signature';
-@import "helpers/index";
+@import 'helpers/index';
-@import "utils/background";
-@import "utils/colors";
-@import "utils/scroll";
-@import "utils/sizing";
-@import "utils/opacity";
-@import "utils/shadow";
-@import "utils/text";
-@import "utils/hover";
-
-@import "debug";
-
-
-@import "debug";
\ No newline at end of file
+@import 'utils/background';
+@import 'utils/colors';
+@import 'utils/scroll';
+@import 'utils/sizing';
+@import 'utils/opacity';
+@import 'utils/shadow';
+@import 'utils/text';
+@import 'utils/hover';
diff --git a/core/scss/_debug.scss b/core/scss/_debug.scss
deleted file mode 100644
index da2802d00..000000000
--- a/core/scss/_debug.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-$debug: false;
-
-@if $debug {
- $colors: (
- "blue": $blue,
- "azure": $azure,
- "indigo": $indigo,
- "purple": $purple,
- "pink": $pink,
- "red": $red,
- "orange": $orange,
- "yellow": $yellow,
- "lime": $lime,
- "green": $green,
- "teal": $teal,
- "cyan": $cyan,
- );
-
- @each $name, $color in $colors {
- @debug ("#{$name}: '#{$color}'");
- @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
- @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
- @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
- @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
- @debug ("#{$name}-500: '#{$color}'");
- @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
- @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
- @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
- @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
- }
-
- @debug ("gray: '#{$gray-500}'");
- @debug ("gray-100: '#{$gray-100}'");
- @debug ("gray-200: '#{$gray-200}'");
- @debug ("gray-300: '#{$gray-300}'");
- @debug ("gray-400: '#{$gray-400}'");
- @debug ("gray-500: '#{$gray-500}'");
- @debug ("gray-600: '#{$gray-600}'");
- @debug ("gray-700: '#{$gray-700}'");
- @debug ("gray-800: '#{$gray-800}'");
- @debug ("gray-900: '#{$gray-900}'");
-
- @debug ("border-color: '#{$border-color}'");
- @debug ("text-secondary: '#{$text-secondary}'");
-
- @each $name, $color in $social-colors {
- @debug ("#{$name}: '#{$color}'");
- }
-}
diff --git a/core/scss/_maps.scss b/core/scss/_maps.scss
new file mode 100644
index 000000000..3548f755b
--- /dev/null
+++ b/core/scss/_maps.scss
@@ -0,0 +1,155 @@
+@use 'sass:map';
+
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
+
+$theme-colors-text: (
+ 'primary': $primary-text-emphasis,
+ 'secondary': $secondary-text-emphasis,
+ 'success': $success-text-emphasis,
+ 'info': $info-text-emphasis,
+ 'warning': $warning-text-emphasis,
+ 'danger': $danger-text-emphasis,
+ 'light': $light-text-emphasis,
+ 'dark': $dark-text-emphasis,
+) !default;
+
+$theme-colors-bg-subtle: (
+ 'primary': $primary-bg-subtle,
+ 'secondary': $secondary-bg-subtle,
+ 'success': $success-bg-subtle,
+ 'info': $info-bg-subtle,
+ 'warning': $warning-bg-subtle,
+ 'danger': $danger-bg-subtle,
+ 'light': $light-bg-subtle,
+ 'dark': $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+ 'primary': $primary-border-subtle,
+ 'secondary': $secondary-border-subtle,
+ 'success': $success-border-subtle,
+ 'info': $info-border-subtle,
+ 'warning': $warning-border-subtle,
+ 'danger': $danger-border-subtle,
+ 'light': $light-border-subtle,
+ 'dark': $dark-border-subtle,
+) !default;
+
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+ $theme-colors-text-dark: (
+ 'primary': $primary-text-emphasis-dark,
+ 'secondary': $secondary-text-emphasis-dark,
+ 'success': $success-text-emphasis-dark,
+ 'info': $info-text-emphasis-dark,
+ 'warning': $warning-text-emphasis-dark,
+ 'danger': $danger-text-emphasis-dark,
+ 'light': $light-text-emphasis-dark,
+ 'dark': $dark-text-emphasis-dark,
+ ) !default;
+
+ $theme-colors-bg-subtle-dark: (
+ 'primary': $primary-bg-subtle-dark,
+ 'secondary': $secondary-bg-subtle-dark,
+ 'success': $success-bg-subtle-dark,
+ 'info': $info-bg-subtle-dark,
+ 'warning': $warning-bg-subtle-dark,
+ 'danger': $danger-bg-subtle-dark,
+ 'light': $light-bg-subtle-dark,
+ 'dark': $dark-bg-subtle-dark,
+ ) !default;
+
+ $theme-colors-border-subtle-dark: (
+ 'primary': $primary-border-subtle-dark,
+ 'secondary': $secondary-border-subtle-dark,
+ 'success': $success-border-subtle-dark,
+ 'info': $info-border-subtle-dark,
+ 'warning': $warning-border-subtle-dark,
+ 'danger': $danger-border-subtle-dark,
+ 'light': $light-border-subtle-dark,
+ 'dark': $dark-border-subtle-dark,
+ ) !default;
+}
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+
+$utilities-colors: $theme-colors-rgb !default;
+
+$utilities-text: map.merge(
+ $utilities-colors,
+ (
+ 'black': to-rgb($black),
+ 'white': to-rgb($white),
+ 'body': to-rgb($body-color),
+ )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
+
+$utilities-text-emphasis-colors: (
+ 'primary-emphasis': var(--#{$prefix}primary-text-emphasis),
+ 'secondary-emphasis': var(--#{$prefix}secondary-text-emphasis),
+ 'success-emphasis': var(--#{$prefix}success-text-emphasis),
+ 'info-emphasis': var(--#{$prefix}info-text-emphasis),
+ 'warning-emphasis': var(--#{$prefix}warning-text-emphasis),
+ 'danger-emphasis': var(--#{$prefix}danger-text-emphasis),
+ 'light-emphasis': var(--#{$prefix}light-text-emphasis),
+ 'dark-emphasis': var(--#{$prefix}dark-text-emphasis),
+) !default;
+
+$utilities-bg: map.merge(
+ $utilities-colors,
+ (
+ 'black': to-rgb($black),
+ 'white': to-rgb($white),
+ 'body': to-rgb($body-bg),
+ )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
+
+$utilities-bg-subtle: (
+ 'primary-subtle': var(--#{$prefix}primary-bg-subtle),
+ 'secondary-subtle': var(--#{$prefix}secondary-bg-subtle),
+ 'success-subtle': var(--#{$prefix}success-bg-subtle),
+ 'info-subtle': var(--#{$prefix}info-bg-subtle),
+ 'warning-subtle': var(--#{$prefix}warning-bg-subtle),
+ 'danger-subtle': var(--#{$prefix}danger-bg-subtle),
+ 'light-subtle': var(--#{$prefix}light-bg-subtle),
+ 'dark-subtle': var(--#{$prefix}dark-bg-subtle),
+) !default;
+
+$utilities-border: map.merge(
+ $utilities-colors,
+ (
+ 'black': to-rgb($black),
+ 'white': to-rgb($white),
+ )
+) !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'border') !default;
+
+$utilities-border-subtle: (
+ 'primary-subtle': var(--#{$prefix}primary-border-subtle),
+ 'secondary-subtle': var(--#{$prefix}secondary-border-subtle),
+ 'success-subtle': var(--#{$prefix}success-border-subtle),
+ 'info-subtle': var(--#{$prefix}info-border-subtle),
+ 'warning-subtle': var(--#{$prefix}warning-border-subtle),
+ 'danger-subtle': var(--#{$prefix}danger-border-subtle),
+ 'light-subtle': var(--#{$prefix}light-border-subtle),
+ 'dark-subtle': var(--#{$prefix}dark-border-subtle),
+) !default;
+
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, '$key', 'link-underline') !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;
diff --git a/core/scss/_mixins.scss b/core/scss/_mixins.scss
index b00994a39..24b5ace4e 100644
--- a/core/scss/_mixins.scss
+++ b/core/scss/_mixins.scss
@@ -1,2 +1,2 @@
-@import "mixins/mixins";
-@import "mixins/functions";
+@import 'mixins/mixins';
+@import 'mixins/functions';
diff --git a/core/scss/_props.scss b/core/scss/_props.scss
index 69fb44ca8..39bee52e1 100644
--- a/core/scss/_props.scss
+++ b/core/scss/_props.scss
@@ -1,5 +1,5 @@
-@use "sass:map";
-@import "config";
+@use 'sass:map';
+@import 'config';
:root,
:host {
diff --git a/core/scss/_utilities-marketing.scss b/core/scss/_utilities-marketing.scss
index a682555a0..ac09d38f3 100644
--- a/core/scss/_utilities-marketing.scss
+++ b/core/scss/_utilities-marketing.scss
@@ -1,167 +1,158 @@
-@use "sass:map";
+@use 'sass:map';
-$negative-spacers-extra: if(
- $enable-negative-margins,
- negativify-map(map.merge($spacers, $spacers-extra)),
- null
-);
+$negative-spacers-extra: if($enable-negative-margins, negativify-map(map.merge($spacers, $spacers-extra)), null);
$utilities: (
// Margin utilities
- "margin":
- (
+ 'margin': (
responsive: true,
property: margin,
class: m,
values: $spacers-extra,
),
- "margin-x": (
+ 'margin-x': (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $spacers-extra,
),
- "margin-y": (
+ 'margin-y': (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $spacers-extra,
),
- "margin-top": (
+ 'margin-top': (
responsive: true,
property: margin-top,
class: mt,
values: $spacers-extra,
),
- "margin-end": (
+ 'margin-end': (
responsive: true,
property: margin-right,
class: me,
values: $spacers-extra,
),
- "margin-bottom": (
+ 'margin-bottom': (
responsive: true,
property: margin-bottom,
class: mb,
values: $spacers-extra,
),
- "margin-start": (
+ 'margin-start': (
responsive: true,
property: margin-left,
class: ms,
values: $spacers-extra,
),
// Negative margin utilities
- "negative-margin":
- (
+ 'negative-margin': (
responsive: true,
property: margin,
class: m,
values: $negative-spacers-extra,
),
- "negative-margin-x": (
+ 'negative-margin-x': (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers-extra,
),
- "negative-margin-y": (
+ 'negative-margin-y': (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers-extra,
),
- "negative-margin-top": (
+ 'negative-margin-top': (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers-extra,
),
- "negative-margin-end": (
+ 'negative-margin-end': (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers-extra,
),
- "negative-margin-bottom": (
+ 'negative-margin-bottom': (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers-extra,
),
- "negative-margin-start": (
+ 'negative-margin-start': (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers-extra,
),
// Padding utilities
- "padding":
- (
+ 'padding': (
responsive: true,
property: padding,
class: p,
values: $spacers-extra,
),
- "padding-x": (
+ 'padding-x': (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers-extra,
),
- "padding-y": (
+ 'padding-y': (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers-extra,
),
- "padding-top": (
+ 'padding-top': (
responsive: true,
property: padding-top,
class: pt,
values: $spacers-extra,
),
- "padding-end": (
+ 'padding-end': (
responsive: true,
property: padding-right,
class: pe,
values: $spacers-extra,
),
- "padding-bottom": (
+ 'padding-bottom': (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers-extra,
),
- "padding-start": (
+ 'padding-start': (
responsive: true,
property: padding-left,
class: ps,
values: $spacers-extra,
),
// Gap utility
- "gap":
- (
+ 'gap': (
responsive: true,
property: gap,
class: gap,
values: $spacers-extra,
),
- "row-gap": (
+ 'row-gap': (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers-extra,
),
- "column-gap": (
+ 'column-gap': (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers-extra,
),
// Letter spacing
- "spacing":
- (
+ 'spacing': (
property: letter-spacing,
class: tracking,
values: (
@@ -170,38 +161,38 @@ $utilities: (
wide: $spacing-wide,
),
),
- "width": (
+ 'width': (
property: width,
class: w,
values: $spacers-extra,
),
- "height": (
+ 'height': (
property: height,
class: h,
values: $spacers-extra,
),
- "filter": (
+ 'filter': (
property: filter,
class: filter,
values: (
grayscale: grayscale(100%),
),
),
- "gutter-x": (
+ 'gutter-x': (
responsive: true,
css-var: true,
css-variable-name: gutter-x,
class: gx,
values: $spacers-extra,
),
- "gutter-y": (
+ 'gutter-y': (
responsive: true,
css-var: true,
css-variable-name: gutter-y,
class: gy,
values: $spacers-extra,
),
- "gutter": (
+ 'gutter': (
responsive: true,
css-var: true,
css-variable-name: gutter-x,
diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss
index 8588248e8..6e56dcfd7 100644
--- a/core/scss/_utilities.scss
+++ b/core/scss/_utilities.scss
@@ -1,19 +1,127 @@
+@use 'sass:map';
+
$border-values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
- var(--#{$prefix}border-color-translucent),
- wide: $border-width-wide var(--#{$prefix}border-style)
- var(--#{$prefix}border-color-translucent),
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
+ wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
0: 0,
);
-$utilities-border-colors: map-loop((
- "red": red,
- "green": green,
-), rgba-css-var, "$key", "border") !default;
+$utilities-border-colors: map-loop(
+ (
+ 'red': red,
+ 'green': green,
+ ),
+ rgba-css-var,
+ '$key',
+ 'border'
+) !default;
//Utilities
$utilities: (
- "object": (
+ 'align': (
+ property: vertical-align,
+ class: align,
+ values: baseline top middle bottom text-bottom text-top,
+ ),
+ 'float': (
+ responsive: true,
+ property: float,
+ values: (
+ start: left,
+ end: right,
+ none: none,
+ ),
+ ),
+ // Object Fit utilities
+ 'object-fit': (
+ responsive: true,
+ property: object-fit,
+ values: (
+ contain: contain,
+ cover: cover,
+ fill: fill,
+ scale: scale-down,
+ none: none,
+ ),
+ ),
+ // Opacity utilities
+ 'opacity': (
+ property: opacity,
+ values: (
+ 0: 0,
+ 25: 0.25,
+ 50: 0.5,
+ 75: 0.75,
+ 100: 1,
+ ),
+ ),
+ 'overflow': (
+ property: overflow,
+ values: auto hidden visible scroll,
+ ),
+ 'overflow-x': (
+ property: overflow-x,
+ values: auto hidden visible scroll,
+ ),
+ 'overflow-y': (
+ property: overflow-y,
+ values: auto hidden visible scroll,
+ ),
+ 'display': (
+ responsive: true,
+ print: true,
+ property: display,
+ class: d,
+ values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
+ ),
+ 'shadow': (
+ property: box-shadow,
+ class: shadow,
+ values: (
+ null: var(--#{$prefix}box-shadow),
+ sm: var(--#{$prefix}box-shadow-sm),
+ lg: var(--#{$prefix}box-shadow-lg),
+ none: none,
+ ),
+ ),
+ 'focus-ring': (
+ css-var: true,
+ css-variable-name: focus-ring-color,
+ class: focus-ring,
+ values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
+ ),
+ 'position': (
+ property: position,
+ values: static relative absolute fixed sticky,
+ ),
+ 'top': (
+ property: top,
+ values: $position-values,
+ ),
+ 'bottom': (
+ property: bottom,
+ values: $position-values,
+ ),
+ 'start': (
+ property: left,
+ class: start,
+ values: $position-values,
+ ),
+ 'end': (
+ property: right,
+ class: end,
+ values: $position-values,
+ ),
+ 'translate-middle': (
+ property: transform,
+ class: translate-middle,
+ values: (
+ null: translate(-50%, -50%),
+ x: translateX(-50%),
+ y: translateY(-50%),
+ ),
+ ),
+ 'object': (
property: object-fit,
class: object,
values: (
@@ -24,7 +132,7 @@ $utilities: (
none: none,
),
),
- "cursor": (
+ 'cursor': (
property: cursor,
class: cursor,
values: (
@@ -45,79 +153,430 @@ $utilities: (
grabbing: grabbing,
crosshair: crosshair,
),
- ),
- "border": (
+ ),
+ 'border': (
property: border,
values: $border-values,
),
- "border-top": (
+ 'border-top': (
property: border-top,
values: $border-values,
),
- "border-end": (
+ 'border-end': (
class: border-end,
property: border-right,
values: $border-values,
),
- "border-bottom": (
+ 'border-bottom': (
property: border-bottom,
values: $border-values,
),
- "border-start": (
+ 'border-start': (
class: border-start,
property: border-left,
values: $border-values,
),
- "border-x": (
+ 'border-x': (
class: border-x,
property: border-left border-right,
values: $border-values,
),
- "border-y": (
+ 'border-y': (
class: border-y,
property: border-top border-bottom,
values: $border-values,
),
- "width": (
+ 'border-color': (
+ property: border-color,
+ class: border,
+ local-vars: (
+ 'border-opacity': 1,
+ ),
+ values: $utilities-border-colors,
+ ),
+ 'subtle-border-color': (
+ property: border-color,
+ class: border,
+ values: $utilities-border-subtle,
+ ),
+ 'border-width': (
+ property: border-width,
+ class: border,
+ values: $border-widths,
+ ),
+ 'border-opacity': (
+ css-var: true,
+ class: border-opacity,
+ values: (
+ 10: 0.1,
+ 25: 0.25,
+ 50: 0.5,
+ 75: 0.75,
+ 100: 1,
+ ),
+ ),
+ 'width': (
property: width,
class: w,
values: $size-values,
),
- "height": (
+ 'max-width': (
+ property: max-width,
+ class: mw,
+ values: (
+ 100: 100%,
+ ),
+ ),
+ 'viewport-width': (
+ property: width,
+ class: vw,
+ values: (
+ 100: 100vw,
+ ),
+ ),
+ 'min-viewport-width': (
+ property: min-width,
+ class: min-vw,
+ values: (
+ 100: 100vw,
+ ),
+ ),
+ 'height': (
property: height,
class: h,
values: $size-values,
),
- "columns": (
+ 'max-height': (
+ property: max-height,
+ class: mh,
+ values: (
+ 100: 100%,
+ ),
+ ),
+ 'viewport-height': (
+ property: height,
+ class: vh,
+ values: (
+ 100: 100vh,
+ ),
+ ),
+ 'min-viewport-height': (
+ property: min-height,
+ class: min-vh,
+ values: (
+ 100: 100vh,
+ ),
+ ),
+ 'columns': (
property: columns,
class: columns,
responsive: true,
values: 2 3 4,
),
- "bg-pattern": (
+ // Flex utilities
+ 'flex': (
+ responsive: true,
+ property: flex,
+ values: (
+ fill: 1 1 auto,
+ ),
+ ),
+ 'flex-direction': (
+ responsive: true,
+ property: flex-direction,
+ class: flex,
+ values: row column row-reverse column-reverse,
+ ),
+ 'flex-grow': (
+ responsive: true,
+ property: flex-grow,
+ class: flex,
+ values: (
+ grow-0: 0,
+ grow-1: 1,
+ ),
+ ),
+ 'flex-shrink': (
+ responsive: true,
+ property: flex-shrink,
+ class: flex,
+ values: (
+ shrink-0: 0,
+ shrink-1: 1,
+ ),
+ ),
+ 'flex-wrap': (
+ responsive: true,
+ property: flex-wrap,
+ class: flex,
+ values: wrap nowrap wrap-reverse,
+ ),
+ 'justify-content': (
+ responsive: true,
+ property: justify-content,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ between: space-between,
+ around: space-around,
+ evenly: space-evenly,
+ ),
+ ),
+ 'align-items': (
+ responsive: true,
+ property: align-items,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ baseline: baseline,
+ stretch: stretch,
+ ),
+ ),
+ 'align-content': (
+ responsive: true,
+ property: align-content,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ between: space-between,
+ around: space-around,
+ stretch: stretch,
+ ),
+ ),
+ 'align-self': (
+ responsive: true,
+ property: align-self,
+ values: (
+ auto: auto,
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ baseline: baseline,
+ stretch: stretch,
+ ),
+ ),
+ 'order': (
+ responsive: true,
+ property: order,
+ values: (
+ first: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3,
+ 4: 4,
+ 5: 5,
+ last: 6,
+ ),
+ ),
+ // Margin utilities
+ 'margin': (
+ responsive: true,
+ property: margin,
+ class: m,
+ values: map.merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-x': (
+ responsive: true,
+ property: margin-right margin-left,
+ class: mx,
+ values: map.merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-y': (
+ responsive: true,
+ property: margin-top margin-bottom,
+ class: my,
+ values: map.merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-top': (
+ responsive: true,
+ property: margin-top,
+ class: mt,
+ values: map.merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-end': (
+ responsive: true,
+ property: margin-right,
+ class: me,
+ values: map.merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-bottom': (
+ responsive: true,
+ property: margin-bottom,
+ class: mb,
+ values: map.merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ 'margin-start': (
+ responsive: true,
+ property: margin-left,
+ class: ms,
+ values: map.merge(
+ $spacers,
+ (
+ auto: auto,
+ )
+ ),
+ ),
+ // Negative margin utilities
+ 'negative-margin': (
+ responsive: true,
+ property: margin,
+ class: m,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-x': (
+ responsive: true,
+ property: margin-right margin-left,
+ class: mx,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-y': (
+ responsive: true,
+ property: margin-top margin-bottom,
+ class: my,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-top': (
+ responsive: true,
+ property: margin-top,
+ class: mt,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-end': (
+ responsive: true,
+ property: margin-right,
+ class: me,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-bottom': (
+ responsive: true,
+ property: margin-bottom,
+ class: mb,
+ values: $negative-spacers,
+ ),
+ 'negative-margin-start': (
+ responsive: true,
+ property: margin-left,
+ class: ms,
+ values: $negative-spacers,
+ ),
+ // Padding utilities
+ 'padding': (
+ responsive: true,
+ property: padding,
+ class: p,
+ values: $spacers,
+ ),
+ 'padding-x': (
+ responsive: true,
+ property: padding-right padding-left,
+ class: px,
+ values: $spacers,
+ ),
+ 'padding-y': (
+ responsive: true,
+ property: padding-top padding-bottom,
+ class: py,
+ values: $spacers,
+ ),
+ 'padding-top': (
+ responsive: true,
+ property: padding-top,
+ class: pt,
+ values: $spacers,
+ ),
+ 'padding-end': (
+ responsive: true,
+ property: padding-right,
+ class: pe,
+ values: $spacers,
+ ),
+ 'padding-bottom': (
+ responsive: true,
+ property: padding-bottom,
+ class: pb,
+ values: $spacers,
+ ),
+ 'padding-start': (
+ responsive: true,
+ property: padding-left,
+ class: ps,
+ values: $spacers,
+ ),
+ // Gap utility
+ 'gap': (
+ responsive: true,
+ property: gap,
+ class: gap,
+ values: $spacers,
+ ),
+ 'row-gap': (
+ responsive: true,
+ property: row-gap,
+ class: row-gap,
+ values: $spacers,
+ ),
+ 'column-gap': (
+ responsive: true,
+ property: column-gap,
+ class: column-gap,
+ values: $spacers,
+ ),
+ 'bg-pattern': (
property: background,
class: bg-pattern,
values: (
- transparent: #{url-svg(
- ''
- )} repeat center/16px 16px,
- )
+ transparent: #{url-svg('')} repeat center/16px 16px,
+ ),
),
- "bg-gradient": (
+ 'bg-gradient': (
property: background,
class: bg-gradient,
values: (
null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
),
),
- "bg-blur": (
+ 'bg-blur': (
property: backdrop-filter,
class: bg-blur,
values: (
- null: blur($backdrop-blur)
- )
+ null: blur($backdrop-blur),
+ ),
),
- "bg-gradient-direction": (
+ 'bg-gradient-direction': (
property: --#{$prefix}gradient-direction,
class: bg-gradient,
values: (
@@ -131,7 +590,7 @@ $utilities: (
to-ts: to top left,
),
),
- "table-layout": (
+ 'table-layout': (
property: table-layout,
class: table,
values: (
@@ -139,4 +598,300 @@ $utilities: (
fixed: fixed,
),
),
+ // Text
+ 'font-family': (
+ property: font-family,
+ class: font,
+ values: (
+ monospace: var(--#{$prefix}font-monospace),
+ ),
+ ),
+ 'font-size': (
+ property: font-size,
+ class: fs,
+ values: $font-sizes,
+ ),
+ 'font-style': (
+ property: font-style,
+ class: fst,
+ values: italic normal,
+ ),
+ 'font-weight': (
+ property: font-weight,
+ class: fw,
+ values: (
+ lighter: $font-weight-lighter,
+ light: $font-weight-light,
+ normal: $font-weight-normal,
+ medium: $font-weight-medium,
+ semibold: $font-weight-semibold,
+ bold: $font-weight-bold,
+ bolder: $font-weight-bolder,
+ ),
+ ),
+ 'line-height': (
+ property: line-height,
+ class: lh,
+ values: (
+ 1: 1,
+ sm: $line-height-sm,
+ base: $line-height-base,
+ lg: $line-height-lg,
+ ),
+ ),
+ 'text-align': (
+ responsive: true,
+ property: text-align,
+ class: text,
+ values: (
+ start: left,
+ end: right,
+ center: center,
+ ),
+ ),
+ 'text-decoration': (
+ property: text-decoration,
+ values: none underline line-through,
+ ),
+ 'text-transform': (
+ property: text-transform,
+ class: text,
+ values: lowercase uppercase capitalize,
+ ),
+ 'white-space': (
+ property: white-space,
+ class: text,
+ values: (
+ wrap: normal,
+ nowrap: nowrap,
+ ),
+ ),
+ 'word-wrap': (
+ property: word-wrap word-break,
+ class: text,
+ values: (
+ break: break-word,
+ ),
+ rtl: false,
+ ),
+ 'color': (
+ property: color,
+ class: text,
+ local-vars: (
+ 'text-opacity': 1,
+ ),
+ values: map.merge(
+ $utilities-text-colors,
+ (
+ 'muted': var(--#{$prefix}secondary-color),
+ // deprecated
+ 'black-50': rgba($black, 0.5),
+ // deprecated
+ 'white-50': rgba($white, 0.5),
+ // deprecated
+ 'body-secondary': var(--#{$prefix}secondary-color),
+ 'body-tertiary': var(--#{$prefix}tertiary-color),
+ 'body-emphasis': var(--#{$prefix}emphasis-color),
+ 'reset': inherit,
+ )
+ ),
+ ),
+ 'text-opacity': (
+ css-var: true,
+ class: text-opacity,
+ values: (
+ 25: 0.25,
+ 50: 0.5,
+ 75: 0.75,
+ 100: 1,
+ ),
+ ),
+ 'text-color': (
+ property: color,
+ class: text,
+ values: $utilities-text-emphasis-colors,
+ ),
+ 'link-opacity': (
+ css-var: true,
+ class: link-opacity,
+ state: hover,
+ values: (
+ 10: 0.1,
+ 25: 0.25,
+ 50: 0.5,
+ 75: 0.75,
+ 100: 1,
+ ),
+ ),
+ 'link-offset': (
+ property: text-underline-offset,
+ class: link-offset,
+ state: hover,
+ values: (
+ 1: 0.125em,
+ 2: 0.25em,
+ 3: 0.375em,
+ ),
+ ),
+ 'link-underline': (
+ property: text-decoration-color,
+ class: link-underline,
+ local-vars: (
+ 'link-underline-opacity': 1,
+ ),
+ values: map.merge(
+ $utilities-links-underline,
+ (
+ null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+ )
+ ),
+ ),
+ 'link-underline-opacity': (
+ css-var: true,
+ class: link-underline-opacity,
+ state: hover,
+ values: (
+ 0: 0,
+ 10: 0.1,
+ 25: 0.25,
+ 50: 0.5,
+ 75: 0.75,
+ 100: 1,
+ ),
+ ),
+ 'background-color': (
+ property: background-color,
+ class: bg,
+ local-vars: (
+ 'bg-opacity': 1,
+ ),
+ values: map.merge(
+ $utilities-bg-colors,
+ (
+ 'transparent': transparent,
+ 'body-secondary': rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+ 'body-tertiary': rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+ )
+ ),
+ ),
+ 'bg-opacity': (
+ css-var: true,
+ class: bg-opacity,
+ values: (
+ 10: 0.1,
+ 25: 0.25,
+ 50: 0.5,
+ 75: 0.75,
+ 100: 1,
+ ),
+ ),
+ 'subtle-background-color': (
+ property: background-color,
+ class: bg,
+ values: $utilities-bg-subtle,
+ ),
+ 'gradient': (
+ property: background-image,
+ class: bg,
+ values: (
+ gradient: var(--#{$prefix}gradient),
+ ),
+ ),
+ 'user-select': (
+ property: user-select,
+ values: all auto none,
+ ),
+ 'pointer-events': (
+ property: pointer-events,
+ class: pe,
+ values: none auto,
+ ),
+ 'rounded': (
+ property: border-radius,
+ class: rounded,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill),
+ ),
+ ),
+ 'rounded-top': (
+ property: border-top-left-radius border-top-right-radius,
+ class: rounded-top,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill),
+ ),
+ ),
+ 'rounded-end': (
+ property: border-top-right-radius border-bottom-right-radius,
+ class: rounded-end,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill),
+ ),
+ ),
+ 'rounded-bottom': (
+ property: border-bottom-right-radius border-bottom-left-radius,
+ class: rounded-bottom,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill),
+ ),
+ ),
+ 'rounded-start': (
+ property: border-bottom-left-radius border-top-left-radius,
+ class: rounded-start,
+ values: (
+ null: var(--#{$prefix}border-radius),
+ 0: 0,
+ 1: var(--#{$prefix}border-radius-sm),
+ 2: var(--#{$prefix}border-radius),
+ 3: var(--#{$prefix}border-radius-lg),
+ 4: var(--#{$prefix}border-radius-xl),
+ 5: var(--#{$prefix}border-radius-xxl),
+ circle: 50%,
+ pill: var(--#{$prefix}border-radius-pill),
+ ),
+ ),
+ 'visibility': (
+ property: visibility,
+ class: null,
+ values: (
+ visible: visible,
+ invisible: hidden,
+ ),
+ ),
+ 'z-index': (
+ property: z-index,
+ class: z,
+ values: $zindex-levels,
+ ),
) !default;
diff --git a/core/scss/_variables-dark.scss b/core/scss/_variables-dark.scss
index baf386b5d..a52282361 100644
--- a/core/scss/_variables-dark.scss
+++ b/core/scss/_variables-dark.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
//
// Dark mode
@@ -6,14 +6,107 @@
$darken-dark: color.adjust($dark, $lightness: -2%) !default;
$lighten-dark: color.adjust($dark, $lightness: 2%) !default;
$border-color-dark: color.adjust($dark, $lightness: 8%) !default;
-$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
+$border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
$border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
$border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
//new bootsrap variables
-$body-color-dark: $gray-200 !default;
+$body-color-dark: $gray-200 !default;
$body-emphasis-color-dark: $white !default;
$code-color-dark: var(--#{$prefix}gray-300) !default;
$text-secondary-dark: rgba(153, 159, 164, 1) !default;
-
\ No newline at end of file
+
+// Theme text emphasis dark
+$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark: tint-color($success, 40%) !default;
+$info-text-emphasis-dark: tint-color($info, 40%) !default;
+$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
+$light-text-emphasis-dark: $gray-100 !default;
+$dark-text-emphasis-dark: $gray-300 !default;
+
+// Theme bg subtle dark
+$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark: shade-color($success, 80%) !default;
+$info-bg-subtle-dark: shade-color($info, 80%) !default;
+$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+$light-bg-subtle-dark: $gray-800 !default;
+$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
+
+// Theme border subtle dark
+$primary-border-subtle-dark: shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
+$success-border-subtle-dark: shade-color($success, 40%) !default;
+$info-border-subtle-dark: shade-color($info, 40%) !default;
+$warning-border-subtle-dark: shade-color($warning, 40%) !default;
+$danger-border-subtle-dark: shade-color($danger, 40%) !default;
+$light-border-subtle-dark: $gray-700 !default;
+$dark-border-subtle-dark: $gray-800 !default;
+
+// Body dark
+$body-bg-dark: $gray-900 !default;
+$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default;
+$body-secondary-bg-dark: $gray-800 !default;
+$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default;
+$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
+
+// Headings dark
+$headings-color-dark: inherit !default;
+
+// Link dark
+$link-color-dark: tint-color($primary, 40%) !default;
+$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
+
+// Mark dark
+$mark-color-dark: $body-color-dark !default;
+$mark-bg-dark: shade-color($yellow, 60%) !default;
+
+//
+// Forms dark
+//
+
+$form-select-indicator-color-dark: $body-color-dark !default;
+$form-select-indicator-dark: url("data:image/svg+xml,") !default;
+
+$form-switch-color-dark: rgba($white, 0.25) !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml,") !default;
+
+// Form validation colors dark
+$form-valid-color-dark: tint-color($green, 40%) !default;
+$form-valid-border-color-dark: tint-color($green, 40%) !default;
+$form-invalid-color-dark: tint-color($red, 40%) !default;
+$form-invalid-border-color-dark: tint-color($red, 40%) !default;
+
+//
+// Accordion dark
+//
+
+$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
+$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
+
+$accordion-button-icon-dark: url("data:image/svg+xml,") !default;
+$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default;
+
+//
+// Carousel dark
+//
+
+$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
+$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
+
+$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
+$carousel-caption-color-dark: $carousel-dark-caption-color !default;
+$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
+
+//
+// Close button dark
+//
+
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
+
+$btn-close-filter-dark: $btn-close-white-filter !default;
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index fd0480e60..917e6bc70 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -1,11 +1,16 @@
-@use "sass:string";
-@use "sass:math";
-@use "sass:map";
-@use "sass:color";
+@use 'sass:string';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:color';
-$prefix: "tblr-" !default;
+// Prefixes
+$prefix: 'tblr-' !default;
+$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-// BASE CONFIG
+// Assets Base
+$assets-base: '..' !default;
+
+// Base Config
$enable-social-colors: true !default;
$enable-extra-colors: true !default;
$enable-gradients: false !default;
@@ -15,142 +20,30 @@ $enable-dark-mode: true !default;
$enable-negative-margins: true !default;
$enable-rfs: false !default;
$enable-cssgrid: true !default;
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-container-classes: true !default;
+$enable-button-pointers: true !default;
+$enable-validation-icons: true !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
-// DARK MODE
+// Escaped Characters
+$escaped-characters: (
+ ('<', '%3c'),
+ ('>', '%3e'),
+ ('#', '%23'),
+ ('(', '%28'),
+ (')', '%29')) !default;
+
+// Dark Mode
$color-mode-type: data !default;
-// ASSETS BASE
-$assets-base: ".." !default;
-
-// FONTS
-$font-google: null !default;
-$font-google-monospaced: null !default;
-$font-local: null !default;
-$font-icons: () !default;
-
-$font-family-sans-serif: string.unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-$font-family-monospace: string.unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
-$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
-$font-family-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", sans-serif, cursive !default;
-
-//Icons
-$icon-stroke-width: 1.5 !default;
-$icon-size: 1.25rem !default;
-
-//Fonts
-$font-size-75: 0.75rem !default;
-$font-size-100: 0.875rem !default;
-$font-size-200: 1rem !default;
-$font-size-300: 1.25rem !default;
-$font-size-400: 1.5rem !default;
-$font-size-500: 1.75rem !default;
-$font-size-600: 2rem !default;
-$font-size-700: 2.5rem !default;
-
-$line-height-100: 1rem !default;
-$line-height-200: 1.25rem !default;
-$line-height-300: 1.5rem !default;
-$line-height-400: 1.75rem !default;
-$line-height-500: 2rem !default;
-$line-height-600: 2.5rem !default;
-$line-height-700: 3rem !default;
-
-$font-size-base: 0.875rem !default;
-
-$spacing-wide: 0.04em !default;
-$spacing-normal: 0 !default;
-$spacing-tight: -0.04em !default;
-
-$body-letter-spacing: 0 !default;
-
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-bold: 600 !default;
-$font-weight-black: 700 !default;
-
-$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
-$headings-margin-bottom: var(--#{$prefix}spacer) !default;
-
-$font-weights: (
- "light": $font-weight-light,
- "normal": $font-weight-normal,
- "medium": $font-weight-medium,
- "bold": $font-weight-bold,
- "black": $font-weight-black,
- "headings": $headings-font-weight,
-) !default;
-
-$line-height-base: divide(1.25rem, $font-size-base) !default;
-$line-height-sm: divide(1rem, $font-size-base) !default;
-$line-height-lg: divide(1.5rem, $font-size-base) !default;
-$line-height-xl: divide(1.75rem, $font-size-base) !default;
-
-$h1-font-size: 1.5rem !default;
-$h1-line-height: 2rem !default;
-
-$h2-font-size: 1.25rem !default;
-$h2-line-height: 1.75rem !default;
-
-$h3-font-size: 1rem !default;
-$h3-line-height: 1.5rem !default;
-
-$h4-font-size: 0.875rem !default;
-$h4-line-height: 1.25rem !default;
-
-$h5-font-size: 0.75rem !default;
-$h5-line-height: 1rem !default;
-
-$h6-font-size: 0.625rem !default;
-$h6-line-height: 1rem !default;
-
-$font-size-reative-xs: 0.71428571em !default;
-$font-size-reative-sm: 0.85714285em !default;
-$font-size-reative-md: 1em !default;
-
-$font-sizes: (
- 1: $h1-font-size,
- 2: $h2-font-size,
- 3: $h3-font-size,
- 4: $h4-font-size,
- 5: $h5-font-size,
- 6: $h6-font-size,
-) !default;
-
-$line-heights: (
- h1: $h1-line-height,
- h2: $h2-line-height,
- h3: $h3-line-height,
- h4: $h4-line-height,
- h5: $h5-line-height,
- h6: $h6-line-height,
-) !default;
-
-$display-font-sizes: (
- 1: 5rem,
- 2: 4.5rem,
- 3: 4rem,
- 4: 3.5rem,
- 5: 3rem,
- 6: 2rem,
-) !default;
-
-$lead-font-size: $font-size-base !default;
-$lead-font-weight: var(--#{$prefix}font-weight-normal) !default;
-
-$blockquote-font-size: $font-size-base !default;
-
-// COLORS
-$min-contrast-ratio: 1.5 !default;
-$text-secondary-opacity: 0.7 !default;
-$text-secondary-light-opacity: 0.4 !default;
-$text-secondary-dark-opacity: 0.8 !default;
-
-$border-opacity: 0.16 !default;
-$border-light-opacity: 0.08 !default;
-$border-dark-opacity: 0.24 !default;
-$border-active-opacity: 0.58 !default;
-
+// Colors
$gray-50: #f9fafb !default;
$gray-100: #f3f4f6 !default;
$gray-200: #e5e7eb !default;
@@ -169,17 +62,17 @@ $white: #ffffff !default;
$light: $gray-50 !default;
$dark: $gray-800 !default;
-$bg-surface: var(--#{$prefix}white) !default;
-$bg-surface-secondary: var(--#{$prefix}gray-100) !default;
-$bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
-$bg-surface-dark: var(--#{$prefix}dark) !default;
-
-$body-bg: $gray-50 !default;
-$body-color: $dark !default;
-$body-emphasis-color: $gray-700 !default;
-
-$color-contrast-dark: $body-color !default;
-$color-contrast-light: $light !default;
+$grays: (
+ '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,
+) !default;
$blue: #066fd1 !default;
$azure: #4299e1 !default;
@@ -194,249 +87,247 @@ $green: #2fb344 !default;
$teal: #0ca678 !default;
$cyan: #17a2b8 !default;
-$text-muted: $gray-500 !default;
-$text-secondary: $gray-500 !default;
-$text-secondary-light: $gray-400 !default;
-$text-secondary-dark: $gray-600 !default;
-
-$border-color: $gray-200 !default;
-$border-color-translucent: rgba(4, 32, 69, 0.1);
-
-$border-dark-color: $gray-400 !default;
-$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
-
-$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
-$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
-
-$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
-$active-color: var(--#{$prefix}primary) !default;
-$active-border-color: var(--#{$prefix}primary) !default;
-
-$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
-
-$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default;
-
-$primary: $blue !default;
-$secondary: $text-secondary !default;
-$muted: $text-secondary !default;
-$success: $green !default;
-$info: $azure !default;
-$warning: $yellow !default;
-$danger: $red !default;
-
-$link-color: $primary !default;
-
-$theme-colors: (
- "primary": $primary,
- "secondary": $secondary,
- "success": $success,
- "info": $info,
- "warning": $warning,
- "danger": $danger,
- "light": $light,
- "dark": $dark,
- "muted": $muted,
+$colors: (
+ 'blue': $blue,
+ 'azure': $azure,
+ 'indigo': $indigo,
+ 'purple': $purple,
+ 'pink': $pink,
+ 'red': $red,
+ 'orange': $orange,
+ 'yellow': $yellow,
+ 'lime': $lime,
+ 'green': $green,
+ 'teal': $teal,
+ 'cyan': $cyan,
+ 'black': $black,
+ 'white': $white,
+ 'gray': $gray-600,
+ 'gray-dark': $gray-800,
) !default;
-$extra-colors: (
- "blue": $blue,
- "azure": $azure,
- "indigo": $indigo,
- "purple": $purple,
- "pink": $pink,
- "red": $red,
- "orange": $orange,
- "yellow": $yellow,
- "lime": $lime,
- "green": $green,
- "teal": $teal,
- "cyan": $cyan,
+$min-contrast-ratio: 4.5 !default;
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ 'blue-100': $blue-100,
+ 'blue-200': $blue-200,
+ 'blue-300': $blue-300,
+ 'blue-400': $blue-400,
+ 'blue-500': $blue-500,
+ 'blue-600': $blue-600,
+ 'blue-700': $blue-700,
+ 'blue-800': $blue-800,
+ 'blue-900': $blue-900,
) !default;
-$social-colors: (
- "x": #000000,
- "facebook": #1877f2,
- "twitter": #1da1f2,
- "linkedin": #0a66c2,
- "google": #dc4e41,
- "youtube": #ff0000,
- "vimeo": #1ab7ea,
- "dribbble": #ea4c89,
- "github": #181717,
- "instagram": #e4405f,
- "pinterest": #bd081c,
- "vk": #6383a8,
- "rss": #ffa500,
- "flickr": #0063dc,
- "bitbucket": #0052cc,
- "tabler": #066fd1,
+$indigos: (
+ 'indigo-100': $indigo-100,
+ 'indigo-200': $indigo-200,
+ 'indigo-300': $indigo-300,
+ 'indigo-400': $indigo-400,
+ 'indigo-500': $indigo-500,
+ 'indigo-600': $indigo-600,
+ 'indigo-700': $indigo-700,
+ 'indigo-800': $indigo-800,
+ 'indigo-900': $indigo-900,
) !default;
-$gray-colors: (
- gray-50: $gray-50,
- gray-100: $gray-100,
- gray-200: $gray-200,
- gray-300: $gray-300,
- gray-400: $gray-400,
- gray-500: $gray-500,
- gray-600: $gray-600,
- gray-700: $gray-700,
- gray-800: $gray-800,
- gray-900: $gray-900,
- gray-950: $gray-950,
+$purples: (
+ 'purple-100': $purple-100,
+ 'purple-200': $purple-200,
+ 'purple-300': $purple-300,
+ 'purple-400': $purple-400,
+ 'purple-500': $purple-500,
+ 'purple-600': $purple-600,
+ 'purple-700': $purple-700,
+ 'purple-800': $purple-800,
+ 'purple-900': $purple-900,
) !default;
-$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ()));
-
-// BACKDROPS
-$backdrop-opacity: .32 !default;
-$backdrop-blur: 4px !default;
-$backdrop-bg: light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}black)) !default;
-$backdrops: (
- dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
- light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
+$pinks: (
+ 'pink-100': $pink-100,
+ 'pink-200': $pink-200,
+ 'pink-300': $pink-300,
+ 'pink-400': $pink-400,
+ 'pink-500': $pink-500,
+ 'pink-600': $pink-600,
+ 'pink-700': $pink-700,
+ 'pink-800': $pink-800,
+ 'pink-900': $pink-900,
) !default;
-// Borders
-$border-width: 1px !default;
-$border-width-wide: 2px !default;
-
-$border-radius-xs: 2px !default;
-$border-radius-sm: 4px !default;
-$border-radius: 6px !default;
-$border-radius-lg: 8px !default;
-$border-radius-pill: 100rem !default;
-
-$border-radiuses: (
- 0: 0,
- xs: $border-radius-xs,
- sm: $border-radius-sm,
- md: $border-radius,
- lg: $border-radius-lg,
- pill: $border-radius-pill,
- null: var(--#{$prefix}border-radius-md),
+$reds: (
+ 'red-100': $red-100,
+ 'red-200': $red-200,
+ 'red-300': $red-300,
+ 'red-400': $red-400,
+ 'red-500': $red-500,
+ 'red-600': $red-600,
+ 'red-700': $red-700,
+ 'red-800': $red-800,
+ 'red-900': $red-900,
) !default;
-$border-values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
- wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
- 0: 0,
-);
-
-// Icons
-$icon-color: var(--#{$prefix}gray-400) !default;
-
-// Code
-$code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
-$code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
-$code-font-size: $font-size-reative-sm !default;
-$code-line-height: 1.25rem !default;
-
-$pre-padding: 1rem !default;
-$pre-bg: var(--#{$prefix}bg-surface-dark) !default;
-$pre-color: var(--#{$prefix}light) !default;
-
-$kbd-padding-x: 0.5rem !default;
-$kbd-padding-y: 0.25rem !default;
-$kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
-$kbd-font-size: var(--#{$prefix}font-size-h5) !default;
-$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
-$kbd-color: var(--#{$prefix}text-secondary-dark) !default;
-$kbd-bg: var(--#{$prefix}code-bg) !default;
-$kbd-border-radius: var(--#{$prefix}border-radius) !default;
-
-// Avatars
-$avatar-size: 2.5rem !default;
-$avatar-status-size: 0.75rem !default;
-$avatar-font-size: 1rem !default;
-$avatar-icon-size: 1.5rem !default;
-$avatar-brand-size: 1.25rem !default;
-$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$avatar-sizes: (
- "xxs": (
- size: 1rem,
- font-size: 0.5rem,
- icon-size: 0.5rem,
- status-size: 0.25rem,
- brand-size: 0.5rem,
- ),
- "xs": (
- size: 1.25rem,
- font-size: $h6-font-size,
- icon-size: 0.75rem,
- status-size: 0.375rem,
- brand-size: 0.75rem,
- border-radius: $border-radius-xs,
- ),
- "sm": (
- size: 2rem,
- font-size: $h5-font-size,
- icon-size: 1.5rem,
- status-size: 0.5rem,
- brand-size: 1rem,
- ),
- "md": (
- size: 2.5rem,
- font-size: $h4-font-size,
- icon-size: 1.5rem,
- status-size: 0.75rem,
- brand-size: 1.25rem,
- ),
- "lg": (
- size: 3rem,
- font-size: $h2-font-size,
- icon-size: 2rem,
- status-size: 0.75rem,
- brand-size: 1.25rem,
- ),
- "xl": (
- size: 5rem,
- font-size: 2rem,
- icon-size: 3rem,
- status-size: 1rem,
- brand-size: 1.25rem,
- ),
- "2xl": (
- size: 7rem,
- font-size: 3rem,
- icon-size: 5rem,
- status-size: 1rem,
- brand-size: 2rem,
- ),
+$oranges: (
+ 'orange-100': $orange-100,
+ 'orange-200': $orange-200,
+ 'orange-300': $orange-300,
+ 'orange-400': $orange-400,
+ 'orange-500': $orange-500,
+ 'orange-600': $orange-600,
+ 'orange-700': $orange-700,
+ 'orange-800': $orange-800,
+ 'orange-900': $orange-900,
) !default;
-$avatar-border-radius: var(--#{$prefix}border-radius) !default;
-$avatar-font-size: $h4-font-size !default;
-$avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
-$avatar-list-spacing: -0.5;
-$link-decoration: none !default;
-$link-hover-decoration: underline !default;
+$yellows: (
+ 'yellow-100': $yellow-100,
+ 'yellow-200': $yellow-200,
+ 'yellow-300': $yellow-300,
+ 'yellow-400': $yellow-400,
+ 'yellow-500': $yellow-500,
+ 'yellow-600': $yellow-600,
+ 'yellow-700': $yellow-700,
+ 'yellow-800': $yellow-800,
+ 'yellow-900': $yellow-900,
+) !default;
-// Typography
-$hr-opacity: $border-opacity !default;
-$hr-margin-y: 2rem !default;
+$greens: (
+ 'green-100': $green-100,
+ 'green-200': $green-200,
+ 'green-300': $green-300,
+ 'green-400': $green-400,
+ 'green-500': $green-500,
+ 'green-600': $green-600,
+ 'green-700': $green-700,
+ 'green-800': $green-800,
+ 'green-900': $green-900,
+) !default;
-// Caret
-$caret-width: 0.36em !default;
-$caret-spacing: 0.4em !default;
+$teals: (
+ 'teal-100': $teal-100,
+ 'teal-200': $teal-200,
+ 'teal-300': $teal-300,
+ 'teal-400': $teal-400,
+ 'teal-500': $teal-500,
+ 'teal-600': $teal-600,
+ 'teal-700': $teal-700,
+ 'teal-800': $teal-800,
+ 'teal-900': $teal-900,
+) !default;
-//Sizing
-$page-padding: var(--#{$prefix}spacer-3) !default;
-$page-padding-sm: var(--#{$prefix}spacer-2) !default;
-$page-padding-y: var(--#{$prefix}spacer-4) !default;
-
-// Sizing
-$container-padding-x: calc(var(--#{$prefix}page-padding) * 2) !default;
-$grid-gutter-width: var(--#{$prefix}page-padding) !default;
-
-// Grid
-$grid-gutter-width: 1rem !default;
-
-$container-variations: (
- slim: 16rem,
- tight: 32rem,
- narrow: 61.875rem,
+$cyans: (
+ 'cyan-100': $cyan-100,
+ 'cyan-200': $cyan-200,
+ 'cyan-300': $cyan-300,
+ 'cyan-400': $cyan-400,
+ 'cyan-500': $cyan-500,
+ 'cyan-600': $cyan-600,
+ 'cyan-700': $cyan-700,
+ 'cyan-800': $cyan-800,
+ 'cyan-900': $cyan-900,
) !default;
// Spacers
@@ -478,6 +369,588 @@ $spacers-extra: (
$negative-spacers: null !default;
+// Body
+
+$body-text-align: null !default;
+$body-color: $gray-900 !default;
+$body-bg: $white !default;
+
+$body-secondary-color: rgba($body-color, 0.75) !default;
+$body-secondary-bg: $gray-200 !default;
+
+$body-tertiary-color: rgba($body-color, 0.5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$body-emphasis-color: $black !default;
+
+// Typography
+$font-google: null !default;
+$font-google-monospaced: null !default;
+$font-local: null !default;
+$font-icons: () !default;
+
+$font-family-sans-serif: ('Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
+$font-family-monospace: (Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
+$font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
+$font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
+
+$font-family-base: var(--#{$prefix}font-sans-serif) !default;
+$font-family-code: var(--#{$prefix}font-monospace) !default;
+
+// Icons
+$icon-stroke-width: 1.5 !default;
+$icon-size: 1.25rem !default;
+
+$font-size-75: 0.75rem !default;
+$font-size-100: 0.875rem !default;
+$font-size-200: 1rem !default;
+$font-size-300: 1.25rem !default;
+$font-size-400: 1.5rem !default;
+$font-size-500: 1.75rem !default;
+$font-size-600: 2rem !default;
+$font-size-700: 2.5rem !default;
+
+$line-height-100: 1rem !default;
+$line-height-200: 1.25rem !default;
+$line-height-300: 1.5rem !default;
+$line-height-400: 1.75rem !default;
+$line-height-500: 2rem !default;
+$line-height-600: 2.5rem !default;
+$line-height-700: 3rem !default;
+
+$font-size-root: null !default;
+$font-size-base: 0.875rem !default;
+$font-size-sm: $font-size-base * 0.875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+
+$spacing-wide: 0.04em !default;
+$spacing-normal: 0 !default;
+$spacing-tight: -0.04em !default;
+
+$body-letter-spacing: 0 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-bolder: bolder !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-line-height: 1.2 !default;
+$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$headings-margin-bottom: var(--#{$prefix}spacer) !default;
+$headings-color: inherit !default;
+
+$font-weights: (
+ 'light': $font-weight-light,
+ 'normal': $font-weight-normal,
+ 'medium': $font-weight-medium,
+ 'semibold': $font-weight-semibold,
+ 'bold': $font-weight-bold,
+ 'headings': $headings-font-weight,
+) !default;
+
+$line-height-base: divide(1.25rem, $font-size-base) !default;
+$line-height-sm: divide(1rem, $font-size-base) !default;
+$line-height-lg: divide(1.5rem, $font-size-base) !default;
+$line-height-xl: divide(1.75rem, $font-size-base) !default;
+
+$h1-font-size: 1.5rem !default;
+$h1-line-height: 2rem !default;
+
+$h2-font-size: 1.25rem !default;
+$h2-line-height: 1.75rem !default;
+
+$h3-font-size: 1rem !default;
+$h3-line-height: 1.5rem !default;
+
+$h4-font-size: 0.875rem !default;
+$h4-line-height: 1.25rem !default;
+
+$h5-font-size: 0.75rem !default;
+$h5-line-height: 1rem !default;
+
+$h6-font-size: 0.625rem !default;
+$h6-line-height: 1rem !default;
+
+$font-size-reative-xs: 0.71428571em !default;
+$font-size-reative-sm: 0.85714285em !default;
+$font-size-reative-md: 1em !default;
+
+$small-font-size: 0.875em !default;
+
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size,
+) !default;
+
+$line-heights: (
+ h1: $h1-line-height,
+ h2: $h2-line-height,
+ h3: $h3-line-height,
+ h4: $h4-line-height,
+ h5: $h5-line-height,
+ h6: $h6-line-height,
+) !default;
+
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2rem,
+) !default;
+
+$display-font-family: null !default;
+$display-font-style: null !default;
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size: $font-size-base !default;
+$lead-font-weight: var(--#{$prefix}font-weight-normal) !default;
+
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base !default;
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
+
+$initialism-font-size: $small-font-size !default;
+
+$sub-sup-font-size: 0.75em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: 0.5rem !default;
+
+$mark-padding: 0.1875em !default;
+$mark-color: $body-color !default;
+$mark-bg: $yellow-100 !default;
+
+// Z-index
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+$zindex-toast: 1090 !default;
+
+$zindex-levels: (
+ n1: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3,
+) !default;
+
+$min-contrast-ratio: 1.5 !default;
+$text-secondary-opacity: 0.7 !default;
+$text-secondary-light-opacity: 0.4 !default;
+$text-secondary-dark-opacity: 0.8 !default;
+
+$border-opacity: 0.16 !default;
+$border-light-opacity: 0.08 !default;
+$border-dark-opacity: 0.24 !default;
+$border-active-opacity: 0.58 !default;
+
+$bg-surface: var(--#{$prefix}white) !default;
+$bg-surface-secondary: var(--#{$prefix}gray-100) !default;
+$bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
+$bg-surface-dark: var(--#{$prefix}dark) !default;
+
+$body-text-align: null !default;
+$body-bg: $gray-50 !default;
+$body-color: $dark !default;
+$body-emphasis-color: $gray-700 !default;
+$body-secondary-color: rgba($body-color, 0.75) !default;
+$body-secondary-bg: $gray-200 !default;
+$body-tertiary-color: rgba($body-color, 0.5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$color-contrast-dark: $body-color !default;
+$color-contrast-light: $light !default;
+
+$text-muted: $gray-500 !default;
+$text-secondary: $gray-500 !default;
+$text-secondary-light: $gray-400 !default;
+$text-secondary-dark: $gray-600 !default;
+
+$border-color: $gray-200 !default;
+$border-color-translucent: rgba(4, 32, 69, 0.1);
+
+$border-dark-color: $gray-400 !default;
+$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
+
+$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
+$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
+
+$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
+$active-color: var(--#{$prefix}primary) !default;
+$active-border-color: var(--#{$prefix}primary) !default;
+
+$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
+
+$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default;
+
+$primary: $blue !default;
+$secondary: $text-secondary !default;
+$muted: $text-secondary !default;
+$success: $green !default;
+$info: $azure !default;
+$warning: $yellow !default;
+$danger: $red !default;
+
+$link-color: $primary !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
+
+// Icon links
+$icon-link-gap: 0.375rem !default;
+$icon-link-underline-offset: 0.25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: 0.2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(0.25em, 0, 0) !default;
+
+// Paragraphs
+$paragraph-margin-bottom: 1rem !default;
+
+$theme-colors: (
+ 'primary': $primary,
+ 'secondary': $secondary,
+ 'success': $success,
+ 'info': $info,
+ 'warning': $warning,
+ 'danger': $danger,
+ 'light': $light,
+ 'dark': $dark,
+ 'muted': $muted,
+) !default;
+
+$extra-colors: (
+ 'blue': $blue,
+ 'azure': $azure,
+ 'indigo': $indigo,
+ 'purple': $purple,
+ 'pink': $pink,
+ 'red': $red,
+ 'orange': $orange,
+ 'yellow': $yellow,
+ 'lime': $lime,
+ 'green': $green,
+ 'teal': $teal,
+ 'cyan': $cyan,
+) !default;
+
+$social-colors: (
+ 'x': #000000,
+ 'facebook': #1877f2,
+ 'twitter': #1da1f2,
+ 'linkedin': #0a66c2,
+ 'google': #dc4e41,
+ 'youtube': #ff0000,
+ 'vimeo': #1ab7ea,
+ 'dribbble': #ea4c89,
+ 'github': #181717,
+ 'instagram': #e4405f,
+ 'pinterest': #bd081c,
+ 'vk': #6383a8,
+ 'rss': #ffa500,
+ 'flickr': #0063dc,
+ 'bitbucket': #0052cc,
+ 'tabler': #066fd1,
+) !default;
+
+$gray-colors: (
+ gray-50: $gray-50,
+ gray-100: $gray-100,
+ gray-200: $gray-200,
+ gray-300: $gray-300,
+ gray-400: $gray-400,
+ gray-500: $gray-500,
+ gray-600: $gray-600,
+ gray-700: $gray-700,
+ gray-800: $gray-800,
+ gray-900: $gray-900,
+ gray-950: $gray-950,
+) !default;
+
+$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ()));
+
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
+$grays: (
+ '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,
+) !default;
+
+$colors: (
+ 'blue': $blue,
+ 'indigo': $indigo,
+ 'purple': $purple,
+ 'pink': $pink,
+ 'red': $red,
+ 'orange': $orange,
+ 'yellow': $yellow,
+ 'green': $green,
+ 'teal': $teal,
+ 'cyan': $cyan,
+ 'black': $black,
+ 'white': $white,
+ 'gray': $gray-600,
+ 'gray-dark': $gray-800,
+) !default;
+
+// Theme color emphasis
+$primary-text-emphasis: shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis: shade-color($success, 60%) !default;
+$info-text-emphasis: shade-color($info, 60%) !default;
+$warning-text-emphasis: shade-color($warning, 60%) !default;
+$danger-text-emphasis: shade-color($danger, 60%) !default;
+$light-text-emphasis: $gray-700 !default;
+$dark-text-emphasis: $gray-700 !default;
+
+// Theme bg subtle
+$primary-bg-subtle: tint-color($primary, 80%) !default;
+$secondary-bg-subtle: tint-color($secondary, 80%) !default;
+$success-bg-subtle: tint-color($success, 80%) !default;
+$info-bg-subtle: tint-color($info, 80%) !default;
+$warning-bg-subtle: tint-color($warning, 80%) !default;
+$danger-bg-subtle: tint-color($danger, 80%) !default;
+$light-bg-subtle: color.mix($gray-100, $white) !default;
+$dark-bg-subtle: $gray-400 !default;
+
+// Theme border subtle
+$primary-border-subtle: tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle: tint-color($success, 60%) !default;
+$info-border-subtle: tint-color($info, 60%) !default;
+$warning-border-subtle: tint-color($warning, 60%) !default;
+$danger-border-subtle: tint-color($danger, 60%) !default;
+$light-border-subtle: $gray-200 !default;
+$dark-border-subtle: $gray-500 !default;
+
+// Backdrops
+$backdrop-opacity: 0.32 !default;
+$backdrop-blur: 4px !default;
+$backdrop-bg: light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}black)) !default;
+$backdrops: (
+ dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
+ light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
+) !default;
+
+// Gradient
+$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0)) !default;
+
+// Borders
+$border-width: 1px !default;
+$border-width-wide: 2px !default;
+$border-widths: (
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px,
+) !default;
+$border-style: solid !default;
+
+$border-radius-xs: 2px !default;
+$border-radius-sm: 4px !default;
+$border-radius: 6px !default;
+$border-radius-lg: 8px !default;
+$border-radius-xl: 1rem !default;
+$border-radius-xxl: 2rem !default;
+$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
+$border-radius-pill: 100rem !default;
+
+$border-radiuses: (
+ 0: 0,
+ xs: $border-radius-xs,
+ sm: $border-radius-sm,
+ md: $border-radius,
+ lg: $border-radius-lg,
+ pill: $border-radius-pill,
+ null: var(--#{$prefix}border-radius-md),
+) !default;
+
+$border-values: (
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
+ wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
+ 0: 0,
+);
+
+$icon-color: var(--#{$prefix}gray-400) !default;
+
+// Code
+$code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
+$code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
+$code-font-size: $font-size-reative-sm !default;
+$code-line-height: 1.25rem !default;
+
+$pre-padding: 1rem !default;
+$pre-bg: var(--#{$prefix}bg-surface-dark) !default;
+$pre-color: var(--#{$prefix}light) !default;
+
+$kbd-padding-x: 0.5rem !default;
+$kbd-padding-y: 0.25rem !default;
+$kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
+$kbd-font-size: var(--#{$prefix}font-size-h5) !default;
+$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
+$kbd-color: var(--#{$prefix}text-secondary-dark) !default;
+$kbd-bg: var(--#{$prefix}code-bg) !default;
+$kbd-border-radius: var(--#{$prefix}border-radius) !default;
+$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
+
+// Avatars
+$avatar-size: 2.5rem !default;
+$avatar-status-size: 0.75rem !default;
+$avatar-font-size: 1rem !default;
+$avatar-icon-size: 1.5rem !default;
+$avatar-brand-size: 1.25rem !default;
+$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$avatar-sizes: (
+ 'xxs': (
+ size: 1rem,
+ font-size: 0.5rem,
+ icon-size: 0.5rem,
+ status-size: 0.25rem,
+ brand-size: 0.5rem,
+ ),
+ 'xs': (
+ size: 1.25rem,
+ font-size: $h6-font-size,
+ icon-size: 0.75rem,
+ status-size: 0.375rem,
+ brand-size: 0.75rem,
+ border-radius: $border-radius-xs,
+ ),
+ 'sm': (
+ size: 2rem,
+ font-size: $h5-font-size,
+ icon-size: 1.5rem,
+ status-size: 0.5rem,
+ brand-size: 1rem,
+ ),
+ 'md': (
+ size: 2.5rem,
+ font-size: $h4-font-size,
+ icon-size: 1.5rem,
+ status-size: 0.75rem,
+ brand-size: 1.25rem,
+ ),
+ 'lg': (
+ size: 3rem,
+ font-size: $h2-font-size,
+ icon-size: 2rem,
+ status-size: 0.75rem,
+ brand-size: 1.25rem,
+ ),
+ 'xl': (
+ size: 5rem,
+ font-size: 2rem,
+ icon-size: 3rem,
+ status-size: 1rem,
+ brand-size: 1.25rem,
+ ),
+ '2xl': (
+ size: 7rem,
+ font-size: 3rem,
+ icon-size: 5rem,
+ status-size: 1rem,
+ brand-size: 2rem,
+ ),
+) !default;
+$avatar-border-radius: var(--#{$prefix}border-radius) !default;
+$avatar-font-size: $h4-font-size !default;
+$avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
+$avatar-list-spacing: -0.5;
+
+$link-decoration: none !default;
+$link-hover-decoration: underline !default;
+
+// Horizontal rules
+$hr-margin-y: 2rem !default;
+$hr-color: inherit !default;
+$hr-bg-color: null !default;
+$hr-height: null !default;
+$hr-border-color: null !default;
+$hr-border-width: var(--#{$prefix}border-width) !default;
+$hr-opacity: $border-opacity !default;
+
+$vr-border-width: var(--#{$prefix}border-width) !default;
+
+// Caret
+$caret-width: 0.3em !default;
+$caret-vertical-align: $caret-width * 0.85 !default;
+$caret-spacing: $caret-width * 0.85 !default;
+
+// Sizing
+$page-padding: var(--#{$prefix}spacer-3) !default;
+$page-padding-sm: var(--#{$prefix}spacer-2) !default;
+$page-padding-y: var(--#{$prefix}spacer-4) !default;
+$container-padding-x: calc(var(--#{$prefix}page-padding) * 2) !default;
+$grid-gutter-width: var(--#{$prefix}page-padding) !default;
+
+// Position
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%,
+) !default;
+
+// Grid breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px,
+) !default;
+
+// Grid containers
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px,
+) !default;
+
+// Grid columns
+$grid-columns: 12 !default;
+$grid-row-columns: 6 !default;
+
+// Grid
+$grid-gutter-width: 1rem !default;
+
+$container-variations: (
+ slim: 16rem,
+ tight: 32rem,
+ narrow: 61.875rem,
+) !default;
+
// Sizes
$size-spacers: (
auto: auto,
@@ -500,29 +973,34 @@ $size-values: map.merge(
// Aspect ratios
$aspect-ratios: (
- "1x1": 100%,
- "2x1": calc(1 / 2 * 100%),
- "1x2": calc(2 / 1 * 100%),
- "3x1": calc(1 / 3 * 100%),
- "1x3": calc(3 / 1 * 100%),
- "4x1": calc(1 / 4 * 100%),
- "1x4": calc(4 / 1 * 100%),
- "4x3": calc(3 / 4 * 100%),
- "3x4": calc(4 / 3 * 100%),
- "16x9": calc(9 / 16 * 100%),
- "9x16": calc(16 / 9 * 100%),
- "21x9": calc(9 / 21 * 100%),
- "9x21": calc(21 / 9 * 100%),
+ '1x1': 100%,
+ '2x1': calc(1 / 2 * 100%),
+ '1x2': calc(2 / 1 * 100%),
+ '3x1': calc(1 / 3 * 100%),
+ '1x3': calc(3 / 1 * 100%),
+ '4x1': calc(1 / 4 * 100%),
+ '1x4': calc(4 / 1 * 100%),
+ '4x3': calc(3 / 4 * 100%),
+ '3x4': calc(4 / 3 * 100%),
+ '16x9': calc(9 / 16 * 100%),
+ '9x16': calc(16 / 9 * 100%),
+ '21x9': calc(9 / 21 * 100%),
+ '9x21': calc(21 / 9 * 100%),
) !default;
// Shadows
$box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
$box-shadow-transparent: 0 0 0 0 transparent !default;
$box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
$box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
$box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
-$box-shadow-dropdown: 0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1) !default;
+$box-shadow-dropdown:
+ 0 16px 24px 2px rgba(0, 0, 0, 0.07),
+ 0 6px 30px 5px rgba(0, 0, 0, 0.06),
+ 0 8px 10px -5px rgba(0, 0, 0, 0.1) !default;
$box-shadows: (
null: $box-shadow,
@@ -534,51 +1012,63 @@ $box-shadows: (
dropdown: $box-shadow-dropdown,
) !default;
-$box-shadow-inset: 0 0 transparent !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
+
+// Component active
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;
// Focus
$focus-ring-width: 0.25rem !default;
$focus-ring-opacity: 0.25 !default;
$focus-ring-color: rgba(var(--#{$prefix}primary-rgb), $focus-ring-opacity) !default;
$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// Transitions
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
+$transition-collapse: height 0.35s ease !default;
+$transition-collapse-width: width 0.35s ease !default;
$transition-time: 0.3s !default;
// Overlay
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;
-// Accordion
-$accordion-bg: transparent !default;
-$accordion-color: var(--#{$prefix}body-color) !default;
-$accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
-$accordion-icon-width: 1rem !default;
-
-$accordion-button-bg: transparent !default;
-$accordion-button-active-bg: transparent !default;
-$accordion-button-active-color: inherit !default;
-$accordion-button-focus-border-color: $accordion-border-color !default;
-
// Alerts
-$alert-padding-x: 1rem !default;
$alert-padding-y: 0.75rem !default;
+$alert-padding-x: 1rem !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: var(--#{$prefix}border-radius) !default;
$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
-
$alert-border-width: var(--#{$prefix}border-width) !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
$alert-border-color: var(--#{$prefix}border-color-translucent) !default;
$alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
+$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
// Breadcrumb
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: 0.5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
$breadcrumb-divider-color: var(--#{$prefix}gray-500) !default;
-$breadcrumb-link-color: var(--#{$prefix}link-color) !default;
$breadcrumb-active-color: inherit !default;
+$breadcrumb-divider: string.quote('/') !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+$breadcrumb-link-color: var(--#{$prefix}link-color) !default;
$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
$breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
$breadcrumb-variants: (
- dots: "·",
- arrows: "›",
- bullets: "\02022",
+ dots: '·',
+ arrows: '›',
+ bullets: '\02022',
) !default;
// Badges
@@ -589,14 +1079,19 @@ $badge-line-height: $code-line-height !default;
$badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
$badge-padding-y: 0.25em !default;
$badge-padding-x: 0.5em !default;
-$badge-empty-size: .5rem !default;
+$badge-border-radius: var(--#{$prefix}border-radius) !default;
+$badge-empty-size: 0.5rem !default;
$badge-color: var(--#{$prefix}secondary) !default;
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
-// Buttons
+// Buttons + Forms
$input-btn-border-width: var(--#{$prefix}border-width) !default;
$input-btn-font-family: var(--#{$prefix}body-font-family) !default;
$input-btn-focus-width: 0.25rem !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
$input-btn-padding-y-sm: 0.3125rem !default;
$input-btn-padding-x-sm: 0.5rem !default;
@@ -622,18 +1117,86 @@ $input-btn-font-size-xl: $h1-font-size !default;
$input-btn-line-height-xl: 2rem !default;
$input-btn-icon-size-xl: 2rem !default;
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
+$btn-box-shadow: var(--#{$prefix}shadow-input) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: 0.4 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
+
+$btn-link-color: var(--#{$prefix}link-color) !default;
+$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$btn-link-disabled-color: $gray-600 !default;
+$btn-link-focus-shadow-rgb: to-rgb(color.mix(color-contrast($link-color), $link-color, 15%)) !default;
+
+$btn-border-radius: var(--#{$prefix}border-radius) !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+
+$btn-transition:
+ color 0.15s ease-in-out,
+ background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+
+$btn-border-color: var(--#{$prefix}border-color) !default;
+
+$btn-color: var(--#{$prefix}body-color) !default;
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
// Inputs
+$input-bg: var(--#{$prefix}body-bg) !default;
+$input-disabled-color: null !default;
+$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$input-disabled-border-color: null !default;
+
$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;
+$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !default;
$input-color: var(--#{$prefix}body-color) !default;
-$input-focus-color: var(--#{$prefix}body-color) !default;
$input-box-shadow: var(--#{$prefix}shadow-input) !default;
+$input-plaintext-color: var(--#{$prefix}body-color) !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-color: var(--#{$prefix}body-color) !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$input-transition:
+ border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+
$input-border-width: $input-btn-border-width !default;
$input-line-height: $input-btn-line-height !default;
$input-height-border: calc(#{$input-border-width} * 2) !default;
@@ -654,39 +1217,31 @@ $input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-he
$input-height-sm: add($input-line-height, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
$input-height-lg: add($input-line-height, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
-// Buttons
-$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-
-$btn-disabled-opacity: 0.4 !default;
-$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
-$btn-border-color: var(--#{$prefix}border-color) !default;
-$btn-border-radius: var(--#{$prefix}border-radius) !default;
-$btn-box-shadow: var(--#{$prefix}shadow-input) !default;
-
// Cards
+$card-spacer-y: 1.25rem !default;
+$card-spacer-x: 1.25rem !default;
$card-title-spacer-y: 1.25rem !default;
-$card-box-shadow: var(--#{$prefix}shadow-card) !default;
-$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
-
-$card-bg: var(--#{$prefix}bg-surface) !default;
-$card-bg-hover: $white !default;
-$card-color: inherit !default;
-
+$card-title-color: null !default;
+$card-subtitle-color: null !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$card-box-shadow: var(--#{$prefix}shadow-card) !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
-$card-spacer-x: 1.25rem !default;
-$card-spacer-y: 1.25rem !default;
-
+$card-cap-padding-y: $card-spacer-y !default;
+$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$card-cap-color: inherit !default;
-$card-cap-padding-x: $card-spacer-x !default;
-$card-cap-padding-y: $card-spacer-y !default;
+$card-height: null !default;
+$card-color: inherit !default;
+$card-bg: var(--#{$prefix}bg-surface) !default;
+$card-bg-hover: $white !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: 1.5rem !default;
$card-status-size: $border-width-wide !default;
-$card-group-margin: 1.5rem !default;
$card-stamp-opacity: 0.2 !default;
@@ -699,102 +1254,229 @@ $card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$cards-grid-gap: var(--#{$prefix}page-padding) !default;
$cards-grid-breakpoint: lg !default;
+// Accordion
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: var(--#{$prefix}body-color) !default;
+$accordion-bg: transparent !default;
+$accordion-border-width: var(--#{$prefix}border-width) !default;
+$accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
+$accordion-border-radius: var(--#{$prefix}border-radius) !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: var(--#{$prefix}body-color) !default;
+$accordion-button-bg: transparent !default;
+$accordion-transition:
+ $btn-transition,
+ border-radius 0.15s ease !default;
+$accordion-button-active-bg: transparent !default;
+$accordion-button-active-color: inherit !default;
+$accordion-button-focus-border-color: $accordion-border-color !default; // Deprecated in v5.3.3
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1rem !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $primary-text-emphasis !default;
+$accordion-icon-transition: transform 0.2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,") !default;
+
// Carousel
+
$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: 0.5 !default;
+$carousel-control-hover-opacity: 0.9 !default;
+$carousel-control-transition: opacity 0.15s ease !default;
+$carousel-control-icon-filter: null !default;
$carousel-control-icon-width: 1.5rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: 0.5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity 0.6s ease !default;
$carousel-indicator-thumb-opacity: 0.75 !default;
$carousel-indicator-thumb-width: 4rem !default;
$carousel-indicator-dot-width: 0.5rem !default;
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-transition-duration: 0.6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default;
+
+$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
+$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
+
// Close
$btn-close-width: 1em !default;
-$btn-close-opacity: 0.4 !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: 0.25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $body-color !default;
+$btn-close-bg: url("data:image/svg+xml,") !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
+$btn-close-opacity: 0.4 !default;
+$btn-close-hover-opacity: 0.75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: 0.25 !default;
+$btn-close-filter: null !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
// Datagrid
$datagrid-padding: 1.5rem !default;
$datagrid-item-width: 15rem !default;
// Dropdown
-$dropdown-bg: var(--#{$prefix}bg-surface) !default;
-$dropdown-item-padding-x: 0.75rem !default;
-$dropdown-item-padding-y: 0.5rem !default;
-$dropdown-font-size: $font-size-base !default;
-$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
-$dropdown-padding-y: 0.25rem !default;
-$dropdown-link-color: inherit !default;
-$dropdown-link-hover-bg: $hover-bg !default;
-$dropdown-link-hover-color: inherit !default;
-$dropdown-spacer: 1px !default;
$dropdown-min-width: 11rem !default;
-$dropdown-max-width: 25rem !default;
-$dropdown-scrollable-height: 13rem !default;
-$dropdown-link-active-color: var(--#{$prefix}primary) !default;
-$dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
-$dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default;
-
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: 0.25rem !default;
+$dropdown-spacer: 1px !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: var(--#{$prefix}body-color) !default;
+$dropdown-bg: var(--#{$prefix}bg-surface) !default;
+$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
+$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
+$dropdown-border-width: var(--#{$prefix}border-width) !default;
+$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
+$dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default;
+
+$dropdown-link-color: inherit !default;
+$dropdown-link-hover-color: inherit !default;
+$dropdown-link-hover-bg: $hover-bg !default;
+$dropdown-link-active-color: var(--#{$prefix}primary) !default;
+$dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
+$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
+
+$dropdown-item-padding-y: 0.5rem !default;
+$dropdown-item-padding-x: 0.75rem !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding-x: $dropdown-item-padding-x !default;
+$dropdown-header-padding-y: $dropdown-padding-y !default;
+$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+
+$dropdown-max-width: 25rem !default;
+$dropdown-scrollable-height: 13rem !default;
+
+// Dropdown dark
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, 0.15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
// Tooltip
-$tooltip-bg: var(--#{$prefix}bg-surface-inverted) !default;
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
$tooltip-color: var(--#{$prefix}text-inverted) !default;
+$tooltip-bg: var(--#{$prefix}bg-surface-inverted) !default;
+$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
+$tooltip-opacity: 0.9 !default;
$tooltip-padding-y: var(--#{$prefix}spacer-1) !default;
$tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
+$tooltip-margin: null !default; // TODO: remove this in v6
+
+$tooltip-arrow-width: 0.8rem !default;
+$tooltip-arrow-height: 0.4rem !default;
+$tooltip-arrow-color: null !default;
// Loader
$loader-size: 2.5rem !default;
-// Lists
$list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$list-group-header-color: var(--#{$prefix}gray-500) !default;
-$list-group-border-color: var(--#{$prefix}border-color) !default;
-$list-group-item-padding-y: $card-cap-padding-y !default;
-$list-group-item-padding-x: $card-cap-padding-x !default;
-
// Modals
-$modal-backdrop-opacity: $backdrop-opacity !default;
-$modal-backdrop-bg: $backdrop-bg !default;
-$modal-backdrop-blur: $backdrop-blur !default;
-
-$modal-fade-transform: translate(0, -1rem) !default;
-
-$modal-content-border-color: transparent !default;
-$modal-content-bg: var(--#{$prefix}bg-surface) !default;
-$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
-
-$modal-header-padding: 1.5rem !default;
-$modal-header-height: 3.5rem !default;
-$modal-header-border-width: var(--#{$prefix}border-width) !default;
-$modal-header-border-color: var(--#{$prefix}border-color) !default;
-$modal-header-bg: transparent !default;
$modal-inner-padding: 1.5rem !default;
-$modal-footer-border-width: var(--#{$prefix}border-width) !default;
$modal-footer-margin-between: 0.75rem !default;
+
+$modal-dialog-margin: 0.5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: var(--#{$prefix}body-color) !default;
+$modal-content-bg: var(--#{$prefix}bg-surface) !default;
+$modal-content-border-color: transparent !default;
+$modal-content-border-width: var(--#{$prefix}border-width) !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
+
+$modal-backdrop-bg: $backdrop-bg !default;
+$modal-backdrop-opacity: $backdrop-opacity !default;
+$modal-backdrop-blur: $backdrop-blur !default;
+
+$modal-header-border-color: var(--#{$prefix}border-color) !default;
+$modal-header-border-width: var(--#{$prefix}border-width) !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: 1.5rem !default; // Keep this for backwards compatibility
+$modal-header-height: 3.5rem !default;
+$modal-header-bg: transparent !default;
+
$modal-footer-bg: var(--#{$prefix}bg-surface-tertiary) !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-footer-border-width: var(--#{$prefix}border-width) !default;
+
+$modal-sm: 380px !default;
+$modal-md: 540px !default;
+$modal-lg: 720px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -1rem) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform 0.3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
$modal-status-size: $border-width-wide !default;
-$modal-xl: 1140px !default;
-$modal-lg: 720px !default;
-$modal-md: 540px !default;
-$modal-sm: 380px !default;
-
// Nav
$nav-link-padding-y: 0.5rem !default;
$nav-link-padding-x: 0.75rem !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
$nav-link-color: var(--#{$prefix}gray-500) !default;
-$nav-link-active-color: var(--#{$prefix}body-color) !default;
+$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$nav-link-transition:
+ color 0.15s ease-in-out,
+ background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out !default;
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
+$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$nav-link-icon-size: $icon-size !default;
$nav-link-icon-color: inherit !default;
+$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
$nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
@@ -806,16 +1488,24 @@ $nav-bordered-link-active-border-width: 2 * $border-width !default;
$nav-bordered-margin-x: 1.25rem !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
+$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
-$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
+$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
$nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
+$nav-underline-gap: 1rem !default;
+$nav-underline-border-width: 0.125rem !default;
+$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
+
// Navbar
$navbar-height: 3.5rem !default;
$navbar-padding-y: 0.25rem !default;
-$navbar-light-color: var(--#{$prefix}secondary) !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: $nav-link-padding-x !default;
$navbar-hover-color: var(--#{$prefix}body-color) !default;
@@ -828,27 +1518,39 @@ $navbar-light-active-color: var(--#{$prefix}body-color) !default;
$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
+$navbar-light-icon-color: rgba($body-color, 0.75) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.15) !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
$navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
+$navbar-dark-hover-color: rgba($white, 0.75) !default;
$navbar-dark-brand-color: $white !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-dark-active-bg: rgba(255, 255, 255, 0.06) !default;
+$navbar-dark-icon-color: $navbar-dark-color !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+$navbar-brand-font-size: $h2-font-size !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: $nav-link-padding-y !default;
$navbar-brand-image-height: 2rem !default;
$navbar-brand-margin-right: 0 !default;
-$navbar-brand-font-size: $h2-font-size !default;
+$navbar-brand-margin-end: 1rem !default;
$navbar-brand-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$navbar-toggler-padding-y: 0.25rem !default;
+$navbar-toggler-padding-x: 0.75rem !default;
$navbar-toggler-font-size: 1rem !default;
-$navbar-toggler-padding-x: 0 !default;
-$navbar-toggler-padding-y: 0 !default;
-$navbar-toggler-animation-time: 0.2s !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: 0 !default;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;
+$navbar-toggler-animation-time: 0.2s !default;
$navbar-overlap-height: 9rem !default;
-$navbar-nav-link-padding-x: $nav-link-padding-x !default;
$navbar-nav-link-hover-bg: rgba(0, 0, 0, 0.04) !default;
$navbar-active-border-color: var(--#{$prefix}primary) !default;
@@ -862,14 +1564,30 @@ $page-title-line-height: var(--#{$prefix}line-height-h2) !default;
$page-title-font-weight: var(--#{$prefix}font-weight-headings) !default;
// Popover
+$popover-font-size: $font-size-sm !default;
$popover-bg: var(--#{$prefix}bg-surface) !default;
-$popover-header-bg: transparent !default;
+$popover-max-width: 276px !default;
+$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color) !default;
-$popover-body-color: inherit !default;
-$popover-body-padding-x: 0.5rem !default;
-$popover-body-padding-y: 0.5rem !default;
+$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
+$popover-header-font-size: $font-size-base !default;
+$popover-header-bg: transparent !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: inherit !default;
+$popover-body-padding-y: 0.5rem !default;
+$popover-body-padding-x: 0.5rem !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: 0.5rem !default;
+$popover-arrow-color: $popover-bg !default;
+$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
+
// Footer
$footer-padding-y: 2rem !default;
$footer-bg: var(--#{$prefix}bg-surface) !default;
@@ -877,21 +1595,48 @@ $footer-border-color: var(--#{$prefix}border-color) !default;
$footer-color: var(--#{$prefix}gray-500) !default;
// Pagination
-$pagination-border-width: 1px !default;
-$pagination-border-color: transparent !default;
$pagination-padding-y: calc(0.25rem + 1px) !default;
$pagination-padding-x: 0.25rem !default;
+$pagination-padding-y-sm: 0.25rem !default;
+$pagination-padding-x-sm: 0.5rem !default;
+$pagination-padding-y-lg: 0.75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-font-size: $font-size-base !default;
+
$pagination-color: var(--#{$prefix}body-color) !default;
$pagination-bg: transparent !default;
-$pagination-hover-bg: var(--#{$prefix}active-bg) !default;
-$pagination-hover-border-color: var(--#{$prefix}pagination-border-color) !default;
-$pagination-disabled-bg: transparent !default;
-$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
-$pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
+$pagination-border-radius: var(--#{$prefix}border-radius) !default;
+$pagination-border-width: 1px !default;
+$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color: transparent !default;
+$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-hover-bg: var(--#{$prefix}active-bg) !default;
+$pagination-hover-border-color: var(--#{$prefix}pagination-border-color) !default; // Todo in v6: remove this?
+
+$pagination-active-color: $component-active-color !default;
$pagination-active-bg: var(--#{$prefix}primary) !default;
$pagination-active-border-color: var(--#{$prefix}primary) !default;
+$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
+$pagination-disabled-bg: transparent !default;
+$pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
+
+$pagination-transition:
+ color 0.15s ease-in-out,
+ background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+
+$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+
// Statuses
$status-dot-size: 0.5rem !default;
$status-height: 1.5rem !default;
@@ -905,36 +1650,88 @@ $steps-margin: 2rem 0 !default;
// Spinner
$spinner-width: 1.5rem !default;
$spinner-height: 1.5rem !default;
+$spinner-vertical-align: -0.125em !default;
+$spinner-border-width: 2px !default;
+$spinner-animation-speed: 0.75s !default;
+
$spinner-width-sm: 1rem !default;
$spinner-height-sm: 1rem !default;
-$spinner-border-width: 2px !default;
$spinner-border-width-sm: 1px !default;
// Tables
$table-bg: transparent !default;
$table-bg-scale-dark: 40% !default;
$table-color: inherit !default;
+$table-accent-bg: transparent !default;
+
$table-cell-padding-x: 0.75rem !default;
$table-cell-padding-y: 0.75rem !default;
+$table-cell-padding-y-sm: 0.25rem !default;
+$table-cell-padding-x-sm: 0.25rem !default;
+$table-cell-vertical-align: top !default;
+
+$table-border-factor: 0.2 !default;
+$table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: var(--#{$prefix}border-color-translucent) !default;
+
$table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
$table-th-padding-x: $table-cell-padding-x !default;
$table-th-padding-y: 0.5rem !default;
+$table-th-font-weight: null !default;
$table-th-color: var(--#{$prefix}gray-500) !default;
$table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
+
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: 0.05 !default;
$table-striped-order: even !default;
$table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
+$table-striped-columns-order: even !default;
+
$table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: 0.1 !default;
$table-active-bg: var(--#{$prefix}active-bg) !default;
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: 0.075 !default;
+$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+
+$table-caption-color: var(--#{$prefix}secondary-color) !default;
+
+$table-bg-scale: -80% !default;
+
+$table-variants: (
+ 'primary': shift-color($primary, $table-bg-scale),
+ 'secondary': shift-color($secondary, $table-bg-scale),
+ 'success': shift-color($success, $table-bg-scale),
+ 'info': shift-color($info, $table-bg-scale),
+ 'warning': shift-color($warning, $table-bg-scale),
+ 'danger': shift-color($danger, $table-bg-scale),
+ 'light': $light,
+ 'dark': $dark,
+) !default;
+
$table-sort-bg-image: url("data:image/svg+xml,") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml,") !default;
$table-sort-desc-bg-image: url("data:image/svg+xml,") !default;
// Toasts
-$toast-border-color: var(--#{$prefix}border-color) !default;
-$toast-header-color: var(--#{$prefix}gray-500) !default;
+$toast-max-width: 350px !default;
+$toast-padding-x: 0.75rem !default;
+$toast-padding-y: 0.5rem !default;
+$toast-font-size: 0.875rem !default;
+$toast-color: null !default;
$toast-background-color: var(--#{$prefix}bg-surface) !default;
+$toast-border-width: var(--#{$prefix}border-width) !default;
+$toast-border-color: var(--#{$prefix}border-color) !default;
+$toast-border-radius: var(--#{$prefix}border-radius) !default;
+$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: var(--#{$prefix}gray-500) !default;
+$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), 0.85) !default;
+$toast-header-border-color: $toast-border-color !default;
// Tracking
$tracking-height: 1.5rem !default;
@@ -942,39 +1739,76 @@ $tracking-gap-width: 0.125rem !default;
$tracking-border-radius: var(--#{$prefix}border-radius) !default;
// Progress
+$progress-height: 0.5rem !default;
+$progress-font-size: $font-size-base * 0.75 !default;
$progress-bg: var(--#{$prefix}border-color) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
+$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
+$progress-bar-color: $white !default;
$progress-bar-bg: var(--#{$prefix}primary) !default;
-$progress-height: 0.5rem !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width 0.6s ease !default;
-// Lists
+// List Group
+$list-group-color: var(--#{$prefix}body-color) !default;
$list-group-bg: inherit !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
-$list-group-action-color: inherit !default;
+$list-group-border-width: var(--#{$prefix}border-width) !default;
+$list-group-border-radius: var(--#{$prefix}border-radius) !default;
+
+$list-group-item-padding-y: $card-cap-padding-y !default;
+$list-group-item-padding-x: $card-cap-padding-x !default;
+$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
+
$list-group-hover-bg: $hover-bg !default;
+$list-group-active-color: inherit !default;
$list-group-active-bg: var(--#{$prefix}active-bg) !default;
$list-group-active-border-color: $list-group-border-color !default;
-$list-group-active-color: inherit !default;
+
+$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: inherit !default;
+$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
+$list-group-action-active-color: var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
+
+// Forms
$input-bg: var(--#{$prefix}bg-forms) !default;
$input-disabled-bg: $disabled-bg !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
+
$input-placeholder-color: var(--#{$prefix}tertiary) !default;
-$input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: var(--#{$prefix}gray-500) !default;
+$input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$input-group-addon-border-color: $input-border-color !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;
-// Forms
+$form-color-width: 3rem !default;
+
$form-check-margin-bottom: 0.75rem !default;
$form-check-padding-start: 2rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: null !default;
$form-check-input-width: 1.25rem !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: var(--#{$prefix}bg-forms) !default;
$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
$form-check-input-box-shadow: $input-box-shadow !default;
$form-check-input-checked-bg-size: 1.25rem !default;
@@ -984,62 +1818,596 @@ $form-check-input-checked-bg-repeat: repeat !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,") !default;
$form-check-input-checked-border-color: $input-border-color-translucent !default;
+$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: var(--#{$prefix}primary) !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-check-input-disabled-opacity: 0.5 !default;
$form-check-label-disabled-opacity: $text-secondary-opacity;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+$form-check-inline-margin-end: 1rem !default;
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color: $text-secondary-light !default;
+$form-select-indicator: url("data:image/svg+xml,") !default;
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $input-border-radius !default;
$form-select-box-shadow: var(--#{$prefix}shadow-input) !default;
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+$form-select-transition: $input-transition !default;
+$form-switch-color: rgba($black, 0.25) !default;
$form-switch-width: 2rem !default;
$form-switch-height: 1.25rem !default;
$form-switch-padding-start: $form-switch-width + 0.5rem !default;
$form-switch-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position 0.15s ease-in-out !default;
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-checked-bg-position: right center !default;
$form-switch-bg-size: auto !default;
+// Form range
+$form-range-track-width: 100% !default;
$form-range-track-height: 0.25rem !default;
+$form-range-track-cursor: pointer !default;
$form-range-track-bg: var(--#{$prefix}border-color) !default;
-$form-range-thumb-border: 2px var(--#{$prefix}border-style) $white !default;
-$form-range-thumb-bg: var(--#{$prefix}primary) !default;
-$form-range-thumb-height: 1rem !default;
-$form-range-thumb-focus-box-shadow-width: 0.125rem !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: 1rem !default;
+$form-range-thumb-bg: var(--#{$prefix}primary) !default;
+$form-range-thumb-border: 2px var(--#{$prefix}border-style) $white !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
+$form-range-thumb-focus-box-shadow:
+ 0 0 0 1px $body-bg,
+ $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: 0.125rem !default;
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
+$form-range-thumb-transition:
+ background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+
+// Form floating
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: 0.625rem !default;
+$form-floating-label-height: 1.5em !default;
+$form-floating-label-opacity: 0.65 !default;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
+$form-floating-label-disabled-color: $gray-600 !default;
+$form-floating-transition:
+ opacity 0.1s ease-in-out,
+ transform 0.1s ease-in-out !default;
+
+// Form text
+
+$form-text-margin-top: 0.25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: var(--#{$prefix}secondary-color) !default;
+
+$form-label-margin-bottom: 0.5rem !default;
+$form-label-font-size: $h4-font-size !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
+$form-label-color: null !default;
+
+// Form feedback
+
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-valid: str-replace(
url("data:image/svg+xml,"),
- "#",
- "%23"
+ '#',
+ '%23'
) !default;
$form-feedback-icon-invalid: str-replace(
url("data:image/svg+xml,"),
- "#",
- "%23"
+ '#',
+ '%23'
+) !default;
+// Form validation states
+$form-validation-states: (
+ 'valid': (
+ 'color': var(--#{$prefix}form-valid-color),
+ 'icon': $form-feedback-icon-valid,
+ 'tooltip-color': #fff,
+ 'tooltip-bg-color': var(--#{$prefix}success),
+ 'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+ 'border-color': var(--#{$prefix}form-valid-border-color),
+ ),
+ 'invalid': (
+ 'color': var(--#{$prefix}form-invalid-color),
+ 'icon': $form-feedback-icon-invalid,
+ 'tooltip-color': #fff,
+ 'tooltip-bg-color': var(--#{$prefix}danger),
+ 'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+ 'border-color': var(--#{$prefix}form-invalid-border-color),
+ ),
) !default;
-$form-label-font-size: $h4-font-size !default;
-$form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
+// Form feedback tooltip
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
+$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
$form-secondary-color: var(--#{$prefix}secondary) !default;
+$form-valid-color: $form-feedback-valid-color !default;
+$form-valid-border-color: $form-feedback-valid-color !default;
+$form-invalid-color: $form-feedback-invalid-color !default;
+$form-invalid-border-color: $form-feedback-invalid-color !default;
+
// Legend
+$legend-margin-bottom: 0.5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
$legend-bg: var(--#{$prefix}border-color) !default;
$legend-size: 0.75em !default;
$legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
-// Flags
-$flag-box-shadow: var(--#{$prefix}shadow-border) !default;
-$flag-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$flag-sizes: $avatar-sizes !default;
+// Offcanvas
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: 0.3s !default;
+$offcanvas-border-color: var(--#{$prefix}border-color) !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
+$offcanvas-color: var(--#{$prefix}body-color) !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+$offcanvas-border-color: var(--#{$prefix}border-color) !default;
+
+// Placeholders
+$placeholder-opacity-min: 0.1 !default;
+$placeholder-opacity-max: 0.2 !default;
+
+// Image thumbnails
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: var(--#{$prefix}body-bg) !default;
+$thumbnail-border-width: var(--#{$prefix}border-width) !default;
+$thumbnail-border-color: var(--#{$prefix}border-color) !default;
+$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+
+// Figures
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: var(--#{$prefix}secondary-color) !default;
+
+// Tabler Plugins
+$social-apps: ('apple', 'discord', 'dribbble', 'facebook', 'figma', 'github', 'google', 'instagram', 'linkedin', 'medium', 'meta', 'metamask', 'pinterest', 'reddit', 'signal', 'skype', 'snapchat', 'spotify', 'telegram', 'tiktok', 'tumblr', 'twitch', 'vk', 'x', 'youtube');
// Payments
$payment-sizes: $avatar-sizes !default;
+$payment-providers: (
+ '2c2p',
+ '2checkout',
+ 'adyen',
+ 'affirm',
+ 'alipay-plus',
+ 'alipay',
+ 'allegro-pay',
+ 'amazon-pay',
+ 'amazon',
+ 'americanexpress',
+ 'applepay',
+ 'authorize',
+ 'autopay',
+ 'bancontact',
+ 'binance-usd',
+ 'bitcoin',
+ 'bitpay',
+ 'bkash',
+ 'blik',
+ 'braintree',
+ 'cash-app',
+ 'chime',
+ 'cirrus',
+ 'clickandbuy',
+ 'coinkite',
+ 'dinersclub',
+ 'directdebit',
+ 'discover',
+ 'dotpay',
+ 'dwolla',
+ 'easypaisa',
+ 'ebay',
+ 'elo',
+ 'epayco',
+ 'esewa',
+ 'ethereum',
+ 'eway',
+ 'fonepay',
+ 'giropay',
+ 'google-pay',
+ 'googlewallet',
+ 'hubspot',
+ 'ingenico',
+ 'ideal',
+ 'imepay',
+ 'jcb',
+ 'khalti',
+ 'klarna',
+ 'laser',
+ 'litecoin',
+ 'maestro',
+ 'mastercard',
+ 'mercado-pago',
+ 'metamask',
+ 'mir',
+ 'monero',
+ 'moneygram',
+ 'neteller',
+ 'ogone',
+ 'okpay',
+ 'opensea',
+ 'paybox',
+ 'payconiq',
+ 'payka',
+ 'payline',
+ 'paymill',
+ 'payone',
+ 'payoneer',
+ 'paypal',
+ 'paypo',
+ 'paysafe',
+ 'paysafecard',
+ 'payu',
+ 'payza',
+ 'poli',
+ 'przelewy24',
+ 'revolut-pay',
+ 'ripple',
+ 'sage',
+ 'samsung-pay',
+ 'sepa',
+ 'shop-pay',
+ 'shopify',
+ 'skrill',
+ 'solana',
+ 'solo',
+ 'spingo',
+ 'square',
+ 'stax',
+ 'stripe',
+ 'switch',
+ 'tether',
+ 'tpay',
+ 'troy',
+ 'true-usd',
+ 'ukash',
+ 'unionpay',
+ 'venmo',
+ 'verifone',
+ 'verisign',
+ 'visa',
+ 'we-chat-pay',
+ 'webmoney',
+ 'westernunion',
+ 'wise',
+ 'worldpay',
+ 'zelle'
+);
-// Offcanvas
-$offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
-$offcanvas-border-color: var(--#{$prefix}border-color) !default;
-$offcanvas-backdrop-bg: $backdrop-bg !default;
-
-// Placeholder
-$placeholder-opacity-min: 0.1 !default;
-$placeholder-opacity-max: 0.2 !default;
+$flag-box-shadow: var(--#{$prefix}shadow-border) !default;
+$flag-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$flag-sizes: $avatar-sizes !default;
+$flag-countries: (
+ 'ad',
+ 'af',
+ 'ae',
+ 'afrun',
+ 'ag',
+ 'ai',
+ 'al',
+ 'am',
+ 'ao',
+ 'aq',
+ 'ar',
+ 'as',
+ 'at',
+ 'au',
+ 'aw',
+ 'ax',
+ 'az',
+ 'ba',
+ 'bb',
+ 'bd',
+ 'be',
+ 'bf',
+ 'bg',
+ 'bh',
+ 'bi',
+ 'bj',
+ 'bl',
+ 'bm',
+ 'bn',
+ 'bo',
+ 'bq-bo',
+ 'bq-sa',
+ 'bq-se',
+ 'br',
+ 'bs',
+ 'bt',
+ 'bv',
+ 'bw',
+ 'by',
+ 'bz',
+ 'ca',
+ 'cc',
+ 'cd',
+ 'cf',
+ 'cg',
+ 'ch',
+ 'ci',
+ 'ck',
+ 'cl',
+ 'cm',
+ 'cn',
+ 'co',
+ 'cr',
+ 'cu',
+ 'cv',
+ 'cw',
+ 'cx',
+ 'cy',
+ 'cz',
+ 'de',
+ 'dj',
+ 'dk',
+ 'dm',
+ 'do',
+ 'dz',
+ 'ec',
+ 'ee',
+ 'eg',
+ 'eh',
+ 'er',
+ 'es',
+ 'et',
+ 'eu',
+ 'fi',
+ 'fj',
+ 'fk',
+ 'fm',
+ 'fo',
+ 'fr',
+ 'ga',
+ 'gb-eng',
+ 'gb-sct',
+ 'gb',
+ 'gb-wls',
+ 'gb-nir',
+ 'gd',
+ 'ge',
+ 'gf',
+ 'gg',
+ 'gh',
+ 'gi',
+ 'gl',
+ 'gm',
+ 'gn',
+ 'gp',
+ 'gq',
+ 'gr',
+ 'gs',
+ 'gt',
+ 'gu',
+ 'gw',
+ 'gy',
+ 'hk',
+ 'hm',
+ 'hn',
+ 'hr',
+ 'ht',
+ 'hu',
+ 'id',
+ 'ie',
+ 'il',
+ 'im',
+ 'in',
+ 'io',
+ 'iq',
+ 'ir',
+ 'is',
+ 'it',
+ 'je',
+ 'jm',
+ 'jo',
+ 'jp',
+ 'ke',
+ 'kg',
+ 'kh',
+ 'ki',
+ 'km',
+ 'kn',
+ 'kp',
+ 'kr',
+ 'kw',
+ 'ky',
+ 'kz',
+ 'la',
+ 'lb',
+ 'lc',
+ 'li',
+ 'lk',
+ 'lr',
+ 'ls',
+ 'lt',
+ 'lu',
+ 'lv',
+ 'ly',
+ 'ma',
+ 'mc',
+ 'md',
+ 'me',
+ 'mf',
+ 'mg',
+ 'mh',
+ 'mk',
+ 'ml',
+ 'mm',
+ 'mn',
+ 'mo',
+ 'mp',
+ 'mq',
+ 'mr',
+ 'ms',
+ 'mt',
+ 'mu',
+ 'mv',
+ 'mw',
+ 'mx',
+ 'my',
+ 'mz',
+ 'na',
+ 'nc',
+ 'ne',
+ 'nf',
+ 'ng',
+ 'ni',
+ 'nl',
+ 'no',
+ 'np',
+ 'nr',
+ 'nu',
+ 'nz',
+ 'om',
+ 'pa',
+ 'pe',
+ 'pf',
+ 'pg',
+ 'ph',
+ 'pk',
+ 'pl',
+ 'pm',
+ 'pn',
+ 'pr',
+ 'ps',
+ 'pt',
+ 'pw',
+ 'py',
+ 'qa',
+ 'rainbow',
+ 're',
+ 'ro',
+ 'rs',
+ 'ru',
+ 'rw',
+ 'sa',
+ 'sb',
+ 'sc',
+ 'sd',
+ 'se',
+ 'sg',
+ 'sh',
+ 'si',
+ 'sj',
+ 'sk',
+ 'sl',
+ 'sm',
+ 'sn',
+ 'so',
+ 'sr',
+ 'ss',
+ 'st',
+ 'sv',
+ 'sx',
+ 'sy',
+ 'sz',
+ 'tc',
+ 'td',
+ 'tf',
+ 'tg',
+ 'th',
+ 'tj',
+ 'tk',
+ 'tl',
+ 'tm',
+ 'tn',
+ 'to',
+ 'tr',
+ 'tt',
+ 'tv',
+ 'tw',
+ 'tz',
+ 'ua',
+ 'ug',
+ 'um',
+ 'unasur',
+ 'us',
+ 'uy',
+ 'uz',
+ 'va',
+ 'vc',
+ 've',
+ 'vg',
+ 'vi',
+ 'vn',
+ 'vu',
+ 'wf',
+ 'ws',
+ 'ye',
+ 'za',
+ 'zm',
+ 'zw'
+);
diff --git a/core/scss/fonts/_webfonts.scss b/core/scss/fonts/_webfonts.scss
index 332ba4303..e77ed2416 100644
--- a/core/scss/fonts/_webfonts.scss
+++ b/core/scss/fonts/_webfonts.scss
@@ -1,10 +1,10 @@
@if $font-google {
- $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+ $google-font-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
@import url($google-font-url);
}
@if $font-google-monospaced {
- $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+ $google-font-monospaced-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google-monospaced, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
@import url($google-font-monospaced-url);
}
diff --git a/core/scss/helpers/_index.scss b/core/scss/helpers/_index.scss
index 58e6033d6..f3f313511 100644
--- a/core/scss/helpers/_index.scss
+++ b/core/scss/helpers/_index.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
//
// Clearfix
@@ -30,14 +30,14 @@
// Stretched link
//
.stretched-link {
- &::#{$stretched-link-pseudo-element} {
+ &::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
- z-index: $stretched-link-z-index;
- content: "";
+ z-index: 1;
+ content: '';
}
}
@@ -116,7 +116,7 @@
&::before {
display: block;
padding-top: var(--#{$prefix}aspect-ratio);
- content: "";
+ content: '';
}
> * {
@@ -142,4 +142,3 @@
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
}
-
diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss
index cb496bc82..334273a0c 100644
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -1,11 +1,15 @@
-@use "sass:map";
-
+@use 'sass:map';
+
// stylelint-disable property-no-vendor-prefix
body {
letter-spacing: $body-letter-spacing;
touch-action: manipulation;
text-rendering: optimizeLegibility;
- font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
+ font-feature-settings:
+ 'liga' 0,
+ 'cv03',
+ 'cv04',
+ 'cv11';
position: relative;
min-height: 100%;
height: 100%;
@@ -26,8 +30,8 @@ body {
//
.layout-fluid {
.container,
- [class^="container-"],
- [class*=" container-"] {
+ [class^='container-'],
+ [class*=' container-'] {
max-width: 100%;
}
}
@@ -40,7 +44,7 @@ body {
--#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
@include media-breakpoint-up(md) {
- background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+ background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
padding: 1rem;
--#{$prefix}theme-boxed-border-radius: #{$border-radius};
}
@@ -61,4 +65,4 @@ body {
border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
}
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/layout/_dark.scss b/core/scss/layout/_dark.scss
index 22766694c..5a4267681 100644
--- a/core/scss/layout/_dark.scss
+++ b/core/scss/layout/_dark.scss
@@ -1,10 +1,10 @@
-@use "sass:color";
+@use 'sass:color';
// stylelint-disable declaration-no-important
@if $enable-dark-mode {
:root {
- &:not(.theme-dark):not([data-bs-theme="dark"]) {
+ &:not(.theme-dark):not([data-bs-theme='dark']) {
.hide-theme-light {
display: none !important;
}
@@ -15,7 +15,7 @@
}
&.theme-dark,
- &[data-bs-theme="dark"] {
+ &[data-bs-theme='dark'] {
.hide-theme-dark {
display: none !important;
}
@@ -26,7 +26,6 @@
}
}
-
@include color-mode(dark, true) {
color-scheme: dark;
--#{$prefix}body-color: var(--#{$prefix}gray-200);
@@ -48,16 +47,12 @@
--#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
--#{$prefix}active-bg: #{$lighten-dark};
- --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .4)};
+ --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), 0.4)};
--#{$prefix}border-color: var(--#{$prefix}gray-700);
- --#{$prefix}border-color-translucent: var(
- --#{$prefix}dark-mode-border-color-translucent
- );
+ --#{$prefix}border-color-translucent: var(--#{$prefix}dark-mode-border-color-translucent);
--#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
- --#{$prefix}border-active-color: var(
- --#{$prefix}dark-mode-border-active-color
- );
+ --#{$prefix}border-active-color: var(--#{$prefix}dark-mode-border-active-color);
--#{$prefix}btn-color: #{$darken-dark};
@@ -68,7 +63,7 @@
}
}
- body[data-bs-theme=dark] [data-bs-theme=light] {
- @extend [data-bs-theme=dark];
+ body[data-bs-theme='dark'] [data-bs-theme='light'] {
+ @extend [data-bs-theme='dark'];
}
}
diff --git a/core/scss/layout/_footer.scss b/core/scss/layout/_footer.scss
index cdcfa2430..43671dca8 100644
--- a/core/scss/layout/_footer.scss
+++ b/core/scss/layout/_footer.scss
@@ -13,4 +13,4 @@
.footer-transparent {
background-color: transparent;
border-top: 0;
-}
\ No newline at end of file
+}
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index 3cf087185..5d10b5959 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -1,10 +1,10 @@
-@use "sass:map";
+@use 'sass:map';
@mixin navbar-vertical-nav {
.navbar-collapse {
flex-direction: column;
- [class^="container"] {
+ [class^='container'] {
flex-direction: column;
align-items: stretch;
padding: 0;
@@ -117,8 +117,8 @@ Navbar
.badge {
position: absolute;
- top: .5rem;
- right: .5rem;
+ top: 0.5rem;
+ right: 0.5rem;
transform: translate(50%, -50%);
}
}
@@ -149,7 +149,7 @@ Navbar
}
&:after {
- content: "";
+ content: '';
position: absolute;
left: 0;
right: 0;
@@ -224,16 +224,11 @@ Navbar toggler
background: currentColor;
border-radius: 10px;
position: relative;
- @include transition(
- top $navbar-toggler-animation-time $navbar-toggler-animation-time,
- bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
- transform $navbar-toggler-animation-time,
- opacity 0s $navbar-toggler-animation-time
- );
-
+ @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
+
&:before,
&:after {
- content: "";
+ content: '';
display: block;
height: inherit;
width: inherit;
@@ -252,7 +247,7 @@ Navbar toggler
bottom: -0.45em;
}
- .navbar-toggler[aria-expanded="true"] & {
+ .navbar-toggler[aria-expanded='true'] & {
transform: rotate(45deg);
@include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
@@ -352,7 +347,7 @@ Navbar vertical
}
}
- > [class^="container"] {
+ > [class^='container'] {
flex-direction: column;
align-items: stretch;
min-height: 100%;
@@ -363,7 +358,7 @@ Navbar vertical
~ .page {
padding-left: $sidebar-width;
- [class^="container"] {
+ [class^='container'] {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@@ -385,7 +380,7 @@ Navbar vertical
.navbar-overlap {
&:after {
- content: "";
+ content: '';
height: $navbar-overlap-height;
position: absolute;
top: 100%;
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index 377e101d7..cdd20a737 100644
--- a/core/scss/layout/_page.scss
+++ b/core/scss/layout/_page.scss
@@ -64,7 +64,7 @@
position: relative;
&:after {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 0;
@@ -74,7 +74,6 @@
}
}
-
.page-header {
display: flex;
flex-wrap: wrap;
@@ -111,7 +110,7 @@
svg {
width: 1.5rem;
height: 1.5rem;
- margin-right: .25rem;
+ margin-right: 0.25rem;
}
}
@@ -121,7 +120,7 @@
}
.page-subtitle {
- margin-top: .25rem;
+ margin-top: 0.25rem;
color: var(--#{$prefix}secondary);
}
@@ -155,7 +154,7 @@
// Page tabs
//
.page-tabs {
- margin-top: .5rem;
+ margin-top: 0.5rem;
position: relative;
}
@@ -167,4 +166,4 @@
+ .page-body-card {
margin-top: 0;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/layout/_root.scss b/core/scss/layout/_root.scss
index 23938ce19..135539dc7 100644
--- a/core/scss/layout/_root.scss
+++ b/core/scss/layout/_root.scss
@@ -11,7 +11,7 @@
:root,
:host,
-[data-bs-theme="light"] {
+[data-bs-theme='light'] {
color-scheme: light;
--#{$prefix}spacer: var(--#{$prefix}spacer-2);
diff --git a/core/scss/marketing/_browser.scss b/core/scss/marketing/_browser.scss
index da2440de3..9dc287d76 100644
--- a/core/scss/marketing/_browser.scss
+++ b/core/scss/marketing/_browser.scss
@@ -9,8 +9,8 @@
}
.browser-header {
- padding: .25rem 1rem;
- background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+ padding: 0.25rem 1rem;
+ background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
border-bottom: 1px solid var(--#{$prefix}border-color);
border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
}
@@ -37,10 +37,10 @@
}
.browser-dot {
- margin-right: .5rem;
- width: .75rem;
- min-width: .75rem;
- height: .75rem;
+ margin-right: 0.5rem;
+ width: 0.75rem;
+ min-width: 0.75rem;
+ height: 0.75rem;
background: var(--#{$prefix}border-color);
border-radius: 50%;
border: 1px solid var(--#{$prefix}border-color-dark);
@@ -52,13 +52,15 @@
align-items: center;
justify-content: center;
text-decoration: none;
- padding: .25rem;
+ padding: 0.25rem;
color: var(--#{$prefix}secondary);
font-size: var(--#{$prefix}font-size-h5);
border-radius: var(--#{$prefix}border-radius);
line-height: 1;
cursor: pointer;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.05),
+ 0 1px 2px 0 rgba(0, 0, 0, 0.05);
background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
&:hover {
diff --git a/core/scss/marketing/_core.scss b/core/scss/marketing/_core.scss
index 707b1adf9..5e56706bd 100644
--- a/core/scss/marketing/_core.scss
+++ b/core/scss/marketing/_core.scss
@@ -5,4 +5,4 @@
.body-gradient {
background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
-}
\ No newline at end of file
+}
diff --git a/core/scss/marketing/_pricing.scss b/core/scss/marketing/_pricing.scss
index b468148b9..ab69ce1c9 100644
--- a/core/scss/marketing/_pricing.scss
+++ b/core/scss/marketing/_pricing.scss
@@ -79,7 +79,7 @@ $pricing-card-width: 22rem;
justify-content: center;
font-size: 2.5rem;
line-height: 1;
- font-weight: $font-weight-black;
+ font-weight: $font-weight-bold;
margin: 0.75rem 0;
}
diff --git a/core/scss/marketing/_sections.scss b/core/scss/marketing/_sections.scss
index 8c24c4926..e84f03460 100644
--- a/core/scss/marketing/_sections.scss
+++ b/core/scss/marketing/_sections.scss
@@ -108,17 +108,17 @@
.wave-2 {
animation: move-forever2 24s linear infinite;
- opacity: .5;
+ opacity: 0.5;
animation-delay: -2s;
}
.wave-3 {
animation: move-forever3 18s linear infinite;
- opacity: .3;
+ opacity: 0.3;
animation-delay: -2s;
}
}
.section-divider-auto {
height: auto;
-}
\ No newline at end of file
+}
diff --git a/core/scss/marketing/_shape.scss b/core/scss/marketing/_shape.scss
index 6170dd4d0..319b45abc 100644
--- a/core/scss/marketing/_shape.scss
+++ b/core/scss/marketing/_shape.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
.shape {
--#{$prefix}shape-size: #{$avatar-size};
@@ -30,4 +30,4 @@
background: var(--#{$prefix}#{$name}-lt);
color: var(--#{$prefix}#{$name});
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/mixins/_functions.scss b/core/scss/mixins/_functions.scss
index 5dffa9379..abaff49c9 100644
--- a/core/scss/mixins/_functions.scss
+++ b/core/scss/mixins/_functions.scss
@@ -1,9 +1,9 @@
-@use "sass:math";
-@use "sass:string";
-@use "sass:list";
-@use "sass:map";
-@use "sass:color";
-@use "sass:meta";
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:meta';
@function theme-color-lighter($color, $background: #fff) {
@return color.mix($color, $background, 10%);
@@ -16,7 +16,7 @@
//
// Replace all occurrences of a substring within a string.
//
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
$index: string.index($string, $search);
@if $index {
@@ -56,11 +56,11 @@
// Escape SVG strings.
//
@function escape-svg($string) {
- @if string.index($string, "data:image/svg+xml") {
+ @if string.index($string, 'data:image/svg+xml') {
@each $char, $encoded in $escaped-characters {
// Do not escape the url brackets
- @if string.index($string, "url(") == 1 {
- $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+ @if string.index($string, 'url(') == 1 {
+ $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
} @else {
$string: str-replace($string, $char, $encoded);
}
@@ -112,7 +112,7 @@
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
- @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
+ @if $prev-num == null or math.unit($num) == '%' or math.unit($prev-num) == '%' {
// Do nothing
} @else if not math.compatible($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -126,7 +126,7 @@
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
@if list.length($map) > 0 {
$values: map.values($map);
$first-value: list.nth($values, 1);
@@ -138,14 +138,15 @@
// Colors
@function to-rgb($value) {
- @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
+ @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
}
// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) {
- @if $identifier == "body" and $target == "bg" {
+ @if $identifier == 'body' and $target == 'bg' {
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
- } @if $identifier == "body" and $target == "text" {
+ }
+ @if $identifier == 'body' and $target == 'text' {
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
@@ -159,10 +160,15 @@
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
- $_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+ $_args: list.append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
}
- $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
+ $_map: map.merge(
+ $_map,
+ (
+ $key: meta.call(meta.get-function($func), $_args...),
+ )
+ );
}
@return $_map;
@@ -183,7 +189,7 @@
$result: ();
@each $key, $value in $map {
@if $key != 0 {
- $result: map.merge($result, ("n" + $key: (-$value)));
+ $result: map.merge($result, ('n' + $key: (-$value)));
}
}
@return $result;
@@ -194,7 +200,12 @@
$result: ();
@each $key, $value in $map {
@if (index($values, $key) != null) {
- $result: map.merge($result, ($key: $value));
+ $result: map.merge(
+ $result,
+ (
+ $key: $value,
+ )
+ );
}
}
@return $result;
@@ -218,7 +229,7 @@
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
$index: string.index($string, $search);
@if $index {
@@ -233,11 +244,11 @@
// Requires the use of quotes around data URIs.
@function escape-svg($string) {
- @if string.index($string, "data:image/svg+xml") {
+ @if string.index($string, 'data:image/svg+xml') {
@each $char, $encoded in $escaped-characters {
// Do not escape the url brackets
- @if string.index($string, "url(") == 1 {
- $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+ @if string.index($string, 'url(') == 1 {
+ $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
} @else {
$string: str-replace($string, $char, $encoded);
}
@@ -252,7 +263,12 @@
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033 0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013 0.0137 0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222 0.0232 0.0242
+ 0.0252 0.0262 0.0273 0.0284 0.0296 0.0307 0.0319 0.0331 0.0343 0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497 0.0513 0.0529 0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685 0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844 0.0865 0.0887 0.0908 0.0931 0.0953 0.0976
+ 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117 0.1195 0.1221 0.1248 0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147 0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746 0.1779 0.1812 0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195 0.2232 0.227 0.2307 0.2346 0.2384
+ 0.2423 0.2462 0.2502 0.2542 0.2582 0.2623 0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305 0.3095 0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613 0.3663 0.3712 0.3763 0.3813 0.3864 0.3916 0.3968 0.402 0.4072 0.4125 0.4179 0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564
+ 0.4621 0.4678 0.4735 0.4793 0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457 0.552 0.5583 0.5647 0.5711 0.5776 0.5841 0.5906 0.5972 0.6038 0.6105 0.6172 0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939 0.7011 0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605
+ 0.7682 0.7758 0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308 0.8388 0.8469 0.855 0.8632 0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956 0.9647 0.9734 0.9823 0.9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
@@ -278,7 +294,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
- @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+ @return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
}
// Return WCAG2.2 relative luminance
@@ -286,17 +302,22 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
$rgb: (
- "r": math.round(color.channel($color, "red", $space: rgb)),
- "g": math.round(color.channel($color, "green", $space: rgb)),
- "b": math.round(color.channel($color, "blue", $space: rgb))
+ 'r': math.round(color.channel($color, 'red', $space: rgb)),
+ 'g': math.round(color.channel($color, 'green', $space: rgb)),
+ 'b': math.round(color.channel($color, 'blue', $space: rgb)),
);
@each $name, $value in $rgb {
- $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
- $rgb: map.merge($rgb, ($name: $value));
+ $value: if(divide($value, 255) < 0.04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
+ $rgb: map.merge(
+ $rgb,
+ (
+ $name: $value,
+ )
+ );
}
- @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
+ @return (map.get($rgb, 'r') * 0.2126) + (map.get($rgb, 'g') * 0.7152) + (map.get($rgb, 'b') * 0.0722);
}
// Return opaque color
@@ -305,7 +326,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
}
-// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return color.mix(white, $color, $weight);
@@ -320,7 +340,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
-// scss-docs-end color-functions
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@@ -336,7 +355,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return $value1 + $value2;
}
- @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
+ @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(' + ') + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@@ -357,10 +376,10 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
}
@if meta.type-of($value2) != number {
- $value2: string.unquote("(") + $value2 + string.unquote(")");
+ $value2: string.unquote('(') + $value2 + string.unquote(')');
}
- @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(" - ") + $value2);
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(' - ') + $value2);
}
@function divide($dividend, $divisor, $precision: 10) {
@@ -383,7 +402,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
- $factor: $factor * .1;
+ $factor: $factor * 0.1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
@@ -394,13 +413,13 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$dividend-unit: math.unit($dividend);
$divisor-unit: math.unit($divisor);
$unit-map: (
- "px": 1px,
- "rem": 1rem,
- "em": 1em,
- "%": 1%
+ 'px': 1px,
+ 'rem': 1rem,
+ 'em': 1em,
+ '%': 1%,
);
@if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
$result: $result * map.get($unit-map, $dividend-unit);
}
@return $result;
-}
\ No newline at end of file
+}
diff --git a/core/scss/mixins/_mixins.scss b/core/scss/mixins/_mixins.scss
index dc5bb5df4..fabb41897 100644
--- a/core/scss/mixins/_mixins.scss
+++ b/core/scss/mixins/_mixins.scss
@@ -2,7 +2,7 @@
font-size: $h5-font-size;
font-weight: var(--#{$prefix}font-weight-medium);
text-transform: uppercase;
- letter-spacing: .04em;
+ letter-spacing: 0.04em;
@if $include-line-height {
line-height: $h5-line-height;
@@ -15,7 +15,7 @@
@mixin scrollbar {
#{if(&, "&", "*")} {
- scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20) transparent;
+ scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2) transparent;
}
#{if(&, "&", "*")}::-webkit-scrollbar {
@@ -27,7 +27,7 @@
#{if(&, "&", "*")}::-webkit-scrollbar-thumb {
border-radius: 1rem;
border: 5px solid transparent;
- box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20);
+ box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2);
}
#{if(&, "&", "*")}::-webkit-scrollbar-track {
@@ -35,7 +35,7 @@
}
#{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
- box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .40);
+ box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.4);
}
#{if(&, "&", "*")}::-webkit-scrollbar-corner {
@@ -43,7 +43,6 @@
}
}
-
@mixin autodark-image {
filter: brightness(0) invert(1);
}
@@ -51,7 +50,7 @@
//
// Elements list
//
-@mixin elements-list($gap: .5rem) {
+@mixin elements-list($gap: 0.5rem) {
--#{$prefix}list-gap: #{$gap};
display: flex;
flex-wrap: wrap;
@@ -62,7 +61,7 @@
outline: 0;
box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
- @if($show-border) {
+ @if ($show-border) {
border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
}
}
diff --git a/core/scss/tabler-flags.scss b/core/scss/tabler-flags.scss
index 6f366e589..6b3d00c90 100644
--- a/core/scss/tabler-flags.scss
+++ b/core/scss/tabler-flags.scss
@@ -1,2 +1 @@
-@import "config";
-@import "ui/flags";
+@import 'ui/flags';
diff --git a/core/scss/tabler-marketing.scss b/core/scss/tabler-marketing.scss
index eea23135f..cbef804f6 100644
--- a/core/scss/tabler-marketing.scss
+++ b/core/scss/tabler-marketing.scss
@@ -1,13 +1,13 @@
-@import "config";
-@import "variables";
-@import "utilities-marketing";
+@import 'config';
+@import 'variables';
+@import 'utilities-marketing';
-@import "marketing/core";
-@import "marketing/hero";
-@import "marketing/browser";
-@import "marketing/sections";
-@import "marketing/filters";
-@import "marketing/pricing";
-@import "marketing/shape";
+@import 'marketing/core';
+@import 'marketing/hero';
+@import 'marketing/browser';
+@import 'marketing/sections';
+@import 'marketing/filters';
+@import 'marketing/pricing';
+@import 'marketing/shape';
-@import "bootstrap/scss/utilities/api";
+@import 'bootstrap/scss/utilities/api';
diff --git a/core/scss/tabler-payments.scss b/core/scss/tabler-payments.scss
index 1d7ddeac8..0aed94244 100644
--- a/core/scss/tabler-payments.scss
+++ b/core/scss/tabler-payments.scss
@@ -1,2 +1 @@
-@import "config";
-@import "ui/payments";
+@forward 'ui/payments';
diff --git a/core/scss/tabler-props.scss b/core/scss/tabler-props.scss
index 297fb0e3a..d13474ffc 100644
--- a/core/scss/tabler-props.scss
+++ b/core/scss/tabler-props.scss
@@ -1 +1 @@
-@import "props"
\ No newline at end of file
+@import 'props';
diff --git a/core/scss/tabler-socials.scss b/core/scss/tabler-socials.scss
index 8a91efbe8..9d2277856 100644
--- a/core/scss/tabler-socials.scss
+++ b/core/scss/tabler-socials.scss
@@ -1,2 +1 @@
-@import "config";
-@import "ui/social";
\ No newline at end of file
+@import 'ui/social';
diff --git a/core/scss/tabler-themes.scss b/core/scss/tabler-themes.scss
index 9cd81480d..9649b0954 100644
--- a/core/scss/tabler-themes.scss
+++ b/core/scss/tabler-themes.scss
@@ -1,6 +1,6 @@
-@import "config";
+@import 'config';
-[data-bs-theme-base="slate"] {
+[data-bs-theme-base='slate'] {
--#{$prefix}gray-50: #f8fafc;
--#{$prefix}gray-100: #f1f5f9;
--#{$prefix}gray-200: #e2e8f0;
@@ -14,7 +14,7 @@
--#{$prefix}gray-950: #020617;
}
-[data-bs-theme-base="gray"] {
+[data-bs-theme-base='gray'] {
--#{$prefix}gray-50: #f9fafb;
--#{$prefix}gray-100: #f3f4f6;
--#{$prefix}gray-200: #e5e7eb;
@@ -28,7 +28,7 @@
--#{$prefix}gray-950: #030712;
}
-[data-bs-theme-base="zinc"] {
+[data-bs-theme-base='zinc'] {
--#{$prefix}gray-50: #fafafa;
--#{$prefix}gray-100: #f4f4f5;
--#{$prefix}gray-200: #e4e4e7;
@@ -42,7 +42,7 @@
--#{$prefix}gray-950: #09090b;
}
-[data-bs-theme-base="neutral"] {
+[data-bs-theme-base='neutral'] {
--#{$prefix}gray-50: #fafafa;
--#{$prefix}gray-100: #f5f5f5;
--#{$prefix}gray-200: #e5e5e5;
@@ -56,7 +56,7 @@
--#{$prefix}gray-950: #0a0a0a;
}
-[data-bs-theme-base="stone"] {
+[data-bs-theme-base='stone'] {
--#{$prefix}gray-50: #fafaf9;
--#{$prefix}gray-100: #f5f5f4;
--#{$prefix}gray-200: #e7e5e4;
@@ -70,7 +70,7 @@
--#{$prefix}gray-950: #0c0a09;
}
-[data-bs-theme-base="pink"] {
+[data-bs-theme-base='pink'] {
--#{$prefix}gray-50: #fdf2f8;
--#{$prefix}gray-100: #fce7f3;
--#{$prefix}gray-200: #fbcfe8;
@@ -85,25 +85,25 @@
}
@each $name, $value in $extra-colors {
- [data-bs-theme-primary="#{$name}"] {
+ [data-bs-theme-primary='#{$name}'] {
--#{$prefix}primary: #{$value};
--#{$prefix}primary-rgb: #{to-rgb($value)};
}
}
-@each $value in (0, .5, 1, 1.5, 2) {
- [data-bs-theme-radius="#{$value}"] {
+@each $value in (0, 0.5, 1, 1.5, 2) {
+ [data-bs-theme-radius='#{$value}'] {
--#{$prefix}border-radius-scale: #{$value};
}
}
-[data-bs-theme-primary="inverted"] {
+[data-bs-theme-primary='inverted'] {
--#{$prefix}primary: var(--#{$prefix}gray-800);
--#{$prefix}primary-fg: var(--#{$prefix}light);
--#{$prefix}primary-rgb: #{to-rgb($dark)};
- &[data-bs-theme="dark"],
- [data-bs-theme="dark"] {
+ &[data-bs-theme='dark'],
+ [data-bs-theme='dark'] {
--#{$prefix}primary: #{$light};
--#{$prefix}primary-fg: var(--#{$prefix}dark);
--#{$prefix}primary-rgb: #{to-rgb($light)};
@@ -111,10 +111,10 @@
}
@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
- [data-bs-theme-font="#{$name}"] {
+ [data-bs-theme-font='#{$name}'] {
--#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
- @if $name == "monospace" {
+ @if $name == 'monospace' {
--#{$prefix}body-font-size: 80%;
}
}
diff --git a/core/scss/tabler-vendors.scss b/core/scss/tabler-vendors.scss
index 35aa210d3..e7894b6e7 100644
--- a/core/scss/tabler-vendors.scss
+++ b/core/scss/tabler-vendors.scss
@@ -1,16 +1,16 @@
-@import "config";
+@import 'config';
-@import "vendor/nouislider";
-@import "vendor/litepicker";
-@import "vendor/tom-select";
-@import "vendor/apexcharts";
-@import "vendor/jsvectormap";
-@import "vendor/dropzone";
-@import "vendor/fslightbox";
-@import "vendor/plyr";
-@import "vendor/wysiwyg";
-@import "vendor/stars-rating";
-@import "vendor/coloris";
-@import "vendor/typed";
-@import "vendor/turbo";
-@import "vendor/fullcalendar";
+@import 'vendor/nouislider';
+@import 'vendor/litepicker';
+@import 'vendor/tom-select';
+@import 'vendor/apexcharts';
+@import 'vendor/jsvectormap';
+@import 'vendor/dropzone';
+@import 'vendor/fslightbox';
+@import 'vendor/plyr';
+@import 'vendor/wysiwyg';
+@import 'vendor/stars-rating';
+@import 'vendor/coloris';
+@import 'vendor/typed';
+@import 'vendor/turbo';
+@import 'vendor/fullcalendar';
diff --git a/core/scss/tabler.scss b/core/scss/tabler.scss
index 7f707e5de..2686b9694 100644
--- a/core/scss/tabler.scss
+++ b/core/scss/tabler.scss
@@ -1,2 +1 @@
-@import "core";
-
\ No newline at end of file
+@import 'core';
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index 09d50ed9b..50c737fc3 100644
--- a/core/scss/ui/_accordion.scss
+++ b/core/scss/ui/_accordion.scss
@@ -32,7 +32,7 @@
border: 0;
font-size: inherit;
font-weight: var(--#{$prefix}accordion-btn-font-weight);
- gap: .75rem;
+ gap: 0.75rem;
&:not(.collapsed) {
border-bottom-color: transparent;
@@ -100,7 +100,7 @@
path:first-child {
opacity: 0;
}
- }
+ }
}
.accordion-item {
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index ee9a9e016..0f5eb9861 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -1,17 +1,15 @@
.alert {
- // scss-docs-start alert-variables
--#{$prefix}alert-color: var(--#{$prefix}body-color);
- --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), .1)};
+ --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
- --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), .2)};
+ --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
--#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}alert-link-color: inherit;
--#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
- // scss-docs-end
-
+
position: relative;
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom);
@@ -25,7 +23,7 @@
.alert-heading {
color: inherit;
- margin-bottom: .25rem; // todo: use variable
+ margin-bottom: 0.25rem; // todo: use variable
font-weight: var(--#{$prefix}alert-heading-font-weight);
}
@@ -62,7 +60,6 @@
}
}
-
.alert-dismissible {
padding-right: 3rem; //todo: use variable
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index 89b5f6983..2df3f358d 100644
--- a/core/scss/ui/_avatars.scss
+++ b/core/scss/ui/_avatars.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
.avatar {
--#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
@@ -26,7 +26,10 @@
background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
border-radius: $avatar-border-radius;
box-shadow: var(--#{$prefix}avatar-box-shadow);
- transition: color $transition-time, background-color $transition-time, box-shadow $transition-time;
+ transition:
+ color $transition-time,
+ background-color $transition-time,
+ box-shadow $transition-time;
.icon {
width: var(--#{$prefix}avatar-icon-size);
@@ -43,7 +46,7 @@
@at-root a#{&} {
cursor: pointer;
-
+
&:hover {
color: var(--#{$prefix}primary);
--#{$prefix}avatar-box-shadow-color: var(--#{$prefix}primary);
@@ -94,7 +97,9 @@
.avatar {
margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
- box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+ box-shadow:
+ var(--#{$prefix}avatar-box-shadow),
+ 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
}
}
@@ -130,12 +135,12 @@
.avatar-upload-text {
font-size: $h6-font-size;
line-height: 1;
- margin-top: .25rem;
+ margin-top: 0.25rem;
}
.avatar-cover {
- margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
- box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
+ margin-top: calc(-0.5 * var(--#{$prefix}avatar-size));
+ box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
}
.avatar-brand {
@@ -148,4 +153,4 @@
background: var(--#{$prefix}bg-surface);
border-radius: var(--#{$prefix}border-radius);
border: 1px solid var(--#{$prefix}border-color);
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss
index de465004b..1f3fc8fd3 100644
--- a/core/scss/ui/_badges.scss
+++ b/core/scss/ui/_badges.scss
@@ -16,7 +16,7 @@
white-space: nowrap;
justify-content: center;
align-items: center;
- gap: .25rem;
+ gap: 0.25rem;
background: $badge-bg-color;
overflow: hidden;
user-select: none;
@@ -110,4 +110,4 @@
//
.badge-icononly {
--#{$prefix}badge-padding-x: 0;
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_breadcrumbs.scss b/core/scss/ui/_breadcrumbs.scss
index d4135191f..0effa5a88 100644
--- a/core/scss/ui/_breadcrumbs.scss
+++ b/core/scss/ui/_breadcrumbs.scss
@@ -76,6 +76,6 @@
@each $name, $symbol in $breadcrumb-variants {
.breadcrumb-#{$name} {
- --#{$prefix}breadcrumb-divider: "#{quote($symbol)}";
+ --#{$prefix}breadcrumb-divider: '#{quote($symbol)}';
}
}
diff --git a/core/scss/ui/_button-group.scss b/core/scss/ui/_button-group.scss
index dbc55603b..d712f0751 100644
--- a/core/scss/ui/_button-group.scss
+++ b/core/scss/ui/_button-group.scss
@@ -13,4 +13,4 @@
> .btn:focus {
z-index: 1;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index d591f8f79..6bfa8d893 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -1,5 +1,5 @@
-@use "sass:color";
-@use "sass:map";
+@use 'sass:color';
+@use 'sass:map';
//
// Button
@@ -78,7 +78,7 @@
//
@each $color, $value in map.merge($theme-colors, $social-colors) {
.btn-#{$color} {
- @if $color == "dark" {
+ @if $color == 'dark' {
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
@@ -175,7 +175,7 @@
padding-left: 1.5em;
border-radius: 10rem;
- &[class*="btn-icon"] {
+ &[class*='btn-icon'] {
padding: 0.375rem 15px;
}
}
@@ -236,7 +236,7 @@
}
&:after {
- content: "";
+ content: '';
display: inline-block;
vertical-align: text-bottom;
border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index 8135eafb0..8f5707623 100644
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -20,7 +20,7 @@
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
- padding: .5rem 0;
+ padding: 0.5rem 0;
}
.calendar-header {
@@ -30,13 +30,13 @@
.calendar-date {
flex: 0 0 calc(100% / 7);
max-width: calc(100% / 7);
- padding: .2rem;
+ padding: 0.2rem;
text-align: center;
border: 0;
&.prev-month,
&.next-month {
- opacity: .25;
+ opacity: 0.25;
}
.date-item {
@@ -55,7 +55,7 @@
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
border-radius: $border-radius-pill;
outline: 0;
- @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
+ @include transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time);
&:hover {
color: var(--#{$prefix}primary);
@@ -80,8 +80,8 @@
right: 0;
left: 0;
height: 1.4rem;
- content: "";
- background: rgba(var(--#{$prefix}primary-rgb), .1);
+ content: '';
+ background: rgba(var(--#{$prefix}primary-rgb), 0.1);
transform: translateY(-50%);
}
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index c18de8cdd..0d7cdcfb5 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -58,15 +58,15 @@
width: calc(var(--#{$prefix}stamp-size) * 1);
height: calc(var(--#{$prefix}stamp-size) * 1);
position: relative;
- top: calc(var(--#{$prefix}stamp-size) * -.25);
- right: calc(var(--#{$prefix}stamp-size) * -.25);
- font-size: calc(var(--#{$prefix}stamp-size) * .75);
+ top: calc(var(--#{$prefix}stamp-size) * -0.25);
+ right: calc(var(--#{$prefix}stamp-size) * -0.25);
+ font-size: calc(var(--#{$prefix}stamp-size) * 0.75);
transform: rotate(10deg);
.icon {
stroke-width: 2;
- width: calc(var(--#{$prefix}stamp-size) * .75);
- height: calc(var(--#{$prefix}stamp-size) * .75);
+ width: calc(var(--#{$prefix}stamp-size) * 0.75);
+ height: calc(var(--#{$prefix}stamp-size) * 0.75);
}
}
@@ -96,7 +96,7 @@
box-shadow: none;
.card-body {
- opacity: .64;
+ opacity: 0.64;
}
}
@@ -131,7 +131,7 @@
Stacked card
*/
.card-stacked {
- --#{$prefix}card-stacked-offset: .25rem;
+ --#{$prefix}card-stacked-offset: 0.25rem;
position: relative;
&:after {
@@ -140,7 +140,7 @@ Stacked card
right: var(--#{$prefix}card-stacked-offset);
left: var(--#{$prefix}card-stacked-offset);
height: var(--#{$prefix}card-stacked-offset);
- content: "";
+ content: '';
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color);
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
@@ -158,8 +158,8 @@ Stacked card
right: 0;
bottom: 0;
left: 0;
- content: "";
- background: rgba($dark, .48);
+ content: '';
+ background: rgba($dark, 0.48);
}
&:first-child,
@@ -175,8 +175,8 @@ Stacked card
}
.card-actions {
- margin: -.5rem -.5rem -.5rem auto;
- padding-left: .5rem;
+ margin: -0.5rem -0.5rem -0.5rem auto;
+ padding-left: 0.5rem;
a {
text-decoration: none;
@@ -204,14 +204,14 @@ Stacked card
background: $card-header-tabs-bg;
flex: 1;
margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
- padding: calc(var(--#{$prefix}card-cap-padding-y) * .5) calc(var(--#{$prefix}card-cap-padding-x) * .5) 0;
+ padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0;
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
}
.card-header-pills {
flex: 1;
- margin-top: -.5rem;
- margin-bottom: -.5rem;
+ margin-top: -0.5rem;
+ margin-bottom: -0.5rem;
}
// Card rotate
@@ -232,18 +232,18 @@ Stacked card
&:hover {
color: inherit;
text-decoration: none;
- box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .08);
+ box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
}
}
.card-link-rotate:hover {
transform: rotate(1.5deg);
- opacity: 1
+ opacity: 1;
}
.card-link-pop:hover {
transform: translateY(-2px);
- opacity: 1
+ opacity: 1;
}
// Card footer
@@ -267,7 +267,7 @@ Stacked card
// Card progress
.card-progress {
- height: .25rem;
+ height: 0.25rem;
&:last-child {
border-radius: 0 0 2px 2px;
@@ -309,7 +309,7 @@ Stacked card
}
.card-title & {
- margin: 0 0 0 .25rem;
+ margin: 0 0 0 0.25rem;
font-size: $h4-font-size;
}
}
@@ -359,7 +359,7 @@ Card optinos
*/
.card-options {
top: 1.5rem;
- right: .75rem;
+ right: 0.75rem;
display: flex;
margin-left: auto;
}
@@ -367,11 +367,10 @@ Card optinos
.card-options-link {
display: inline-block;
min-width: 1rem;
- margin-left: .25rem;
+ margin-left: 0.25rem;
color: var(--#{$prefix}secondary);
}
-
/**
Card status
*/
@@ -451,22 +450,22 @@ Card table
}
tbody {
- tr {
- &:last-child {
- td {
- border-bottom: 0;
- }
- }
- }
- }
+ tr {
+ &:last-child {
+ td {
+ border-bottom: 0;
+ }
+ }
+ }
+ }
- tfoot {
- tr {
- &:last-child {
- border-bottom: 0;
- }
- }
- }
+ tfoot {
+ tr {
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+ }
.card-body + & {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
@@ -505,8 +504,8 @@ Card avatar
.card-avatar {
margin-left: auto;
margin-right: auto;
- box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
- margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * .5));
+ box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+ margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
}
/*
@@ -624,4 +623,4 @@ Card note
.card-note {
--#{$prefix}card-bg: #fff7dd;
--#{$prefix}card-border-color: #fff1c9;
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss
index c0eba486f..e03a88a71 100644
--- a/core/scss/ui/_carousel.scss
+++ b/core/scss/ui/_carousel.scss
@@ -1,5 +1,4 @@
.carousel {
-
}
.carousel-indicators-vertical {
@@ -30,7 +29,7 @@
.carousel-indicators-thumb {
[data-bs-target] {
- width: $carousel-indicator-thumb-width * .5;
+ width: $carousel-indicator-thumb-width * 0.5;
height: auto;
background: no-repeat center/cover;
border: 0;
@@ -44,7 +43,7 @@
}
&:before {
- content: "";
+ content: '';
padding-top: var(--#{$prefix}aspect-ratio, 100%);
display: block;
}
@@ -64,5 +63,5 @@
right: 0;
bottom: 0;
height: 90%;
- background: linear-gradient(0deg, rgba($dark, .9), rgba($dark, 0));
-}
\ No newline at end of file
+ background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
+}
diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss
index 61a8eafaa..d5bd25493 100644
--- a/core/scss/ui/_charts.scss
+++ b/core/scss/ui/_charts.scss
@@ -58,4 +58,4 @@ Chart sparkline
height: 1rem;
font-size: 1rem;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_close.scss b/core/scss/ui/_close.scss
index da8ad3e3a..61d91a29e 100644
--- a/core/scss/ui/_close.scss
+++ b/core/scss/ui/_close.scss
@@ -1,6 +1,6 @@
.btn-close {
--#{$prefix}btn-close-color: currentColor;
- --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+ --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
@@ -12,7 +12,7 @@
height: var(--#{$prefix}btn-close-size);
padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--#{$prefix}btn-close-color);
- mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * .75);
+ mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
background-color: var(--#{$prefix}btn-close-color);
border: 0;
border-radius: var(--tblr-border-radius);
@@ -62,4 +62,4 @@
// @include color-mode(dark, true) {
// @include btn-close-white();
// }
-// }
\ No newline at end of file
+// }
diff --git a/core/scss/ui/_datagrid.scss b/core/scss/ui/_datagrid.scss
index abc255583..094246bc0 100644
--- a/core/scss/ui/_datagrid.scss
+++ b/core/scss/ui/_datagrid.scss
@@ -13,5 +13,5 @@
.datagrid-title {
@include subheader;
- margin-bottom: .25rem;
-}
\ No newline at end of file
+ margin-bottom: 0.25rem;
+}
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index f421a70ae..3ca63d0bd 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -1,5 +1,5 @@
.dropdown-menu {
- --#{$prefix}dropdown-item-gap: .5rem;
+ --#{$prefix}dropdown-item-gap: 0.5rem;
--#{$prefix}dropdown-item-icon-size: #{$icon-size};
--#{$prefix}dropdown-item-icon-color: var(--#{$prefix}tertiary);
user-select: none;
@@ -46,7 +46,7 @@
.dropdown-header {
@include subheader;
- padding-bottom: .25rem;
+ padding-bottom: 0.25rem;
pointer-events: none;
}
@@ -66,16 +66,15 @@
.dropdown-menu-columns {
display: flex;
- flex: 0 .25rem;
+ flex: 0 0.25rem;
}
.dropdown-menu-arrow {
-
&:before {
- content: "";
+ content: '';
position: absolute;
- top: -.25rem;
- left: .75rem;
+ top: -0.25rem;
+ left: 0.75rem;
display: block;
background: inherit;
width: 14px;
@@ -91,7 +90,7 @@
&.dropdown-menu-end {
&:before {
- right: .75rem;
+ right: 0.75rem;
left: auto;
}
}
@@ -100,7 +99,7 @@
.dropend {
> .dropdown-menu {
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
- margin-left: -.25rem;
+ margin-left: -0.25rem;
}
.dropdown-toggle {
@@ -120,4 +119,3 @@
box-shadow: none;
}
}
-
diff --git a/core/scss/ui/_empty.scss b/core/scss/ui/_empty.scss
index 3eef2c583..2fbea95b8 100644
--- a/core/scss/ui/_empty.scss
+++ b/core/scss/ui/_empty.scss
@@ -46,14 +46,13 @@
.empty-title,
.empty-subtitle {
- margin: 0 0 .5rem;
+ margin: 0 0 0.5rem;
}
.empty-action {
margin-top: 1.5rem;
}
-
.empty-bordered {
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
diff --git a/core/scss/ui/_flags.scss b/core/scss/ui/_flags.scss
index 43c81a9b1..6df080455 100644
--- a/core/scss/ui/_flags.scss
+++ b/core/scss/ui/_flags.scss
@@ -1,17 +1,14 @@
-@use "sass:map";
-
-$countries: (
- 'ad', 'af', 'ae', 'afrun', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq-bo', 'bq-sa', 'bq-se', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-sct', 'gb', 'gb-wls', 'gb-nir', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 'rainbow', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'unasur', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'za', 'zm', 'zw'
-);
+@use 'sass:map';
+@use '../config';
.flag {
position: relative;
display: inline-block;
- width: $avatar-size;
+ width: config.$avatar-size;
aspect-ratio: 1.33333;
background: no-repeat center/cover;
- box-shadow: $flag-box-shadow;
- border-radius: $flag-border-radius;
+ box-shadow: config.$flag-box-shadow;
+ border-radius: config.$flag-border-radius;
vertical-align: bottom;
&.flag-country-np {
@@ -20,13 +17,13 @@ $countries: (
}
}
-@each $country in $countries {
+@each $country in config.$flag-countries {
.flag-country-#{$country} {
- background-image: url("#{$assets-base}/img/flags/#{$country}.svg");
+ background-image: url('#{config.$assets-base}/img/flags/#{$country}.svg');
}
}
-@each $flag-size, $size in $flag-sizes {
+@each $flag-size, $size in config.$flag-sizes {
.flag-#{$flag-size} {
width: map.get($size, size);
@@ -34,4 +31,4 @@ $countries: (
border-radius: map.get($size, border-radius);
}
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index d8ee058ea..4cc8bada5 100644
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -14,7 +14,7 @@ Form label
&.required {
&:after {
- content: "*";
+ content: '*';
margin-left: 0.25rem;
color: $red;
}
@@ -233,7 +233,7 @@ Upload files
Floating inputs
*/
// Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
-label[for="floating-input"] {
+label[for='floating-input'] {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/core/scss/ui/_grid.scss b/core/scss/ui/_grid.scss
index 1ad17c126..5c11306fb 100644
--- a/core/scss/ui/_grid.scss
+++ b/core/scss/ui/_grid.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
.row > * {
min-width: 0;
@@ -17,13 +17,13 @@
}
}
-@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
+@each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) {
.row-#{$name} {
margin-right: calc(-1 * $value);
margin-left: calc(-1 * $value);
> .col,
- > [class*="col-"] {
+ > [class*='col-'] {
padding-right: $value;
padding-left: $value;
}
@@ -36,7 +36,7 @@
.row-deck {
> .col,
- > [class*="col-"] {
+ > [class*='col-'] {
display: flex;
align-items: stretch;
@@ -56,7 +56,15 @@
}
}
-@each $name, $size in map.merge((null: $spacer), $spacers) {
+@each $name,
+ $size
+ in map.merge(
+ (
+ null: $spacer,
+ ),
+ $spacers
+ )
+{
$name-prefixed: if($name == null, null, '-#{$name}');
.space-y#{$name-prefixed} {
@@ -71,7 +79,15 @@
}
}
-@each $name, $size in map.merge((null: $spacer), $spacers) {
+@each $name,
+ $size
+ in map.merge(
+ (
+ null: $spacer,
+ ),
+ $spacers
+ )
+{
$name-prefixed: if($name == null, null, '-#{$name}');
.divide-y#{$name-prefixed} {
@@ -114,4 +130,4 @@
justify-content: center;
flex-direction: column;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss
index f34c245ab..109688137 100644
--- a/core/scss/ui/_icons.scss
+++ b/core/scss/ui/_icons.scss
@@ -22,7 +22,7 @@
//
.icon-inline {
--#{$prefix}icon-size: 1rem;
- vertical-align: -.2rem;
+ vertical-align: -0.2rem;
}
//
@@ -54,19 +54,19 @@
// Icons animation
//
.icon-pulse {
- transition: all .15s ease 0s;
+ transition: all 0.15s ease 0s;
animation: pulse 2s ease infinite;
- animation-fill-mode: both
+ animation-fill-mode: both;
}
.icon-tada {
- transition: all .15s ease 0s;
+ transition: all 0.15s ease 0s;
animation: tada 3s ease infinite;
- animation-fill-mode: both
+ animation-fill-mode: both;
}
.icon-rotate {
- transition: all .15s ease 0s;
+ transition: all 0.15s ease 0s;
animation: rotate-360 3s linear infinite;
- animation-fill-mode: both
-}
\ No newline at end of file
+ animation-fill-mode: both;
+}
diff --git a/core/scss/ui/_images.scss b/core/scss/ui/_images.scss
index 93ba88ec0..293021c5f 100644
--- a/core/scss/ui/_images.scss
+++ b/core/scss/ui/_images.scss
@@ -1,7 +1,7 @@
-@use "sass:math";
+@use 'sass:math';
.img-responsive {
- --#{$prefix}img-responsive-ratio: #{math.percentage(.75)};
+ --#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
background: no-repeat center/cover;
padding-top: var(--#{$prefix}img-responsive-ratio);
}
@@ -18,4 +18,4 @@
.img-bg {
background: no-repeat center/cover;
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss
index 9a9bbfb78..54da004e5 100644
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -5,7 +5,7 @@
.list-group-header {
background: $list-group-header-bg;
- padding: .5rem $list-group-item-padding-x;
+ padding: 0.5rem $list-group-item-padding-x;
font-size: $h5-font-size;
font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1;
@@ -69,11 +69,9 @@
}
}
-
-
.list-group-transparent {
--#{$prefix}list-group-border-radius: 0;
- margin: 0 (- $list-group-item-padding-x);
+ margin: 0 (-$list-group-item-padding-x);
.list-group-item {
background: none;
@@ -121,4 +119,4 @@ Inline list
content: ' · ';
margin-inline-end: $list-inline-padding;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss
index 341d90f07..16e352f4a 100644
--- a/core/scss/ui/_loaders.scss
+++ b/core/scss/ui/_loaders.scss
@@ -12,14 +12,14 @@
left: 0;
width: 100%;
height: 100%;
- content: "";
+ content: '';
border: 1px var(--#{$prefix}border-style);
border-color: transparent;
border-top-color: currentColor;
border-left-color: currentColor;
border-radius: $border-radius-pill;
- animation: rotate-360 .6s linear;
+ animation: rotate-360 0.6s linear;
animation-iteration-count: infinite;
}
}
@@ -47,12 +47,11 @@ Dimmer
.dimmer-content {
pointer-events: none;
- opacity: .1;
+ opacity: 0.1;
}
}
}
-
@keyframes animated-dots {
0% {
transform: translateX(-100%);
@@ -66,7 +65,7 @@ Dimmer
&:after {
display: inline-block;
- content: "...";
+ content: '...';
animation: animated-dots 1.2s steps(4, jump-none) infinite;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss
index d3056b8b1..1d278ca0b 100644
--- a/core/scss/ui/_markdown.scss
+++ b/core/scss/ui/_markdown.scss
@@ -21,11 +21,20 @@ Markdown
}
> {
- h1, h2, h3, h4, h5, h6 {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
font-weight: var(--#{$prefix}font-weight-bold);
}
- h2, h3, h4, h5, h6 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
margin-top: 2.5rem;
}
}
@@ -38,7 +47,7 @@ Markdown
> blockquote {
font-size: $h3-font-size;
margin: 1.5rem 0;
- padding: .5rem 1.5rem;
+ padding: 0.5rem 1.5rem;
}
> img,
@@ -50,4 +59,4 @@ Markdown
pre {
max-height: 20rem;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index 1c9ce2672..9480bbce8 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -1,4 +1,5 @@
-.modal-content, .modal-header {
+.modal-content,
+.modal-header {
> .btn-close {
position: absolute;
top: 0;
@@ -51,10 +52,10 @@
@if $modal-footer-border-width == 0 {
padding-top: 0;
} @else {
- padding-top: .75rem;
+ padding-top: 0.75rem;
}
- padding-bottom: .75rem;
+ padding-bottom: 0.75rem;
}
.modal-blur {
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index 777ba518e..a401ecd4c 100644
--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -12,7 +12,7 @@
.nav {
margin-left: 1.25rem;
border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
- padding-left: .5rem;
+ padding-left: 0.5rem;
}
.nav-link.active,
@@ -76,7 +76,7 @@
.nav-link-toggle {
margin-left: auto;
- padding: 0 .25rem;
+ padding: 0 0.25rem;
@include transition(transform $transition-time);
@include caret();
@@ -84,7 +84,7 @@
margin: 0;
}
- @at-root .nav-link[aria-expanded="true"] & {
+ @at-root .nav-link[aria-expanded='true'] & {
transform: rotate(180deg);
}
}
@@ -92,7 +92,7 @@
.nav-link-icon {
width: $nav-link-icon-size;
height: $nav-link-icon-size;
- margin-right: .5rem;
+ margin-right: 0.5rem;
color: $nav-link-icon-color;
svg {
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index 7ea249d45..ab96720ed 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -1,6 +1,6 @@
.pagination {
margin: 0;
- --#{$prefix}pagination-gap: .25rem;
+ --#{$prefix}pagination-gap: 0.25rem;
user-select: none;
gap: var(--#{$prefix}pagination-gap);
line-height: var(--#{$prefix}body-line-height);
@@ -20,8 +20,8 @@
}
.page-text {
- padding-left: .5rem;
- padding-right: .5rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
}
.page-item {
diff --git a/core/scss/ui/_payments.scss b/core/scss/ui/_payments.scss
index 7a78582ab..b0ed84610 100644
--- a/core/scss/ui/_payments.scss
+++ b/core/scss/ui/_payments.scss
@@ -1,29 +1,28 @@
-@use "sass:map";
-
-$payment-icons: ("2c2p", "2checkout", "adyen", "affirm", "alipay-plus", "alipay", "allegro-pay", "amazon-pay", "amazon", "americanexpress", "applepay", "authorize", "autopay", "bancontact", "binance-usd", "bitcoin", "bitpay", "bkash", "blik", "braintree", "cash-app", "chime", "cirrus", "clickandbuy", "coinkite", "dinersclub", "directdebit", "discover", "dotpay", "dwolla", "easypaisa", "ebay", "elo", "epayco", "esewa", "ethereum", "eway", "fonepay", "giropay", "google-pay", "googlewallet", "hubspot", "ingenico", "ideal", "imepay", "jcb", "khalti", "klarna", "laser", "litecoin", "maestro", "mastercard", "mercado-pago", "metamask", "mir", "monero", "moneygram", "neteller", "ogone", "okpay", "opensea", "paybox", "payconiq", "payka", "payline", "paymill", "payone", "payoneer", "paypal", "paypo", "paysafe", "paysafecard", "payu", "payza", "poli", "przelewy24", "revolut-pay", "ripple", "sage", "samsung-pay", "sepa", "shop-pay", "shopify", "skrill", "solana", "solo", "spingo", "square", "stax", "stripe", "switch", "tether", "tpay", "troy", "true-usd", "ukash", "unionpay", "venmo", "verifone", "verisign", "visa", "we-chat-pay", "webmoney", "westernunion", "wise", "worldpay", "zelle");
+@use 'sass:map';
+@use '../config';
.payment {
- height: $avatar-size;
+ height: config.$avatar-size;
aspect-ratio: 1.66666;
display: inline-block;
background: no-repeat center/100% 100%;
vertical-align: bottom;
font-style: normal;
- box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 2px;
}
-@each $payment in $payment-icons {
+@each $payment in config.$payment-providers {
.payment-provider-#{$payment} {
- background-image: url("#{$assets-base}/img/payments/#{$payment}.svg");
+ background-image: url('#{config.$assets-base}/img/payments/#{$payment}.svg');
}
.payment-provider-#{$payment}-dark {
- background-image: url("#{$assets-base}/img/payments/#{$payment}-dark.svg");
+ background-image: url('#{config.$assets-base}/img/payments/#{$payment}-dark.svg');
}
}
-@each $payment-size, $size in $payment-sizes {
+@each $payment-size, $size in config.$payment-sizes {
.payment-#{$payment-size} {
height: map.get($size, size);
}
diff --git a/core/scss/ui/_placeholder.scss b/core/scss/ui/_placeholder.scss
index 106d2a50e..d83446bdf 100644
--- a/core/scss/ui/_placeholder.scss
+++ b/core/scss/ui/_placeholder.scss
@@ -1,9 +1,9 @@
.placeholder {
- &:not(.btn):not([class*="bg-"]) {
+ &:not(.btn):not([class*='bg-']) {
background-color: currentColor !important;
}
- &:not(.avatar):not([class*="card-img-"]), {
+ &:not(.avatar):not([class*='card-img-']) {
border-radius: var(--#{$prefix}border-radius);
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index f8936daae..22688500b 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -39,11 +39,11 @@ Progress
}
.progress-sm {
- height: .25rem;
+ height: 0.25rem;
}
.progress-lg {
- height: .75rem;
+ height: 0.75rem;
}
.progress-xl {
@@ -65,13 +65,13 @@ Progress bar
top: 0;
bottom: 0;
left: 0;
- content: "";
+ content: '';
background-color: inherit;
will-change: left, right;
}
&:before {
- animation: progress-indeterminate 1.5s cubic-bezier(.65, .815, .735, .395) infinite;
+ animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
}
@@ -81,13 +81,12 @@ Progress bar
}
}
-
/**
Progressbg
*/
.progressbg {
position: relative;
- padding: .25rem .5rem;
+ padding: 0.25rem 0.5rem;
display: flex;
}
@@ -125,12 +124,12 @@ Progress steps
padding: 0;
margin: 0;
list-style: none;
- gap: .25rem;
+ gap: 0.25rem;
}
.progress-steps-item {
flex: 1 1 0;
- min-height: .25rem;
+ min-height: 0.25rem;
margin-top: 0;
color: inherit;
text-align: center;
@@ -141,4 +140,4 @@ Progress steps
@at-root a#{&} {
cursor: pointer;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index 9c6670915..524913c7e 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -4,10 +4,10 @@
--#{$prefix}ribbon-margin: #{$card-ribbon-margin};
--#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
position: absolute;
- top: .75rem;
+ top: 0.75rem;
right: calc(-1 * var(--#{$prefix}ribbon-margin));
z-index: 1;
- padding: .25rem .75rem;
+ padding: 0.25rem 0.75rem;
font-size: $card-ribbon-font-size;
font-weight: var(--#{$prefix}font-weight-bold);
line-height: 1;
@@ -29,9 +29,9 @@
bottom: 100%;
width: 0;
height: 0;
- content: "";
+ content: '';
filter: brightness(70%);
- border: calc(var(--#{$prefix}ribbon-margin) * .5) var(--#{$prefix}border-style);
+ border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
border-color: inherit;
border-top-color: transparent;
border-right-color: transparent;
@@ -44,7 +44,7 @@
}
&.bg-#{$color}-lt {
- border-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important;
+ border-color: rgba(var(--#{$prefix}#{$color}-rgb), 0.1) !important;
}
}
}
@@ -58,9 +58,9 @@
.ribbon-top {
top: calc(-1 * var(--#{$prefix}ribbon-margin));
- right: .75rem;
+ right: 0.75rem;
width: 2rem;
- padding: .5rem 0;
+ padding: 0.5rem 0;
border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
&:before {
@@ -74,7 +74,7 @@
&.ribbon-start {
right: auto;
- left: .75rem;
+ left: 0.75rem;
&:before {
top: 0;
@@ -101,11 +101,11 @@
.ribbon-bottom {
top: auto;
- bottom: .75rem;
+ bottom: 0.75rem;
}
.ribbon-bookmark {
- padding-left: .25rem;
+ padding-left: 0.25rem;
border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
&:after {
@@ -115,30 +115,30 @@
display: block;
width: 0;
height: 0;
- content: "";
+ content: '';
border: 1rem var(--#{$prefix}border-style);
border-color: inherit;
border-right-width: 0;
border-left-color: transparent;
- border-left-width: .5rem;
+ border-left-width: 0.5rem;
}
&.ribbon-left {
- padding-right: .5rem;
+ padding-right: 0.5rem;
&:after {
right: auto;
left: 100%;
border-right-color: transparent;
- border-right-width: .5rem;
+ border-right-width: 0.5rem;
border-left-width: 0;
}
}
&.ribbon-top {
padding-right: 0;
- padding-bottom: .25rem;
+ padding-bottom: 0.25rem;
padding-left: 0;
border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
@@ -150,8 +150,7 @@
border-width: 1rem;
border-top-width: 0;
border-bottom-color: transparent;
- border-bottom-width: .5rem;
+ border-bottom-width: 0.5rem;
}
}
}
-
diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss
index a63737c77..9abd9a9eb 100644
--- a/core/scss/ui/_segmented.scss
+++ b/core/scss/ui/_segmented.scss
@@ -2,15 +2,14 @@
--#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
--#{$prefix}nav-padding: 2px;
--#{$prefix}nav-height: 2.5rem;
- --#{$prefix}nav-gap: .25rem;
+ --#{$prefix}nav-gap: 0.25rem;
--#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
--#{$prefix}nav-font-size: inherit;
--#{$prefix}nav-radius: 6px;
-
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
- --#{$prefix}nav-link-gap: .25rem;
- --#{$prefix}nav-link-padding-x: .75rem;
+ --#{$prefix}nav-link-gap: 0.25rem;
+ --#{$prefix}nav-link-padding-x: 0.75rem;
--#{$prefix}nav-link-icon-size: 1.25rem;
display: inline-flex;
flex-wrap: wrap;
@@ -19,15 +18,15 @@
list-style: none;
background: var(--#{$prefix}nav-bg);
border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
.nav-link {
display: inline-flex;
- gap: calc(.25rem + var(--#{$prefix}nav-link-gap));
+ gap: calc(0.25rem + var(--#{$prefix}nav-link-gap));
align-items: center;
margin: 0;
font-size: var(--#{$prefix}nav-font-size);
- min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
+ min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
border: 1px solid transparent;
@@ -37,14 +36,16 @@
text-decoration: none;
white-space: nowrap;
cursor: pointer;
- transition: background-color $transition-time, color $transition-time;
+ transition:
+ background-color $transition-time,
+ color $transition-time;
border-radius: var(--#{$prefix}nav-radius);
- flex-grow: 1;
+ flex-grow: 1;
justify-content: center;
&:hover,
- &.hover {
- background: rgba(0, 0, 0, .04);
+ &.hover {
+ background: rgba(0, 0, 0, 0.04);
color: var(--#{$prefix}body-color);
}
@@ -69,7 +70,7 @@
.nav-link-icon {
width: var(--#{$prefix}nav-link-icon-size);
height: var(--#{$prefix}nav-link-icon-size);
- margin: 0 -.25rem;
+ margin: 0 -0.25rem;
color: inherit;
}
}
@@ -86,8 +87,8 @@
--#{$prefix}nav-height: 2rem;
--#{$prefix}nav-font-size: var(--tblr-font-size-h5);
--#{$prefix}nav-radius: 4px;
- --#{$prefix}nav-link-padding-x: .5rem;
- --#{$prefix}nav-link-gap: .25rem;
+ --#{$prefix}nav-link-padding-x: 0.5rem;
+ --#{$prefix}nav-link-gap: 0.25rem;
--#{$prefix}nav-link-icon-size: 1rem;
}
@@ -96,6 +97,6 @@
--#{$prefix}nav-font-size: var(--tblr-font-size-h3);
--#{$prefix}nav-radius: 8px;
--#{$prefix}nav-link-padding-x: 1rem;
- --#{$prefix}nav-link-gap: .5rem;
+ --#{$prefix}nav-link-gap: 0.5rem;
--#{$prefix}nav-link-icon-size: 1.5rem;
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss
index a8d71601b..68d7d31b1 100644
--- a/core/scss/ui/_signature.scss
+++ b/core/scss/ui/_signature.scss
@@ -12,4 +12,4 @@
display: block;
cursor: crosshair;
width: 100%;
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_social.scss b/core/scss/ui/_social.scss
index 691a4235c..49706565b 100644
--- a/core/scss/ui/_social.scss
+++ b/core/scss/ui/_social.scss
@@ -1,54 +1,27 @@
-@use "sass:map";
-
-$apps: (
- "apple",
- "discord",
- "dribbble",
- "facebook",
- "figma",
- "github",
- "google",
- "instagram",
- "linkedin",
- "medium",
- "meta",
- "metamask",
- "pinterest",
- "reddit",
- "signal",
- "skype",
- "snapchat",
- "spotify",
- "telegram",
- "tiktok",
- "tumblr",
- "twitch",
- "vk",
- "x",
- "youtube"
-);
+@use 'sass:map';
+@use '../config';
.social {
position: relative;
display: inline-block;
- height: $avatar-size;
+ height: config.$avatar-size;
aspect-ratio: 1;
background: no-repeat center/cover;
vertical-align: bottom;
}
-@each $app in $apps {
+@each $app in config.$social-apps {
.social-app-#{$app} {
- background-image: url("#{$assets-base}/img/social/#{$app}.svg");
+ background-image: url('#{config.$assets-base}/img/social/#{$app}.svg');
&.social-gray {
- background-image: url("#{$assets-base}/img/social/#{$app}-gray.svg");
+ background-image: url('#{config.$assets-base}/img/social/#{$app}-gray.svg');
}
}
}
-@each $flag-size, $size in $flag-sizes {
+@each $flag-size, $size in config.$flag-sizes {
.social-#{$flag-size} {
height: map.get($size, size);
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss
index 2ba53f673..24b6a974d 100644
--- a/core/scss/ui/_stars.scss
+++ b/core/scss/ui/_stars.scss
@@ -4,6 +4,6 @@
font-size: $h5-font-size;
.star:not(:first-child) {
- margin-left: .25rem;
+ margin-left: 0.25rem;
}
}
diff --git a/core/scss/ui/_status.scss b/core/scss/ui/_status.scss
index ec7782422..44e0fcc65 100644
--- a/core/scss/ui/_status.scss
+++ b/core/scss/ui/_status.scss
@@ -9,16 +9,16 @@
@keyframes status-pulsate-secondary {
10% {
- transform: scale(1, 1)
+ transform: scale(1, 1);
}
30% {
- transform: scale(3, 3)
+ transform: scale(3, 3);
}
80% {
- transform: scale(3, 3)
+ transform: scale(3, 3);
}
100% {
- transform: scale(1, 1)
+ transform: scale(1, 1);
}
}
@@ -47,10 +47,10 @@
display: inline-flex;
align-items: center;
height: var(--#{$prefix}status-height);
- padding: .25rem .75rem;
- gap: .5rem;
+ padding: 0.25rem 0.75rem;
+ gap: 0.5rem;
color: var(--#{$prefix}status-color);
- background: rgba(var(--#{$prefix}status-color-rgb), .1);
+ background: rgba(var(--#{$prefix}status-color-rgb), 0.1);
font-size: $font-size-base;
text-transform: none;
letter-spacing: normal;
@@ -97,13 +97,13 @@
.status-dot-animated {
&:before {
- content: "";
+ content: '';
position: absolute;
inset: 0;
z-index: 0;
background: inherit;
border-radius: inherit;
- opacity: .6;
+ opacity: 0.6;
animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
}
}
@@ -121,7 +121,7 @@
}
.status-indicator-circle {
- --#{$prefix}status-circle-size: .75rem;
+ --#{$prefix}status-circle-size: 0.75rem;
position: absolute;
left: 50%;
top: 50%;
@@ -137,12 +137,12 @@
&:nth-child(2) {
z-index: 2;
- opacity: .1;
+ opacity: 0.1;
}
&:nth-child(3) {
z-index: 1;
- opacity: .3;
+ opacity: 0.3;
}
}
@@ -160,4 +160,4 @@
animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
}
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss
index fc6b3fe5f..de18cde56 100644
--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -4,7 +4,7 @@
.steps {
--#{$prefix}steps-color: #{$steps-color};
--#{$prefix}steps-inactive-color: #{$steps-inactive-color};
- --#{$prefix}steps-dot-size: .5rem;
+ --#{$prefix}steps-dot-size: 0.5rem;
--#{$prefix}steps-border-width: #{$steps-border-width};
display: flex;
flex-wrap: nowrap;
@@ -54,17 +54,17 @@
position: absolute;
left: 50%;
width: 100%;
- content: "";
+ content: '';
transform: translateY(-50%);
}
&:after {
- top: calc(var(--#{$prefix}steps-dot-size) * .5);
+ top: calc(var(--#{$prefix}steps-dot-size) * 0.5);
height: var(--#{$prefix}steps-border-width);
}
&:before {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 50%;
@@ -153,4 +153,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss
index 246f94aa7..65d1c9a89 100644
--- a/core/scss/ui/_switch-icon.scss
+++ b/core/scss/ui/_switch-icon.scss
@@ -58,7 +58,7 @@
.switch-icon-fade {
.switch-icon-a,
.switch-icon-b {
- @include transition(opacity .5s);
+ @include transition(opacity 0.5s);
}
}
@@ -66,7 +66,7 @@
.switch-icon-scale {
.switch-icon-a,
.switch-icon-b {
- @include transition(opacity .5s, transform .0s .5s);
+ @include transition(opacity 0.5s, transform 0s 0.5s);
}
.switch-icon-b {
@@ -76,7 +76,7 @@
&.active {
.switch-icon-a,
.switch-icon-b {
- @include transition(opacity .0s, transform .5s);
+ @include transition(opacity 0s, transform 0.5s);
}
.switch-icon-b {
@@ -93,7 +93,7 @@
.switch-icon-b {
backface-visibility: hidden;
transform-style: preserve-3d;
- @include transition(opacity 0s .2s, transform .4s ease-in-out);
+ @include transition(opacity 0s 0.2s, transform 0.4s ease-in-out);
}
.switch-icon-a {
@@ -212,4 +212,4 @@
transform: translateY(0);
}
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index 8cb22a198..63efb7c95 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -83,8 +83,7 @@
}
tr {
- border-bottom: var(--#{$prefix}border-width)
- var(--#{$prefix}border-style) $table-border-color;
+ border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $table-border-color;
}
.btn {
@@ -119,14 +118,14 @@ Table sort
}
&:after {
- content: "";
+ content: '';
display: inline-flex;
width: 1rem;
height: 1rem;
vertical-align: bottom;
mask-image: $table-sort-bg-image;
background: currentColor;
- margin-left: .25rem;
+ margin-left: 0.25rem;
}
&.asc:after {
@@ -169,4 +168,4 @@ Table sort
}
}
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss
index 24a982b86..2632fd913 100644
--- a/core/scss/ui/_tags.scss
+++ b/core/scss/ui/_tags.scss
@@ -8,7 +8,7 @@
padding: 0 0.5rem;
background: var(--#{$prefix}bg-surface);
box-shadow: var(--#{$prefix}shadow-input);
- gap: .5rem;
+ gap: 0.5rem;
.btn-close {
margin-right: -0.25rem;
@@ -16,15 +16,15 @@
padding: 0;
width: 1rem;
height: 1rem;
- font-size: .5rem;
+ font-size: 0.5rem;
}
}
.tag-badge {
--#{$prefix}badge-font-size: #{$h6-font-size};
- --#{$prefix}badge-padding-x: .25rem;
- --#{$prefix}badge-padding-y: .125rem;
- margin-right: -.25rem;
+ --#{$prefix}badge-padding-x: 0.25rem;
+ --#{$prefix}badge-padding-y: 0.125rem;
+ margin-right: -0.25rem;
}
.tag-avatar,
@@ -32,7 +32,7 @@
.tag-payment,
.tag-icon,
.tag-check {
- margin-left: -.25rem;
+ margin-left: -0.25rem;
}
.tag-icon {
@@ -48,7 +48,6 @@
background-size: 1rem;
}
-
//
// Tags list
//
diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss
index 8673fd79c..365adcc1c 100644
--- a/core/scss/ui/_timeline.scss
+++ b/core/scss/ui/_timeline.scss
@@ -18,7 +18,7 @@
margin-bottom: var(--#{$prefix}page-padding);
&:before {
- content: "";
+ content: '';
position: absolute;
top: var(--#{$prefix}timeline-icon-size);
left: calc(var(--#{$prefix}timeline-icon-size) / 2);
@@ -40,7 +40,7 @@
background: var(--#{$prefix}bg-surface-secondary);
color: var(--#{$prefix}secondary);
border-radius: var(--#{$prefix}border-radius);
- z-index: 5
+ z-index: 5;
}
.timeline-event-card {
diff --git a/core/scss/ui/_toasts.scss b/core/scss/ui/_toasts.scss
index 76fb0a4ce..6813d002c 100644
--- a/core/scss/ui/_toasts.scss
+++ b/core/scss/ui/_toasts.scss
@@ -6,7 +6,7 @@
user-select: none;
}
- button[data-bs-dismiss="toast"] {
+ button[data-bs-dismiss='toast'] {
outline: none;
}
diff --git a/core/scss/ui/_toolbar.scss b/core/scss/ui/_toolbar.scss
index 629ff1fb0..ba332b057 100644
--- a/core/scss/ui/_toolbar.scss
+++ b/core/scss/ui/_toolbar.scss
@@ -2,10 +2,10 @@
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
- margin: 0 -.5rem;
+ margin: 0 -0.5rem;
> * {
- margin: 0 .5rem;
+ margin: 0 0.5rem;
}
@include media-print {
diff --git a/core/scss/ui/_tracking.scss b/core/scss/ui/_tracking.scss
index 6418df9a9..3da3a58e9 100644
--- a/core/scss/ui/_tracking.scss
+++ b/core/scss/ui/_tracking.scss
@@ -13,7 +13,7 @@
height: auto;
&:before {
- content: "";
+ content: '';
display: block;
padding-top: 100%;
}
@@ -24,6 +24,6 @@
flex: 1;
border-radius: var(--#{$prefix}tracking-block-border-radius);
height: var(--#{$prefix}tracking-height);
- min-width: .25rem;
+ min-width: 0.25rem;
background: var(--#{$prefix}border-color);
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss
index 7e4f97210..5ddc0aa22 100644
--- a/core/scss/ui/_type.scss
+++ b/core/scss/ui/_type.scss
@@ -1,4 +1,4 @@
-@import "typo/hr";
+@import 'typo/hr';
.lead {
color: var(--#{$prefix}secondary);
@@ -94,7 +94,7 @@ blockquote {
text-align: right;
&:before {
- content: "— ";
+ content: '— ';
}
}
}
@@ -181,8 +181,8 @@ Selection
/**
Links
*/
-[class^="link-"],
-[class*=" link-"] {
+[class^='link-'],
+[class*=' link-'] {
&.disabled {
color: $nav-link-disabled-color !important;
pointer-events: none;
@@ -311,20 +311,19 @@ $text-variants: (
}
}
- >:last-child {
+ > :last-child {
margin-bottom: 0;
}
}
-
.callout {
margin-bottom: 1.5rem;
border: 1px solid var(--#{$prefix}primary-200);
border-radius: var(--#{$prefix}border-radius);
- padding: .5rem 1rem;
+ padding: 0.5rem 1rem;
background: var(--#{$prefix}primary-lt);
- &>:last-child {
+ & > :last-child {
margin-bottom: 0;
}
}
diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss
index f4176ba72..6827d1982 100644
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -23,9 +23,9 @@ Form check
.form-check-input {
background-size: $form-check-input-width;
- margin-top: ($form-check-min-height - $form-check-input-width) * .5;
+ margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
box-shadow: $form-check-input-box-shadow;
-
+
.form-switch & {
@include transition(background-color$transition-time, background-position $transition-time);
}
@@ -36,8 +36,8 @@ Form check
&.required {
&:after {
- content: "*";
- margin-left: .25rem;
+ content: '*';
+ margin-left: 0.25rem;
color: $red;
}
}
@@ -47,10 +47,9 @@ Form check
display: block;
color: var(--#{$prefix}secondary);
font-size: $h5-font-size;
- margin-top: .25rem;
+ margin-top: 0.25rem;
}
-
.form-check-single {
margin: 0;
@@ -65,7 +64,7 @@ Form switch
.form-switch {
.form-check-input {
height: $form-switch-height;
- margin-top: ($form-check-min-height - $form-switch-height) * .5;
+ margin-top: ($form-check-min-height - $form-switch-height) * 0.5;
}
}
@@ -81,11 +80,11 @@ Form switch
}
.form-check-label {
- padding-top: .125rem;
+ padding-top: 0.125rem;
}
}
/*Correction of Form-check position*/
-.form-check-input:checked{
+.form-check-input:checked {
border: none;
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index fe3985297..026f4faf7 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -22,7 +22,7 @@ Color Input
color: $white;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
border-radius: var(--#{$prefix}border-radius);
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
&:before {
position: absolute;
@@ -30,7 +30,7 @@ Color Input
left: 0;
width: 100%;
height: 100%;
- content: "";
+ content: '';
background: no-repeat center center/$form-check-input-checked-bg-size;
background-image: escape-svg($form-check-input-checked-bg-image);
opacity: 0;
diff --git a/core/scss/ui/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss
index 7062b0541..e32e9b670 100644
--- a/core/scss/ui/forms/_form-custom.scss
+++ b/core/scss/ui/forms/_form-custom.scss
@@ -10,7 +10,7 @@ Bootstrap color input
/**
Remove the cancel buttons in Chrome and Safari on macOS.
*/
-[type="search"]::-webkit-search-cancel-button {
+[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
}
@@ -25,4 +25,4 @@ Form control dark theme fix
&:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: var(--#{$prefix}btn-color, #{$form-file-button-hover-bg});
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index 1cd3f23b8..d28800295 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -33,15 +33,15 @@ Image check
&:before {
position: absolute;
- top: .25rem;
- left: .25rem;
+ top: 0.25rem;
+ left: 0.25rem;
z-index: 1;
display: block;
width: $form-check-input-width;
height: $form-check-input-width;
color: $white;
pointer-events: none;
- content: "";
+ content: '';
user-select: none;
background: $form-check-input-bg;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
@@ -57,11 +57,11 @@ Image check
border-color: $form-check-input-checked-border-color;
}
- .form-imagecheck-input[type="radio"] ~ & {
+ .form-imagecheck-input[type='radio'] ~ & {
border-radius: $form-check-radio-border-radius;
}
- .form-imagecheck-input[type="radio"]:checked ~ & {
+ .form-imagecheck-input[type='radio']:checked ~ & {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
}
@@ -70,7 +70,7 @@ Image check
.form-imagecheck-image {
max-width: 100%;
display: block;
- opacity: .64;
+ opacity: 0.64;
@include transition(opacity $transition-time);
&:first-child {
@@ -91,7 +91,7 @@ Image check
}
.form-imagecheck-caption {
- padding: .25rem;
+ padding: 0.25rem;
font-size: $font-size-sm;
color: var(--#{$prefix}secondary);
text-align: center;
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 02aa143aa..53f6cf38e 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -48,7 +48,7 @@ Select group
@include transition(border-color $transition-time, background $transition-time, color $transition-time);
.icon:only-child {
- margin: 0 -.25rem;
+ margin: 0 -0.25rem;
}
&:hover {
@@ -64,11 +64,11 @@ Select group
vertical-align: middle;
box-shadow: $form-check-input-box-shadow;
- .form-selectgroup-input[type="checkbox"] + .form-selectgroup-label & {
+ .form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & {
border-radius: $form-check-input-border-radius;
}
- .form-selectgroup-input[type="radio"] + .form-selectgroup-label & {
+ .form-selectgroup-input[type='radio'] + .form-selectgroup-label & {
border-radius: $form-check-radio-border-radius;
}
@@ -80,11 +80,11 @@ Select group
border-color: $form-check-input-checked-border-color;
}
- .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-label & {
+ .form-selectgroup-input[type='checkbox']:checked + .form-selectgroup-label & {
background-image: escape-svg($form-check-input-checked-bg-image);
}
- .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-label & {
+ .form-selectgroup-input[type='radio']:checked + .form-selectgroup-label & {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
}
diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss
index 7a4398647..2b72cb291 100644
--- a/core/scss/ui/typo/_hr.scss
+++ b/core/scss/ui/typo/_hr.scss
@@ -1,4 +1,3 @@
-
/**
Horizontal rules
*/
@@ -24,17 +23,17 @@ Hr text
}
&:before {
- content: "";
- margin-right: .5rem;
+ content: '';
+ margin-right: 0.5rem;
}
&:after {
- content: "";
- margin-left: .5rem;
+ content: '';
+ margin-left: 0.5rem;
}
> *:first-child {
- padding-right: .5rem;
+ padding-right: 0.5rem;
padding-left: 0;
color: var(--#{$prefix}secondary);
}
@@ -46,15 +45,15 @@ Hr text
}
& > *:first-child {
- padding-right: .5rem;
- padding-left: .5rem;
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
}
}
&.hr-text-right,
&.hr-text-end {
&:before {
- content: "";
+ content: '';
}
&:after {
@@ -63,7 +62,7 @@ Hr text
& > *:first-child {
padding-right: 0;
- padding-left: .5rem;
+ padding-left: 0.5rem;
}
}
@@ -73,5 +72,5 @@ Hr text
}
.hr-text-spaceless {
- margin: -.5rem 0;
+ margin: -0.5rem 0;
}
diff --git a/core/scss/utils/_background.scss b/core/scss/utils/_background.scss
index 144b777a4..3bc761d28 100644
--- a/core/scss/utils/_background.scss
+++ b/core/scss/utils/_background.scss
@@ -1,11 +1,11 @@
.bg-white-overlay {
color: $white;
- background-color: rgba($light, .24);
+ background-color: rgba($light, 0.24);
}
.bg-dark-overlay {
color: $white;
- background-color: rgba($dark, .24);
+ background-color: rgba($dark, 0.24);
}
.bg-cover {
diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss
index fb60fa938..126297c92 100644
--- a/core/scss/utils/_colors.scss
+++ b/core/scss/utils/_colors.scss
@@ -1,39 +1,47 @@
-@use "sass:map";
+@use 'sass:map';
// All colors
-@each $color, $value in map.merge($theme-colors, ( white: $white)) {
- .bg-#{"" + $color} {
+@each $color,
+ $value
+ in map.merge(
+ $theme-colors,
+ (
+ white: $white,
+ )
+ )
+{
+ .bg-#{'' + $color} {
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
}
- .bg-#{"" + $color}-lt {
+ .bg-#{'' + $color}-lt {
color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
}
- .border-#{"" + $color} {
+ .border-#{'' + $color} {
border-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}border-opacity, 1) * 100%), transparent) !important;
}
- .bg-gradient-from-#{"" + $color} {
+ .bg-gradient-from-#{'' + $color} {
--#{$prefix}gradient-from: var(--#{$prefix}#{$color});
}
- .bg-gradient-to-#{"" + $color} {
+ .bg-gradient-to-#{'' + $color} {
--#{$prefix}gradient-to: var(--#{$prefix}#{$color});
}
- .bg-gradient-via-#{"" + $color} {
+ .bg-gradient-via-#{'' + $color} {
--#{$prefix}gradient-via: var(--#{$prefix}#{$color});
--#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
}
- .text-bg-#{"" + $color} {
+ .text-bg-#{'' + $color} {
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
- .link-#{"" + $color} {
+ .link-#{'' + $color} {
color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-opacity, 1) * 100%), transparent) !important;
text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent) !important;
@@ -49,34 +57,34 @@
}
@each $color, $value in $theme-colors {
- .text-#{"" + $color} {
+ .text-#{'' + $color} {
--#{$prefix}text-opacity: 1;
color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity) * 100%), transparent) !important;
}
- .text-#{"" + $color}-fg {
+ .text-#{'' + $color}-fg {
color: var(--#{$prefix}#{$color}-fg) !important;
}
}
@each $color, $value in $gray-colors {
- .bg-#{"" + $color} {
+ .bg-#{'' + $color} {
--#{$prefix}bg-opacity: 1;
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
}
- .text-#{"" + $color}-fg {
+ .text-#{'' + $color}-fg {
color: var(--#{$prefix}#{$color}-fg) !important;
}
}
@each $color, $value in $social-colors {
- .bg-#{"" + $color} {
+ .bg-#{'' + $color} {
--#{$prefix}bg-opacity: 1;
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
}
- .text-#{"" + $color}-fg {
+ .text-#{'' + $color}-fg {
color: var(--#{$prefix}#{$color}-fg) !important;
}
}
@@ -99,4 +107,4 @@
.bg-surface-backdrop {
background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
-}
\ No newline at end of file
+}
diff --git a/core/scss/utils/_hover.scss b/core/scss/utils/_hover.scss
index 866aa054e..a4c00c8d4 100644
--- a/core/scss/utils/_hover.scss
+++ b/core/scss/utils/_hover.scss
@@ -40,7 +40,7 @@
.hover-rotate-start {
@extend %hover-animation;
-
+
&:hover {
transform: rotate(-4deg);
}
diff --git a/core/scss/utils/_shadow.scss b/core/scss/utils/_shadow.scss
index 756e67b02..17cc2a732 100644
--- a/core/scss/utils/_shadow.scss
+++ b/core/scss/utils/_shadow.scss
@@ -1,9 +1,17 @@
// stylelint-disable declaration-no-important
-.hover-shadow-sm:hover { box-shadow: $box-shadow-sm !important; }
+.hover-shadow-sm:hover {
+ box-shadow: $box-shadow-sm !important;
+}
-.hover-shadow:hover{ box-shadow: $box-shadow !important; }
+.hover-shadow:hover {
+ box-shadow: $box-shadow !important;
+}
-.hover-shadow-lg:hover { box-shadow: $box-shadow-lg !important; }
+.hover-shadow-lg:hover {
+ box-shadow: $box-shadow-lg !important;
+}
-.hover-shadow-none:hover{ box-shadow: none !important; }
+.hover-shadow-none:hover {
+ box-shadow: none !important;
+}
diff --git a/core/scss/utils/_sizing.scss b/core/scss/utils/_sizing.scss
index ac4c36b78..11bbe6848 100644
--- a/core/scss/utils/_sizing.scss
+++ b/core/scss/utils/_sizing.scss
@@ -1,6 +1,10 @@
// stylelint-disable declaration-no-important
@each $size-name, $size in map_merge($spacers, $size-spacers) {
- .w-#{$size-name} { width: $size !important; }
- .h-#{$size-name} { height: $size !important; }
-}
\ No newline at end of file
+ .w-#{$size-name} {
+ width: $size !important;
+ }
+ .h-#{$size-name} {
+ height: $size !important;
+ }
+}
diff --git a/core/scss/utils/_text.scss b/core/scss/utils/_text.scss
index 691c6834a..9a754da3d 100644
--- a/core/scss/utils/_text.scss
+++ b/core/scss/utils/_text.scss
@@ -12,4 +12,3 @@ Antialiasing
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
-
diff --git a/core/scss/vendor/_apexcharts.scss b/core/scss/vendor/_apexcharts.scss
index e3d34c3d3..90b5c7364 100644
--- a/core/scss/vendor/_apexcharts.scss
+++ b/core/scss/vendor/_apexcharts.scss
@@ -2,7 +2,7 @@
color: $tooltip-color !important;
background: $tooltip-bg !important;
font-size: $tooltip-font-size !important;
- padding: .25rem !important;
+ padding: 0.25rem !important;
box-shadow: none !important;
}
@@ -11,7 +11,7 @@
border: 0 !important;
margin: 0 !important;
font-weight: var(--#{$prefix}font-weight-bold);
- padding: .25rem .5rem !important;
+ padding: 0.25rem 0.5rem !important;
}
.apexcharts-tooltip-y-group {
@@ -19,7 +19,7 @@
}
.apexcharts-tooltip-series-group {
- padding: 0 .5rem 0 !important;
+ padding: 0 0.5rem 0 !important;
}
.apexcharts-tooltip-marker:before {
@@ -49,4 +49,4 @@
.apexcharts-pie-area {
stroke: var(--#{$prefix}bg-surface) !important;
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss
index f4b45314e..96ead5da4 100644
--- a/core/scss/vendor/_coloris.scss
+++ b/core/scss/vendor/_coloris.scss
@@ -49,7 +49,7 @@ input.clr-color {
.clr-field {
display: block;
-
+
button {
width: 1.5rem;
height: 1.5rem;
diff --git a/core/scss/vendor/_dropzone.scss b/core/scss/vendor/_dropzone.scss
index d367f258c..ecc10227e 100644
--- a/core/scss/vendor/_dropzone.scss
+++ b/core/scss/vendor/_dropzone.scss
@@ -5,7 +5,7 @@
&.dz-drag-hover {
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
- background: rgba(var(--#{$prefix}primary-rgb), .01);
+ background: rgba(var(--#{$prefix}primary-rgb), 0.01);
color: var(--#{$prefix}primary);
.dz-message {
@@ -14,7 +14,7 @@
}
.dz-preview {
- margin: .5rem;
+ margin: 0.5rem;
.dz-image {
border-radius: var(--#{$prefix}border-radius);
@@ -24,4 +24,4 @@
height: 54px;
}
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_fslightbox.scss b/core/scss/vendor/_fslightbox.scss
index e06f28670..ca37b3b6b 100644
--- a/core/scss/vendor/_fslightbox.scss
+++ b/core/scss/vendor/_fslightbox.scss
@@ -10,4 +10,4 @@
.fslightbox-slash {
background: currentColor !important;
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_fullcalendar.scss b/core/scss/vendor/_fullcalendar.scss
index aacfa4686..1cdaf9540 100644
--- a/core/scss/vendor/_fullcalendar.scss
+++ b/core/scss/vendor/_fullcalendar.scss
@@ -30,8 +30,8 @@
text-transform: uppercase;
font-weight: var(--#{$prefix}font-weight-medium);
font-size: var(--#{$prefix}font-size-h5);
- padding-top: .5rem !important;
- padding-bottom: .5rem !important;
+ padding-top: 0.5rem !important;
+ padding-bottom: 0.5rem !important;
line-height: 1;
}
@@ -52,4 +52,4 @@
background-color: transparent !important;
border-color: var(--#{$prefix}border-color) !important;
font-weight: var(--#{$prefix}font-weight-medium) !important;
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_jsvectormap.scss b/core/scss/vendor/_jsvectormap.scss
index ca669e657..e77921302 100644
--- a/core/scss/vendor/_jsvectormap.scss
+++ b/core/scss/vendor/_jsvectormap.scss
@@ -6,7 +6,7 @@
box-shadow: $card-box-shadow;
}
-.jvm-series-container .jvm-legend .jvm-legend-title {
+.jvm-series-container .jvm-legend .jvm-legend-title {
border-bottom: 0;
font-weight: var(--#{$prefix}font-weight-medium);
}
@@ -21,8 +21,8 @@
align-items: center;
.jvm-legend-tick-sample {
- width: .75rem;
- height: .75rem;
+ width: 0.75rem;
+ height: 0.75rem;
}
}
}
@@ -44,4 +44,4 @@
&.jvm-zoomout {
top: 2.5rem;
}
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_litepicker.scss b/core/scss/vendor/_litepicker.scss
index 2431ef3fd..a618f8963 100644
--- a/core/scss/vendor/_litepicker.scss
+++ b/core/scss/vendor/_litepicker.scss
@@ -2,14 +2,14 @@
--litepicker-month-weekday-color: #{var(--#{$prefix}secondary)};
--litepicker-button-prev-month-color: #{var(--#{$prefix}secondary)};
--litepicker-button-next-month-color: #{var(--#{$prefix}secondary)};
- --litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) };
- --litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) };
+ --litepicker-button-prev-month-color-hover: #{var(--#{$prefix}primary)};
+ --litepicker-button-next-month-color-hover: #{var(--#{$prefix}primary)};
--litepicker-day-color: var(--#{$prefix}body-color);
- --litepicker-day-color-hover: #{ var(--#{$prefix}primary) };
- --litepicker-is-start-color-bg: #{ var(--#{$prefix}primary) };
- --litepicker-is-end-color-bg: #{ var(--#{$prefix}primary) };
- --litepicker-is-in-range-color: #{ var(--#{$prefix}info) };
- --litepicker-is-today-color: #{ var(--#{$prefix}primary) };
+ --litepicker-day-color-hover: #{var(--#{$prefix}primary)};
+ --litepicker-is-start-color-bg: #{var(--#{$prefix}primary)};
+ --litepicker-is-end-color-bg: #{var(--#{$prefix}primary)};
+ --litepicker-is-in-range-color: #{var(--#{$prefix}info)};
+ --litepicker-is-today-color: #{var(--#{$prefix}primary)};
--litepicker-month-header-color: var(--#{$prefix}body-color);
--litepicker-container-months-color-bg: var(--#{$prefix}bg-surface);
font: inherit;
@@ -42,7 +42,7 @@
.month-item-weekdays-row {
> div {
- padding: .5rem 0 !important;
+ padding: 0.5rem 0 !important;
font-size: $h5-font-size;
}
}
@@ -51,14 +51,14 @@
.container__days {
.day-item {
cursor: pointer !important;
- padding: .5rem 0 !important;
+ padding: 0.5rem 0 !important;
@include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
}
}
.datepicker-inline & {
box-shadow: $input-box-shadow;
-
+
.container__months {
box-shadow: none;
background-color: var(--#{$prefix}bg-forms);
@@ -66,4 +66,3 @@
}
}
}
-
diff --git a/core/scss/vendor/_nouislider.scss b/core/scss/vendor/_nouislider.scss
index 3fdcb05d4..a7d2f70ec 100644
--- a/core/scss/vendor/_nouislider.scss
+++ b/core/scss/vendor/_nouislider.scss
@@ -8,7 +8,7 @@
.noUi-horizontal {
height: add($form-range-track-height, 1rem);
- padding: .5rem 0;
+ padding: 0.5rem 0;
}
.noUi-base {
@@ -33,8 +33,8 @@
.noUi-horizontal & {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
- top: calc($form-range-thumb-height * -.5);
- right: calc($form-range-thumb-height * -.5);
+ top: calc($form-range-thumb-height * -0.5);
+ right: calc($form-range-thumb-height * -0.5);
margin: 1px 1px 0 0;
}
@@ -46,4 +46,4 @@
.noUi-connect {
background: currentColor;
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_plyr.scss b/core/scss/vendor/_plyr.scss
index 1addf7000..91943da5b 100644
--- a/core/scss/vendor/_plyr.scss
+++ b/core/scss/vendor/_plyr.scss
@@ -1,3 +1,3 @@
body {
--plyr-color-main: #{var(--#{$prefix}primary)};
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss
index f1e99a753..d5954441a 100644
--- a/core/scss/vendor/_tom-select.scss
+++ b/core/scss/vendor/_tom-select.scss
@@ -14,7 +14,6 @@ $input-border-width: 1px;
.focus .ts-control {
border-radius: var(--#{$prefix}border-radius);
}
-
.ts-control {
color: inherit;
@@ -26,11 +25,11 @@ $input-border-width: 1px;
}
.ts-wrapper {
- .form-control,
+ .form-control,
.form-select,
- &.form-control,
+ &.form-control,
&.form-select {
- box-shadow: $input-box-shadow;
+ box-shadow: $input-box-shadow;
}
&.is-invalid,
@@ -58,7 +57,7 @@ $input-border-width: 1px;
}
.ts-control input {
- &::placeholder{
+ &::placeholder {
color: $input-placeholder-color;
}
}
@@ -75,7 +74,7 @@ $input-border-width: 1px;
.ts-wrapper.disabled .ts-control {
opacity: 1;
- &> div.item {
+ & > div.item {
color: var(--#{$prefix}gray-500);
}
}
diff --git a/core/scss/vendor/_turbo.scss b/core/scss/vendor/_turbo.scss
index 60e48df2f..eff8b30a4 100644
--- a/core/scss/vendor/_turbo.scss
+++ b/core/scss/vendor/_turbo.scss
@@ -1,3 +1,3 @@
.turbo-progress-bar {
background: var(--#{$prefix}primary);
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_typed.scss b/core/scss/vendor/_typed.scss
index 0c374c02b..116b8067b 100644
--- a/core/scss/vendor/_typed.scss
+++ b/core/scss/vendor/_typed.scss
@@ -1,4 +1,4 @@
.typed-cursor {
font-weight: 500;
color: $secondary;
-}
\ No newline at end of file
+}
diff --git a/core/scss/vendor/_wysiwyg.scss b/core/scss/vendor/_wysiwyg.scss
index c01dc9eea..da85ef774 100644
--- a/core/scss/vendor/_wysiwyg.scss
+++ b/core/scss/vendor/_wysiwyg.scss
@@ -5,7 +5,7 @@
}
.tox-toolbar__group {
- padding: 0 .5rem 0;
+ padding: 0 0.5rem 0;
}
.tox .tox-toolbar__primary {
@@ -32,7 +32,7 @@
.tox-edit-area {
&::before {
- border: none !important
+ border: none !important;
}
}
@@ -43,4 +43,4 @@
.tox .tox-toolbar-overlord,
.tox:not(.tox-hugerte-inline) .tox-editor-header {
background: transparent !important;
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index daac4ce5c..c56668f72 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -133,6 +133,9 @@ importers:
dropzone:
specifier: ^6.0.0-beta.2
version: 6.0.0-beta.2
+ find-unused-sass-variables:
+ specifier: ^6.1.0
+ version: 6.1.0
flatpickr:
specifier: ^4.6.13
version: 4.6.13
@@ -1337,6 +1340,10 @@ packages:
resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==}
engines: {node: '>=16'}
+ commander@12.1.0:
+ resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+ engines: {node: '>=18'}
+
commander@2.20.3:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
@@ -1667,6 +1674,11 @@ packages:
resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==}
engines: {node: '>= 0.8'}
+ find-unused-sass-variables@6.1.0:
+ resolution: {integrity: sha512-lFSxLO0wEq58Bs72M4QXUg9Xo/Daxb33aEIH8fkx9t8NpxRPO63+QwzfU5zBQu6JKiJjRsyLEK8UACJoXooSWQ==}
+ engines: {node: '>=18'}
+ hasBin: true
+
find-up@4.1.0:
resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
engines: {node: '>=8'}
@@ -2501,6 +2513,12 @@ packages:
peerDependencies:
postcss: ^8.1.0
+ postcss-scss@4.0.9:
+ resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+ engines: {node: '>=12.0'}
+ peerDependencies:
+ postcss: ^8.4.29
+
postcss-value-parser@4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
@@ -2880,6 +2898,10 @@ packages:
resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
engines: {node: '>=4'}
+ strip-bom@5.0.0:
+ resolution: {integrity: sha512-p+byADHF7SzEcVnLvc/r3uognM1hUhObuHXxJcgLCfD194XAkaLbjq3Wzb0N5G2tgIjH0dgT708Z51QxMeu60A==}
+ engines: {node: '>=12'}
+
strip-eof@1.0.0:
resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==}
engines: {node: '>=0.10.0'}
@@ -4479,6 +4501,8 @@ snapshots:
commander@11.0.0: {}
+ commander@12.1.0: {}
+
commander@2.20.3: {}
commander@5.1.0: {}
@@ -4777,6 +4801,17 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ find-unused-sass-variables@6.1.0:
+ dependencies:
+ commander: 12.1.0
+ escape-string-regexp: 5.0.0
+ picocolors: 1.1.1
+ postcss: 8.5.6
+ postcss-scss: 4.0.9(postcss@8.5.6)
+ slash: 5.1.0
+ strip-bom: 5.0.0
+ tinyglobby: 0.2.14
+
find-up@4.1.0:
dependencies:
locate-path: 5.0.0
@@ -5567,6 +5602,10 @@ snapshots:
postcss: 8.5.6
thenby: 1.3.4
+ postcss-scss@4.0.9(postcss@8.5.6):
+ dependencies:
+ postcss: 8.5.6
+
postcss-value-parser@4.2.0: {}
postcss@8.5.6:
@@ -5993,6 +6032,8 @@ snapshots:
strip-bom@3.0.0: {}
+ strip-bom@5.0.0: {}
+
strip-eof@1.0.0: {}
strip-final-newline@2.0.0: {}