mirror of
https://github.com/twbs/bootstrap.git
synced 2025-07-03 00:02:25 -04:00
Compare commits
21 Commits
b6db7dd1e2
...
73fe65f847
| Author | SHA1 | Date | |
|---|---|---|---|
|
73fe65f847 | ||
|
c5074c7c18 | ||
|
|
879d1d15dc | ||
|
|
7d12ff7b3b | ||
|
|
9fce97c4b2 | ||
|
|
1388120a1e | ||
|
|
856bdd178a | ||
|
|
8eb0175d2f | ||
|
|
9743a44320 | ||
|
|
ee1525ed85 | ||
|
|
33718166e9 | ||
|
|
8683caf075 | ||
|
|
3b2dc9a2e3 | ||
|
|
ccff54a376 | ||
|
|
c89a906f26 | ||
|
|
d3cd1beff8 | ||
|
|
2f4e914034 | ||
|
|
4891f56991 | ||
|
|
1720fb2106 | ||
|
|
64340b3c32 | ||
|
|
6e72393c42 |
@ -10,27 +10,27 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/css/bootstrap-reboot.css",
|
"path": "./dist/css/bootstrap-reboot.css",
|
||||||
"maxSize": "3.5 kB"
|
"maxSize": "4.25 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/css/bootstrap-reboot.min.css",
|
"path": "./dist/css/bootstrap-reboot.min.css",
|
||||||
"maxSize": "3.25 kB"
|
"maxSize": "4.25 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/css/bootstrap-utilities.css",
|
"path": "./dist/css/bootstrap-utilities.css",
|
||||||
"maxSize": "11.75 kB"
|
"maxSize": "12.75 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/css/bootstrap-utilities.min.css",
|
"path": "./dist/css/bootstrap-utilities.min.css",
|
||||||
"maxSize": "10.75 kB"
|
"maxSize": "12.0 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/css/bootstrap.css",
|
"path": "./dist/css/bootstrap.css",
|
||||||
"maxSize": "32.5 kB"
|
"maxSize": "33.75 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/css/bootstrap.min.css",
|
"path": "./dist/css/bootstrap.min.css",
|
||||||
"maxSize": "30.25 kB"
|
"maxSize": "31.25 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./dist/js/bootstrap.bundle.js",
|
"path": "./dist/js/bootstrap.bundle.js",
|
||||||
|
|||||||
49
.github/workflows/node-sass.yml
vendored
49
.github/workflows/node-sass.yml
vendored
@ -1,49 +0,0 @@
|
|||||||
name: CSS (node-sass)
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches:
|
|
||||||
- main
|
|
||||||
pull_request:
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
env:
|
|
||||||
FORCE_COLOR: 2
|
|
||||||
NODE: 22
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
css:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Clone repository
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
with:
|
|
||||||
persist-credentials: false
|
|
||||||
|
|
||||||
- name: Set up Node.js
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: "${{ env.NODE }}"
|
|
||||||
|
|
||||||
- name: Build CSS with node-sass
|
|
||||||
run: |
|
|
||||||
npx --package node-sass@latest node-sass --version
|
|
||||||
npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/
|
|
||||||
ls -Al dist-sass/css
|
|
||||||
|
|
||||||
- name: Check built CSS files for Sass variables
|
|
||||||
shell: bash
|
|
||||||
run: |
|
|
||||||
SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
|
|
||||||
if [[ -z "$SASS_VARS_FOUND" ]]; then
|
|
||||||
echo "All good, no Sass variables found!"
|
|
||||||
exit 0
|
|
||||||
else
|
|
||||||
echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
|
|
||||||
echo "$SASS_VARS_FOUND"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
@ -13,7 +13,6 @@
|
|||||||
"outline": "none"
|
"outline": "none"
|
||||||
},
|
},
|
||||||
"function-disallowed-list": [
|
"function-disallowed-list": [
|
||||||
"calc",
|
|
||||||
"lighten",
|
"lighten",
|
||||||
"darken"
|
"darken"
|
||||||
],
|
],
|
||||||
|
|||||||
425
package-lock.json
generated
425
package-lock.json
generated
@ -83,7 +83,7 @@
|
|||||||
"rollup": "^4.44.1",
|
"rollup": "^4.44.1",
|
||||||
"rollup-plugin-istanbul": "^5.0.0",
|
"rollup-plugin-istanbul": "^5.0.0",
|
||||||
"rtlcss": "^4.3.0",
|
"rtlcss": "^4.3.0",
|
||||||
"sass": "1.78.0",
|
"sass": "1.89.2",
|
||||||
"sass-true": "^9.0.0",
|
"sass-true": "^9.0.0",
|
||||||
"shelljs": "^0.10.0",
|
"shelljs": "^0.10.0",
|
||||||
"stylelint": "^16.21.0",
|
"stylelint": "^16.21.0",
|
||||||
@ -3596,6 +3596,316 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@parcel/watcher": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
|
||||||
|
"dev": true,
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"detect-libc": "^1.0.3",
|
||||||
|
"is-glob": "^4.0.3",
|
||||||
|
"micromatch": "^4.0.5",
|
||||||
|
"node-addon-api": "^7.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"@parcel/watcher-android-arm64": "2.5.1",
|
||||||
|
"@parcel/watcher-darwin-arm64": "2.5.1",
|
||||||
|
"@parcel/watcher-darwin-x64": "2.5.1",
|
||||||
|
"@parcel/watcher-freebsd-x64": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm-glibc": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm-musl": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm64-glibc": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm64-musl": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-x64-glibc": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-x64-musl": "2.5.1",
|
||||||
|
"@parcel/watcher-win32-arm64": "2.5.1",
|
||||||
|
"@parcel/watcher-win32-ia32": "2.5.1",
|
||||||
|
"@parcel/watcher-win32-x64": "2.5.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-android-arm64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-darwin-arm64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-darwin-x64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-freebsd-x64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"freebsd"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm-glibc": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm-musl": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm64-glibc": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm64-musl": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-x64-glibc": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-x64-musl": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-win32-arm64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-win32-ia32": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
|
||||||
|
"cpu": [
|
||||||
|
"ia32"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-win32-x64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@pkgjs/parseargs": {
|
"node_modules/@pkgjs/parseargs": {
|
||||||
"version": "0.11.0",
|
"version": "0.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
||||||
@ -6647,14 +6957,17 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/detect-libc": {
|
"node_modules/detect-libc": {
|
||||||
"version": "2.0.4",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||||
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
|
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
"bin": {
|
||||||
|
"detect-libc": "bin/detect-libc.js"
|
||||||
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=8"
|
"node": ">=0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/deterministic-object-hash": {
|
"node_modules/deterministic-object-hash": {
|
||||||
@ -9371,9 +9684,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/immutable": {
|
"node_modules/immutable": {
|
||||||
"version": "4.3.7",
|
"version": "5.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
|
||||||
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
|
"integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
@ -13419,6 +13732,14 @@
|
|||||||
"url": "https://opencollective.com/unified"
|
"url": "https://opencollective.com/unified"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/node-addon-api": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||||
|
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/node-fetch": {
|
"node_modules/node-fetch": {
|
||||||
"version": "2.7.0",
|
"version": "2.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||||
@ -15974,14 +16295,14 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/sass": {
|
"node_modules/sass": {
|
||||||
"version": "1.78.0",
|
"version": "1.89.2",
|
||||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
|
"resolved": "https://registry.npmjs.org/sass/-/sass-1.89.2.tgz",
|
||||||
"integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
|
"integrity": "sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": ">=3.0.0 <4.0.0",
|
"chokidar": "^4.0.0",
|
||||||
"immutable": "^4.0.0",
|
"immutable": "^5.0.2",
|
||||||
"source-map-js": ">=0.6.2 <2.0.0"
|
"source-map-js": ">=0.6.2 <2.0.0"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
@ -15989,6 +16310,9 @@
|
|||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"@parcel/watcher": "^2.4.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sass-formatter": {
|
"node_modules/sass-formatter": {
|
||||||
@ -16028,70 +16352,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sass/node_modules/chokidar": {
|
|
||||||
"version": "3.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
|
||||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"anymatch": "~3.1.2",
|
|
||||||
"braces": "~3.0.2",
|
|
||||||
"glob-parent": "~5.1.2",
|
|
||||||
"is-binary-path": "~2.1.0",
|
|
||||||
"is-glob": "~4.0.1",
|
|
||||||
"normalize-path": "~3.0.0",
|
|
||||||
"readdirp": "~3.6.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 8.10.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://paulmillr.com/funding/"
|
|
||||||
},
|
|
||||||
"optionalDependencies": {
|
|
||||||
"fsevents": "~2.3.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sass/node_modules/glob-parent": {
|
|
||||||
"version": "5.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
|
||||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"is-glob": "^4.0.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sass/node_modules/picomatch": {
|
|
||||||
"version": "2.3.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
|
||||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.6"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/jonschlinkert"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sass/node_modules/readdirp": {
|
|
||||||
"version": "3.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
|
||||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"picomatch": "^2.2.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sax": {
|
"node_modules/sax": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
|
||||||
@ -16228,6 +16488,17 @@
|
|||||||
"@img/sharp-win32-x64": "0.33.5"
|
"@img/sharp-win32-x64": "0.33.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/sharp/node_modules/detect-libc": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"optional": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/sharp/node_modules/semver": {
|
"node_modules/sharp/node_modules/semver": {
|
||||||
"version": "7.7.2",
|
"version": "7.7.2",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
||||||
|
|||||||
@ -42,7 +42,7 @@
|
|||||||
"start": "npm-run-all --parallel watch docs-serve",
|
"start": "npm-run-all --parallel watch docs-serve",
|
||||||
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
|
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
|
||||||
"css": "npm-run-all css-compile css-prefix css-rtl css-minify",
|
"css": "npm-run-all css-compile css-prefix css-rtl css-minify",
|
||||||
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
|
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css scss/bootstrap-grid.scss:dist/css/bootstrap-grid.css scss/bootstrap-reboot.scss:dist/css/bootstrap-reboot.css scss/bootstrap-utilities.scss:dist/css/bootstrap-utilities.css",
|
||||||
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
|
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
|
||||||
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
|
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
|
||||||
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
|
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
|
||||||
@ -172,7 +172,7 @@
|
|||||||
"rollup": "^4.44.1",
|
"rollup": "^4.44.1",
|
||||||
"rollup-plugin-istanbul": "^5.0.0",
|
"rollup-plugin-istanbul": "^5.0.0",
|
||||||
"rtlcss": "^4.3.0",
|
"rtlcss": "^4.3.0",
|
||||||
"sass": "1.78.0",
|
"sass": "1.89.2",
|
||||||
"sass-true": "^9.0.0",
|
"sass-true": "^9.0.0",
|
||||||
"shelljs": "^0.10.0",
|
"shelljs": "^0.10.0",
|
||||||
"stylelint": "^16.21.0",
|
"stylelint": "^16.21.0",
|
||||||
|
|||||||
@ -1,3 +1,12 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
@ -46,7 +55,7 @@
|
|||||||
&:not(.collapsed) {
|
&:not(.collapsed) {
|
||||||
color: var(--#{$prefix}accordion-active-color);
|
color: var(--#{$prefix}accordion-active-color);
|
||||||
background-color: var(--#{$prefix}accordion-active-bg);
|
background-color: var(--#{$prefix}accordion-active-bg);
|
||||||
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
|
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-image: var(--#{$prefix}accordion-btn-active-icon);
|
background-image: var(--#{$prefix}accordion-btn-active-icon);
|
||||||
|
|||||||
@ -1,3 +1,8 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
@ -57,7 +62,7 @@
|
|||||||
|
|
||||||
// scss-docs-start alert-modifiers
|
// scss-docs-start alert-modifiers
|
||||||
// Generate contextual modifier classes for colorizing the alert
|
// Generate contextual modifier classes for colorizing the alert
|
||||||
@each $state in map-keys($theme-colors) {
|
@each $state in map.keys($theme-colors) {
|
||||||
.alert-#{$state} {
|
.alert-#{$state} {
|
||||||
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||||
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Requires one of the contextual, color modifier classes for `color` and
|
// Requires one of the contextual, color modifier classes for `color` and
|
||||||
|
|||||||
7
scss/_banner.scss
Normal file
7
scss/_banner.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
$file: "" !default;
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* Bootstrap #{$file} v6.0.0-dev (https://getbootstrap.com/)
|
||||||
|
* Copyright 2011-2025 The Bootstrap Authors
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
*/
|
||||||
@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
// scss-docs-start breadcrumb-css-vars
|
// scss-docs-start breadcrumb-css-vars
|
||||||
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
||||||
|
|||||||
@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
|
||||||
// Make the div behave like a button
|
// Make the div behave like a button
|
||||||
.btn-group,
|
.btn-group,
|
||||||
.btn-group-vertical {
|
.btn-group-vertical {
|
||||||
@ -39,7 +44,7 @@
|
|||||||
// Prevent double borders when buttons are next to each other
|
// Prevent double borders when buttons are next to each other
|
||||||
> :not(.btn-check:first-child) + .btn,
|
> :not(.btn-check:first-child) + .btn,
|
||||||
> .btn-group:not(:first-child) {
|
> .btn-group:not(:first-child) {
|
||||||
margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
|
margin-left: calc(-1 * #{$btn-border-width});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset rounded corners
|
// Reset rounded corners
|
||||||
@ -126,7 +131,7 @@
|
|||||||
|
|
||||||
> .btn:not(:first-child),
|
> .btn:not(:first-child),
|
||||||
> .btn-group:not(:first-child) {
|
> .btn-group:not(:first-child) {
|
||||||
margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
|
margin-top: calc(-1 * #{$btn-border-width});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset rounded corners
|
// Reset rounded corners
|
||||||
|
|||||||
@ -1,3 +1,86 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
|
||||||
|
// Button variants
|
||||||
|
//
|
||||||
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||||
|
// and disabled options for all buttons
|
||||||
|
|
||||||
|
// scss-docs-start btn-variant-mixin
|
||||||
|
@mixin button-variant(
|
||||||
|
$background,
|
||||||
|
$border,
|
||||||
|
$color: color-contrast($background),
|
||||||
|
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
||||||
|
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
||||||
|
$hover-color: color-contrast($hover-background),
|
||||||
|
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
||||||
|
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
||||||
|
$active-color: color-contrast($active-background),
|
||||||
|
$disabled-background: $background,
|
||||||
|
$disabled-border: $border,
|
||||||
|
$disabled-color: color-contrast($disabled-background)
|
||||||
|
) {
|
||||||
|
--#{$prefix}btn-color: #{$color};
|
||||||
|
--#{$prefix}btn-bg: #{$background};
|
||||||
|
--#{$prefix}btn-border-color: #{$border};
|
||||||
|
--#{$prefix}btn-hover-color: #{$hover-color};
|
||||||
|
--#{$prefix}btn-hover-bg: #{$hover-background};
|
||||||
|
--#{$prefix}btn-hover-border-color: #{$hover-border};
|
||||||
|
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
|
||||||
|
--#{$prefix}btn-active-color: #{$active-color};
|
||||||
|
--#{$prefix}btn-active-bg: #{$active-background};
|
||||||
|
--#{$prefix}btn-active-border-color: #{$active-border};
|
||||||
|
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
||||||
|
--#{$prefix}btn-disabled-color: #{$disabled-color};
|
||||||
|
--#{$prefix}btn-disabled-bg: #{$disabled-background};
|
||||||
|
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
|
||||||
|
}
|
||||||
|
// scss-docs-end btn-variant-mixin
|
||||||
|
|
||||||
|
// scss-docs-start btn-outline-variant-mixin
|
||||||
|
@mixin button-outline-variant(
|
||||||
|
$color,
|
||||||
|
$color-hover: color-contrast($color),
|
||||||
|
$active-background: $color,
|
||||||
|
$active-border: $color,
|
||||||
|
$active-color: color-contrast($active-background)
|
||||||
|
) {
|
||||||
|
--#{$prefix}btn-color: #{$color};
|
||||||
|
--#{$prefix}btn-border-color: #{$color};
|
||||||
|
--#{$prefix}btn-hover-color: #{$color-hover};
|
||||||
|
--#{$prefix}btn-hover-bg: #{$active-background};
|
||||||
|
--#{$prefix}btn-hover-border-color: #{$active-border};
|
||||||
|
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
|
||||||
|
--#{$prefix}btn-active-color: #{$active-color};
|
||||||
|
--#{$prefix}btn-active-bg: #{$active-background};
|
||||||
|
--#{$prefix}btn-active-border-color: #{$active-border};
|
||||||
|
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
||||||
|
--#{$prefix}btn-disabled-color: #{$color};
|
||||||
|
--#{$prefix}btn-disabled-bg: transparent;
|
||||||
|
--#{$prefix}btn-disabled-border-color: #{$color};
|
||||||
|
--#{$prefix}gradient: none;
|
||||||
|
}
|
||||||
|
// scss-docs-end btn-outline-variant-mixin
|
||||||
|
|
||||||
|
// scss-docs-start btn-size-mixin
|
||||||
|
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||||
|
--#{$prefix}btn-padding-y: #{$padding-y};
|
||||||
|
--#{$prefix}btn-padding-x: #{$padding-x};
|
||||||
|
@include rfs($font-size, --#{$prefix}btn-font-size);
|
||||||
|
--#{$prefix}btn-border-radius: #{$border-radius};
|
||||||
|
}
|
||||||
|
// scss-docs-end btn-size-mixin
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
@ -80,7 +86,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-subtitle {
|
.card-subtitle {
|
||||||
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
|
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y));
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
color: var(--#{$prefix}card-subtitle-color);
|
color: var(--#{$prefix}card-subtitle-color);
|
||||||
}
|
}
|
||||||
@ -132,9 +138,9 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
.card-header-tabs {
|
.card-header-tabs {
|
||||||
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
|
||||||
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
|
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
|
||||||
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
@ -144,8 +150,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-header-pills {
|
.card-header-pills {
|
||||||
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
|
||||||
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card image
|
// Card image
|
||||||
|
|||||||
@ -1,3 +1,11 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/clearfix" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Notes on the classes:
|
// Notes on the classes:
|
||||||
//
|
//
|
||||||
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
||||||
|
|||||||
@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
|
||||||
// Transparent background and border properties included for button version.
|
// Transparent background and border properties included for button version.
|
||||||
// iOS requires the button element instead of an anchor tag.
|
// iOS requires the button element instead of an anchor tag.
|
||||||
// If you want the anchor version, it requires `href="#"`.
|
// If you want the anchor version, it requires `href="#"`.
|
||||||
|
|||||||
282
scss/_colors.scss
Normal file
282
scss/_colors.scss
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
$blue: #0d6efd !default;
|
||||||
|
$blue-100: #cfe2ff !default;
|
||||||
|
$blue-200: #9ec5fe !default;
|
||||||
|
$blue-300: #6ea8fe !default;
|
||||||
|
$blue-400: #3d8bfd !default;
|
||||||
|
$blue-500: $blue !default;
|
||||||
|
$blue-600: #0a58ca !default;
|
||||||
|
$blue-700: #084298 !default;
|
||||||
|
$blue-800: #052c65 !default;
|
||||||
|
$blue-900: #031633 !default;
|
||||||
|
|
||||||
|
$indigo: #6610f2 !default;
|
||||||
|
$indigo-100: #e0cffc !default;
|
||||||
|
$indigo-200: #c29ffa !default;
|
||||||
|
$indigo-300: #a370f7 !default;
|
||||||
|
$indigo-400: #8540f5 !default;
|
||||||
|
$indigo-500: $indigo !default;
|
||||||
|
$indigo-600: #520dc2 !default;
|
||||||
|
$indigo-700: #3d0a91 !default;
|
||||||
|
$indigo-800: #290661 !default;
|
||||||
|
$indigo-900: #140330 !default;
|
||||||
|
|
||||||
|
$purple: #6f42c1 !default;
|
||||||
|
$purple-100: #e2d9f3 !default;
|
||||||
|
$purple-200: #c5b3e6 !default;
|
||||||
|
$purple-300: #a98eda !default;
|
||||||
|
$purple-400: #8c68cd !default;
|
||||||
|
$purple-500: $purple !default;
|
||||||
|
$purple-600: #59359a !default;
|
||||||
|
$purple-700: #432874 !default;
|
||||||
|
$purple-800: #2c1a4d !default;
|
||||||
|
$purple-900: #160d27 !default;
|
||||||
|
|
||||||
|
$pink: #d63384 !default;
|
||||||
|
$pink-100: #f7d6e6 !default;
|
||||||
|
$pink-200: #efadce !default;
|
||||||
|
$pink-300: #e685b5 !default;
|
||||||
|
$pink-400: #de5c9d !default;
|
||||||
|
$pink-500: $pink !default;
|
||||||
|
$pink-600: #ab296a !default;
|
||||||
|
$pink-700: #801f4f !default;
|
||||||
|
$pink-800: #561435 !default;
|
||||||
|
$pink-900: #2b0a1a !default;
|
||||||
|
|
||||||
|
$red: #dc3545 !default;
|
||||||
|
$red-100: #f8d7da !default;
|
||||||
|
$red-200: #f1aeb5 !default;
|
||||||
|
$red-300: #ea868f !default;
|
||||||
|
$red-400: #e35d6a !default;
|
||||||
|
$red-500: $red !default;
|
||||||
|
$red-600: #b02a37 !default;
|
||||||
|
$red-700: #842029 !default;
|
||||||
|
$red-800: #58151c !default;
|
||||||
|
$red-900: #2c0b0e !default;
|
||||||
|
|
||||||
|
$orange: #fd7e14 !default;
|
||||||
|
$orange-100: #ffe5d0 !default;
|
||||||
|
$orange-200: #fecba1 !default;
|
||||||
|
$orange-300: #feb272 !default;
|
||||||
|
$orange-400: #fd9843 !default;
|
||||||
|
$orange-500: $orange !default;
|
||||||
|
$orange-600: #ca6510 !default;
|
||||||
|
$orange-700: #984c0c !default;
|
||||||
|
$orange-800: #653208 !default;
|
||||||
|
$orange-900: #331904 !default;
|
||||||
|
|
||||||
|
$yellow: #ffc107 !default;
|
||||||
|
$yellow-100: #fff3cd !default;
|
||||||
|
$yellow-200: #ffe69c !default;
|
||||||
|
$yellow-300: #ffda6a !default;
|
||||||
|
$yellow-400: #ffcd39 !default;
|
||||||
|
$yellow-500: $yellow !default;
|
||||||
|
$yellow-600: #cc9a06 !default;
|
||||||
|
$yellow-700: #997404 !default;
|
||||||
|
$yellow-800: #664d03 !default;
|
||||||
|
$yellow-900: #332701 !default;
|
||||||
|
|
||||||
|
$green: #198754 !default;
|
||||||
|
$green-100: #d1e7dd !default;
|
||||||
|
$green-200: #a3cfbb !default;
|
||||||
|
$green-300: #75b798 !default;
|
||||||
|
$green-400: #479f76 !default;
|
||||||
|
$green-500: $green !default;
|
||||||
|
$green-600: #146c43 !default;
|
||||||
|
$green-700: #0f5132 !default;
|
||||||
|
$green-800: #0a3622 !default;
|
||||||
|
$green-900: #051b11 !default;
|
||||||
|
|
||||||
|
$teal: #20c997 !default;
|
||||||
|
$teal-100: #d2f4ea !default;
|
||||||
|
$teal-200: #a6e9d5 !default;
|
||||||
|
$teal-300: #79dfc1 !default;
|
||||||
|
$teal-400: #4dd4ac !default;
|
||||||
|
$teal-500: $teal !default;
|
||||||
|
$teal-600: #1aa179 !default;
|
||||||
|
$teal-700: #13795b !default;
|
||||||
|
$teal-800: #0d503c !default;
|
||||||
|
$teal-900: #06281e !default;
|
||||||
|
|
||||||
|
$cyan: #0dcaf0 !default;
|
||||||
|
$cyan-100: #cff4fc !default;
|
||||||
|
$cyan-200: #9eeaf9 !default;
|
||||||
|
$cyan-300: #6edff6 !default;
|
||||||
|
$cyan-400: #3dd5f3 !default;
|
||||||
|
$cyan-500: $cyan !default;
|
||||||
|
$cyan-600: #0aa2c0 !default;
|
||||||
|
$cyan-700: #087990 !default;
|
||||||
|
$cyan-800: #055160 !default;
|
||||||
|
$cyan-900: #032830 !default;
|
||||||
|
|
||||||
|
$gray: #adb5bd !default;
|
||||||
|
$gray-100: #f8f9fa !default;
|
||||||
|
$gray-200: #e9ecef !default;
|
||||||
|
$gray-300: #dee2e6 !default;
|
||||||
|
$gray-400: #ced4da !default;
|
||||||
|
$gray-500: $gray !default;
|
||||||
|
$gray-600: #6c757d !default;
|
||||||
|
$gray-700: #495057 !default;
|
||||||
|
$gray-800: #343a40 !default;
|
||||||
|
$gray-900: #212529 !default;
|
||||||
|
|
||||||
|
$white: #fff !default;
|
||||||
|
$black: #000 !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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$grays: (
|
||||||
|
"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
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$colors: (
|
||||||
|
"blue": $blue,
|
||||||
|
"indigo": $indigo,
|
||||||
|
"purple": $purple,
|
||||||
|
"pink": $pink,
|
||||||
|
"red": $red,
|
||||||
|
"orange": $orange,
|
||||||
|
"yellow": $yellow,
|
||||||
|
"green": $green,
|
||||||
|
"teal": $teal,
|
||||||
|
"cyan": $cyan
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$all-colors: (
|
||||||
|
"grays": $grays,
|
||||||
|
"blues": $blues,
|
||||||
|
"indigos": $indigos,
|
||||||
|
"purples": $purples,
|
||||||
|
"pinks": $pinks,
|
||||||
|
"reds": $reds,
|
||||||
|
"oranges": $oranges,
|
||||||
|
"yellows": $yellows,
|
||||||
|
"greens": $greens,
|
||||||
|
"teals": $teals,
|
||||||
|
"cyans": $cyans
|
||||||
|
) !default;
|
||||||
83
scss/_config.scss
Normal file
83
scss/_config.scss
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
// Configuration
|
||||||
|
//
|
||||||
|
// Variables and settings not related to theme, components, and more go here. It does include layout.
|
||||||
|
|
||||||
|
$prefix: bs- !default;
|
||||||
|
|
||||||
|
$enable-caret: true !default;
|
||||||
|
$enable-rounded: true !default;
|
||||||
|
$enable-shadows: false !default;
|
||||||
|
$enable-gradients: false !default;
|
||||||
|
$enable-transitions: true !default;
|
||||||
|
$enable-reduced-motion: true !default;
|
||||||
|
$enable-smooth-scroll: true !default;
|
||||||
|
$enable-grid-classes: true !default;
|
||||||
|
$enable-container-classes: true !default;
|
||||||
|
$enable-cssgrid: false !default;
|
||||||
|
$enable-button-pointers: true !default;
|
||||||
|
$enable-rfs: true !default;
|
||||||
|
$enable-validation-icons: true !default;
|
||||||
|
$enable-negative-margins: false !default;
|
||||||
|
$enable-deprecation-messages: true !default;
|
||||||
|
$enable-important-utilities: true !default;
|
||||||
|
|
||||||
|
$enable-dark-mode: true !default;
|
||||||
|
$color-mode-type: data !default; // `data` or `media-query`
|
||||||
|
|
||||||
|
// more to come here…
|
||||||
|
|
||||||
|
$color-mode-type: "media-query" !default;
|
||||||
|
$color-contrast-dark: #000 !default;
|
||||||
|
$color-contrast-light: #fff !default;
|
||||||
|
$min-contrast-ratio: 4.5 !default;
|
||||||
|
|
||||||
|
// Grid breakpoints
|
||||||
|
//
|
||||||
|
// Define the minimum dimensions at which your layout will change,
|
||||||
|
// adapting to different screen sizes, for use in media queries.
|
||||||
|
|
||||||
|
// scss-docs-start grid-breakpoints
|
||||||
|
$grid-breakpoints: (
|
||||||
|
xs: 0,
|
||||||
|
sm: 576px,
|
||||||
|
md: 768px,
|
||||||
|
lg: 992px,
|
||||||
|
xl: 1200px,
|
||||||
|
xxl: 1400px
|
||||||
|
) !default;
|
||||||
|
// scss-docs-end grid-breakpoints
|
||||||
|
|
||||||
|
// Grid columns
|
||||||
|
//
|
||||||
|
// Set the number of columns and specify the width of the gutters.
|
||||||
|
|
||||||
|
$grid-columns: 12 !default;
|
||||||
|
$grid-gutter-width: 1.5rem !default;
|
||||||
|
$grid-row-columns: 6 !default;
|
||||||
|
|
||||||
|
// Grid containers
|
||||||
|
//
|
||||||
|
// Define the maximum width of `.container` for different screen sizes.
|
||||||
|
|
||||||
|
// scss-docs-start container-max-widths
|
||||||
|
$container-max-widths: (
|
||||||
|
sm: 540px,
|
||||||
|
md: 720px,
|
||||||
|
lg: 960px,
|
||||||
|
xl: 1140px,
|
||||||
|
xxl: 1320px
|
||||||
|
) !default;
|
||||||
|
// scss-docs-end container-max-widths
|
||||||
|
|
||||||
|
$container-padding-x: $grid-gutter-width !default;
|
||||||
|
|
||||||
|
$utilities: () !default;
|
||||||
|
|
||||||
|
// Characters which are escaped by the escape-svg function
|
||||||
|
$escaped-characters: (
|
||||||
|
("<", "%3c"),
|
||||||
|
(">", "%3e"),
|
||||||
|
("#", "%23"),
|
||||||
|
("(", "%28"),
|
||||||
|
(")", "%29"),
|
||||||
|
) !default;
|
||||||
@ -1,3 +1,14 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/caret" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/caret" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
// The dropdown wrapper (`<div>`)
|
// The dropdown wrapper (`<div>`)
|
||||||
.dropup,
|
.dropup,
|
||||||
.dropend,
|
.dropend,
|
||||||
@ -85,7 +96,7 @@
|
|||||||
// We deliberately hardcode the `bs-` prefix because we check
|
// We deliberately hardcode the `bs-` prefix because we check
|
||||||
// this custom property in JS to determine Popper's positioning
|
// this custom property in JS to determine Popper's positioning
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
@import "forms/labels";
|
|
||||||
@import "forms/form-text";
|
|
||||||
@import "forms/form-control";
|
|
||||||
@import "forms/form-select";
|
|
||||||
@import "forms/form-check";
|
|
||||||
@import "forms/form-range";
|
|
||||||
@import "forms/floating-labels";
|
|
||||||
@import "forms/input-group";
|
|
||||||
@import "forms/validation";
|
|
||||||
@ -1,3 +1,12 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "sass:list";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "sass:math";
|
||||||
|
@use "sass:meta";
|
||||||
|
@use "sass:string";
|
||||||
|
// @use "variables" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
|
||||||
// Bootstrap functions
|
// Bootstrap functions
|
||||||
//
|
//
|
||||||
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
||||||
@ -8,7 +17,7 @@
|
|||||||
$prev-key: null;
|
$prev-key: null;
|
||||||
$prev-num: null;
|
$prev-num: null;
|
||||||
@each $key, $num in $map {
|
@each $key, $num in $map {
|
||||||
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
|
@if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
|
||||||
// Do nothing
|
// Do nothing
|
||||||
} @else if not comparable($prev-num, $num) {
|
} @else if not comparable($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}' !";
|
@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}' !";
|
||||||
@ -22,10 +31,10 @@
|
|||||||
|
|
||||||
// Starts at zero
|
// Starts at zero
|
||||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
// 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: "$breakpoints") {
|
||||||
@if length($map) > 0 {
|
@if list.length($map) > 0 {
|
||||||
$values: map-values($map);
|
$values: map.values($map);
|
||||||
$first-value: nth($values, 1);
|
$first-value: list.nth($values, 1);
|
||||||
@if $first-value != 0 {
|
@if $first-value != 0 {
|
||||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||||
}
|
}
|
||||||
@ -34,7 +43,7 @@
|
|||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
@function to-rgb($value) {
|
@function to-rgb($value) {
|
||||||
@return red($value), green($value), blue($value);
|
@return color.channel($value, "red"), color.channel($value, "green"), color.channel($value, "blue");
|
||||||
}
|
}
|
||||||
|
|
||||||
// stylelint-disable scss/dollar-variable-pattern
|
// stylelint-disable scss/dollar-variable-pattern
|
||||||
@ -55,10 +64,10 @@
|
|||||||
// allow to pass the $key and $value of the map as an function argument
|
// allow to pass the $key and $value of the map as an function argument
|
||||||
$_args: ();
|
$_args: ();
|
||||||
@each $arg in $args {
|
@each $arg in $args {
|
||||||
$_args: 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: call(get-function($func), $_args...)));
|
$_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $_map;
|
@return $_map;
|
||||||
@ -68,7 +77,7 @@
|
|||||||
@function varify($list) {
|
@function varify($list) {
|
||||||
$result: null;
|
$result: null;
|
||||||
@each $entry in $list {
|
@each $entry in $list {
|
||||||
$result: append($result, var(--#{$prefix}#{$entry}), space);
|
$result: list.append($result, var(--#{$prefix}#{$entry}), space);
|
||||||
}
|
}
|
||||||
@return $result;
|
@return $result;
|
||||||
}
|
}
|
||||||
@ -79,7 +88,7 @@
|
|||||||
$result: ();
|
$result: ();
|
||||||
@each $key, $value in $map {
|
@each $key, $value in $map {
|
||||||
@if $key != 0 {
|
@if $key != 0 {
|
||||||
$result: map-merge($result, ("n" + $key: (-$value)));
|
$result: map.merge($result, ("n" + $key: (-$value)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@return $result;
|
@return $result;
|
||||||
@ -89,8 +98,8 @@
|
|||||||
@function map-get-multiple($map, $values) {
|
@function map-get-multiple($map, $values) {
|
||||||
$result: ();
|
$result: ();
|
||||||
@each $key, $value in $map {
|
@each $key, $value in $map {
|
||||||
@if (index($values, $key) != null) {
|
@if (list.index($values, $key) != null) {
|
||||||
$result: map-merge($result, ($key: $value));
|
$result: map.merge($result, ($key: $value));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@return $result;
|
@return $result;
|
||||||
@ -101,7 +110,7 @@
|
|||||||
$merged-maps: ();
|
$merged-maps: ();
|
||||||
|
|
||||||
@each $map in $maps {
|
@each $map in $maps {
|
||||||
$merged-maps: map-merge($merged-maps, $map);
|
$merged-maps: map.merge($merged-maps, $map);
|
||||||
}
|
}
|
||||||
@return $merged-maps;
|
@return $merged-maps;
|
||||||
}
|
}
|
||||||
@ -115,10 +124,10 @@
|
|||||||
// @param {String} $replace ('') - New value
|
// @param {String} $replace ('') - New value
|
||||||
// @return {String} - Updated string
|
// @return {String} - Updated string
|
||||||
@function str-replace($string, $search, $replace: "") {
|
@function str-replace($string, $search, $replace: "") {
|
||||||
$index: str-index($string, $search);
|
$index: string.index($string, $search);
|
||||||
|
|
||||||
@if $index {
|
@if $index {
|
||||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $string;
|
@return $string;
|
||||||
@ -129,11 +138,11 @@
|
|||||||
// Requires the use of quotes around data URIs.
|
// Requires the use of quotes around data URIs.
|
||||||
|
|
||||||
@function escape-svg($string) {
|
@function escape-svg($string) {
|
||||||
@if str-index($string, "data:image/svg+xml") {
|
@if string.index($string, "data:image/svg+xml") {
|
||||||
@each $char, $encoded in $escaped-characters {
|
@each $char, $encoded in $escaped-characters {
|
||||||
// Do not escape the url brackets
|
// Do not escape the url brackets
|
||||||
@if str-index($string, "url(") == 1 {
|
@if string.index($string, "url(") == 1 {
|
||||||
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
$string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
|
||||||
} @else {
|
} @else {
|
||||||
$string: str-replace($string, $char, $encoded);
|
$string: str-replace($string, $char, $encoded);
|
||||||
}
|
}
|
||||||
@ -151,7 +160,7 @@
|
|||||||
$_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: .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;
|
||||||
|
|
||||||
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
@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;
|
$foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
|
||||||
$max-ratio: 0;
|
$max-ratio: 0;
|
||||||
$max-ratio-color: null;
|
$max-ratio-color: null;
|
||||||
|
|
||||||
@ -174,7 +183,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
|||||||
$l1: luminance($background);
|
$l1: luminance($background);
|
||||||
$l2: luminance(opaque($background, $foreground));
|
$l2: luminance(opaque($background, $foreground));
|
||||||
|
|
||||||
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
|
@return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Return WCAG2.2 relative luminance
|
// Return WCAG2.2 relative luminance
|
||||||
@ -182,121 +191,38 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
|||||||
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
|
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
|
||||||
@function luminance($color) {
|
@function luminance($color) {
|
||||||
$rgb: (
|
$rgb: (
|
||||||
"r": red($color),
|
"r": color.channel($color, "red"),
|
||||||
"g": green($color),
|
"g": color.channel($color, "green"),
|
||||||
"b": blue($color)
|
"b": color.channel($color, "blue")
|
||||||
);
|
);
|
||||||
|
|
||||||
@each $name, $value in $rgb {
|
@each $name, $value in $rgb {
|
||||||
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
|
$value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), list.nth($_luminance-list, math.round($value + 1)));
|
||||||
$rgb: map-merge($rgb, ($name: $value));
|
$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") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Return opaque color
|
// Return opaque color
|
||||||
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
||||||
@function opaque($background, $foreground) {
|
@function opaque($background, $foreground) {
|
||||||
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
|
@return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-docs-start color-functions
|
// scss-docs-start color-functions
|
||||||
// Tint a color: mix a color with white
|
// // Tint a color: mix a color with white
|
||||||
@function tint-color($color, $weight) {
|
@function tint-color($color, $weight) {
|
||||||
@return mix(white, $color, $weight);
|
@return color.mix(white, $color, $weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Shade a color: mix a color with black
|
// // Shade a color: mix a color with black
|
||||||
@function shade-color($color, $weight) {
|
@function shade-color($color, $weight) {
|
||||||
@return mix(black, $color, $weight);
|
@return color.mix(black, $color, $weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Shade the color if the weight is positive, else tint it
|
// // Shade the color if the weight is positive, else tint it
|
||||||
@function shift-color($color, $weight) {
|
@function shift-color($color, $weight) {
|
||||||
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
||||||
}
|
}
|
||||||
// scss-docs-end color-functions
|
// scss-docs-end color-functions
|
||||||
|
|
||||||
// Return valid calc
|
|
||||||
@function add($value1, $value2, $return-calc: true) {
|
|
||||||
@if $value1 == null {
|
|
||||||
@return $value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $value2 == null {
|
|
||||||
@return $value1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
|
||||||
@return $value1 + $value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@function subtract($value1, $value2, $return-calc: true) {
|
|
||||||
@if $value1 == null and $value2 == null {
|
|
||||||
@return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $value1 == null {
|
|
||||||
@return -$value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $value2 == null {
|
|
||||||
@return $value1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
|
||||||
@return $value1 - $value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if type-of($value2) != number {
|
|
||||||
$value2: unquote("(") + $value2 + unquote(")");
|
|
||||||
}
|
|
||||||
|
|
||||||
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@function divide($dividend, $divisor, $precision: 10) {
|
|
||||||
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
|
||||||
$dividend: abs($dividend);
|
|
||||||
$divisor: abs($divisor);
|
|
||||||
@if $dividend == 0 {
|
|
||||||
@return 0;
|
|
||||||
}
|
|
||||||
@if $divisor == 0 {
|
|
||||||
@error "Cannot divide by 0";
|
|
||||||
}
|
|
||||||
$remainder: $dividend;
|
|
||||||
$result: 0;
|
|
||||||
$factor: 10;
|
|
||||||
@while ($remainder > 0 and $precision >= 0) {
|
|
||||||
$quotient: 0;
|
|
||||||
@while ($remainder >= $divisor) {
|
|
||||||
$remainder: $remainder - $divisor;
|
|
||||||
$quotient: $quotient + 1;
|
|
||||||
}
|
|
||||||
$result: $result * 10 + $quotient;
|
|
||||||
$factor: $factor * .1;
|
|
||||||
$remainder: $remainder * 10;
|
|
||||||
$precision: $precision - 1;
|
|
||||||
@if ($precision < 0 and $remainder >= $divisor * 5) {
|
|
||||||
$result: $result + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$result: $result * $factor * $sign;
|
|
||||||
$dividend-unit: unit($dividend);
|
|
||||||
$divisor-unit: unit($divisor);
|
|
||||||
$unit-map: (
|
|
||||||
"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;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,39 +0,0 @@
|
|||||||
// Row
|
|
||||||
//
|
|
||||||
// Rows contain your columns.
|
|
||||||
|
|
||||||
:root {
|
|
||||||
@each $name, $value in $grid-breakpoints {
|
|
||||||
--#{$prefix}breakpoint-#{$name}: #{$value};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
|
||||||
.row {
|
|
||||||
@include make-row();
|
|
||||||
|
|
||||||
> * {
|
|
||||||
@include make-col-ready();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $enable-cssgrid {
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
|
|
||||||
grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
|
|
||||||
gap: var(--#{$prefix}gap, #{$grid-gutter-width});
|
|
||||||
|
|
||||||
@include make-cssgrid();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Columns
|
|
||||||
//
|
|
||||||
// Common styles for small and large grid columns
|
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
|
||||||
@include make-grid-columns();
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
@import "helpers/clearfix";
|
|
||||||
@import "helpers/color-bg";
|
|
||||||
@import "helpers/colored-links";
|
|
||||||
@import "helpers/focus-ring";
|
|
||||||
@import "helpers/icon-link";
|
|
||||||
@import "helpers/ratio";
|
|
||||||
@import "helpers/position";
|
|
||||||
@import "helpers/stacks";
|
|
||||||
@import "helpers/visually-hidden";
|
|
||||||
@import "helpers/stretched-link";
|
|
||||||
@import "helpers/text-truncation";
|
|
||||||
@import "helpers/vr";
|
|
||||||
@ -1,3 +1,11 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Easily usable on <ul>, <ol>, or <div>.
|
// Easily usable on <ul>, <ol>, or <div>.
|
||||||
@ -84,7 +92,7 @@
|
|||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
|
||||||
border-top-width: var(--#{$prefix}list-group-border-width);
|
border-top-width: var(--#{$prefix}list-group-border-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -121,7 +129,7 @@
|
|||||||
//
|
//
|
||||||
// Change the layout of list group items from vertical (default) to horizontal.
|
// Change the layout of list group items from vertical (default) to horizontal.
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
@ -148,7 +156,7 @@
|
|||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
|
||||||
border-left-width: var(--#{$prefix}list-group-border-width);
|
border-left-width: var(--#{$prefix}list-group-border-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -182,7 +190,7 @@
|
|||||||
// Add modifier classes to change text and background color on individual items.
|
// Add modifier classes to change text and background color on individual items.
|
||||||
// Organizationally, this must come after the `:hover` states.
|
// Organizationally, this must come after the `:hover` states.
|
||||||
|
|
||||||
@each $state in map-keys($theme-colors) {
|
@each $state in map.keys($theme-colors) {
|
||||||
.list-group-item-#{$state} {
|
.list-group-item-#{$state} {
|
||||||
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||||
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
||||||
|
|||||||
316
scss/_maps.scss
316
scss/_maps.scss
@ -1,174 +1,180 @@
|
|||||||
// Re-assigned maps
|
// @use "sass:map";
|
||||||
//
|
// @use "colors" as *;
|
||||||
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
|
// @use "functions" as *;
|
||||||
|
// @use "config" as *;
|
||||||
|
// @use "variables" as *;
|
||||||
|
|
||||||
// scss-docs-start theme-colors-rgb
|
// // Re-assigned maps
|
||||||
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
|
// //
|
||||||
// scss-docs-end theme-colors-rgb
|
// // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
|
||||||
|
|
||||||
// scss-docs-start theme-text-map
|
// // scss-docs-start theme-colors-rgb
|
||||||
$theme-colors-text: (
|
// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
|
||||||
"primary": $primary-text-emphasis,
|
// // scss-docs-end theme-colors-rgb
|
||||||
"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;
|
|
||||||
// scss-docs-end theme-text-map
|
|
||||||
|
|
||||||
// scss-docs-start theme-bg-subtle-map
|
// // scss-docs-start theme-text-map
|
||||||
$theme-colors-bg-subtle: (
|
// $theme-colors-text: (
|
||||||
"primary": $primary-bg-subtle,
|
// "primary": $primary-text-emphasis,
|
||||||
"secondary": $secondary-bg-subtle,
|
// "secondary": $secondary-text-emphasis,
|
||||||
"success": $success-bg-subtle,
|
// "success": $success-text-emphasis,
|
||||||
"info": $info-bg-subtle,
|
// "info": $info-text-emphasis,
|
||||||
"warning": $warning-bg-subtle,
|
// "warning": $warning-text-emphasis,
|
||||||
"danger": $danger-bg-subtle,
|
// "danger": $danger-text-emphasis,
|
||||||
"light": $light-bg-subtle,
|
// "light": $light-text-emphasis,
|
||||||
"dark": $dark-bg-subtle,
|
// "dark": $dark-text-emphasis,
|
||||||
) !default;
|
// ) !default;
|
||||||
// scss-docs-end theme-bg-subtle-map
|
// // scss-docs-end theme-text-map
|
||||||
|
|
||||||
// scss-docs-start theme-border-subtle-map
|
// // scss-docs-start theme-bg-subtle-map
|
||||||
$theme-colors-border-subtle: (
|
// $theme-colors-bg-subtle: (
|
||||||
"primary": $primary-border-subtle,
|
// "primary": $primary-bg-subtle,
|
||||||
"secondary": $secondary-border-subtle,
|
// "secondary": $secondary-bg-subtle,
|
||||||
"success": $success-border-subtle,
|
// "success": $success-bg-subtle,
|
||||||
"info": $info-border-subtle,
|
// "info": $info-bg-subtle,
|
||||||
"warning": $warning-border-subtle,
|
// "warning": $warning-bg-subtle,
|
||||||
"danger": $danger-border-subtle,
|
// "danger": $danger-bg-subtle,
|
||||||
"light": $light-border-subtle,
|
// "light": $light-bg-subtle,
|
||||||
"dark": $dark-border-subtle,
|
// "dark": $dark-bg-subtle,
|
||||||
) !default;
|
// ) !default;
|
||||||
// scss-docs-end theme-border-subtle-map
|
// // scss-docs-end theme-bg-subtle-map
|
||||||
|
|
||||||
$theme-colors-text-dark: null !default;
|
// // scss-docs-start theme-border-subtle-map
|
||||||
$theme-colors-bg-subtle-dark: null !default;
|
// $theme-colors-border-subtle: (
|
||||||
$theme-colors-border-subtle-dark: null !default;
|
// "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;
|
||||||
|
// // scss-docs-end theme-border-subtle-map
|
||||||
|
|
||||||
@if $enable-dark-mode {
|
// $theme-colors-text-dark: null !default;
|
||||||
// scss-docs-start theme-text-dark-map
|
// $theme-colors-bg-subtle-dark: null !default;
|
||||||
$theme-colors-text-dark: (
|
// $theme-colors-border-subtle-dark: null !default;
|
||||||
"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;
|
|
||||||
// scss-docs-end theme-text-dark-map
|
|
||||||
|
|
||||||
// scss-docs-start theme-bg-subtle-dark-map
|
// @if $enable-dark-mode {
|
||||||
$theme-colors-bg-subtle-dark: (
|
// // scss-docs-start theme-text-dark-map
|
||||||
"primary": $primary-bg-subtle-dark,
|
// $theme-colors-text-dark: (
|
||||||
"secondary": $secondary-bg-subtle-dark,
|
// "primary": $primary-text-emphasis-dark,
|
||||||
"success": $success-bg-subtle-dark,
|
// "secondary": $secondary-text-emphasis-dark,
|
||||||
"info": $info-bg-subtle-dark,
|
// "success": $success-text-emphasis-dark,
|
||||||
"warning": $warning-bg-subtle-dark,
|
// "info": $info-text-emphasis-dark,
|
||||||
"danger": $danger-bg-subtle-dark,
|
// "warning": $warning-text-emphasis-dark,
|
||||||
"light": $light-bg-subtle-dark,
|
// "danger": $danger-text-emphasis-dark,
|
||||||
"dark": $dark-bg-subtle-dark,
|
// "light": $light-text-emphasis-dark,
|
||||||
) !default;
|
// "dark": $dark-text-emphasis-dark,
|
||||||
// scss-docs-end theme-bg-subtle-dark-map
|
// ) !default;
|
||||||
|
// // scss-docs-end theme-text-dark-map
|
||||||
|
|
||||||
// scss-docs-start theme-border-subtle-dark-map
|
// // scss-docs-start theme-bg-subtle-dark-map
|
||||||
$theme-colors-border-subtle-dark: (
|
// $theme-colors-bg-subtle-dark: (
|
||||||
"primary": $primary-border-subtle-dark,
|
// "primary": $primary-bg-subtle-dark,
|
||||||
"secondary": $secondary-border-subtle-dark,
|
// "secondary": $secondary-bg-subtle-dark,
|
||||||
"success": $success-border-subtle-dark,
|
// "success": $success-bg-subtle-dark,
|
||||||
"info": $info-border-subtle-dark,
|
// "info": $info-bg-subtle-dark,
|
||||||
"warning": $warning-border-subtle-dark,
|
// "warning": $warning-bg-subtle-dark,
|
||||||
"danger": $danger-border-subtle-dark,
|
// "danger": $danger-bg-subtle-dark,
|
||||||
"light": $light-border-subtle-dark,
|
// "light": $light-bg-subtle-dark,
|
||||||
"dark": $dark-border-subtle-dark,
|
// "dark": $dark-bg-subtle-dark,
|
||||||
) !default;
|
// ) !default;
|
||||||
// scss-docs-end theme-border-subtle-dark-map
|
// // scss-docs-end theme-bg-subtle-dark-map
|
||||||
}
|
|
||||||
|
|
||||||
// Utilities maps
|
// // scss-docs-start theme-border-subtle-dark-map
|
||||||
//
|
// $theme-colors-border-subtle-dark: (
|
||||||
// Extends the default `$theme-colors` maps to help create our utilities.
|
// "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;
|
||||||
|
// // scss-docs-end theme-border-subtle-dark-map
|
||||||
|
// }
|
||||||
|
|
||||||
// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
|
// // Utilities maps
|
||||||
// scss-docs-start utilities-colors
|
// //
|
||||||
$utilities-colors: $theme-colors-rgb !default;
|
// // Extends the default `$theme-colors` maps to help create our utilities.
|
||||||
// scss-docs-end utilities-colors
|
|
||||||
|
|
||||||
// scss-docs-start utilities-text-colors
|
// // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
|
||||||
$utilities-text: map-merge(
|
// // scss-docs-start utilities-colors
|
||||||
$utilities-colors,
|
// $utilities-colors: $theme-colors-rgb !default;
|
||||||
(
|
// // scss-docs-end 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: (
|
// // scss-docs-start utilities-text-colors
|
||||||
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
|
// $utilities-text: map.merge(
|
||||||
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
|
// $utilities-colors,
|
||||||
"success-emphasis": var(--#{$prefix}success-text-emphasis),
|
// (
|
||||||
"info-emphasis": var(--#{$prefix}info-text-emphasis),
|
// "black": to-rgb($black),
|
||||||
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
|
// "white": to-rgb($white),
|
||||||
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
|
// "body": to-rgb($body-color)
|
||||||
"light-emphasis": var(--#{$prefix}light-text-emphasis),
|
// )
|
||||||
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
|
// ) !default;
|
||||||
) !default;
|
// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
|
||||||
// scss-docs-end utilities-text-colors
|
|
||||||
|
|
||||||
// scss-docs-start utilities-bg-colors
|
// $utilities-text-emphasis-colors: (
|
||||||
$utilities-bg: map-merge(
|
// "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
|
||||||
$utilities-colors,
|
// "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
|
||||||
(
|
// "success-emphasis": var(--#{$prefix}success-text-emphasis),
|
||||||
"black": to-rgb($black),
|
// "info-emphasis": var(--#{$prefix}info-text-emphasis),
|
||||||
"white": to-rgb($white),
|
// "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
|
||||||
"body": to-rgb($body-bg)
|
// "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
|
||||||
)
|
// "light-emphasis": var(--#{$prefix}light-text-emphasis),
|
||||||
) !default;
|
// "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
|
||||||
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
|
// ) !default;
|
||||||
|
// // scss-docs-end utilities-text-colors
|
||||||
|
|
||||||
$utilities-bg-subtle: (
|
// // scss-docs-start utilities-bg-colors
|
||||||
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
|
// $utilities-bg: map.merge(
|
||||||
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
|
// $utilities-colors,
|
||||||
"success-subtle": var(--#{$prefix}success-bg-subtle),
|
// (
|
||||||
"info-subtle": var(--#{$prefix}info-bg-subtle),
|
// "black": to-rgb($black),
|
||||||
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
|
// "white": to-rgb($white),
|
||||||
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
|
// "body": to-rgb($body-bg)
|
||||||
"light-subtle": var(--#{$prefix}light-bg-subtle),
|
// )
|
||||||
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
|
// ) !default;
|
||||||
) !default;
|
// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
|
||||||
// scss-docs-end utilities-bg-colors
|
|
||||||
|
|
||||||
// scss-docs-start utilities-border-colors
|
// $utilities-bg-subtle: (
|
||||||
$utilities-border: map-merge(
|
// "primary-subtle": var(--#{$prefix}primary-bg-subtle),
|
||||||
$utilities-colors,
|
// "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
|
||||||
(
|
// "success-subtle": var(--#{$prefix}success-bg-subtle),
|
||||||
"black": to-rgb($black),
|
// "info-subtle": var(--#{$prefix}info-bg-subtle),
|
||||||
"white": to-rgb($white)
|
// "warning-subtle": var(--#{$prefix}warning-bg-subtle),
|
||||||
)
|
// "danger-subtle": var(--#{$prefix}danger-bg-subtle),
|
||||||
) !default;
|
// "light-subtle": var(--#{$prefix}light-bg-subtle),
|
||||||
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
|
// "dark-subtle": var(--#{$prefix}dark-bg-subtle)
|
||||||
|
// ) !default;
|
||||||
|
// // scss-docs-end utilities-bg-colors
|
||||||
|
|
||||||
$utilities-border-subtle: (
|
// // scss-docs-start utilities-border-colors
|
||||||
"primary-subtle": var(--#{$prefix}primary-border-subtle),
|
// $utilities-border: map.merge(
|
||||||
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
|
// $utilities-colors,
|
||||||
"success-subtle": var(--#{$prefix}success-border-subtle),
|
// (
|
||||||
"info-subtle": var(--#{$prefix}info-border-subtle),
|
// "black": to-rgb($black),
|
||||||
"warning-subtle": var(--#{$prefix}warning-border-subtle),
|
// "white": to-rgb($white)
|
||||||
"danger-subtle": var(--#{$prefix}danger-border-subtle),
|
// )
|
||||||
"light-subtle": var(--#{$prefix}light-border-subtle),
|
// ) !default;
|
||||||
"dark-subtle": var(--#{$prefix}dark-border-subtle)
|
// $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
|
||||||
) !default;
|
|
||||||
// scss-docs-end utilities-border-colors
|
|
||||||
|
|
||||||
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !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;
|
||||||
|
// // scss-docs-end utilities-border-colors
|
||||||
|
|
||||||
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
|
||||||
|
|
||||||
$gutters: $spacers !default;
|
// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
||||||
|
|
||||||
|
// $gutters: $spacers !default;
|
||||||
|
|||||||
@ -1,42 +0,0 @@
|
|||||||
// Toggles
|
|
||||||
//
|
|
||||||
// Used in conjunction with global variables to enable certain theme features.
|
|
||||||
|
|
||||||
// Vendor
|
|
||||||
@import "vendor/rfs";
|
|
||||||
|
|
||||||
// Deprecate
|
|
||||||
@import "mixins/deprecate";
|
|
||||||
|
|
||||||
// Helpers
|
|
||||||
@import "mixins/breakpoints";
|
|
||||||
@import "mixins/color-mode";
|
|
||||||
@import "mixins/color-scheme";
|
|
||||||
@import "mixins/image";
|
|
||||||
@import "mixins/resize";
|
|
||||||
@import "mixins/visually-hidden";
|
|
||||||
@import "mixins/reset-text";
|
|
||||||
@import "mixins/text-truncate";
|
|
||||||
|
|
||||||
// Utilities
|
|
||||||
@import "mixins/utilities";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
@import "mixins/backdrop";
|
|
||||||
@import "mixins/buttons";
|
|
||||||
@import "mixins/caret";
|
|
||||||
@import "mixins/pagination";
|
|
||||||
@import "mixins/lists";
|
|
||||||
@import "mixins/forms";
|
|
||||||
@import "mixins/table-variants";
|
|
||||||
|
|
||||||
// Skins
|
|
||||||
@import "mixins/border-radius";
|
|
||||||
@import "mixins/box-shadow";
|
|
||||||
@import "mixins/gradients";
|
|
||||||
@import "mixins/transition";
|
|
||||||
|
|
||||||
// Layout
|
|
||||||
@import "mixins/clearfix";
|
|
||||||
@import "mixins/container";
|
|
||||||
@import "mixins/grid";
|
|
||||||
@ -1,4 +1,13 @@
|
|||||||
// stylelint-disable function-disallowed-list
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/backdrop" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
// .modal-open - body class for killing the scroll
|
// .modal-open - body class for killing the scroll
|
||||||
// .modal - container to scroll within
|
// .modal - container to scroll within
|
||||||
@ -209,7 +218,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// scss-docs-start modal-fullscreen-loop
|
// scss-docs-start modal-fullscreen-loop
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
$postfix: if($infix != "", $infix + "-down", "");
|
$postfix: if($infix != "", $infix + "-down", "");
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,10 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Kickstart any navigation component with a set of style resets. Works with
|
// Kickstart any navigation component with a set of style resets. Works with
|
||||||
@ -70,7 +77,7 @@
|
|||||||
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
|
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
|
||||||
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
|
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
|
||||||
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
|
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
|
||||||
|
|
||||||
@ -91,7 +98,7 @@
|
|||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
// Make dropdown border overlap tab border
|
// Make dropdown border overlap tab border
|
||||||
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
|
||||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||||
@include border-top-radius(0);
|
@include border-top-radius(0);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,15 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
@use "mixins/deprecate" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
// Navbar
|
// Navbar
|
||||||
//
|
//
|
||||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||||
@ -190,7 +202,7 @@
|
|||||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||||
// where your navbar collapses.
|
// where your navbar collapses.
|
||||||
.navbar-expand {
|
.navbar-expand {
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,10 @@
|
|||||||
// stylelint-disable function-disallowed-list
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/backdrop" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
%offcanvas-css-vars {
|
%offcanvas-css-vars {
|
||||||
// scss-docs-start offcanvas-css-vars
|
// scss-docs-start offcanvas-css-vars
|
||||||
@ -17,7 +23,7 @@
|
|||||||
// scss-docs-end offcanvas-css-vars
|
// scss-docs-end offcanvas-css-vars
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
@ -26,7 +32,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,20 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/lists" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
|
// scss-docs-start pagination-mixin
|
||||||
|
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||||
|
--#{$prefix}pagination-padding-x: #{$padding-x};
|
||||||
|
--#{$prefix}pagination-padding-y: #{$padding-y};
|
||||||
|
@include rfs($font-size, --#{$prefix}pagination-font-size);
|
||||||
|
--#{$prefix}pagination-border-radius: #{$border-radius};
|
||||||
|
}
|
||||||
|
// scss-docs-end pagination-mixin
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
// scss-docs-start pagination-css-vars
|
// scss-docs-start pagination-css-vars
|
||||||
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
|
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
|
||||||
.placeholder {
|
.placeholder {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-height: 1em;
|
min-height: 1em;
|
||||||
|
|||||||
@ -1,3 +1,10 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/reset-text" as *;
|
||||||
|
|
||||||
.popover {
|
.popover {
|
||||||
// scss-docs-start popover-css-vars
|
// scss-docs-start popover-css-vars
|
||||||
--#{$prefix}popover-zindex: #{$zindex-popover};
|
--#{$prefix}popover-zindex: #{$zindex-popover};
|
||||||
@ -56,11 +63,11 @@
|
|||||||
|
|
||||||
.bs-popover-top {
|
.bs-popover-top {
|
||||||
> .popover-arrow {
|
> .popover-arrow {
|
||||||
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
|
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@ -78,13 +85,13 @@
|
|||||||
/* rtl:begin:ignore */
|
/* rtl:begin:ignore */
|
||||||
.bs-popover-end {
|
.bs-popover-end {
|
||||||
> .popover-arrow {
|
> .popover-arrow {
|
||||||
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||||
width: var(--#{$prefix}popover-arrow-height);
|
width: var(--#{$prefix}popover-arrow-height);
|
||||||
height: var(--#{$prefix}popover-arrow-width);
|
height: var(--#{$prefix}popover-arrow-width);
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
|
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@ -103,11 +110,11 @@
|
|||||||
|
|
||||||
.bs-popover-bottom {
|
.bs-popover-bottom {
|
||||||
> .popover-arrow {
|
> .popover-arrow {
|
||||||
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@ -128,7 +135,7 @@
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
width: var(--#{$prefix}popover-arrow-width);
|
width: var(--#{$prefix}popover-arrow-width);
|
||||||
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
|
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
|
||||||
content: "";
|
content: "";
|
||||||
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
|
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
|
||||||
}
|
}
|
||||||
@ -137,13 +144,13 @@
|
|||||||
/* rtl:begin:ignore */
|
/* rtl:begin:ignore */
|
||||||
.bs-popover-start {
|
.bs-popover-start {
|
||||||
> .popover-arrow {
|
> .popover-arrow {
|
||||||
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
|
||||||
width: var(--#{$prefix}popover-arrow-height);
|
width: var(--#{$prefix}popover-arrow-height);
|
||||||
height: var(--#{$prefix}popover-arrow-width);
|
height: var(--#{$prefix}popover-arrow-width);
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|||||||
@ -1,3 +1,11 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Disable animation if transitions are disabled
|
// Disable animation if transitions are disabled
|
||||||
|
|
||||||
// scss-docs-start progress-keyframes
|
// scss-docs-start progress-keyframes
|
||||||
|
|||||||
151
scss/_root.scss
151
scss/_root.scss
@ -1,3 +1,39 @@
|
|||||||
|
@use "sass:meta";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "theme" as *;
|
||||||
|
// @use "maps" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
|
||||||
|
@each $color-group-name, $color-group in $all-colors {
|
||||||
|
@if meta.type-of($color-group) == "map" {
|
||||||
|
@each $color-name, $color-value in $color-group {
|
||||||
|
--#{$prefix}#{$color-name}: #{$color-value};
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
--#{$prefix}#{$color-group-name}: #{$color-group};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
--#{$prefix}#{$color}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color-name, $color-map in $new-theme-colors {
|
||||||
|
@each $key, $value in $color-map {
|
||||||
|
--#{$prefix}#{$color-name}-#{$key}: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
--#{$prefix}black: #{$black};
|
||||||
|
--#{$prefix}white: #{$white};
|
||||||
|
}
|
||||||
|
|
||||||
:root,
|
:root,
|
||||||
[data-bs-theme="light"] {
|
[data-bs-theme="light"] {
|
||||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||||
@ -6,33 +42,33 @@
|
|||||||
//
|
//
|
||||||
// Generate palettes for full colors, grays, and theme colors.
|
// Generate palettes for full colors, grays, and theme colors.
|
||||||
|
|
||||||
@each $color, $value in $colors {
|
// @each $color, $value in $colors {
|
||||||
--#{$prefix}#{$color}: #{$value};
|
// --#{$prefix}#{$color}: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $grays {
|
// @each $color, $value in $grays {
|
||||||
--#{$prefix}gray-#{$color}: #{$value};
|
// --#{$prefix}gray-#{$color}: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
// @each $color, $value in $theme-colors {
|
||||||
--#{$prefix}#{$color}: #{$value};
|
// --#{$prefix}#{$color}: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-rgb {
|
// @each $color, $value in $theme-colors-rgb {
|
||||||
--#{$prefix}#{$color}-rgb: #{$value};
|
// --#{$prefix}#{$color}-rgb: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-text {
|
// @each $color, $value in $theme-colors-text {
|
||||||
--#{$prefix}#{$color}-text-emphasis: #{$value};
|
// --#{$prefix}#{$color}-text-emphasis: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-bg-subtle {
|
// @each $color, $value in $theme-colors-bg-subtle {
|
||||||
--#{$prefix}#{$color}-bg-subtle: #{$value};
|
// --#{$prefix}#{$color}-bg-subtle: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-border-subtle {
|
// @each $color, $value in $theme-colors-border-subtle {
|
||||||
--#{$prefix}#{$color}-border-subtle: #{$value};
|
// --#{$prefix}#{$color}-border-subtle: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
--#{$prefix}white-rgb: #{to-rgb($white)};
|
--#{$prefix}white-rgb: #{to-rgb($white)};
|
||||||
--#{$prefix}black-rgb: #{to-rgb($black)};
|
--#{$prefix}black-rgb: #{to-rgb($black)};
|
||||||
@ -41,8 +77,8 @@
|
|||||||
|
|
||||||
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
||||||
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||||
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
|
--#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
|
||||||
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
|
--#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
|
||||||
--#{$prefix}gradient: #{$gradient};
|
--#{$prefix}gradient: #{$gradient};
|
||||||
|
|
||||||
// Root and body
|
// Root and body
|
||||||
@ -50,7 +86,7 @@
|
|||||||
@if $font-size-root != null {
|
@if $font-size-root != null {
|
||||||
--#{$prefix}root-font-size: #{$font-size-root};
|
--#{$prefix}root-font-size: #{$font-size-root};
|
||||||
}
|
}
|
||||||
--#{$prefix}body-font-family: #{inspect($font-family-base)};
|
--#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
|
||||||
@include rfs($font-size-base, --#{$prefix}body-font-size);
|
@include rfs($font-size-base, --#{$prefix}body-font-size);
|
||||||
--#{$prefix}body-font-weight: #{$font-weight-base};
|
--#{$prefix}body-font-weight: #{$font-weight-base};
|
||||||
--#{$prefix}body-line-height: #{$line-height-base};
|
--#{$prefix}body-line-height: #{$line-height-base};
|
||||||
@ -58,33 +94,52 @@
|
|||||||
--#{$prefix}body-text-align: #{$body-text-align};
|
--#{$prefix}body-text-align: #{$body-text-align};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@each $key, $value in $theme-bgs {
|
||||||
|
$key: if($key == null, "", "-" + $key);
|
||||||
|
--#{$prefix}bg#{$key}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $value in $theme-fgs {
|
||||||
|
$key: if($key == null, "", "-" + $key);
|
||||||
|
--#{$prefix}fg#{$key}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $value in $theme-borders {
|
||||||
|
$key: if($key == null, "", "-" + $key);
|
||||||
|
--#{$prefix}border#{$key}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
--#{$prefix}body-color: #{$body-color};
|
--#{$prefix}body-color: #{$body-color};
|
||||||
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
|
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
|
||||||
--#{$prefix}body-bg: #{$body-bg};
|
--#{$prefix}body-bg: #{$body-bg};
|
||||||
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
|
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
|
||||||
|
|
||||||
--#{$prefix}emphasis-color: #{$body-emphasis-color};
|
// --#{$prefix}emphasis-color: #{$body-emphasis-color};
|
||||||
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
// --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
||||||
|
|
||||||
--#{$prefix}secondary-color: #{$body-secondary-color};
|
// --#{$prefix}secondary-color: #{$body-secondary-color};
|
||||||
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
// --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
||||||
--#{$prefix}secondary-bg: #{$body-secondary-bg};
|
// --#{$prefix}secondary-bg: #{$body-secondary-bg};
|
||||||
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
// --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
||||||
|
|
||||||
--#{$prefix}tertiary-color: #{$body-tertiary-color};
|
// --#{$prefix}tertiary-color: #{$body-tertiary-color};
|
||||||
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
// --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
||||||
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
|
// --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
|
||||||
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
// --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
||||||
// scss-docs-end root-body-variables
|
// scss-docs-end root-body-variables
|
||||||
|
|
||||||
--#{$prefix}heading-color: #{$headings-color};
|
--#{$prefix}heading-color: #{$headings-color};
|
||||||
|
|
||||||
--#{$prefix}link-color: #{$link-color};
|
// --#{$prefix}link-color: #{$link-color};
|
||||||
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
|
// --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
|
||||||
--#{$prefix}link-decoration: #{$link-decoration};
|
// --#{$prefix}link-decoration: #{$link-decoration};
|
||||||
|
|
||||||
--#{$prefix}link-hover-color: #{$link-hover-color};
|
// --#{$prefix}link-hover-color: #{$link-hover-color};
|
||||||
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
||||||
|
|
||||||
|
--#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
|
||||||
|
--#{$prefix}link-decoration: #{$link-decoration};
|
||||||
|
--#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
|
||||||
|
|
||||||
@if $link-hover-decoration != null {
|
@if $link-hover-decoration != null {
|
||||||
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
|
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
|
||||||
@ -152,17 +207,17 @@
|
|||||||
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
|
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
|
||||||
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-text-dark {
|
// @each $color, $value in $theme-colors-text-dark {
|
||||||
--#{$prefix}#{$color}-text-emphasis: #{$value};
|
// --#{$prefix}#{$color}-text-emphasis: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-bg-subtle-dark {
|
// @each $color, $value in $theme-colors-bg-subtle-dark {
|
||||||
--#{$prefix}#{$color}-bg-subtle: #{$value};
|
// --#{$prefix}#{$color}-bg-subtle: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors-border-subtle-dark {
|
// @each $color, $value in $theme-colors-border-subtle-dark {
|
||||||
--#{$prefix}#{$color}-border-subtle: #{$value};
|
// --#{$prefix}#{$color}-border-subtle: #{$value};
|
||||||
}
|
// }
|
||||||
|
|
||||||
--#{$prefix}heading-color: #{$headings-color-dark};
|
--#{$prefix}heading-color: #{$headings-color-dark};
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,18 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
|
||||||
|
// scss-docs-start spinner-variables
|
||||||
|
$spinner-width: 2rem !default;
|
||||||
|
$spinner-height: $spinner-width !default;
|
||||||
|
$spinner-vertical-align: -.125em !default;
|
||||||
|
$spinner-border-width: .25em !default;
|
||||||
|
$spinner-animation-speed: .75s !default;
|
||||||
|
|
||||||
|
$spinner-width-sm: 1rem !default;
|
||||||
|
$spinner-height-sm: $spinner-width-sm !default;
|
||||||
|
$spinner-border-width-sm: .2em !default;
|
||||||
|
// scss-docs-end spinner-variables
|
||||||
|
|
||||||
//
|
//
|
||||||
// Rotating border
|
// Rotating border
|
||||||
//
|
//
|
||||||
|
|||||||
153
scss/_theme.scss
Normal file
153
scss/_theme.scss
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
@use "sass:meta";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "colors" as *;
|
||||||
|
|
||||||
|
@function theme-color-values($key) {
|
||||||
|
$result: ();
|
||||||
|
|
||||||
|
@each $color-name, $color-map in $new-theme-colors {
|
||||||
|
@if map.has-key($color-map, $key) {
|
||||||
|
$result: map.merge($result, ($color-name: map.get($color-map, $key)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recursive mixin to handle nested maps
|
||||||
|
@mixin create-css-vars($map, $parent-key: "") {
|
||||||
|
@each $key, $value in $map {
|
||||||
|
$current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");
|
||||||
|
|
||||||
|
@if meta.type-of($value) == "map" {
|
||||||
|
@include create-css-vars($value, $current-key);
|
||||||
|
} @else {
|
||||||
|
--#{$prefix}#{$current-key}: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// scss-docs-start theme-colors
|
||||||
|
$new-theme-colors: (
|
||||||
|
"primary": (
|
||||||
|
"base": var(--#{$prefix}blue-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"accent": (
|
||||||
|
"base": var(--#{$prefix}indigo-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"danger": (
|
||||||
|
"base": var(--#{$prefix}red-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"warning": (
|
||||||
|
"base": var(--#{$prefix}yellow-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}gray-900)
|
||||||
|
),
|
||||||
|
"success": (
|
||||||
|
"base": var(--#{$prefix}green-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"info": (
|
||||||
|
"base": var(--#{$prefix}cyan-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}gray-900)
|
||||||
|
),
|
||||||
|
"secondary": (
|
||||||
|
"base": var(--#{$prefix}gray-300),
|
||||||
|
"text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
|
||||||
|
"border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
|
||||||
|
)
|
||||||
|
) !default;
|
||||||
|
// scss-docs-end theme-colors
|
||||||
|
|
||||||
|
// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
|
||||||
|
$theme-bgs: (
|
||||||
|
null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
|
||||||
|
"1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
|
||||||
|
"2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
|
||||||
|
"3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
|
||||||
|
"white": var(--#{$prefix}white),
|
||||||
|
"black": var(--#{$prefix}black),
|
||||||
|
"transparent": transparent,
|
||||||
|
"inherit": inherit,
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$theme-fgs: (
|
||||||
|
null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
|
||||||
|
"1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
|
||||||
|
"2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
|
||||||
|
"3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
|
||||||
|
"white": var(--#{$prefix}white),
|
||||||
|
"black": var(--#{$prefix}black),
|
||||||
|
"inherit": inherit,
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$theme-borders: (
|
||||||
|
null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
|
||||||
|
"muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
|
||||||
|
"subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
|
||||||
|
"emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// $util-opacity: (
|
||||||
|
// "10": .1,
|
||||||
|
// "20": .2,
|
||||||
|
// "30": .3,
|
||||||
|
// "40": .4,
|
||||||
|
// "50": .5,
|
||||||
|
// "60": .6,
|
||||||
|
// "70": .7,
|
||||||
|
// "80": .8,
|
||||||
|
// "90": .9,
|
||||||
|
// "100": 1
|
||||||
|
// ) !default;
|
||||||
@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
// scss-docs-start toast-css-vars
|
// scss-docs-start toast-css-vars
|
||||||
--#{$prefix}toast-zindex: #{$zindex-toast};
|
--#{$prefix}toast-zindex: #{$zindex-toast};
|
||||||
@ -62,7 +67,7 @@
|
|||||||
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
|
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
|
||||||
|
|
||||||
.btn-close {
|
.btn-close {
|
||||||
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
|
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
|
||||||
margin-left: var(--#{$prefix}toast-padding-x);
|
margin-left: var(--#{$prefix}toast-padding-x);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,10 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/deprecate" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/reset-text" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
.tooltip {
|
.tooltip {
|
||||||
// scss-docs-start tooltip-css-vars
|
// scss-docs-start tooltip-css-vars
|
||||||
@ -44,24 +51,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bs-tooltip-top .tooltip-arrow {
|
.bs-tooltip-top .tooltip-arrow {
|
||||||
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
top: -1px;
|
top: -1px;
|
||||||
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
|
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
|
||||||
border-top-color: var(--#{$prefix}tooltip-bg);
|
border-top-color: var(--#{$prefix}tooltip-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* rtl:begin:ignore */
|
/* rtl:begin:ignore */
|
||||||
.bs-tooltip-end .tooltip-arrow {
|
.bs-tooltip-end .tooltip-arrow {
|
||||||
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||||
width: var(--#{$prefix}tooltip-arrow-height);
|
width: var(--#{$prefix}tooltip-arrow-height);
|
||||||
height: var(--#{$prefix}tooltip-arrow-width);
|
height: var(--#{$prefix}tooltip-arrow-width);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
right: -1px;
|
right: -1px;
|
||||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
|
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
|
||||||
border-right-color: var(--#{$prefix}tooltip-bg);
|
border-right-color: var(--#{$prefix}tooltip-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -69,24 +76,24 @@
|
|||||||
/* rtl:end:ignore */
|
/* rtl:end:ignore */
|
||||||
|
|
||||||
.bs-tooltip-bottom .tooltip-arrow {
|
.bs-tooltip-bottom .tooltip-arrow {
|
||||||
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
bottom: -1px;
|
bottom: -1px;
|
||||||
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
|
||||||
border-bottom-color: var(--#{$prefix}tooltip-bg);
|
border-bottom-color: var(--#{$prefix}tooltip-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* rtl:begin:ignore */
|
/* rtl:begin:ignore */
|
||||||
.bs-tooltip-start .tooltip-arrow {
|
.bs-tooltip-start .tooltip-arrow {
|
||||||
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
|
||||||
width: var(--#{$prefix}tooltip-arrow-height);
|
width: var(--#{$prefix}tooltip-arrow-height);
|
||||||
height: var(--#{$prefix}tooltip-arrow-width);
|
height: var(--#{$prefix}tooltip-arrow-width);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
left: -1px;
|
left: -1px;
|
||||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
|
||||||
border-left-color: var(--#{$prefix}tooltip-bg);
|
border-left-color: var(--#{$prefix}tooltip-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
|
||||||
.fade {
|
.fade {
|
||||||
@include transition($transition-fade);
|
@include transition($transition-fade);
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,13 @@
|
|||||||
// Utilities
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
@use "theme" as *;
|
||||||
|
|
||||||
$utilities: () !default;
|
$utilities: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
// stylelint-disable-next-line scss/dollar-variable-default
|
||||||
$utilities: map-merge(
|
$utilities: map.merge(
|
||||||
(
|
(
|
||||||
// scss-docs-start utils-vertical-align
|
// scss-docs-start utils-vertical-align
|
||||||
"align": (
|
"align": (
|
||||||
@ -11,10 +16,24 @@ $utilities: map-merge(
|
|||||||
values: baseline top middle bottom text-bottom text-top
|
values: baseline top middle bottom text-bottom text-top
|
||||||
),
|
),
|
||||||
// scss-docs-end utils-vertical-align
|
// scss-docs-end utils-vertical-align
|
||||||
|
// scss-docs-start utils-aspect-ratio
|
||||||
|
"aspect-ratio-attr": (
|
||||||
|
selector: "attr-includes",
|
||||||
|
class: "ratio-",
|
||||||
|
property: aspect-ratio,
|
||||||
|
values: var(--#{$prefix}ratio),
|
||||||
|
),
|
||||||
|
"aspect-ratio": (
|
||||||
|
// property: aspect-ratio,
|
||||||
|
property: --#{$prefix}ratio,
|
||||||
|
class: ratio,
|
||||||
|
values: $aspect-ratios
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-aspect-ratio
|
||||||
// scss-docs-start utils-float
|
// scss-docs-start utils-float
|
||||||
"float": (
|
"float": (
|
||||||
responsive: true,
|
|
||||||
property: float,
|
property: float,
|
||||||
|
responsive: true,
|
||||||
values: (
|
values: (
|
||||||
start: left,
|
start: left,
|
||||||
end: right,
|
end: right,
|
||||||
@ -69,7 +88,7 @@ $utilities: map-merge(
|
|||||||
print: true,
|
print: true,
|
||||||
property: display,
|
property: display,
|
||||||
class: d,
|
class: d,
|
||||||
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
|
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
|
||||||
),
|
),
|
||||||
// scss-docs-end utils-display
|
// scss-docs-end utils-display
|
||||||
// scss-docs-start utils-shadow
|
// scss-docs-start utils-shadow
|
||||||
@ -86,10 +105,10 @@ $utilities: map-merge(
|
|||||||
// scss-docs-end utils-shadow
|
// scss-docs-end utils-shadow
|
||||||
// scss-docs-start utils-focus-ring
|
// scss-docs-start utils-focus-ring
|
||||||
"focus-ring": (
|
"focus-ring": (
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
css-variable-name: focus-ring-color,
|
property: --#{$prefix}focus-ring-color,
|
||||||
class: focus-ring,
|
class: focus-ring,
|
||||||
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
|
values: theme-color-values("focus-ring"),
|
||||||
),
|
),
|
||||||
// scss-docs-end utils-focus-ring
|
// scss-docs-end utils-focus-ring
|
||||||
// scss-docs-start utils-position
|
// scss-docs-start utils-position
|
||||||
@ -134,14 +153,15 @@ $utilities: map-merge(
|
|||||||
)
|
)
|
||||||
),
|
),
|
||||||
"border-top": (
|
"border-top": (
|
||||||
property: border-top,
|
class: border-top,
|
||||||
|
property: border-block-start,
|
||||||
values: (
|
values: (
|
||||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
0: 0,
|
0: 0,
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
"border-end": (
|
"border-end": (
|
||||||
property: border-right,
|
property: border-inline-end,
|
||||||
class: border-end,
|
class: border-end,
|
||||||
values: (
|
values: (
|
||||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
@ -149,49 +169,56 @@ $utilities: map-merge(
|
|||||||
)
|
)
|
||||||
),
|
),
|
||||||
"border-bottom": (
|
"border-bottom": (
|
||||||
property: border-bottom,
|
property: border-block-end,
|
||||||
|
class: border-bottom,
|
||||||
values: (
|
values: (
|
||||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
0: 0,
|
0: 0,
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
"border-start": (
|
"border-start": (
|
||||||
property: border-left,
|
property: border-inline-start,
|
||||||
class: border-start,
|
class: border-start,
|
||||||
values: (
|
values: (
|
||||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
0: 0,
|
0: 0,
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
|
"border-y": (
|
||||||
|
property: border-block,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
|
0: 0,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"border-x": (
|
||||||
|
property: border-inline,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
|
0: 0,
|
||||||
|
)
|
||||||
|
),
|
||||||
"border-color": (
|
"border-color": (
|
||||||
property: border-color,
|
property: border-color,
|
||||||
class: border,
|
class: border,
|
||||||
local-vars: (
|
values: theme-color-values("border")
|
||||||
"border-opacity": 1
|
|
||||||
),
|
|
||||||
values: $utilities-border-colors
|
|
||||||
),
|
|
||||||
"subtle-border-color": (
|
|
||||||
property: border-color,
|
|
||||||
class: border,
|
|
||||||
values: $utilities-border-subtle
|
|
||||||
),
|
),
|
||||||
"border-width": (
|
"border-width": (
|
||||||
property: border-width,
|
property: border-width,
|
||||||
class: border,
|
class: border,
|
||||||
values: $border-widths
|
values: $border-widths
|
||||||
),
|
),
|
||||||
"border-opacity": (
|
// "border-opacity": (
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
class: border-opacity,
|
// class: border-opacity,
|
||||||
values: (
|
// values: (
|
||||||
10: .1,
|
// 10: .1,
|
||||||
25: .25,
|
// 25: .25,
|
||||||
50: .5,
|
// 50: .5,
|
||||||
75: .75,
|
// 75: .75,
|
||||||
100: 1
|
// 100: 1
|
||||||
)
|
// )
|
||||||
),
|
// ),
|
||||||
// scss-docs-end utils-borders
|
// scss-docs-end utils-borders
|
||||||
// Sizing utilities
|
// Sizing utilities
|
||||||
// scss-docs-start utils-sizing
|
// scss-docs-start utils-sizing
|
||||||
@ -203,14 +230,25 @@ $utilities: map-merge(
|
|||||||
50: 50%,
|
50: 50%,
|
||||||
75: 75%,
|
75: 75%,
|
||||||
100: 100%,
|
100: 100%,
|
||||||
auto: auto
|
auto: auto,
|
||||||
|
min: min-content,
|
||||||
|
max: max-content,
|
||||||
|
fit: fit-content,
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
"max-width": (
|
"max-width": (
|
||||||
property: max-width,
|
property: max-width,
|
||||||
class: mw,
|
class: max-w,
|
||||||
values: (100: 100%)
|
values: (100: 100%)
|
||||||
),
|
),
|
||||||
|
"min-width": (
|
||||||
|
property: min-width,
|
||||||
|
class: min-w,
|
||||||
|
values: (
|
||||||
|
0: 0,
|
||||||
|
100: 100%
|
||||||
|
)
|
||||||
|
),
|
||||||
"viewport-width": (
|
"viewport-width": (
|
||||||
property: width,
|
property: width,
|
||||||
class: vw,
|
class: vw,
|
||||||
@ -229,14 +267,25 @@ $utilities: map-merge(
|
|||||||
50: 50%,
|
50: 50%,
|
||||||
75: 75%,
|
75: 75%,
|
||||||
100: 100%,
|
100: 100%,
|
||||||
auto: auto
|
auto: auto,
|
||||||
|
min: min-content,
|
||||||
|
max: max-content,
|
||||||
|
fit: fit-content,
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
"max-height": (
|
"max-height": (
|
||||||
property: max-height,
|
property: max-height,
|
||||||
class: mh,
|
class: max-h,
|
||||||
values: (100: 100%)
|
values: (100: 100%)
|
||||||
),
|
),
|
||||||
|
"min-height": (
|
||||||
|
property: min-height,
|
||||||
|
class: min-h,
|
||||||
|
values: (
|
||||||
|
0: 0,
|
||||||
|
100: 100%,
|
||||||
|
),
|
||||||
|
),
|
||||||
"viewport-height": (
|
"viewport-height": (
|
||||||
property: height,
|
property: height,
|
||||||
class: vh,
|
class: vh,
|
||||||
@ -297,6 +346,15 @@ $utilities: map-merge(
|
|||||||
evenly: space-evenly,
|
evenly: space-evenly,
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
|
"justify-self": (
|
||||||
|
responsive: true,
|
||||||
|
property: justify-self,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
)
|
||||||
|
),
|
||||||
"align-items": (
|
"align-items": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: align-items,
|
property: align-items,
|
||||||
@ -353,87 +411,87 @@ $utilities: map-merge(
|
|||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin,
|
property: margin,
|
||||||
class: m,
|
class: m,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-x": (
|
"margin-x": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-right margin-left,
|
property: margin-right margin-left,
|
||||||
class: mx,
|
class: mx,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-y": (
|
"margin-y": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-top margin-bottom,
|
property: margin-top margin-bottom,
|
||||||
class: my,
|
class: my,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-top": (
|
"margin-top": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-top,
|
property: margin-top,
|
||||||
class: mt,
|
class: mt,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-end": (
|
"margin-end": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-right,
|
property: margin-right,
|
||||||
class: me,
|
class: me,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-bottom": (
|
"margin-bottom": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-bottom,
|
property: margin-bottom,
|
||||||
class: mb,
|
class: mb,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-start": (
|
"margin-start": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-left,
|
property: margin-left,
|
||||||
class: ms,
|
class: ms,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
// Negative margin utilities
|
// Negative margin utilities
|
||||||
"negative-margin": (
|
// "negative-margin": (
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
property: margin,
|
// property: margin,
|
||||||
class: m,
|
// class: m,
|
||||||
values: $negative-spacers
|
// values: $negative-spacers
|
||||||
),
|
// ),
|
||||||
"negative-margin-x": (
|
// "negative-margin-x": (
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
property: margin-right margin-left,
|
// property: margin-right margin-left,
|
||||||
class: mx,
|
// class: mx,
|
||||||
values: $negative-spacers
|
// values: $negative-spacers
|
||||||
),
|
// ),
|
||||||
"negative-margin-y": (
|
// "negative-margin-y": (
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
property: margin-top margin-bottom,
|
// property: margin-top margin-bottom,
|
||||||
class: my,
|
// class: my,
|
||||||
values: $negative-spacers
|
// values: $negative-spacers
|
||||||
),
|
// ),
|
||||||
"negative-margin-top": (
|
// "negative-margin-top": (
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
property: margin-top,
|
// property: margin-top,
|
||||||
class: mt,
|
// class: mt,
|
||||||
values: $negative-spacers
|
// values: $negative-spacers
|
||||||
),
|
// ),
|
||||||
"negative-margin-end": (
|
// "negative-margin-end": (
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
property: margin-right,
|
// property: margin-right,
|
||||||
class: me,
|
// class: me,
|
||||||
values: $negative-spacers
|
// values: $negative-spacers
|
||||||
),
|
// ),
|
||||||
"negative-margin-bottom": (
|
// "negative-margin-bottom": (
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
property: margin-bottom,
|
// property: margin-bottom,
|
||||||
class: mb,
|
// class: mb,
|
||||||
values: $negative-spacers
|
// values: $negative-spacers
|
||||||
),
|
// ),
|
||||||
"negative-margin-start": (
|
// "negative-margin-start": (
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
property: margin-left,
|
// property: margin-left,
|
||||||
class: ms,
|
// class: ms,
|
||||||
values: $negative-spacers
|
// values: $negative-spacers
|
||||||
),
|
// ),
|
||||||
// Padding utilities
|
// Padding utilities
|
||||||
"padding": (
|
"padding": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
@ -573,44 +631,43 @@ $utilities: map-merge(
|
|||||||
),
|
),
|
||||||
// scss-docs-end utils-text
|
// scss-docs-end utils-text
|
||||||
// scss-docs-start utils-color
|
// scss-docs-start utils-color
|
||||||
|
"color-attr": (
|
||||||
|
selector: "attr-includes",
|
||||||
|
class: "color-",
|
||||||
|
property: color,
|
||||||
|
values: var(--#{$prefix}color),
|
||||||
|
),
|
||||||
"color": (
|
"color": (
|
||||||
property: color,
|
property: --#{$prefix}color,
|
||||||
class: text,
|
class: color,
|
||||||
local-vars: (
|
values: map.merge(theme-color-values("text"), $theme-fgs),
|
||||||
"text-opacity": 1
|
|
||||||
),
|
|
||||||
values: map-merge(
|
|
||||||
$utilities-text-colors,
|
|
||||||
(
|
|
||||||
"muted": var(--#{$prefix}secondary-color), // deprecated
|
|
||||||
"black-50": rgba($black, .5), // deprecated
|
|
||||||
"white-50": rgba($white, .5), // deprecated
|
|
||||||
"body-secondary": var(--#{$prefix}secondary-color),
|
|
||||||
"body-tertiary": var(--#{$prefix}tertiary-color),
|
|
||||||
"body-emphasis": var(--#{$prefix}emphasis-color),
|
|
||||||
"reset": inherit,
|
|
||||||
)
|
|
||||||
)
|
|
||||||
),
|
),
|
||||||
"text-opacity": (
|
"color-opacity": (
|
||||||
css-var: true,
|
class: color,
|
||||||
class: text-opacity,
|
property: color,
|
||||||
values: (
|
values: (
|
||||||
25: .25,
|
10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
|
||||||
50: .5,
|
20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
|
||||||
75: .75,
|
30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
|
||||||
100: 1
|
40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
|
||||||
|
50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
|
||||||
|
60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
|
||||||
|
70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
|
||||||
|
80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
|
||||||
|
90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
|
||||||
|
100: var(--#{$prefix}color),
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
"text-color": (
|
"contrast-color": (
|
||||||
property: color,
|
property: --#{$prefix}color,
|
||||||
class: text,
|
class: color-on,
|
||||||
values: $utilities-text-emphasis-colors
|
values: theme-color-values("contrast"),
|
||||||
),
|
),
|
||||||
// scss-docs-end utils-color
|
// scss-docs-end utils-color
|
||||||
// scss-docs-start utils-links
|
// scss-docs-start utils-links
|
||||||
"link-opacity": (
|
"link-opacity": (
|
||||||
css-var: true,
|
property: --#{$prefix}link-opacity,
|
||||||
|
// css-var: true,
|
||||||
class: link-opacity,
|
class: link-opacity,
|
||||||
state: hover,
|
state: hover,
|
||||||
values: (
|
values: (
|
||||||
@ -637,15 +694,16 @@ $utilities: map-merge(
|
|||||||
local-vars: (
|
local-vars: (
|
||||||
"link-underline-opacity": 1
|
"link-underline-opacity": 1
|
||||||
),
|
),
|
||||||
values: map-merge(
|
// values: map.merge(
|
||||||
$utilities-links-underline,
|
// $utilities-links-underline,
|
||||||
(
|
// (
|
||||||
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
|
// // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
|
||||||
)
|
// )
|
||||||
)
|
// )
|
||||||
),
|
),
|
||||||
"link-underline-opacity": (
|
"link-underline-opacity": (
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
|
property: --#{$prefix}link-underline-opacity,
|
||||||
class: link-underline-opacity,
|
class: link-underline-opacity,
|
||||||
state: hover,
|
state: hover,
|
||||||
values: (
|
values: (
|
||||||
@ -659,36 +717,42 @@ $utilities: map-merge(
|
|||||||
),
|
),
|
||||||
// scss-docs-end utils-links
|
// scss-docs-end utils-links
|
||||||
// scss-docs-start utils-bg-color
|
// scss-docs-start utils-bg-color
|
||||||
"background-color": (
|
"bg-attr": (
|
||||||
|
selector: "attr-includes",
|
||||||
|
class: "bg-",
|
||||||
property: background-color,
|
property: background-color,
|
||||||
|
values: var(--#{$prefix}bg),
|
||||||
|
),
|
||||||
|
"bg-color": (
|
||||||
|
property: --#{$prefix}bg,
|
||||||
class: bg,
|
class: bg,
|
||||||
local-vars: (
|
values: map.merge(theme-color-values("bg"), $theme-bgs),
|
||||||
"bg-opacity": 1
|
),
|
||||||
),
|
"bg-color-subtle": (
|
||||||
values: map-merge(
|
property: --#{$prefix}bg,
|
||||||
$utilities-bg-colors,
|
class: bg-subtle,
|
||||||
(
|
values: theme-color-values("bg-subtle"),
|
||||||
"transparent": transparent,
|
),
|
||||||
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
"bg-color-muted": (
|
||||||
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
property: --#{$prefix}bg,
|
||||||
)
|
class: bg-muted,
|
||||||
)
|
values: theme-color-values("bg-muted"),
|
||||||
),
|
),
|
||||||
"bg-opacity": (
|
"bg-opacity": (
|
||||||
css-var: true,
|
|
||||||
class: bg-opacity,
|
|
||||||
values: (
|
|
||||||
10: .1,
|
|
||||||
25: .25,
|
|
||||||
50: .5,
|
|
||||||
75: .75,
|
|
||||||
100: 1
|
|
||||||
)
|
|
||||||
),
|
|
||||||
"subtle-background-color": (
|
|
||||||
property: background-color,
|
|
||||||
class: bg,
|
class: bg,
|
||||||
values: $utilities-bg-subtle
|
property: background-color,
|
||||||
|
values: (
|
||||||
|
10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
|
||||||
|
20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
|
||||||
|
30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
|
||||||
|
40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
|
||||||
|
50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
|
||||||
|
60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
|
||||||
|
70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
|
||||||
|
80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
|
||||||
|
90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
|
||||||
|
100: var(--#{$prefix}bg),
|
||||||
|
)
|
||||||
),
|
),
|
||||||
// scss-docs-end utils-bg-color
|
// scss-docs-end utils-bg-color
|
||||||
"gradient": (
|
"gradient": (
|
||||||
@ -708,7 +772,7 @@ $utilities: map-merge(
|
|||||||
),
|
),
|
||||||
// scss-docs-end utils-interaction
|
// scss-docs-end utils-interaction
|
||||||
// scss-docs-start utils-border-radius
|
// scss-docs-start utils-border-radius
|
||||||
"rounded": (
|
"border-radius": (
|
||||||
property: border-radius,
|
property: border-radius,
|
||||||
class: rounded,
|
class: rounded,
|
||||||
values: (
|
values: (
|
||||||
@ -718,7 +782,7 @@ $utilities: map-merge(
|
|||||||
2: var(--#{$prefix}border-radius),
|
2: var(--#{$prefix}border-radius),
|
||||||
3: var(--#{$prefix}border-radius-lg),
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
4: var(--#{$prefix}border-radius-xl),
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
5: var(--#{$prefix}border-radius-xxl),
|
5: var(--#{$prefix}border-radius-2xl),
|
||||||
circle: 50%,
|
circle: 50%,
|
||||||
pill: var(--#{$prefix}border-radius-pill)
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
)
|
)
|
||||||
@ -733,7 +797,7 @@ $utilities: map-merge(
|
|||||||
2: var(--#{$prefix}border-radius),
|
2: var(--#{$prefix}border-radius),
|
||||||
3: var(--#{$prefix}border-radius-lg),
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
4: var(--#{$prefix}border-radius-xl),
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
5: var(--#{$prefix}border-radius-xxl),
|
5: var(--#{$prefix}border-radius-2xl),
|
||||||
circle: 50%,
|
circle: 50%,
|
||||||
pill: var(--#{$prefix}border-radius-pill)
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
)
|
)
|
||||||
@ -748,7 +812,7 @@ $utilities: map-merge(
|
|||||||
2: var(--#{$prefix}border-radius),
|
2: var(--#{$prefix}border-radius),
|
||||||
3: var(--#{$prefix}border-radius-lg),
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
4: var(--#{$prefix}border-radius-xl),
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
5: var(--#{$prefix}border-radius-xxl),
|
5: var(--#{$prefix}border-radius-2xl),
|
||||||
circle: 50%,
|
circle: 50%,
|
||||||
pill: var(--#{$prefix}border-radius-pill)
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
)
|
)
|
||||||
@ -763,7 +827,7 @@ $utilities: map-merge(
|
|||||||
2: var(--#{$prefix}border-radius),
|
2: var(--#{$prefix}border-radius),
|
||||||
3: var(--#{$prefix}border-radius-lg),
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
4: var(--#{$prefix}border-radius-xl),
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
5: var(--#{$prefix}border-radius-xxl),
|
5: var(--#{$prefix}border-radius-2xl),
|
||||||
circle: 50%,
|
circle: 50%,
|
||||||
pill: var(--#{$prefix}border-radius-pill)
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
)
|
)
|
||||||
@ -778,7 +842,7 @@ $utilities: map-merge(
|
|||||||
2: var(--#{$prefix}border-radius),
|
2: var(--#{$prefix}border-radius),
|
||||||
3: var(--#{$prefix}border-radius-lg),
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
4: var(--#{$prefix}border-radius-xl),
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
5: var(--#{$prefix}border-radius-xxl),
|
5: var(--#{$prefix}border-radius-2xl),
|
||||||
circle: 50%,
|
circle: 50%,
|
||||||
pill: var(--#{$prefix}border-radius-pill)
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
)
|
)
|
||||||
|
|||||||
@ -26,7 +26,7 @@ $info-bg-subtle-dark: shade-color($info, 80%) !default;
|
|||||||
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
||||||
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
||||||
$light-bg-subtle-dark: $gray-800 !default;
|
$light-bg-subtle-dark: $gray-800 !default;
|
||||||
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
|
$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
|
||||||
// scss-docs-end theme-bg-subtle-dark-variables
|
// scss-docs-end theme-bg-subtle-dark-variables
|
||||||
|
|
||||||
// scss-docs-start theme-border-subtle-dark-variables
|
// scss-docs-start theme-border-subtle-dark-variables
|
||||||
@ -45,7 +45,7 @@ $body-bg-dark: $gray-900 !default;
|
|||||||
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
||||||
$body-secondary-bg-dark: $gray-800 !default;
|
$body-secondary-bg-dark: $gray-800 !default;
|
||||||
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
||||||
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
|
$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
|
||||||
$body-emphasis-color-dark: $white !default;
|
$body-emphasis-color-dark: $white !default;
|
||||||
$border-color-dark: $gray-700 !default;
|
$border-color-dark: $gray-700 !default;
|
||||||
$border-color-translucent-dark: rgba($white, .15) !default;
|
$border-color-translucent-dark: rgba($white, .15) !default;
|
||||||
|
|||||||
@ -1,309 +1,21 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "sass:string";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
|
||||||
// Variables
|
// Variables
|
||||||
//
|
//
|
||||||
// Variables should follow the `$component-state-property-size` formula for
|
// Variables should follow the `$component-state-property-size` formula for
|
||||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||||
|
|
||||||
// Color system
|
|
||||||
|
|
||||||
// scss-docs-start gray-color-variables
|
|
||||||
$white: #fff !default;
|
|
||||||
$gray-100: #f8f9fa !default;
|
|
||||||
$gray-200: #e9ecef !default;
|
|
||||||
$gray-300: #dee2e6 !default;
|
|
||||||
$gray-400: #ced4da !default;
|
|
||||||
$gray-500: #adb5bd !default;
|
|
||||||
$gray-600: #6c757d !default;
|
|
||||||
$gray-700: #495057 !default;
|
|
||||||
$gray-800: #343a40 !default;
|
|
||||||
$gray-900: #212529 !default;
|
|
||||||
$black: #000 !default;
|
|
||||||
// scss-docs-end gray-color-variables
|
|
||||||
|
|
||||||
// fusv-disable
|
|
||||||
// scss-docs-start gray-colors-map
|
|
||||||
$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;
|
|
||||||
// scss-docs-end gray-colors-map
|
|
||||||
// fusv-enable
|
|
||||||
|
|
||||||
// scss-docs-start color-variables
|
|
||||||
$blue: #0d6efd !default;
|
|
||||||
$indigo: #6610f2 !default;
|
|
||||||
$purple: #6f42c1 !default;
|
|
||||||
$pink: #d63384 !default;
|
|
||||||
$red: #dc3545 !default;
|
|
||||||
$orange: #fd7e14 !default;
|
|
||||||
$yellow: #ffc107 !default;
|
|
||||||
$green: #198754 !default;
|
|
||||||
$teal: #20c997 !default;
|
|
||||||
$cyan: #0dcaf0 !default;
|
|
||||||
// scss-docs-end color-variables
|
|
||||||
|
|
||||||
// scss-docs-start colors-map
|
|
||||||
$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;
|
|
||||||
// scss-docs-end colors-map
|
|
||||||
|
|
||||||
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
|
|
||||||
// See https://www.w3.org/TR/WCAG/#contrast-minimum
|
|
||||||
$min-contrast-ratio: 4.5 !default;
|
|
||||||
|
|
||||||
// Customize the light and dark text colors for use in our color contrast function.
|
|
||||||
$color-contrast-dark: $black !default;
|
|
||||||
$color-contrast-light: $white !default;
|
|
||||||
|
|
||||||
// fusv-disable
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
// fusv-enable
|
|
||||||
|
|
||||||
// scss-docs-start theme-color-variables
|
// scss-docs-start theme-color-variables
|
||||||
$primary: $blue !default;
|
$primary: $purple-500 !default;
|
||||||
$secondary: $gray-600 !default;
|
$secondary: $gray-600 !default;
|
||||||
$success: $green !default;
|
$success: $green-500 !default;
|
||||||
$info: $cyan !default;
|
$info: $cyan-500 !default;
|
||||||
$warning: $yellow !default;
|
$warning: $yellow-500 !default;
|
||||||
$danger: $red !default;
|
$danger: $red-500 !default;
|
||||||
$light: $gray-100 !default;
|
$light: $gray-100 !default;
|
||||||
$dark: $gray-900 !default;
|
$dark: $gray-900 !default;
|
||||||
// scss-docs-end theme-color-variables
|
// scss-docs-end theme-color-variables
|
||||||
@ -321,38 +33,38 @@ $theme-colors: (
|
|||||||
) !default;
|
) !default;
|
||||||
// scss-docs-end theme-colors-map
|
// scss-docs-end theme-colors-map
|
||||||
|
|
||||||
// scss-docs-start theme-text-variables
|
// // scss-docs-start theme-text-variables
|
||||||
$primary-text-emphasis: shade-color($primary, 60%) !default;
|
// $primary-text-emphasis: shade-color($primary, 60%) !default;
|
||||||
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
|
// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
|
||||||
$success-text-emphasis: shade-color($success, 60%) !default;
|
// $success-text-emphasis: shade-color($success, 60%) !default;
|
||||||
$info-text-emphasis: shade-color($info, 60%) !default;
|
// $info-text-emphasis: shade-color($info, 60%) !default;
|
||||||
$warning-text-emphasis: shade-color($warning, 60%) !default;
|
// $warning-text-emphasis: shade-color($warning, 60%) !default;
|
||||||
$danger-text-emphasis: shade-color($danger, 60%) !default;
|
// $danger-text-emphasis: shade-color($danger, 60%) !default;
|
||||||
$light-text-emphasis: $gray-700 !default;
|
// $light-text-emphasis: $gray-700 !default;
|
||||||
$dark-text-emphasis: $gray-700 !default;
|
// $dark-text-emphasis: $gray-700 !default;
|
||||||
// scss-docs-end theme-text-variables
|
// // scss-docs-end theme-text-variables
|
||||||
|
|
||||||
// scss-docs-start theme-bg-subtle-variables
|
// // scss-docs-start theme-bg-subtle-variables
|
||||||
$primary-bg-subtle: tint-color($primary, 80%) !default;
|
// $primary-bg-subtle: tint-color($primary, 80%) !default;
|
||||||
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
|
// $secondary-bg-subtle: tint-color($secondary, 80%) !default;
|
||||||
$success-bg-subtle: tint-color($success, 80%) !default;
|
// $success-bg-subtle: tint-color($success, 80%) !default;
|
||||||
$info-bg-subtle: tint-color($info, 80%) !default;
|
// $info-bg-subtle: tint-color($info, 80%) !default;
|
||||||
$warning-bg-subtle: tint-color($warning, 80%) !default;
|
// $warning-bg-subtle: tint-color($warning, 80%) !default;
|
||||||
$danger-bg-subtle: tint-color($danger, 80%) !default;
|
// $danger-bg-subtle: tint-color($danger, 80%) !default;
|
||||||
$light-bg-subtle: mix($gray-100, $white) !default;
|
// $light-bg-subtle: color.mix($gray-100, $white) !default;
|
||||||
$dark-bg-subtle: $gray-400 !default;
|
// $dark-bg-subtle: $gray-400 !default;
|
||||||
// scss-docs-end theme-bg-subtle-variables
|
// // scss-docs-end theme-bg-subtle-variables
|
||||||
|
|
||||||
// scss-docs-start theme-border-subtle-variables
|
// // scss-docs-start theme-border-subtle-variables
|
||||||
$primary-border-subtle: tint-color($primary, 60%) !default;
|
// $primary-border-subtle: tint-color($primary, 60%) !default;
|
||||||
$secondary-border-subtle: tint-color($secondary, 60%) !default;
|
// $secondary-border-subtle: tint-color($secondary, 60%) !default;
|
||||||
$success-border-subtle: tint-color($success, 60%) !default;
|
// $success-border-subtle: tint-color($success, 60%) !default;
|
||||||
$info-border-subtle: tint-color($info, 60%) !default;
|
// $info-border-subtle: tint-color($info, 60%) !default;
|
||||||
$warning-border-subtle: tint-color($warning, 60%) !default;
|
// $warning-border-subtle: tint-color($warning, 60%) !default;
|
||||||
$danger-border-subtle: tint-color($danger, 60%) !default;
|
// $danger-border-subtle: tint-color($danger, 60%) !default;
|
||||||
$light-border-subtle: $gray-200 !default;
|
// $light-border-subtle: $gray-200 !default;
|
||||||
$dark-border-subtle: $gray-500 !default;
|
// $dark-border-subtle: $gray-500 !default;
|
||||||
// scss-docs-end theme-border-subtle-variables
|
// // scss-docs-end theme-border-subtle-variables
|
||||||
|
|
||||||
// Characters which are escaped by the escape-svg function
|
// Characters which are escaped by the escape-svg function
|
||||||
$escaped-characters: (
|
$escaped-characters: (
|
||||||
@ -363,34 +75,38 @@ $escaped-characters: (
|
|||||||
(")", "%29"),
|
(")", "%29"),
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
// Options
|
// // Options
|
||||||
//
|
// //
|
||||||
// Quickly modify global styling by enabling or disabling optional features.
|
// // Quickly modify global styling by enabling or disabling optional features.
|
||||||
|
|
||||||
$enable-caret: true !default;
|
// $enable-caret: true !default;
|
||||||
$enable-rounded: true !default;
|
// $enable-rounded: true !default;
|
||||||
$enable-shadows: false !default;
|
// $enable-shadows: false !default;
|
||||||
$enable-gradients: false !default;
|
// $enable-gradients: false !default;
|
||||||
$enable-transitions: true !default;
|
// $enable-transitions: true !default;
|
||||||
$enable-reduced-motion: true !default;
|
// $enable-reduced-motion: true !default;
|
||||||
$enable-smooth-scroll: true !default;
|
// $enable-smooth-scroll: true !default;
|
||||||
$enable-grid-classes: true !default;
|
// $enable-grid-classes: true !default;
|
||||||
$enable-container-classes: true !default;
|
// $enable-container-classes: true !default;
|
||||||
$enable-cssgrid: false !default;
|
// $enable-cssgrid: false !default;
|
||||||
$enable-button-pointers: true !default;
|
// $enable-button-pointers: true !default;
|
||||||
$enable-rfs: true !default;
|
// $enable-rfs: true !default;
|
||||||
$enable-validation-icons: true !default;
|
// $enable-validation-icons: true !default;
|
||||||
$enable-negative-margins: false !default;
|
// $enable-negative-margins: false !default;
|
||||||
$enable-deprecation-messages: true !default;
|
// $enable-deprecation-messages: true !default;
|
||||||
$enable-important-utilities: true !default;
|
// $enable-important-utilities: true !default;
|
||||||
|
|
||||||
$enable-dark-mode: true !default;
|
// $enable-dark-mode: true !default;
|
||||||
$color-mode-type: data !default; // `data` or `media-query`
|
// $color-mode-type: data !default; // `data` or `media-query`
|
||||||
|
|
||||||
// Prefix for :root CSS variables
|
// // Prefix for :root CSS variables
|
||||||
|
// $prefix: bs- !default;
|
||||||
|
|
||||||
|
// $color-mode-type: "media-query" !default;
|
||||||
|
// $color-contrast-dark: #000 !default;
|
||||||
|
// $color-contrast-light: #fff !default;
|
||||||
|
// $min-contrast-ratio: 4.5 !default;
|
||||||
|
|
||||||
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
|
|
||||||
$prefix: $variable-prefix !default;
|
|
||||||
|
|
||||||
// Gradient
|
// Gradient
|
||||||
//
|
//
|
||||||
@ -491,8 +207,8 @@ $grid-breakpoints: (
|
|||||||
) !default;
|
) !default;
|
||||||
// scss-docs-end grid-breakpoints
|
// scss-docs-end grid-breakpoints
|
||||||
|
|
||||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||||
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
||||||
|
|
||||||
|
|
||||||
// Grid containers
|
// Grid containers
|
||||||
@ -509,7 +225,7 @@ $container-max-widths: (
|
|||||||
) !default;
|
) !default;
|
||||||
// scss-docs-end container-max-widths
|
// scss-docs-end container-max-widths
|
||||||
|
|
||||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
// @include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||||
|
|
||||||
|
|
||||||
// Grid columns
|
// Grid columns
|
||||||
@ -586,16 +302,15 @@ $transition-collapse: height .35s ease !default;
|
|||||||
$transition-collapse-width: width .35s ease !default;
|
$transition-collapse-width: width .35s ease !default;
|
||||||
// scss-docs-end collapse-transition
|
// scss-docs-end collapse-transition
|
||||||
|
|
||||||
// stylelint-disable function-disallowed-list
|
|
||||||
// scss-docs-start aspect-ratios
|
// scss-docs-start aspect-ratios
|
||||||
$aspect-ratios: (
|
$aspect-ratios: (
|
||||||
"1x1": 100%,
|
"auto": auto,
|
||||||
"4x3": calc(3 / 4 * 100%),
|
"4x3": #{"4 / 3"},
|
||||||
"16x9": calc(9 / 16 * 100%),
|
"1x1": #{"1 / 1"},
|
||||||
"21x9": calc(9 / 21 * 100%)
|
"16x9": #{"16 / 9"},
|
||||||
|
"21x9": #{"21 / 9"}
|
||||||
) !default;
|
) !default;
|
||||||
// scss-docs-end aspect-ratios
|
// scss-docs-end aspect-ratios
|
||||||
// stylelint-enable function-disallowed-list
|
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
//
|
//
|
||||||
@ -843,7 +558,8 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
|
|||||||
$btn-link-color: var(--#{$prefix}link-color) !default;
|
$btn-link-color: var(--#{$prefix}link-color) !default;
|
||||||
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
||||||
$btn-link-disabled-color: $gray-600 !default;
|
$btn-link-disabled-color: $gray-600 !default;
|
||||||
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
|
$btn-link-color-contrast: color-contrast($link-color) !default;
|
||||||
|
$btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
|
||||||
|
|
||||||
// Allows for customizing button radius independently from global border radius
|
// Allows for customizing button radius independently from global border radius
|
||||||
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
||||||
@ -920,7 +636,7 @@ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
|||||||
$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
|
$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
|
||||||
$input-plaintext-color: var(--#{$prefix}body-color) !default;
|
$input-plaintext-color: var(--#{$prefix}body-color) !default;
|
||||||
|
|
||||||
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
|
$input-height-border: calc(#{$input-border-width} * 2) !default;
|
||||||
|
|
||||||
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
||||||
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
||||||
@ -1206,10 +922,10 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
|
|||||||
$navbar-toggler-focus-width: $btn-focus-width !default;
|
$navbar-toggler-focus-width: $btn-focus-width !default;
|
||||||
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
|
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
|
||||||
|
|
||||||
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
|
$navbar-light-color: color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
|
||||||
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
|
$navbar-light-hover-color: color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
|
||||||
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
|
$navbar-light-active-color: color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
|
||||||
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
|
$navbar-light-disabled-color: color-mix(in srgb, var(--#{$prefix}fg-black) 30%, transparent) !default;
|
||||||
$navbar-light-icon-color: rgba($body-color, .75) !default;
|
$navbar-light-icon-color: rgba($body-color, .75) !default;
|
||||||
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||||
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
|
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
|
||||||
@ -1245,7 +961,7 @@ $dropdown-bg: var(--#{$prefix}body-bg) !default;
|
|||||||
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
|
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||||
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
||||||
$dropdown-border-width: var(--#{$prefix}border-width) !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-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
|
||||||
$dropdown-divider-bg: $dropdown-border-color !default;
|
$dropdown-divider-bg: $dropdown-border-color !default;
|
||||||
$dropdown-divider-margin-y: $spacer * .5 !default;
|
$dropdown-divider-margin-y: $spacer * .5 !default;
|
||||||
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
|
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||||
@ -1302,7 +1018,7 @@ $pagination-color: var(--#{$prefix}link-color) !default;
|
|||||||
$pagination-bg: var(--#{$prefix}body-bg) !default;
|
$pagination-bg: var(--#{$prefix}body-bg) !default;
|
||||||
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
|
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
|
||||||
$pagination-border-width: var(--#{$prefix}border-width) !default;
|
$pagination-border-width: var(--#{$prefix}border-width) !default;
|
||||||
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
|
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
|
||||||
$pagination-border-color: var(--#{$prefix}border-color) !default;
|
$pagination-border-color: var(--#{$prefix}border-color) !default;
|
||||||
|
|
||||||
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
|
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
|
||||||
@ -1389,8 +1105,8 @@ $accordion-button-focus-border-color: $input-focus-border-color !default; //
|
|||||||
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
||||||
|
|
||||||
$accordion-icon-width: 1.25rem !default;
|
$accordion-icon-width: 1.25rem !default;
|
||||||
$accordion-icon-color: $body-color !default;
|
$accordion-icon-color: var(--#{$prefix}body-color) !default;
|
||||||
$accordion-icon-active-color: $primary-text-emphasis !default;
|
$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
|
||||||
$accordion-icon-transition: transform .2s ease-in-out !default;
|
$accordion-icon-transition: transform .2s ease-in-out !default;
|
||||||
$accordion-icon-transform: rotate(-180deg) !default;
|
$accordion-icon-transform: rotate(-180deg) !default;
|
||||||
|
|
||||||
@ -1438,7 +1154,7 @@ $popover-max-width: 276px !default;
|
|||||||
$popover-border-width: var(--#{$prefix}border-width) !default;
|
$popover-border-width: var(--#{$prefix}border-width) !default;
|
||||||
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
|
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
|
||||||
$popover-border-radius: var(--#{$prefix}border-radius-lg) !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-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
|
||||||
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
|
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
|
||||||
|
|
||||||
$popover-header-font-size: $font-size-base !default;
|
$popover-header-font-size: $font-size-base !default;
|
||||||
@ -1639,7 +1355,7 @@ $breadcrumb-margin-bottom: 1rem !default;
|
|||||||
$breadcrumb-bg: null !default;
|
$breadcrumb-bg: null !default;
|
||||||
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
||||||
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
||||||
$breadcrumb-divider: quote("/") !default;
|
$breadcrumb-divider: string.quote("/") !default;
|
||||||
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
||||||
$breadcrumb-border-radius: null !default;
|
$breadcrumb-border-radius: null !default;
|
||||||
// scss-docs-end breadcrumb-variables
|
// scss-docs-end breadcrumb-variables
|
||||||
@ -1684,21 +1400,6 @@ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Depre
|
|||||||
// scss-docs-end carousel-dark-variables
|
// scss-docs-end carousel-dark-variables
|
||||||
|
|
||||||
|
|
||||||
// Spinners
|
|
||||||
|
|
||||||
// scss-docs-start spinner-variables
|
|
||||||
$spinner-width: 2rem !default;
|
|
||||||
$spinner-height: $spinner-width !default;
|
|
||||||
$spinner-vertical-align: -.125em !default;
|
|
||||||
$spinner-border-width: .25em !default;
|
|
||||||
$spinner-animation-speed: .75s !default;
|
|
||||||
|
|
||||||
$spinner-width-sm: 1rem !default;
|
|
||||||
$spinner-height-sm: $spinner-width-sm !default;
|
|
||||||
$spinner-border-width-sm: .2em !default;
|
|
||||||
// scss-docs-end spinner-variables
|
|
||||||
|
|
||||||
|
|
||||||
// Close
|
// Close
|
||||||
|
|
||||||
// scss-docs-start close-variables
|
// scss-docs-start close-variables
|
||||||
@ -1750,4 +1451,105 @@ $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, remo
|
|||||||
|
|
||||||
$pre-color: null !default;
|
$pre-color: null !default;
|
||||||
|
|
||||||
@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
|
// Dark color mode variables
|
||||||
|
//
|
||||||
|
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
|
||||||
|
|
||||||
|
//
|
||||||
|
// Global colors
|
||||||
|
//
|
||||||
|
|
||||||
|
// scss-docs-start sass-dark-mode-vars
|
||||||
|
// scss-docs-start theme-text-dark-variables
|
||||||
|
$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;
|
||||||
|
// scss-docs-end theme-text-dark-variables
|
||||||
|
|
||||||
|
// scss-docs-start theme-bg-subtle-dark-variables
|
||||||
|
$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;
|
||||||
|
// scss-docs-end theme-bg-subtle-dark-variables
|
||||||
|
|
||||||
|
// scss-docs-start theme-border-subtle-dark-variables
|
||||||
|
$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;
|
||||||
|
// scss-docs-end theme-border-subtle-dark-variables
|
||||||
|
|
||||||
|
$body-color-dark: $gray-300 !default;
|
||||||
|
$body-bg-dark: $gray-900 !default;
|
||||||
|
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
||||||
|
$body-secondary-bg-dark: $gray-800 !default;
|
||||||
|
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
||||||
|
$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
|
||||||
|
$body-emphasis-color-dark: $white !default;
|
||||||
|
$border-color-dark: $gray-700 !default;
|
||||||
|
$border-color-translucent-dark: rgba($white, .15) !default;
|
||||||
|
$headings-color-dark: inherit !default;
|
||||||
|
$link-color-dark: tint-color($primary, 40%) !default;
|
||||||
|
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
||||||
|
$code-color-dark: tint-color($code-color, 40%) !default;
|
||||||
|
$mark-color-dark: $body-color-dark !default;
|
||||||
|
$mark-bg-dark: $yellow-800 !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Forms
|
||||||
|
//
|
||||||
|
|
||||||
|
$form-select-indicator-color-dark: $body-color-dark !default;
|
||||||
|
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||||
|
|
||||||
|
$form-switch-color-dark: rgba($white, .25) !default;
|
||||||
|
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
|
||||||
|
|
||||||
|
// scss-docs-start form-validation-colors-dark
|
||||||
|
$form-valid-color-dark: $green-300 !default;
|
||||||
|
$form-valid-border-color-dark: $green-300 !default;
|
||||||
|
$form-invalid-color-dark: $red-300 !default;
|
||||||
|
$form-invalid-border-color-dark: $red-300 !default;
|
||||||
|
// scss-docs-end form-validation-colors-dark
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Accordion
|
||||||
|
//
|
||||||
|
|
||||||
|
$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||||
|
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||||
|
// scss-docs-end sass-dark-mode-vars
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Carousel
|
||||||
|
//
|
||||||
|
|
||||||
|
$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
|
||||||
|
//
|
||||||
|
|
||||||
|
$btn-close-filter-dark: $btn-close-white-filter !default;
|
||||||
|
|||||||
33
scss/bootstrap-grid.scss
vendored
33
scss/bootstrap-grid.scss
vendored
@ -1,25 +1,20 @@
|
|||||||
@import "mixins/banner";
|
@use "banner" with (
|
||||||
@include bsBanner(Grid);
|
$file: "Grid"
|
||||||
|
);
|
||||||
|
|
||||||
$include-column-box-sizing: true !default;
|
@use "sass:map";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
// @use "maps" as *;
|
||||||
|
|
||||||
@import "functions";
|
@forward "utilities"; // Make utilities available downstream
|
||||||
@import "variables";
|
@use "utilities" as *; // Bring utilities into the current namespace
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
|
|
||||||
@import "mixins/breakpoints";
|
@forward "layout/containers";
|
||||||
@import "mixins/container";
|
@forward "layout/grid";
|
||||||
@import "mixins/grid";
|
|
||||||
@import "mixins/utilities";
|
|
||||||
|
|
||||||
@import "vendor/rfs";
|
|
||||||
|
|
||||||
@import "containers";
|
|
||||||
@import "grid";
|
|
||||||
|
|
||||||
@import "utilities";
|
|
||||||
// Only use the utilities we need
|
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
// stylelint-disable-next-line scss/dollar-variable-default
|
||||||
$utilities: map-get-multiple(
|
$utilities: map-get-multiple(
|
||||||
$utilities,
|
$utilities,
|
||||||
@ -59,4 +54,4 @@ $utilities: map-get-multiple(
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@import "utilities/api";
|
@use "utilities/api";
|
||||||
|
|||||||
14
scss/bootstrap-reboot.scss
vendored
14
scss/bootstrap-reboot.scss
vendored
@ -1,10 +1,6 @@
|
|||||||
@import "mixins/banner";
|
@use "banner" with (
|
||||||
@include bsBanner(Reboot);
|
$file: "Reboot"
|
||||||
|
);
|
||||||
|
|
||||||
@import "functions";
|
@forward "root";
|
||||||
@import "variables";
|
@forward "content/reboot";
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
@import "mixins";
|
|
||||||
@import "root";
|
|
||||||
@import "reboot";
|
|
||||||
|
|||||||
19
scss/bootstrap-utilities.scss
vendored
19
scss/bootstrap-utilities.scss
vendored
@ -1,19 +1,16 @@
|
|||||||
@import "mixins/banner";
|
@use "banner" with (
|
||||||
@include bsBanner(Utilities);
|
$file: "Utilities"
|
||||||
|
);
|
||||||
|
|
||||||
// Configuration
|
// Configuration
|
||||||
@import "functions";
|
// @forward "variables";
|
||||||
@import "variables";
|
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
@import "mixins";
|
|
||||||
@import "utilities";
|
|
||||||
|
|
||||||
// Layout & components
|
// Layout & components
|
||||||
@import "root";
|
@use "root" as *;
|
||||||
|
|
||||||
// Helpers
|
// Helpers
|
||||||
@import "helpers";
|
@forward "helpers";
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
@import "utilities/api";
|
@use "utilities" as *;
|
||||||
|
@use "utilities/api";
|
||||||
|
|||||||
82
scss/bootstrap.scss
vendored
82
scss/bootstrap.scss
vendored
@ -1,52 +1,46 @@
|
|||||||
@import "mixins/banner";
|
@use "banner";
|
||||||
@include bsBanner("");
|
|
||||||
|
|
||||||
|
|
||||||
// scss-docs-start import-stack
|
// scss-docs-start import-stack
|
||||||
// Configuration
|
// Global CSS variables, layer definitions, and configuration
|
||||||
@import "functions";
|
@use "root";
|
||||||
@import "variables";
|
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
@import "mixins";
|
|
||||||
@import "utilities";
|
|
||||||
|
|
||||||
// Layout & components
|
// Reboot & Content
|
||||||
@import "root";
|
@use "content";
|
||||||
@import "reboot";
|
|
||||||
@import "type";
|
// Layout
|
||||||
@import "images";
|
@use "layout";
|
||||||
@import "containers";
|
|
||||||
@import "grid";
|
// Forms
|
||||||
@import "tables";
|
@use "forms";
|
||||||
@import "forms";
|
|
||||||
@import "buttons";
|
// Components
|
||||||
@import "transitions";
|
@use "accordion";
|
||||||
@import "dropdown";
|
@use "alert";
|
||||||
@import "button-group";
|
@use "badge";
|
||||||
@import "nav";
|
@use "breadcrumb";
|
||||||
@import "navbar";
|
@use "buttons";
|
||||||
@import "card";
|
@use "button-group";
|
||||||
@import "accordion";
|
@use "card";
|
||||||
@import "breadcrumb";
|
@use "carousel";
|
||||||
@import "pagination";
|
@use "close";
|
||||||
@import "badge";
|
@use "dropdown";
|
||||||
@import "alert";
|
@use "list-group";
|
||||||
@import "progress";
|
@use "modal";
|
||||||
@import "list-group";
|
@use "nav";
|
||||||
@import "close";
|
@use "navbar";
|
||||||
@import "toasts";
|
@use "offcanvas";
|
||||||
@import "modal";
|
@use "pagination";
|
||||||
@import "tooltip";
|
@use "placeholders";
|
||||||
@import "popover";
|
@use "popover";
|
||||||
@import "carousel";
|
@use "progress";
|
||||||
@import "spinners";
|
@use "spinners";
|
||||||
@import "offcanvas";
|
@use "toasts";
|
||||||
@import "placeholders";
|
@use "tooltip";
|
||||||
|
@use "transitions";
|
||||||
|
|
||||||
// Helpers
|
// Helpers
|
||||||
@import "helpers";
|
@use "helpers";
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
@import "utilities/api";
|
@use "utilities/api";
|
||||||
// scss-docs-end import-stack
|
// scss-docs-end import-stack
|
||||||
|
|||||||
@ -1,3 +1,10 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/image" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
|
||||||
// Responsive images (ensure images don't scale beyond their parents)
|
// Responsive images (ensure images don't scale beyond their parents)
|
||||||
//
|
//
|
||||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||||
@ -1,3 +1,9 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
|
||||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||||
|
|
||||||
|
|
||||||
@ -90,32 +96,38 @@ hr {
|
|||||||
color: var(--#{$prefix}heading-color);
|
color: var(--#{$prefix}heading-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1,
|
||||||
|
.h1 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h1-font-size);
|
@include font-size($h1-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2,
|
||||||
|
.h2 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h2-font-size);
|
@include font-size($h2-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3,
|
||||||
|
.h3 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h3-font-size);
|
@include font-size($h3-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4,
|
||||||
|
.h4 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h4-font-size);
|
@include font-size($h4-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5,
|
||||||
|
.h5 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h5-font-size);
|
@include font-size($h5-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6,
|
||||||
|
.h6 {
|
||||||
@extend %heading;
|
@extend %heading;
|
||||||
@include font-size($h6-font-size);
|
@include font-size($h6-font-size);
|
||||||
}
|
}
|
||||||
@ -1,3 +1,37 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "sass:math";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../colors" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../functions" as *;
|
||||||
|
@use "../layout/breakpoints" as *;
|
||||||
|
|
||||||
|
// scss-docs-start table-variant
|
||||||
|
@mixin table-variant($state, $background) {
|
||||||
|
.table-#{$state} {
|
||||||
|
$color: color-contrast(opaque($body-bg, $background));
|
||||||
|
$hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
|
||||||
|
$striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
|
||||||
|
$active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
|
||||||
|
$table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
|
||||||
|
|
||||||
|
--#{$prefix}table-color: #{$color};
|
||||||
|
--#{$prefix}table-bg: #{$background};
|
||||||
|
--#{$prefix}table-border-color: #{$table-border-color};
|
||||||
|
--#{$prefix}table-striped-bg: #{$striped-bg};
|
||||||
|
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
|
||||||
|
--#{$prefix}table-active-bg: #{$active-bg};
|
||||||
|
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
|
||||||
|
--#{$prefix}table-hover-bg: #{$hover-bg};
|
||||||
|
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
|
||||||
|
|
||||||
|
color: var(--#{$prefix}table-color);
|
||||||
|
border-color: var(--#{$prefix}table-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// scss-docs-end table-variant
|
||||||
|
|
||||||
//
|
//
|
||||||
// Basic Bootstrap table
|
// Basic Bootstrap table
|
||||||
//
|
//
|
||||||
@ -49,7 +83,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.table-group-divider {
|
.table-group-divider {
|
||||||
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
|
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -159,7 +193,7 @@
|
|||||||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||||
// size of where your table will overflow.
|
// size of where your table will overflow.
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
@include media-breakpoint-down($breakpoint) {
|
@include media-breakpoint-down($breakpoint) {
|
||||||
@ -1,30 +1,7 @@
|
|||||||
//
|
@use "../config" as *;
|
||||||
// Headings
|
@use "../variables" as *;
|
||||||
//
|
@use "../mixins/lists" as *;
|
||||||
.h1 {
|
@use "../vendor/rfs" as *;
|
||||||
@extend h1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2 {
|
|
||||||
@extend h2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h3 {
|
|
||||||
@extend h3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h4 {
|
|
||||||
@extend h4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h5 {
|
|
||||||
@extend h5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h6 {
|
|
||||||
@extend h6;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
@include font-size($lead-font-size);
|
@include font-size($lead-font-size);
|
||||||
@ -46,11 +23,11 @@
|
|||||||
// Emphasis
|
// Emphasis
|
||||||
//
|
//
|
||||||
.small {
|
.small {
|
||||||
@extend small;
|
// @extend small;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark {
|
.mark {
|
||||||
@extend mark;
|
// @extend mark;
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
4
scss/content/index.scss
Normal file
4
scss/content/index.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@forward "reboot";
|
||||||
|
@forward "type";
|
||||||
|
@forward "tables";
|
||||||
|
@forward "images";
|
||||||
@ -1,3 +1,8 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
|
||||||
.form-floating {
|
.form-floating {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,12 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../functions" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/color-mode" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Check/radio
|
// Check/radio
|
||||||
//
|
//
|
||||||
|
|||||||
@ -1,3 +1,11 @@
|
|||||||
|
@use "sass:math";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/gradients" as *;
|
||||||
//
|
//
|
||||||
// General form controls (plus a few specific high-level interventions)
|
// General form controls (plus a few specific high-level interventions)
|
||||||
//
|
//
|
||||||
@ -56,7 +64,7 @@
|
|||||||
// https://github.com/twbs/bootstrap/issues/23307
|
// https://github.com/twbs/bootstrap/issues/23307
|
||||||
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
|
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
|
||||||
// Multiply line-height by 1em if it has no unit
|
// Multiply line-height by 1em if it has no unit
|
||||||
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||||
|
|
||||||
// Android Chrome type="date" is taller than the other inputs
|
// Android Chrome type="date" is taller than the other inputs
|
||||||
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
|
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/gradients" as *;
|
||||||
|
|
||||||
// Range
|
// Range
|
||||||
//
|
//
|
||||||
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
|
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
|
||||||
|
|||||||
@ -1,3 +1,11 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/color-mode" as *;
|
||||||
|
|
||||||
// Select
|
// Select
|
||||||
//
|
//
|
||||||
// Replaces the browser default select with a custom one, mostly pulled from
|
// Replaces the browser default select with a custom one, mostly pulled from
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
//
|
//
|
||||||
// Form text
|
// Form text
|
||||||
//
|
//
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "sass:string";
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
@ -116,12 +122,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
$validation-messages: "";
|
$validation-messages: "";
|
||||||
@each $state in map-keys($form-validation-states) {
|
@each $state in map.keys($form-validation-states) {
|
||||||
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
|
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
|
||||||
}
|
}
|
||||||
|
|
||||||
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
|
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
|
||||||
margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
|
margin-left: calc(-1 * #{$input-border-width});
|
||||||
@include border-start-radius(0);
|
@include border-start-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
//
|
//
|
||||||
// Labels
|
// Labels
|
||||||
//
|
//
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
|
||||||
// Form validation
|
// Form validation
|
||||||
//
|
//
|
||||||
// Provide feedback to users when form field values are valid or invalid. Works
|
// Provide feedback to users when form field values are valid or invalid. Works
|
||||||
@ -5,6 +11,171 @@
|
|||||||
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||||
// server-side validation.
|
// server-side validation.
|
||||||
|
|
||||||
|
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
||||||
|
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
||||||
|
|
||||||
|
// scss-docs-start form-validation-mixins
|
||||||
|
@mixin form-validation-state-selector($state) {
|
||||||
|
@if ($state == "valid" or $state == "invalid") {
|
||||||
|
.was-validated #{if(&, "&", "")}:#{$state},
|
||||||
|
#{if(&, "&", "")}.is-#{$state} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
#{if(&, "&", "")}.is-#{$state} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin form-validation-state(
|
||||||
|
$state,
|
||||||
|
$color,
|
||||||
|
$icon,
|
||||||
|
$tooltip-color: color-contrast($color),
|
||||||
|
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
||||||
|
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
|
||||||
|
$border-color: $color
|
||||||
|
) {
|
||||||
|
.#{$state}-feedback {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: $form-feedback-margin-top;
|
||||||
|
@include font-size($form-feedback-font-size);
|
||||||
|
font-style: $form-feedback-font-style;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$state}-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 5;
|
||||||
|
display: none;
|
||||||
|
max-width: 100%; // Contain to parent when possible
|
||||||
|
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
||||||
|
margin-top: .1rem;
|
||||||
|
@include font-size($form-feedback-tooltip-font-size);
|
||||||
|
line-height: $form-feedback-tooltip-line-height;
|
||||||
|
color: $tooltip-color;
|
||||||
|
background-color: $tooltip-bg-color;
|
||||||
|
@include border-radius($form-feedback-tooltip-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
~ .#{$state}-feedback,
|
||||||
|
~ .#{$state}-tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
border-color: $border-color;
|
||||||
|
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
padding-right: $input-height-inner;
|
||||||
|
background-image: escape-svg($icon);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right $input-height-inner-quarter center;
|
||||||
|
background-size: $input-height-inner-half $input-height-inner-half;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $border-color;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@include box-shadow($input-box-shadow, $focus-box-shadow);
|
||||||
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// stylelint-disable-next-line selector-no-qualifying-type
|
||||||
|
textarea.form-control {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
padding-right: $input-height-inner;
|
||||||
|
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
border-color: $border-color;
|
||||||
|
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
&:not([multiple]):not([size]),
|
||||||
|
&:not([multiple])[size="1"] {
|
||||||
|
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
|
||||||
|
padding-right: $form-select-feedback-icon-padding-end;
|
||||||
|
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
||||||
|
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $border-color;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
|
||||||
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-color {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
width: add($form-color-width, $input-height-inner);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
border-color: $border-color;
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
~ .form-check-label {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-check-inline .form-check-input {
|
||||||
|
~ .#{$state}-feedback {
|
||||||
|
margin-left: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
> .form-control:not(:focus),
|
||||||
|
> .form-select:not(:focus),
|
||||||
|
> .form-floating:not(:focus-within) {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
@if $state == "valid" {
|
||||||
|
z-index: 3;
|
||||||
|
} @else if $state == "invalid" {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// scss-docs-end form-validation-mixins
|
||||||
|
|
||||||
|
|
||||||
// scss-docs-start form-validation-states-loop
|
// scss-docs-start form-validation-states-loop
|
||||||
@each $state, $data in $form-validation-states {
|
@each $state, $data in $form-validation-states {
|
||||||
@include form-validation-state($state, $data...);
|
@include form-validation-state($state, $data...);
|
||||||
|
|||||||
9
scss/forms/index.scss
Normal file
9
scss/forms/index.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
@forward "labels";
|
||||||
|
@forward "form-text";
|
||||||
|
@forward "form-control";
|
||||||
|
@forward "form-select";
|
||||||
|
@forward "form-check";
|
||||||
|
@forward "form-range";
|
||||||
|
@forward "floating-labels";
|
||||||
|
@forward "input-group";
|
||||||
|
@forward "validation";
|
||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../mixins/clearfix" as *;
|
||||||
|
|
||||||
.clearfix {
|
.clearfix {
|
||||||
@include clearfix();
|
@include clearfix();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
.text-bg-#{$color} {
|
.text-bg-#{$color} {
|
||||||
|
|||||||
@ -1,30 +1,36 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../colors" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
||||||
@each $color, $value in $theme-colors {
|
@layer helpers {
|
||||||
.link-#{$color} {
|
@each $color, $value in $theme-colors {
|
||||||
color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
|
.link-#{$color} {
|
||||||
text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
|
color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
|
||||||
|
text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
|
||||||
|
|
||||||
|
@if $link-shade-percentage != 0 {
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
|
||||||
|
color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
|
||||||
|
text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// One-off special link helper as a bridge until v6
|
||||||
|
.link-body-emphasis {
|
||||||
|
color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity));
|
||||||
|
text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity));
|
||||||
|
|
||||||
@if $link-shade-percentage != 0 {
|
@if $link-shade-percentage != 0 {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
|
color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-opacity, .75));
|
||||||
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
|
text-decoration-color: color-mix(in srgb, var(--#{$prefix}emphasis-color), transparent var(--#{$prefix}link-underline-opacity, .75));
|
||||||
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// One-off special link helper as a bridge until v6
|
|
||||||
.link-body-emphasis {
|
|
||||||
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
|
|
||||||
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
|
|
||||||
|
|
||||||
@if $link-shade-percentage != 0 {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
|
|
||||||
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
.focus-ring:focus {
|
.focus-ring:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
// 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
|
// 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
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
|
||||||
.icon-link {
|
.icon-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
gap: $icon-link-gap;
|
gap: $icon-link-gap;
|
||||||
|
|||||||
@ -1,3 +1,8 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../layout/breakpoints" as *;
|
||||||
|
|
||||||
// Shorthand
|
// Shorthand
|
||||||
|
|
||||||
.fixed-top {
|
.fixed-top {
|
||||||
@ -17,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Responsive sticky top and bottom
|
// Responsive sticky top and bottom
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
// Credit: Nicolas Gallagher and SUIT CSS.
|
|
||||||
|
|
||||||
.ratio {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: block;
|
|
||||||
padding-top: var(--#{$prefix}aspect-ratio);
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $key, $ratio in $aspect-ratios {
|
|
||||||
.ratio-#{$key} {
|
|
||||||
--#{$prefix}aspect-ratio: #{$ratio};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Stretched link
|
// Stretched link
|
||||||
//
|
//
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
//
|
@use "../mixins/text-truncate" as *;
|
||||||
// Text truncation
|
// Text truncation
|
||||||
//
|
//
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../mixins/visually-hidden" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Visually hidden
|
// Visually hidden
|
||||||
//
|
//
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
.vr {
|
.vr {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
|
|||||||
11
scss/helpers/index.scss
Normal file
11
scss/helpers/index.scss
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
@import "clearfix";
|
||||||
|
@import "color-bg";
|
||||||
|
@import "colored-links";
|
||||||
|
@import "focus-ring";
|
||||||
|
@import "icon-link";
|
||||||
|
@import "position";
|
||||||
|
@import "stacks";
|
||||||
|
@import "visually-hidden";
|
||||||
|
@import "stretched-link";
|
||||||
|
@import "text-truncation";
|
||||||
|
@import "vr";
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
@use "sass:list";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// Breakpoint viewport sizes and media queries.
|
// Breakpoint viewport sizes and media queries.
|
||||||
//
|
//
|
||||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||||
@ -14,12 +18,12 @@
|
|||||||
// md
|
// md
|
||||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
||||||
// md
|
// md
|
||||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
|
||||||
$n: index($breakpoint-names, $name);
|
$n: list.index($breakpoint-names, $name);
|
||||||
@if not $n {
|
@if not $n {
|
||||||
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
||||||
}
|
}
|
||||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
@return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||||
@ -27,7 +31,7 @@
|
|||||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||||
// 576px
|
// 576px
|
||||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||||
$min: map-get($breakpoints, $name);
|
$min: map.get($breakpoints, $name);
|
||||||
@return if($min != 0, $min, null);
|
@return if($min != 0, $min, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,7 +45,7 @@
|
|||||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||||
// 767.98px
|
// 767.98px
|
||||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||||
$max: map-get($breakpoints, $name);
|
$max: map.get($breakpoints, $name);
|
||||||
@return if($max and $max > 0, $max - .02, null);
|
@return if($max and $max > 0, $max - .02, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1,6 +1,20 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "breakpoints" as *;
|
||||||
|
|
||||||
// Container widths
|
// Container widths
|
||||||
//
|
//
|
||||||
// Set the container width, and override it for fixed navbars in media queries.
|
// Set the container width, and override it for fixed navbars in media queries.
|
||||||
|
// Container mixins
|
||||||
|
|
||||||
|
@mixin make-container($gutter: $container-padding-x) {
|
||||||
|
--#{$prefix}gutter-x: #{$gutter};
|
||||||
|
--#{$prefix}gutter-y: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-right: calc(var(--#{$prefix}gutter-x) * .5);
|
||||||
|
padding-left: calc(var(--#{$prefix}gutter-x) * .5);
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
@if $enable-container-classes {
|
@if $enable-container-classes {
|
||||||
// Single container class with breakpoint max-widths
|
// Single container class with breakpoint max-widths
|
||||||
83
scss/layout/_grid.scss
Normal file
83
scss/layout/_grid.scss
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "breakpoints" as *;
|
||||||
|
|
||||||
|
// mdo-do
|
||||||
|
// - check gap utilities as replacement for gutter classes from v5
|
||||||
|
|
||||||
|
// Row
|
||||||
|
//
|
||||||
|
// Rows contain your columns.
|
||||||
|
|
||||||
|
:root {
|
||||||
|
@each $name, $value in $grid-breakpoints {
|
||||||
|
--#{$prefix}breakpoint-#{$name}: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
--#{$prefix}columns: #{$grid-columns};
|
||||||
|
--#{$prefix}rows: 1;
|
||||||
|
--#{$prefix}gap: #{$grid-gutter-width};
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
|
||||||
|
grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
|
||||||
|
gap: var(--#{$prefix}gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||||
|
@if $grid-columns > 0 {
|
||||||
|
@for $i from 1 through $grid-columns {
|
||||||
|
.col#{$infix}-#{$i} {
|
||||||
|
grid-column: auto / span $i;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end#{$infix}-#{$i} {
|
||||||
|
grid-column-end: $i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start with `1` because `0` is an invalid value.
|
||||||
|
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
|
||||||
|
@for $i from 1 through ($grid-columns - 1) {
|
||||||
|
.col-start#{$infix}-#{$i} {
|
||||||
|
grid-column-start: $i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// mdo-do: add to utilities?
|
||||||
|
.grid-cols-subgrid {
|
||||||
|
grid-template-columns: subgrid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-fill {
|
||||||
|
--#{$prefix}gap: #{$grid-gutter-width};
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||||
|
grid-auto-flow: row;
|
||||||
|
gap: var(--#{$prefix}gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
// mdo-do: add to utilities?
|
||||||
|
.g-col-auto {
|
||||||
|
grid-column: auto/auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// mdo-do: add to utilities?
|
||||||
|
.grid-cols-3 {
|
||||||
|
--#{$prefix}columns: 3;
|
||||||
|
}
|
||||||
|
.grid-cols-4 {
|
||||||
|
--#{$prefix}columns: 4;
|
||||||
|
}
|
||||||
|
.grid-cols-6 {
|
||||||
|
--#{$prefix}columns: 6;
|
||||||
|
}
|
||||||
3
scss/layout/index.scss
Normal file
3
scss/layout/index.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@forward "breakpoints";
|
||||||
|
@forward "containers";
|
||||||
|
@forward "grid";
|
||||||
@ -1,18 +0,0 @@
|
|||||||
@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
|
|
||||||
|
|
||||||
// scss-docs-start alert-variant-mixin
|
|
||||||
@mixin alert-variant($background, $border, $color) {
|
|
||||||
--#{$prefix}alert-color: #{$color};
|
|
||||||
--#{$prefix}alert-bg: #{$background};
|
|
||||||
--#{$prefix}alert-border-color: #{$border};
|
|
||||||
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
|
|
||||||
|
|
||||||
@if $enable-gradients {
|
|
||||||
background-image: var(--#{$prefix}gradient);
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-link {
|
|
||||||
color: var(--#{$prefix}alert-link-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-docs-end alert-variant-mixin
|
|
||||||
@ -1,3 +1,9 @@
|
|||||||
|
@use "sass:list";
|
||||||
|
@use "sass:math";
|
||||||
|
@use "sass:meta";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// stylelint-disable property-disallowed-list
|
// stylelint-disable property-disallowed-list
|
||||||
// Single side border-radius
|
// Single side border-radius
|
||||||
|
|
||||||
@ -5,10 +11,10 @@
|
|||||||
@function valid-radius($radius) {
|
@function valid-radius($radius) {
|
||||||
$return: ();
|
$return: ();
|
||||||
@each $value in $radius {
|
@each $value in $radius {
|
||||||
@if type-of($value) == number {
|
@if meta.type-of($value) == number {
|
||||||
$return: append($return, max($value, 0));
|
$return: list.append($return, math.max($value, 0));
|
||||||
} @else {
|
} @else {
|
||||||
$return: append($return, $value);
|
$return: list.append($return, $value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@return $return;
|
@return $return;
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
@mixin box-shadow($shadow...) {
|
@mixin box-shadow($shadow...) {
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
$result: ();
|
$result: ();
|
||||||
|
|||||||
@ -1,70 +0,0 @@
|
|||||||
// Button variants
|
|
||||||
//
|
|
||||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
|
||||||
// and disabled options for all buttons
|
|
||||||
|
|
||||||
// scss-docs-start btn-variant-mixin
|
|
||||||
@mixin button-variant(
|
|
||||||
$background,
|
|
||||||
$border,
|
|
||||||
$color: color-contrast($background),
|
|
||||||
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
|
||||||
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
|
||||||
$hover-color: color-contrast($hover-background),
|
|
||||||
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
|
||||||
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
|
||||||
$active-color: color-contrast($active-background),
|
|
||||||
$disabled-background: $background,
|
|
||||||
$disabled-border: $border,
|
|
||||||
$disabled-color: color-contrast($disabled-background)
|
|
||||||
) {
|
|
||||||
--#{$prefix}btn-color: #{$color};
|
|
||||||
--#{$prefix}btn-bg: #{$background};
|
|
||||||
--#{$prefix}btn-border-color: #{$border};
|
|
||||||
--#{$prefix}btn-hover-color: #{$hover-color};
|
|
||||||
--#{$prefix}btn-hover-bg: #{$hover-background};
|
|
||||||
--#{$prefix}btn-hover-border-color: #{$hover-border};
|
|
||||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
|
|
||||||
--#{$prefix}btn-active-color: #{$active-color};
|
|
||||||
--#{$prefix}btn-active-bg: #{$active-background};
|
|
||||||
--#{$prefix}btn-active-border-color: #{$active-border};
|
|
||||||
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
|
||||||
--#{$prefix}btn-disabled-color: #{$disabled-color};
|
|
||||||
--#{$prefix}btn-disabled-bg: #{$disabled-background};
|
|
||||||
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
|
|
||||||
}
|
|
||||||
// scss-docs-end btn-variant-mixin
|
|
||||||
|
|
||||||
// scss-docs-start btn-outline-variant-mixin
|
|
||||||
@mixin button-outline-variant(
|
|
||||||
$color,
|
|
||||||
$color-hover: color-contrast($color),
|
|
||||||
$active-background: $color,
|
|
||||||
$active-border: $color,
|
|
||||||
$active-color: color-contrast($active-background)
|
|
||||||
) {
|
|
||||||
--#{$prefix}btn-color: #{$color};
|
|
||||||
--#{$prefix}btn-border-color: #{$color};
|
|
||||||
--#{$prefix}btn-hover-color: #{$color-hover};
|
|
||||||
--#{$prefix}btn-hover-bg: #{$active-background};
|
|
||||||
--#{$prefix}btn-hover-border-color: #{$active-border};
|
|
||||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
|
|
||||||
--#{$prefix}btn-active-color: #{$active-color};
|
|
||||||
--#{$prefix}btn-active-bg: #{$active-background};
|
|
||||||
--#{$prefix}btn-active-border-color: #{$active-border};
|
|
||||||
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
|
||||||
--#{$prefix}btn-disabled-color: #{$color};
|
|
||||||
--#{$prefix}btn-disabled-bg: transparent;
|
|
||||||
--#{$prefix}btn-disabled-border-color: #{$color};
|
|
||||||
--#{$prefix}gradient: none;
|
|
||||||
}
|
|
||||||
// scss-docs-end btn-outline-variant-mixin
|
|
||||||
|
|
||||||
// scss-docs-start btn-size-mixin
|
|
||||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
|
||||||
--#{$prefix}btn-padding-y: #{$padding-y};
|
|
||||||
--#{$prefix}btn-padding-x: #{$padding-x};
|
|
||||||
@include rfs($font-size, --#{$prefix}btn-font-size);
|
|
||||||
--#{$prefix}btn-border-radius: #{$border-radius};
|
|
||||||
}
|
|
||||||
// scss-docs-end btn-size-mixin
|
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// scss-docs-start caret-mixins
|
// scss-docs-start caret-mixins
|
||||||
@mixin caret-down($width: $caret-width) {
|
@mixin caret-down($width: $caret-width) {
|
||||||
border-top: $width solid;
|
border-top: $width solid;
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// scss-docs-start color-mode-mixin
|
// scss-docs-start color-mode-mixin
|
||||||
@mixin color-mode($mode: light, $root: false) {
|
@mixin color-mode($mode: light, $root: false) {
|
||||||
@if $color-mode-type == "media-query" {
|
@if $color-mode-type == "media-query" {
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
// Container mixins
|
|
||||||
|
|
||||||
@mixin make-container($gutter: $container-padding-x) {
|
|
||||||
--#{$prefix}gutter-x: #{$gutter};
|
|
||||||
--#{$prefix}gutter-y: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
|
||||||
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// Deprecate mixin
|
// Deprecate mixin
|
||||||
//
|
//
|
||||||
// This mixin can be used to deprecate mixins or functions.
|
// This mixin can be used to deprecate mixins or functions.
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// Gradients
|
// Gradients
|
||||||
|
|
||||||
// scss-docs-start gradient-bg-mixin
|
// scss-docs-start gradient-bg-mixin
|
||||||
|
|||||||
@ -1,151 +0,0 @@
|
|||||||
// Grid system
|
|
||||||
//
|
|
||||||
// Generate semantic grid columns with these mixins.
|
|
||||||
|
|
||||||
@mixin make-row($gutter: $grid-gutter-width) {
|
|
||||||
--#{$prefix}gutter-x: #{$gutter};
|
|
||||||
--#{$prefix}gutter-y: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
|
|
||||||
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
|
|
||||||
margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
|
|
||||||
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-col-ready() {
|
|
||||||
// Add box sizing if only the grid is loaded
|
|
||||||
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
|
|
||||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
||||||
// always setting `width: 100%;`. This works because we set the width
|
|
||||||
// later on to override this initial width.
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
|
|
||||||
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
|
||||||
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
|
|
||||||
margin-top: var(--#{$prefix}gutter-y);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-col($size: false, $columns: $grid-columns) {
|
|
||||||
@if $size {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: percentage(divide($size, $columns));
|
|
||||||
|
|
||||||
} @else {
|
|
||||||
flex: 1 1 0;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-col-auto() {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
|
||||||
$num: divide($size, $columns);
|
|
||||||
margin-left: if($num == 0, 0, percentage($num));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Row columns
|
|
||||||
//
|
|
||||||
// Specify on a parent element(e.g., .row) to force immediate children into NN
|
|
||||||
// number of columns. Supports wrapping to new lines, but does not do a Masonry
|
|
||||||
// style grid.
|
|
||||||
@mixin row-cols($count) {
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: percentage(divide(1, $count));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Framework grid generation
|
|
||||||
//
|
|
||||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
||||||
// any value of `$grid-columns`.
|
|
||||||
|
|
||||||
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
|
||||||
@each $breakpoint in map-keys($breakpoints) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
||||||
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
||||||
.col#{$infix} {
|
|
||||||
flex: 1 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-cols#{$infix}-auto > * {
|
|
||||||
@include make-col-auto();
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $grid-row-columns > 0 {
|
|
||||||
@for $i from 1 through $grid-row-columns {
|
|
||||||
.row-cols#{$infix}-#{$i} {
|
|
||||||
@include row-cols($i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col#{$infix}-auto {
|
|
||||||
@include make-col-auto();
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $columns > 0 {
|
|
||||||
@for $i from 1 through $columns {
|
|
||||||
.col#{$infix}-#{$i} {
|
|
||||||
@include make-col($i, $columns);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
|
||||||
@for $i from 0 through ($columns - 1) {
|
|
||||||
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
|
||||||
.offset#{$infix}-#{$i} {
|
|
||||||
@include make-col-offset($i, $columns);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gutters
|
|
||||||
//
|
|
||||||
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
|
|
||||||
@each $key, $value in $gutters {
|
|
||||||
.g#{$infix}-#{$key},
|
|
||||||
.gx#{$infix}-#{$key} {
|
|
||||||
--#{$prefix}gutter-x: #{$value};
|
|
||||||
}
|
|
||||||
|
|
||||||
.g#{$infix}-#{$key},
|
|
||||||
.gy#{$infix}-#{$key} {
|
|
||||||
--#{$prefix}gutter-y: #{$value};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
|
|
||||||
@each $breakpoint in map-keys($breakpoints) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
||||||
@if $columns > 0 {
|
|
||||||
@for $i from 1 through $columns {
|
|
||||||
.g-col#{$infix}-#{$i} {
|
|
||||||
grid-column: auto / span $i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start with `1` because `0` is an invalid value.
|
|
||||||
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
|
|
||||||
@for $i from 1 through ($columns - 1) {
|
|
||||||
.g-start#{$infix}-#{$i} {
|
|
||||||
grid-column-start: $i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
|
|
||||||
|
|
||||||
// List Groups
|
|
||||||
|
|
||||||
// scss-docs-start list-group-mixin
|
|
||||||
@mixin list-group-item-variant($state, $background, $color) {
|
|
||||||
.list-group-item-#{$state} {
|
|
||||||
color: $color;
|
|
||||||
background-color: $background;
|
|
||||||
|
|
||||||
&.list-group-item-action {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $color;
|
|
||||||
background-color: shade-color($background, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $white;
|
|
||||||
background-color: $color;
|
|
||||||
border-color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-docs-end list-group-mixin
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
// Pagination
|
|
||||||
|
|
||||||
// scss-docs-start pagination-mixin
|
|
||||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
|
||||||
--#{$prefix}pagination-padding-x: #{$padding-x};
|
|
||||||
--#{$prefix}pagination-padding-y: #{$padding-y};
|
|
||||||
@include rfs($font-size, --#{$prefix}pagination-font-size);
|
|
||||||
--#{$prefix}pagination-border-radius: #{$border-radius};
|
|
||||||
}
|
|
||||||
// scss-docs-end pagination-mixin
|
|
||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
@mixin reset-text {
|
@mixin reset-text {
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
|
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
// scss-docs-start table-variant
|
|
||||||
@mixin table-variant($state, $background) {
|
|
||||||
.table-#{$state} {
|
|
||||||
$color: color-contrast(opaque($body-bg, $background));
|
|
||||||
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
|
|
||||||
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
|
|
||||||
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
|
|
||||||
$table-border-color: mix($color, $background, percentage($table-border-factor));
|
|
||||||
|
|
||||||
--#{$prefix}table-color: #{$color};
|
|
||||||
--#{$prefix}table-bg: #{$background};
|
|
||||||
--#{$prefix}table-border-color: #{$table-border-color};
|
|
||||||
--#{$prefix}table-striped-bg: #{$striped-bg};
|
|
||||||
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
|
|
||||||
--#{$prefix}table-active-bg: #{$active-bg};
|
|
||||||
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
|
|
||||||
--#{$prefix}table-hover-bg: #{$hover-bg};
|
|
||||||
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
|
|
||||||
|
|
||||||
color: var(--#{$prefix}table-color);
|
|
||||||
border-color: var(--#{$prefix}table-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-docs-end table-variant
|
|
||||||
@ -1,10 +1,13 @@
|
|||||||
|
@use "sass:list";
|
||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// stylelint-disable property-disallowed-list
|
// stylelint-disable property-disallowed-list
|
||||||
@mixin transition($transition...) {
|
@mixin transition($transition...) {
|
||||||
@if length($transition) == 0 {
|
@if list.length($transition) == 0 {
|
||||||
$transition: $transition-base;
|
$transition: $transition-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if length($transition) > 1 {
|
@if list.length($transition) > 1 {
|
||||||
@each $value in $transition {
|
@each $value in $transition {
|
||||||
@if $value == null or $value == none {
|
@if $value == null or $value == none {
|
||||||
@warn "The keyword 'none' or 'null' must be used as a single argument.";
|
@warn "The keyword 'none' or 'null' must be used as a single argument.";
|
||||||
@ -13,11 +16,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
@if nth($transition, 1) != null {
|
@if list.nth($transition, 1) != null {
|
||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
|
@if $enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,37 +1,48 @@
|
|||||||
|
@use "sass:list";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "sass:meta";
|
||||||
|
@use "sass:string";
|
||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// Utility generator
|
// Utility generator
|
||||||
// Used to generate utilities & print utilities
|
// Used to generate utilities & print utilities
|
||||||
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
||||||
$values: map-get($utility, values);
|
$values: map.get($utility, values);
|
||||||
|
|
||||||
// If the values are a list or string, convert it into a map
|
// If the values are a list or string, convert it into a map
|
||||||
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
|
||||||
$values: zip($values, $values);
|
// A single value is converted to a map with a null key.
|
||||||
|
@if list.length($values) == 1 {
|
||||||
|
$values: (null: list.nth($values, 1));
|
||||||
|
} @else {
|
||||||
|
$values: list.zip($values, $values);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $key, $value in $values {
|
@each $key, $value in $values {
|
||||||
$properties: map-get($utility, property);
|
$properties: map.get($utility, property);
|
||||||
|
|
||||||
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
||||||
@if type-of($properties) == "string" {
|
@if meta.type-of($properties) == "string" {
|
||||||
$properties: append((), $properties);
|
$properties: list.append((), $properties);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use custom class if present
|
// Use custom class if present
|
||||||
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
$property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
|
||||||
$property-class: if($property-class == null, "", $property-class);
|
$property-class: if($property-class == null, "", $property-class);
|
||||||
|
|
||||||
// Use custom CSS variable name if present, otherwise default to `class`
|
// Use custom CSS variable name if present, otherwise default to `class`
|
||||||
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
|
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
|
||||||
|
|
||||||
// State params to generate pseudo-classes
|
// State params to generate pseudo-classes
|
||||||
$state: if(map-has-key($utility, state), map-get($utility, state), ());
|
$state: if(map.has-key($utility, state), map.get($utility, state), ());
|
||||||
|
|
||||||
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
|
||||||
|
|
||||||
// Don't prefix if value key is null (e.g. with shadow class)
|
// Don't prefix if value key is null (e.g. with shadow class)
|
||||||
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
||||||
|
|
||||||
@if map-get($utility, rfs) {
|
@if map.get($utility, rfs) {
|
||||||
// Inside the media query
|
// Inside the media query
|
||||||
@if $is-rfs-media-query {
|
@if $is-rfs-media-query {
|
||||||
$val: rfs-value($value);
|
$val: rfs-value($value);
|
||||||
@ -44,9 +55,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$is-css-var: map-get($utility, css-var);
|
$is-css-var: map.get($utility, css-var);
|
||||||
$is-local-vars: map-get($utility, local-vars);
|
$is-local-vars: map.get($utility, local-vars);
|
||||||
$is-rtl: map-get($utility, rtl);
|
$is-rtl: map.get($utility, rtl);
|
||||||
|
|
||||||
@if $value != null {
|
@if $value != null {
|
||||||
@if $is-rtl == false {
|
@if $is-rtl == false {
|
||||||
|
|||||||
34
scss/mixins/index.scss
Normal file
34
scss/mixins/index.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
// Toggles
|
||||||
|
//
|
||||||
|
// Used in conjunction with global variables to enable certain theme features.
|
||||||
|
|
||||||
|
// Vendor
|
||||||
|
// @forward "vendor/rfs";
|
||||||
|
|
||||||
|
// Deprecate
|
||||||
|
@forward "deprecate";
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
@forward "color-mode";
|
||||||
|
@forward "color-scheme";
|
||||||
|
@forward "image";
|
||||||
|
@forward "resize";
|
||||||
|
@forward "visually-hidden";
|
||||||
|
@forward "reset-text";
|
||||||
|
@forward "text-truncate";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@forward "utilities";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@forward "backdrop";
|
||||||
|
@forward "caret";
|
||||||
|
|
||||||
|
// Skins
|
||||||
|
@forward "border-radius";
|
||||||
|
@forward "box-shadow";
|
||||||
|
@forward "gradients";
|
||||||
|
@forward "transition";
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
@forward "clearfix";
|
||||||
@ -7,7 +7,8 @@ const path = require('node:path')
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
spec_dir: 'scss',
|
spec_dir: 'scss',
|
||||||
// Make Jasmine look for `.test.scss` files
|
// Make Jasmine look for `.test.scss` files
|
||||||
spec_files: ['**/*.{test,spec}.scss'],
|
// spec_files: ['**/*.{test,spec}.scss'],
|
||||||
|
spec_files: ['**/_utilities.test.scss'],
|
||||||
// Compile them into JS scripts running `sass-true`
|
// Compile them into JS scripts running `sass-true`
|
||||||
requires: [path.join(__dirname, 'sass-true/register')],
|
requires: [path.join(__dirname, 'sass-true/register')],
|
||||||
// Ensure we use `require` so that the require.extensions works
|
// Ensure we use `require` so that the require.extensions works
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
|
|
||||||
|
|
||||||
@import "../../functions";
|
|
||||||
@import "../../variables";
|
|
||||||
// Voluntarily not importing _variables-dark.scss
|
|
||||||
@import "../../maps";
|
|
||||||
@import "../../mixins";
|
|
||||||
@ -1,6 +1,8 @@
|
|||||||
@import "../../functions";
|
@use "../../functions" as *;
|
||||||
@import "../../variables";
|
@use "../../variables" as *;
|
||||||
@import "../../mixins";
|
@use "../../mixins" as *;
|
||||||
|
|
||||||
|
$true-terminal-output: false;
|
||||||
|
|
||||||
// Store original value
|
// Store original value
|
||||||
$original-enable-shadows: $enable-shadows;
|
$original-enable-shadows: $enable-shadows;
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
// stylelint-disable selector-attribute-quotes
|
// stylelint-disable selector-attribute-quotes
|
||||||
|
|
||||||
|
@import "../../colors";
|
||||||
@import "../../functions";
|
@import "../../functions";
|
||||||
@import "../../variables";
|
@import "../../variables";
|
||||||
@import "../../variables-dark";
|
@import "../../variables-dark";
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
$color-mode-type: media-query;
|
$color-mode-type: media-query;
|
||||||
|
$true-terminal-output: false;
|
||||||
|
|
||||||
@import "../../bootstrap";
|
@use "../../bootstrap" as *;
|
||||||
|
|
||||||
@include describe("global $color-mode-type: media-query") {
|
@include describe("global $color-mode-type: media-query") {
|
||||||
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
|
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
|
||||||
|
|||||||
@ -1,8 +1,15 @@
|
|||||||
|
@use "../../config" as *;
|
||||||
|
@use "../../variables" as *;
|
||||||
|
@use "../../functions" as *;
|
||||||
|
@use "../../vendor/rfs" as *;
|
||||||
|
@use "../../mixins/utilities" as *;
|
||||||
|
|
||||||
|
$true-terminal-output: false;
|
||||||
$prefix: bs-;
|
$prefix: bs-;
|
||||||
$enable-important-utilities: false;
|
$enable-important-utilities: false;
|
||||||
|
|
||||||
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
|
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
|
||||||
@import "../../mixins/utilities";
|
// @import "../../mixins/utilities";
|
||||||
|
|
||||||
@mixin test-generate-utility($params...) {
|
@mixin test-generate-utility($params...) {
|
||||||
@include assert() {
|
@include assert() {
|
||||||
@ -117,7 +124,7 @@ $enable-important-utilities: false;
|
|||||||
values: 1rem
|
values: 1rem
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.padding-1rem {
|
.padding {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -133,7 +140,7 @@ $enable-important-utilities: false;
|
|||||||
values: 1rem
|
values: 1rem
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.padding-x-1rem {
|
.padding-x {
|
||||||
padding-inline-start: 1rem;
|
padding-inline-start: 1rem;
|
||||||
padding-inline-end: 1rem;
|
padding-inline-end: 1rem;
|
||||||
}
|
}
|
||||||
@ -147,7 +154,7 @@ $enable-important-utilities: false;
|
|||||||
values: 1rem
|
values: 1rem
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.padding-inline-start-1rem {
|
.padding-inline-start {
|
||||||
padding-inline-start: 1rem;
|
padding-inline-start: 1rem;
|
||||||
padding-inline-end: 1rem;
|
padding-inline-end: 1rem;
|
||||||
}
|
}
|
||||||
@ -176,218 +183,218 @@ $enable-important-utilities: false;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include describe("state") {
|
// @include describe("state") {
|
||||||
@include it("Generates selectors for each states") {
|
// @include it("Generates selectors for each states") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
state: hover focus,
|
// state: hover focus,
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-hover:hover {
|
// .padding-1rem-hover:hover {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-focus:focus {
|
// .padding-1rem-focus:focus {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("css-var"){
|
// @include describe("css-var"){
|
||||||
@include it("sets a CSS variable instead of the property") {
|
// @include it("sets a CSS variable instead of the property") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
css-variable-name: padding,
|
// css-variable-name: padding,
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
values: 1rem 2rem
|
// values: 1rem 2rem
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-2rem {
|
// .padding-2rem {
|
||||||
--bs-padding: 2rem;
|
// --bs-padding: 2rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include it("defaults to class") {
|
// @include it("defaults to class") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
class: padding,
|
// class: padding,
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
values: 1rem 2rem
|
// values: 1rem 2rem
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-2rem {
|
// .padding-2rem {
|
||||||
--bs-padding: 2rem;
|
// --bs-padding: 2rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("local-vars") {
|
// @include describe("local-vars") {
|
||||||
@include it("generates the listed variables") {
|
// @include it("generates the listed variables") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: color,
|
// property: color,
|
||||||
class: desaturated-color,
|
// class: desaturated-color,
|
||||||
local-vars: (
|
// local-vars: (
|
||||||
color-opacity: 1,
|
// color-opacity: 1,
|
||||||
color-saturation: .25
|
// color-saturation: .25
|
||||||
),
|
// ),
|
||||||
values: (
|
// values: (
|
||||||
blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
|
// blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
|
||||||
)
|
// )
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.desaturated-color-blue {
|
// .desaturated-color-blue {
|
||||||
--bs-color-opacity: 1;
|
// --bs-color-opacity: 1;
|
||||||
// Sass compilation will put a leading zero so we want to keep that one
|
// // Sass compilation will put a leading zero so we want to keep that one
|
||||||
// stylelint-disable-next-line @stylistic/number-leading-zero
|
// // stylelint-disable-next-line @stylistic/number-leading-zero
|
||||||
--bs-color-saturation: 0.25;
|
// --bs-color-saturation: 0.25;
|
||||||
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
|
// color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("css-var & state") {
|
// @include describe("css-var & state") {
|
||||||
@include it("Generates a rule with for each state with a CSS variable") {
|
// @include it("Generates a rule with for each state with a CSS variable") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
css-var: true,
|
// css-var: true,
|
||||||
css-variable-name: padding,
|
// css-variable-name: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
state: hover focus,
|
// state: hover focus,
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-hover:hover {
|
// .padding-1rem-hover:hover {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-1rem-focus:focus {
|
// .padding-1rem-focus:focus {
|
||||||
--bs-padding: 1rem;
|
// --bs-padding: 1rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("rtl") {
|
// @include describe("rtl") {
|
||||||
@include it("sets up RTLCSS for removal when false") {
|
// @include it("sets up RTLCSS for removal when false") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
rtl: false
|
// rtl: false
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
/* rtl:begin:remove */
|
// /* rtl:begin:remove */
|
||||||
|
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* rtl:end:remove */
|
// /* rtl:end:remove */
|
||||||
|
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include describe("rfs") {
|
// @include describe("rfs") {
|
||||||
@include it("sets the fluid value when not inside media query") {
|
// @include it("sets the fluid value when not inside media query") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
rfs: true
|
// rfs: true
|
||||||
)
|
// )
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: rfs-fluid-value(1rem);
|
// padding: rfs-fluid-value(1rem);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include it("sets the value when inside the media query") {
|
// @include it("sets the value when inside the media query") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: padding,
|
// property: padding,
|
||||||
values: 1rem,
|
// values: 1rem,
|
||||||
rfs: true
|
// rfs: true
|
||||||
),
|
// ),
|
||||||
$is-rfs-media-query: true
|
// $is-rfs-media-query: true
|
||||||
) {
|
// ) {
|
||||||
.padding-1rem {
|
// .padding-1rem {
|
||||||
padding: rfs-value(1rem);
|
// padding: rfs-value(1rem);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
@include describe("$infix") {
|
// @include describe("$infix") {
|
||||||
@include it("inserts the given infix") {
|
// @include it("inserts the given infix") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: "padding",
|
// property: "padding",
|
||||||
values: (null: 1rem, small: .5rem, large: 2rem)
|
// values: (null: 1rem, small: .5rem, large: 2rem)
|
||||||
),
|
// ),
|
||||||
$infix: -sm
|
// $infix: -sm
|
||||||
) {
|
// ) {
|
||||||
.padding-sm {
|
// .padding-sm {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-sm-small {
|
// .padding-sm-small {
|
||||||
padding: .5rem;
|
// padding: .5rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.padding-sm-large {
|
// .padding-sm-large {
|
||||||
padding: 2rem;
|
// padding: 2rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@include it("strips leading - if class is null") {
|
// @include it("strips leading - if class is null") {
|
||||||
@include test-generate-utility(
|
// @include test-generate-utility(
|
||||||
(
|
// (
|
||||||
property: visibility,
|
// property: visibility,
|
||||||
class: null,
|
// class: null,
|
||||||
values: (
|
// values: (
|
||||||
visible: visible,
|
// visible: visible,
|
||||||
invisible: hidden,
|
// invisible: hidden,
|
||||||
)
|
// )
|
||||||
),
|
// ),
|
||||||
-sm
|
// -sm
|
||||||
) {
|
// ) {
|
||||||
.sm-visible {
|
// .sm-visible {
|
||||||
visibility: visible;
|
// visibility: visible;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.sm-invisible {
|
// .sm-invisible {
|
||||||
visibility: hidden;
|
// visibility: hidden;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user