mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-29 08:10:47 +02:00
Migrate to Sass modules
This commit is contained in:
Mark Otto
425
package-lock.json
generated
425
package-lock.json
generated
@@ -83,7 +83,7 @@
|
||||
"rollup": "^4.46.2",
|
||||
"rollup-plugin-istanbul": "^5.0.0",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.78.0",
|
||||
"sass": "1.89.2",
|
||||
"sass-true": "^9.0.0",
|
||||
"shelljs": "^0.10.0",
|
||||
"stylelint": "^16.23.1",
|
||||
@@ -3642,6 +3642,316 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
||||
@@ -6699,14 +7009,17 @@
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"detect-libc": "bin/detect-libc.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/deterministic-object-hash": {
|
||||
@@ -9393,9 +9706,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
|
||||
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
|
||||
"integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@@ -13441,6 +13754,14 @@
|
||||
"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": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||
@@ -15999,14 +16320,14 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.78.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
|
||||
"integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
|
||||
"version": "1.89.2",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.89.2.tgz",
|
||||
"integrity": "sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"chokidar": "^4.0.0",
|
||||
"immutable": "^5.0.2",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
@@ -16014,6 +16335,9 @@
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@parcel/watcher": "^2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-formatter": {
|
||||
@@ -16053,70 +16377,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": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
|
||||
@@ -16253,6 +16513,17 @@
|
||||
"@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": {
|
||||
"version": "7.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
||||
|
||||
@@ -42,11 +42,11 @@
|
||||
"start": "npm-run-all --parallel watch docs-serve",
|
||||
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
|
||||
"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-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-vars": "fusv scss/ site/src/scss/",
|
||||
"css-dontlint-vars": "fusv scss/ site/assets/scss/",
|
||||
"css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
|
||||
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
|
||||
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
|
||||
@@ -172,7 +172,7 @@
|
||||
"rollup": "^4.46.2",
|
||||
"rollup-plugin-istanbul": "^5.0.0",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.78.0",
|
||||
"sass": "1.89.2",
|
||||
"sass-true": "^9.0.0",
|
||||
"shelljs": "^0.10.0",
|
||||
"stylelint": "^16.23.1",
|
||||
|
||||
@@ -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
|
||||
//
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "mixins/border-radius" as *;
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
@@ -57,7 +62,7 @@
|
||||
|
||||
// scss-docs-start alert-modifiers
|
||||
// Generate contextual modifier classes for colorizing the alert
|
||||
@each $state in map-keys($theme-colors) {
|
||||
@each $state in map.keys($theme-colors) {
|
||||
.alert-#{$state} {
|
||||
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
--#{$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
|
||||
//
|
||||
// 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 {
|
||||
// scss-docs-start breadcrumb-css-vars
|
||||
--#{$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
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
|
||||
@@ -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
|
||||
//
|
||||
|
||||
@@ -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
|
||||
//
|
||||
|
||||
@@ -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:
|
||||
//
|
||||
// 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.
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// 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,
|
||||
"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,
|
||||
"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;
|
||||
@@ -4,9 +4,33 @@
|
||||
|
||||
$prefix: bs- !default;
|
||||
|
||||
$enable-container-classes: true !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,
|
||||
@@ -47,6 +71,7 @@ $container-max-widths: (
|
||||
|
||||
$container-padding-x: $grid-gutter-width !default;
|
||||
|
||||
$utilities: () !default;
|
||||
|
||||
// Characters which are escaped by the escape-svg function
|
||||
$escaped-characters: (
|
||||
|
||||
@@ -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>`)
|
||||
.dropup,
|
||||
.dropend,
|
||||
@@ -85,7 +96,7 @@
|
||||
// We deliberately hardcode the `bs-` prefix because we check
|
||||
// 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) {
|
||||
$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
|
||||
//
|
||||
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
||||
@@ -8,7 +17,7 @@
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@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
|
||||
} @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}' !";
|
||||
@@ -22,10 +31,10 @@
|
||||
|
||||
// Starts at zero
|
||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
||||
@if length($map) > 0 {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@mixin _assert-starts-at-zero($map, $map-name: "$breakpoints") {
|
||||
@if list.length($map) > 0 {
|
||||
$values: map.values($map);
|
||||
$first-value: list.nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
@@ -34,7 +43,7 @@
|
||||
|
||||
// Colors
|
||||
@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
|
||||
@@ -55,10 +64,10 @@
|
||||
// allow to pass the $key and $value of the map as an function argument
|
||||
$_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;
|
||||
@@ -68,7 +77,7 @@
|
||||
@function varify($list) {
|
||||
$result: null;
|
||||
@each $entry in $list {
|
||||
$result: append($result, var(--#{$prefix}#{$entry}), space);
|
||||
$result: list.append($result, var(--#{$prefix}#{$entry}), space);
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
@@ -79,7 +88,7 @@
|
||||
$result: ();
|
||||
@each $key, $value in $map {
|
||||
@if $key != 0 {
|
||||
$result: map-merge($result, ("n" + $key: (-$value)));
|
||||
$result: map.merge($result, ("n" + $key: (-$value)));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
@@ -89,8 +98,8 @@
|
||||
@function map-get-multiple($map, $values) {
|
||||
$result: ();
|
||||
@each $key, $value in $map {
|
||||
@if (index($values, $key) != null) {
|
||||
$result: map-merge($result, ($key: $value));
|
||||
@if (list.index($values, $key) != null) {
|
||||
$result: map.merge($result, ($key: $value));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
@@ -101,7 +110,7 @@
|
||||
$merged-maps: ();
|
||||
|
||||
@each $map in $maps {
|
||||
$merged-maps: map-merge($merged-maps, $map);
|
||||
$merged-maps: map.merge($merged-maps, $map);
|
||||
}
|
||||
@return $merged-maps;
|
||||
}
|
||||
@@ -115,10 +124,10 @@
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
$index: string.index($string, $search);
|
||||
|
||||
@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;
|
||||
@@ -129,11 +138,11 @@
|
||||
// Requires the use of quotes around data URIs.
|
||||
|
||||
@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 {
|
||||
// Do not escape the url brackets
|
||||
@if str-index($string, "url(") == 1 {
|
||||
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
||||
@if string.index($string, "url(") == 1 {
|
||||
$string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
|
||||
} @else {
|
||||
$string: str-replace($string, $char, $encoded);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@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-color: null;
|
||||
|
||||
@@ -174,7 +183,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
||||
$l1: luminance($background);
|
||||
$l2: luminance(opaque($background, $foreground));
|
||||
|
||||
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
|
||||
@return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
|
||||
}
|
||||
|
||||
// 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
|
||||
@function luminance($color) {
|
||||
$rgb: (
|
||||
"r": red($color),
|
||||
"g": green($color),
|
||||
"b": blue($color)
|
||||
"r": color.channel($color, "red"),
|
||||
"g": color.channel($color, "green"),
|
||||
"b": color.channel($color, "blue")
|
||||
);
|
||||
|
||||
@each $name, $value in $rgb {
|
||||
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
|
||||
$rgb: map-merge($rgb, ($name: $value));
|
||||
$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));
|
||||
}
|
||||
|
||||
@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
|
||||
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
||||
@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
|
||||
// Tint a color: mix a color with white
|
||||
// // Tint a color: mix a color with white
|
||||
@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) {
|
||||
@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) {
|
||||
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
||||
}
|
||||
// scss-docs-end color-functions
|
||||
|
||||
// Return valid calc
|
||||
@function add($value1, $value2, $return-calc: true) {
|
||||
@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,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
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
@@ -121,7 +129,7 @@
|
||||
//
|
||||
// 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) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@@ -182,7 +190,7 @@
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// 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} {
|
||||
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
@use "sass:map";
|
||||
@use "colors" as *;
|
||||
@use "functions" as *;
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
// Re-assigned maps
|
||||
//
|
||||
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
|
||||
@@ -100,7 +106,7 @@ $utilities-colors: $theme-colors-rgb !default;
|
||||
// scss-docs-end utilities-colors
|
||||
|
||||
// scss-docs-start utilities-text-colors
|
||||
$utilities-text: map-merge(
|
||||
$utilities-text: map.merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
"black": to-rgb($black),
|
||||
@@ -123,7 +129,7 @@ $utilities-text-emphasis-colors: (
|
||||
// scss-docs-end utilities-text-colors
|
||||
|
||||
// scss-docs-start utilities-bg-colors
|
||||
$utilities-bg: map-merge(
|
||||
$utilities-bg: map.merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
"black": to-rgb($black),
|
||||
@@ -146,7 +152,7 @@ $utilities-bg-subtle: (
|
||||
// scss-docs-end utilities-bg-colors
|
||||
|
||||
// scss-docs-start utilities-border-colors
|
||||
$utilities-border: map-merge(
|
||||
$utilities-border: map.merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
"black": to-rgb($black),
|
||||
|
||||
@@ -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,3 +1,14 @@
|
||||
@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 *;
|
||||
|
||||
// stylelint-disable function-disallowed-list
|
||||
|
||||
// .modal-open - body class for killing the scroll
|
||||
@@ -209,7 +220,7 @@
|
||||
}
|
||||
|
||||
// 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);
|
||||
$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
|
||||
//
|
||||
// Kickstart any navigation component with a set of style resets. Works with
|
||||
|
||||
@@ -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
|
||||
//
|
||||
// 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
|
||||
// where your navbar collapses.
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
@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 *;
|
||||
|
||||
// stylelint-disable function-disallowed-list
|
||||
|
||||
%offcanvas-css-vars {
|
||||
@@ -17,7 +25,7 @@
|
||||
// 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);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
@@ -26,7 +34,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $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 {
|
||||
// scss-docs-start pagination-css-vars
|
||||
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "colors" as *;
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.placeholder {
|
||||
display: inline-block;
|
||||
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 {
|
||||
// scss-docs-start popover-css-vars
|
||||
--#{$prefix}popover-zindex: #{$zindex-popover};
|
||||
|
||||
@@ -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
|
||||
|
||||
// scss-docs-start progress-keyframes
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
@use "sass:meta";
|
||||
@use "colors" as *;
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "maps" as *;
|
||||
@use "vendor/rfs" as *;
|
||||
@use "mixins/color-mode" as *;
|
||||
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||
@@ -41,8 +49,8 @@
|
||||
|
||||
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
||||
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
|
||||
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
|
||||
--#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
|
||||
--#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
|
||||
--#{$prefix}gradient: #{$gradient};
|
||||
|
||||
// Root and body
|
||||
@@ -50,7 +58,7 @@
|
||||
@if $font-size-root != null {
|
||||
--#{$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);
|
||||
--#{$prefix}body-font-weight: #{$font-weight-base};
|
||||
--#{$prefix}body-line-height: #{$line-height-base};
|
||||
|
||||
@@ -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
|
||||
//
|
||||
|
||||
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 {
|
||||
// scss-docs-start toast-css-vars
|
||||
--#{$prefix}toast-zindex: #{$zindex-toast};
|
||||
|
||||
@@ -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
|
||||
.tooltip {
|
||||
// scss-docs-start tooltip-css-vars
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "mixins/transition" as *;
|
||||
|
||||
.fade {
|
||||
@include transition($transition-fade);
|
||||
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
@use "sass:map";
|
||||
@use "colors" as *;
|
||||
@use "config" as *;
|
||||
@use "variables" as *;
|
||||
@use "functions" as *;
|
||||
@use "maps" as *;
|
||||
|
||||
// Utilities
|
||||
|
||||
$utilities: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities: map-merge(
|
||||
$utilities: map.merge(
|
||||
(
|
||||
// scss-docs-start utils-vertical-align
|
||||
"align": (
|
||||
@@ -353,43 +360,43 @@ $utilities: map-merge(
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
values: map.merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-x": (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
values: map.merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-y": (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
values: map.merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-top": (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
values: map.merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-end": (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: me,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
values: map.merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-bottom": (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
values: map.merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-start": (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: ms,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
values: map.merge($spacers, (auto: auto))
|
||||
),
|
||||
// Negative margin utilities
|
||||
"negative-margin": (
|
||||
@@ -579,7 +586,7 @@ $utilities: map-merge(
|
||||
local-vars: (
|
||||
"text-opacity": 1
|
||||
),
|
||||
values: map-merge(
|
||||
values: map.merge(
|
||||
$utilities-text-colors,
|
||||
(
|
||||
"muted": var(--#{$prefix}secondary-color), // deprecated
|
||||
@@ -637,7 +644,7 @@ $utilities: map-merge(
|
||||
local-vars: (
|
||||
"link-underline-opacity": 1
|
||||
),
|
||||
values: map-merge(
|
||||
values: map.merge(
|
||||
$utilities-links-underline,
|
||||
(
|
||||
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
|
||||
@@ -665,7 +672,7 @@ $utilities: map-merge(
|
||||
local-vars: (
|
||||
"bg-opacity": 1
|
||||
),
|
||||
values: map-merge(
|
||||
values: map.merge(
|
||||
$utilities-bg-colors,
|
||||
(
|
||||
"transparent": transparent,
|
||||
|
||||
@@ -26,7 +26,7 @@ $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: 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-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-bg-dark: $gray-800 !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;
|
||||
$border-color-dark: $gray-700 !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 should follow the `$component-state-property-size` formula for
|
||||
// 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
|
||||
$primary: $blue !default;
|
||||
$primary: $purple-500 !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$success: $green-500 !default;
|
||||
$info: $cyan-500 !default;
|
||||
$warning: $yellow-500 !default;
|
||||
$danger: $red-500 !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-900 !default;
|
||||
// scss-docs-end theme-color-variables
|
||||
@@ -339,7 +51,7 @@ $success-bg-subtle: tint-color($success, 80%) !default;
|
||||
$info-bg-subtle: tint-color($info, 80%) !default;
|
||||
$warning-bg-subtle: tint-color($warning, 80%) !default;
|
||||
$danger-bg-subtle: tint-color($danger, 80%) !default;
|
||||
$light-bg-subtle: mix($gray-100, $white) !default;
|
||||
$light-bg-subtle: color.mix($gray-100, $white) !default;
|
||||
$dark-bg-subtle: $gray-400 !default;
|
||||
// scss-docs-end theme-bg-subtle-variables
|
||||
|
||||
@@ -363,34 +75,38 @@ $escaped-characters: (
|
||||
(")", "%29"),
|
||||
) !default;
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
// // Options
|
||||
// //
|
||||
// // Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$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-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`
|
||||
// $enable-dark-mode: true !default;
|
||||
// $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
|
||||
//
|
||||
@@ -475,54 +191,54 @@ $icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
|
||||
$paragraph-margin-bottom: 1rem !default;
|
||||
|
||||
|
||||
// // Grid breakpoints
|
||||
// //
|
||||
// // Define the minimum dimensions at which your layout will change,
|
||||
// // adapting to different screen sizes, for use in media queries.
|
||||
// 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
|
||||
// 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
|
||||
|
||||
// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
||||
|
||||
|
||||
// // Grid containers
|
||||
// //
|
||||
// // Define the maximum width of `.container` for different screen sizes.
|
||||
// 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
|
||||
// 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
|
||||
|
||||
// @include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||
|
||||
|
||||
// // Grid columns
|
||||
// //
|
||||
// // Set the number of columns and specify the width of the gutters.
|
||||
// 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-columns: 12 !default;
|
||||
$grid-gutter-width: 1.5rem !default;
|
||||
$grid-row-columns: 6 !default;
|
||||
|
||||
// // Container padding
|
||||
// Container padding
|
||||
|
||||
// $container-padding-x: $grid-gutter-width !default;
|
||||
$container-padding-x: $grid-gutter-width !default;
|
||||
|
||||
|
||||
// Components
|
||||
@@ -589,10 +305,11 @@ $transition-collapse-width: width .35s ease !default;
|
||||
// stylelint-disable function-disallowed-list
|
||||
// scss-docs-start aspect-ratios
|
||||
$aspect-ratios: (
|
||||
"1x1": 100%,
|
||||
"4x3": calc(3 / 4 * 100%),
|
||||
"16x9": calc(9 / 16 * 100%),
|
||||
"21x9": calc(9 / 21 * 100%)
|
||||
"auto": auto,
|
||||
"4x3": #{"4 / 3"},
|
||||
"1x1": #{"1 / 1"},
|
||||
"16x9": #{"16 / 9"},
|
||||
"21x9": #{"21 / 9"}
|
||||
) !default;
|
||||
// scss-docs-end aspect-ratios
|
||||
// stylelint-enable function-disallowed-list
|
||||
@@ -843,7 +560,8 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
|
||||
$btn-link-color: var(--#{$prefix}link-color) !default;
|
||||
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
||||
$btn-link-disabled-color: $gray-600 !default;
|
||||
$btn-link-focus-shadow-rgb: to-rgb(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
|
||||
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
@@ -1639,7 +1357,7 @@ $breadcrumb-margin-bottom: 1rem !default;
|
||||
$breadcrumb-bg: null !default;
|
||||
$breadcrumb-divider-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-border-radius: null !default;
|
||||
// scss-docs-end breadcrumb-variables
|
||||
@@ -1684,21 +1402,6 @@ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Depre
|
||||
// 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
|
||||
|
||||
// scss-docs-start close-variables
|
||||
@@ -1750,4 +1453,105 @@ $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, remo
|
||||
|
||||
$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";
|
||||
@include bsBanner(Grid);
|
||||
@use "banner" with (
|
||||
$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";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "maps";
|
||||
@forward "utilities"; // Make utilities available downstream
|
||||
@use "utilities" as *; // Bring utilities into the current namespace
|
||||
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/container";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/utilities";
|
||||
@forward "layout/containers";
|
||||
@forward "layout/grid";
|
||||
|
||||
@import "vendor/rfs";
|
||||
|
||||
@import "containers";
|
||||
@import "grid";
|
||||
|
||||
@import "utilities";
|
||||
// Only use the utilities we need
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities: map-get-multiple(
|
||||
$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";
|
||||
@include bsBanner(Reboot);
|
||||
@use "banner" with (
|
||||
$file: "Reboot"
|
||||
);
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "maps";
|
||||
@import "mixins";
|
||||
@import "root";
|
||||
@import "reboot";
|
||||
@forward "root";
|
||||
@forward "content/reboot";
|
||||
|
||||
19
scss/bootstrap-utilities.scss
vendored
19
scss/bootstrap-utilities.scss
vendored
@@ -1,19 +1,16 @@
|
||||
@import "mixins/banner";
|
||||
@include bsBanner(Utilities);
|
||||
@use "banner" with (
|
||||
$file: "Utilities"
|
||||
);
|
||||
|
||||
// Configuration
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "maps";
|
||||
@import "mixins";
|
||||
@import "utilities";
|
||||
// @forward "variables";
|
||||
|
||||
// Layout & components
|
||||
@import "root";
|
||||
@use "root" as *;
|
||||
|
||||
// Helpers
|
||||
@import "helpers";
|
||||
@forward "helpers";
|
||||
|
||||
// Utilities
|
||||
@import "utilities/api";
|
||||
@use "utilities" as *;
|
||||
@use "utilities/api";
|
||||
|
||||
83
scss/bootstrap.scss
vendored
83
scss/bootstrap.scss
vendored
@@ -1,55 +1,46 @@
|
||||
// @import "mixins/banner";
|
||||
// @include bsBanner("");
|
||||
|
||||
@use "banner";
|
||||
|
||||
// scss-docs-start import-stack
|
||||
// Configuration
|
||||
@use "config" as *;
|
||||
// Global CSS variables, layer definitions, and configuration
|
||||
@use "root";
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "maps";
|
||||
@import "mixins";
|
||||
@import "utilities";
|
||||
// Reboot & Content
|
||||
@use "content";
|
||||
|
||||
// Layout & components
|
||||
@import "root";
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
@import "images";
|
||||
// @import "containers";
|
||||
// @import "grid";
|
||||
@import "layout";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
@import "transitions";
|
||||
@import "dropdown";
|
||||
@import "button-group";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "accordion";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "badge";
|
||||
@import "alert";
|
||||
@import "progress";
|
||||
@import "list-group";
|
||||
@import "close";
|
||||
@import "toasts";
|
||||
@import "modal";
|
||||
@import "tooltip";
|
||||
@import "popover";
|
||||
@import "carousel";
|
||||
@import "spinners";
|
||||
@import "offcanvas";
|
||||
@import "placeholders";
|
||||
// Layout
|
||||
@use "layout";
|
||||
|
||||
// Forms
|
||||
@use "forms";
|
||||
|
||||
// Components
|
||||
@use "accordion";
|
||||
@use "alert";
|
||||
@use "badge";
|
||||
@use "breadcrumb";
|
||||
@use "buttons";
|
||||
@use "button-group";
|
||||
@use "card";
|
||||
@use "carousel";
|
||||
@use "close";
|
||||
@use "dropdown";
|
||||
@use "list-group";
|
||||
@use "modal";
|
||||
@use "nav";
|
||||
@use "navbar";
|
||||
@use "offcanvas";
|
||||
@use "pagination";
|
||||
@use "placeholders";
|
||||
@use "popover";
|
||||
@use "progress";
|
||||
@use "spinners";
|
||||
@use "toasts";
|
||||
@use "tooltip";
|
||||
@use "transitions";
|
||||
|
||||
// Helpers
|
||||
@import "helpers";
|
||||
@use "helpers";
|
||||
|
||||
// Utilities
|
||||
@import "utilities/api";
|
||||
@use "utilities/api";
|
||||
// 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)
|
||||
//
|
||||
// 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
|
||||
|
||||
|
||||
@@ -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
|
||||
//
|
||||
@@ -159,7 +193,7 @@
|
||||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||
// 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);
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
@@ -1,29 +1,35 @@
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../mixins/lists" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
.h1 {
|
||||
@extend h1;
|
||||
}
|
||||
// mdo-do: remove extend
|
||||
// .h1 {
|
||||
// @extend h1;
|
||||
// }
|
||||
|
||||
.h2 {
|
||||
@extend h2;
|
||||
}
|
||||
// .h2 {
|
||||
// @extend h2;
|
||||
// }
|
||||
|
||||
.h3 {
|
||||
@extend h3;
|
||||
}
|
||||
// .h3 {
|
||||
// @extend h3;
|
||||
// }
|
||||
|
||||
.h4 {
|
||||
@extend h4;
|
||||
}
|
||||
// .h4 {
|
||||
// @extend h4;
|
||||
// }
|
||||
|
||||
.h5 {
|
||||
@extend h5;
|
||||
}
|
||||
// .h5 {
|
||||
// @extend h5;
|
||||
// }
|
||||
|
||||
.h6 {
|
||||
@extend h6;
|
||||
}
|
||||
// .h6 {
|
||||
// @extend h6;
|
||||
// }
|
||||
|
||||
|
||||
.lead {
|
||||
@@ -46,11 +52,11 @@
|
||||
// Emphasis
|
||||
//
|
||||
.small {
|
||||
@extend small;
|
||||
// @extend small;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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
|
||||
//
|
||||
|
||||
@@ -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)
|
||||
//
|
||||
@@ -56,7 +64,7 @@
|
||||
// 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
|
||||
// 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
|
||||
// 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
|
||||
//
|
||||
// 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
|
||||
//
|
||||
// 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
|
||||
//
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
@use "sass:map";
|
||||
@use "sass:string";
|
||||
@use "../variables" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../mixins/border-radius" as *;
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
@@ -116,8 +122,8 @@
|
||||
}
|
||||
|
||||
$validation-messages: "";
|
||||
@each $state in map-keys($form-validation-states) {
|
||||
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
|
||||
@each $state in map.keys($form-validation-states) {
|
||||
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
|
||||
}
|
||||
|
||||
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../variables" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
//
|
||||
// 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
|
||||
//
|
||||
// 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
|
||||
// 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
|
||||
@each $state, $data in $form-validation-states {
|
||||
@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 {
|
||||
@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
|
||||
@each $color, $value in $theme-colors {
|
||||
.text-bg-#{$color} {
|
||||
|
||||
@@ -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
|
||||
@each $color, $value in $theme-colors {
|
||||
.link-#{$color} {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../config" as *;
|
||||
|
||||
.focus-ring:focus {
|
||||
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
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
|
||||
.icon-link {
|
||||
display: inline-flex;
|
||||
gap: $icon-link-gap;
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../layout/breakpoints" as *;
|
||||
|
||||
// Shorthand
|
||||
|
||||
.fixed-top {
|
||||
@@ -17,7 +22,7 @@
|
||||
}
|
||||
|
||||
// Responsive sticky top and bottom
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
// mdo-do: remve for utilities
|
||||
|
||||
// Credit: Nicolas Gallagher and SUIT CSS.
|
||||
|
||||
.ratio {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
//
|
||||
// Stretched link
|
||||
//
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
//
|
||||
@use "../mixins/text-truncate" as *;
|
||||
// Text truncation
|
||||
//
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../mixins/visually-hidden" as *;
|
||||
|
||||
//
|
||||
// Visually hidden
|
||||
//
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.vr {
|
||||
display: inline-block;
|
||||
align-self: stretch;
|
||||
|
||||
11
scss/helpers/index.scss
Normal file
11
scss/helpers/index.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@forward "clearfix";
|
||||
@forward "color-bg";
|
||||
@forward "colored-links";
|
||||
@forward "focus-ring";
|
||||
@forward "icon-link";
|
||||
@forward "position";
|
||||
@forward "stacks";
|
||||
@forward "visually-hidden";
|
||||
@forward "stretched-link";
|
||||
@forward "text-truncation";
|
||||
@forward "vr";
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "../config" as *;
|
||||
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
@@ -14,12 +18,12 @@
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
|
||||
$n: list.index($breakpoint-names, $name);
|
||||
@if not $n {
|
||||
@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.
|
||||
@@ -27,7 +31,7 @@
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
$min: map.get($breakpoints, $name);
|
||||
@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))
|
||||
// 767.98px
|
||||
@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);
|
||||
}
|
||||
|
||||
|
||||
@@ -61,8 +61,8 @@
|
||||
--#{$prefix}gap: #{$grid-gutter-width};
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
grid-auto-flow: row;
|
||||
gap: var(--#{$prefix}gap);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@import "breakpoints";
|
||||
@import "containers";
|
||||
@import "grid";
|
||||
@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
|
||||
// Single side border-radius
|
||||
|
||||
@@ -5,10 +11,10 @@
|
||||
@function valid-radius($radius) {
|
||||
$return: ();
|
||||
@each $value in $radius {
|
||||
@if type-of($value) == number {
|
||||
$return: append($return, max($value, 0));
|
||||
@if meta.type-of($value) == number {
|
||||
$return: list.append($return, math.max($value, 0));
|
||||
} @else {
|
||||
$return: append($return, $value);
|
||||
$return: list.append($return, $value);
|
||||
}
|
||||
}
|
||||
@return $return;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../config" as *;
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
@if $enable-shadows {
|
||||
$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
|
||||
@mixin caret-down($width: $caret-width) {
|
||||
border-top: $width solid;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../config" as *;
|
||||
|
||||
// scss-docs-start color-mode-mixin
|
||||
@mixin color-mode($mode: light, $root: false) {
|
||||
@if $color-mode-type == "media-query" {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../config" as *;
|
||||
|
||||
// Deprecate mixin
|
||||
//
|
||||
// This mixin can be used to deprecate mixins or functions.
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "../colors" as *;
|
||||
@use "../config" as *;
|
||||
|
||||
// Gradients
|
||||
|
||||
// scss-docs-start gradient-bg-mixin
|
||||
|
||||
@@ -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 {
|
||||
font-family: $font-family-base;
|
||||
// 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
|
||||
@mixin transition($transition...) {
|
||||
@if length($transition) == 0 {
|
||||
@if list.length($transition) == 0 {
|
||||
$transition: $transition-base;
|
||||
}
|
||||
|
||||
@if length($transition) > 1 {
|
||||
@if list.length($transition) > 1 {
|
||||
@each $value in $transition {
|
||||
@if $value == null or $value == none {
|
||||
@warn "The keyword 'none' or 'null' must be used as a single argument.";
|
||||
@@ -13,11 +16,11 @@
|
||||
}
|
||||
|
||||
@if $enable-transitions {
|
||||
@if nth($transition, 1) != null {
|
||||
@if list.nth($transition, 1) != null {
|
||||
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) {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@@ -1,37 +1,48 @@
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
@use "../config" as *;
|
||||
|
||||
// Utility generator
|
||||
// Used to generate utilities & print utilities
|
||||
@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 type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
||||
$values: zip($values, $values);
|
||||
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
|
||||
// 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 {
|
||||
$properties: map-get($utility, property);
|
||||
$properties: map.get($utility, property);
|
||||
|
||||
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
||||
@if type-of($properties) == "string" {
|
||||
$properties: append((), $properties);
|
||||
@if meta.type-of($properties) == "string" {
|
||||
$properties: list.append((), $properties);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// 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: 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)
|
||||
$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
|
||||
@if $is-rfs-media-query {
|
||||
$val: rfs-value($value);
|
||||
@@ -44,9 +55,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
$is-css-var: map-get($utility, css-var);
|
||||
$is-local-vars: map-get($utility, local-vars);
|
||||
$is-rtl: map-get($utility, rtl);
|
||||
$is-css-var: map.get($utility, css-var);
|
||||
$is-local-vars: map.get($utility, local-vars);
|
||||
$is-rtl: map.get($utility, rtl);
|
||||
|
||||
@if $value != null {
|
||||
@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";
|
||||
@@ -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,5 +1,6 @@
|
||||
// stylelint-disable selector-attribute-quotes
|
||||
|
||||
@import "../../colors";
|
||||
@import "../../functions";
|
||||
@import "../../variables";
|
||||
@import "../../variables-dark";
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
@use "sass:map";
|
||||
@use "sass:meta";
|
||||
@use "../variables" as *;
|
||||
@use "../config" as *;
|
||||
@use "../vendor/rfs" as *;
|
||||
@use "../layout/breakpoints" as *;
|
||||
@use "../mixins/utilities" as *;
|
||||
@use "../utilities" as *;
|
||||
|
||||
// Loop over each breakpoint
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
|
||||
// Generate media query if needed
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@@ -9,7 +18,7 @@
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
|
||||
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
|
||||
@include generate-utility($utility, $infix);
|
||||
}
|
||||
}
|
||||
@@ -18,15 +27,15 @@
|
||||
|
||||
// RFS rescaling
|
||||
@media (min-width: $rfs-mq-value) {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
||||
@if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
||||
// Loop over each utility property
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
|
||||
@if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
|
||||
@include generate-utility($utility, $infix, true);
|
||||
}
|
||||
}
|
||||
@@ -40,7 +49,7 @@
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
// Then check if the utility needs print styles
|
||||
@if type-of($utility) == "map" and map-get($utility, print) == true {
|
||||
@if meta.type-of($utility) == "map" and map.get($utility, print) == true {
|
||||
@include generate-utility($utility, "-print");
|
||||
}
|
||||
}
|
||||
|
||||
89
scss/vendor/_rfs.scss
vendored
89
scss/vendor/_rfs.scss
vendored
@@ -1,3 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
|
||||
// stylelint-disable scss/dimension-no-non-numeric-values
|
||||
|
||||
// SCSS RFS mixin
|
||||
@@ -30,7 +35,7 @@ $rfs-two-dimensional: false !default;
|
||||
// Factor of decrease
|
||||
$rfs-factor: 10 !default;
|
||||
|
||||
@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
|
||||
@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
|
||||
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
|
||||
}
|
||||
|
||||
@@ -50,71 +55,29 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
|
||||
$enable-rfs: true !default;
|
||||
|
||||
// Cache $rfs-base-value unit
|
||||
$rfs-base-value-unit: unit($rfs-base-value);
|
||||
|
||||
@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;
|
||||
}
|
||||
$rfs-base-value-unit: math.unit($rfs-base-value);
|
||||
|
||||
// Remove px-unit from $rfs-base-value for calculations
|
||||
@if $rfs-base-value-unit == px {
|
||||
$rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
|
||||
$rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1);
|
||||
}
|
||||
@else if $rfs-base-value-unit == rem {
|
||||
$rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
|
||||
$rfs-base-value: math.div($rfs-base-value, math.div($rfs-base-value * 0 + 1, $rfs-rem-value));
|
||||
}
|
||||
|
||||
// Cache $rfs-breakpoint unit to prevent multiple calls
|
||||
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
|
||||
$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
|
||||
|
||||
// Remove unit from $rfs-breakpoint for calculations
|
||||
@if $rfs-breakpoint-unit-cache == px {
|
||||
$rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
|
||||
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
|
||||
}
|
||||
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
|
||||
$rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
|
||||
$rfs-breakpoint: math.div($rfs-breakpoint, math.div($rfs-breakpoint * 0 + 1, $rfs-rem-value));
|
||||
}
|
||||
|
||||
// Calculate the media query value
|
||||
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
|
||||
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
|
||||
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
|
||||
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
|
||||
|
||||
@@ -190,7 +153,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
||||
// Helper function to get the formatted non-responsive value
|
||||
@function rfs-value($values) {
|
||||
// Convert to list
|
||||
$values: if(type-of($values) != list, ($values,), $values);
|
||||
$values: if(meta.type-of($values) != list, ($values,), $values);
|
||||
|
||||
$val: "";
|
||||
|
||||
@@ -201,15 +164,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
||||
}
|
||||
@else {
|
||||
// Cache $value unit
|
||||
$unit: if(type-of($value) == "number", unit($value), false);
|
||||
$unit: if(meta.type-of($value) == "number", math.unit($value), false);
|
||||
|
||||
@if $unit == px {
|
||||
// Convert to rem if needed
|
||||
$val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
|
||||
$val: $val + " " + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value);
|
||||
}
|
||||
@else if $unit == rem {
|
||||
// Convert to px if needed
|
||||
$val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
|
||||
$val: $val + " " + if($rfs-unit == px, #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
|
||||
} @else {
|
||||
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
|
||||
$val: $val + " " + $value;
|
||||
@@ -218,13 +181,13 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
||||
}
|
||||
|
||||
// Remove first space
|
||||
@return unquote(str-slice($val, 2));
|
||||
@return string.unquote(string.slice($val, 2));
|
||||
}
|
||||
|
||||
// Helper function to get the responsive value calculated by RFS
|
||||
@function rfs-fluid-value($values) {
|
||||
// Convert to list
|
||||
$values: if(type-of($values) != list, ($values,), $values);
|
||||
$values: if(meta.type-of($values) != list, ($values,), $values);
|
||||
|
||||
$val: "";
|
||||
|
||||
@@ -234,28 +197,28 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
||||
$val: $val + " 0";
|
||||
} @else {
|
||||
// Cache $value unit
|
||||
$unit: if(type-of($value) == "number", unit($value), false);
|
||||
$unit: if(meta.type-of($value) == "number", math.unit($value), false);
|
||||
|
||||
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
|
||||
@if not $unit or $unit != px and $unit != rem {
|
||||
$val: $val + " " + $value;
|
||||
} @else {
|
||||
// Remove unit from $value for calculations
|
||||
$value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
|
||||
$value: math.div($value, $value * 0 + if($unit == px, 1, math.div(1, $rfs-rem-value)));
|
||||
|
||||
// Only add the media query if the value is greater than the minimum value
|
||||
@if abs($value) <= $rfs-base-value or not $enable-rfs {
|
||||
$val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
|
||||
$val: $val + " " + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
|
||||
}
|
||||
@else {
|
||||
// Calculate the minimum value
|
||||
$value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
|
||||
$value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor);
|
||||
|
||||
// Calculate difference between $value and the minimum value
|
||||
$value-diff: abs($value) - $value-min;
|
||||
|
||||
// Base value formatting
|
||||
$min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
|
||||
$min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px);
|
||||
|
||||
// Use negative value if needed
|
||||
$min-width: if($value < 0, -$min-width, $min-width);
|
||||
@@ -264,7 +227,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
||||
$variable-unit: if($rfs-two-dimensional, vmin, vw);
|
||||
|
||||
// Calculate the variable width between 0 and $rfs-breakpoint
|
||||
$variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
|
||||
$variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
|
||||
|
||||
// Return the calculated value
|
||||
$val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
|
||||
@@ -274,7 +237,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
||||
}
|
||||
|
||||
// Remove first space
|
||||
@return unquote(str-slice($val, 2));
|
||||
@return string.unquote(string.slice($val, 2));
|
||||
}
|
||||
|
||||
// RFS mixin
|
||||
|
||||
@@ -157,7 +157,7 @@ For both spinners, small spinner modifier classes are used to update the values
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="spinner-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="spinner-variables" file="scss/_spinners.scss" />
|
||||
|
||||
### Keyframes
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
@use "../../../scss/vendor/rfs" as *;
|
||||
@use "../../../scss/mixins/border-radius" as *;
|
||||
|
||||
// stylelint-disable declaration-no-important, selector-max-id
|
||||
|
||||
//
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "../../../scss/variables" as *;
|
||||
@use "../../../scss/mixins/transition" as *;
|
||||
|
||||
.anchor-link {
|
||||
padding: 0 .175rem;
|
||||
font-weight: 400;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
@use "../../../scss/mixins/border-radius" as *;
|
||||
|
||||
// clipboard.js
|
||||
//
|
||||
// JS-based `Copy` buttons for code snippets.
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
@use "sass:map";
|
||||
@use "../../../scss/config" as *;
|
||||
@use "../../../scss/colors" as *;
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
@use "../../../scss/functions" as *;
|
||||
|
||||
//
|
||||
// Docs color palette classes
|
||||
//
|
||||
|
||||
@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
|
||||
@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
|
||||
.swatch-#{$color} {
|
||||
color: color-contrast($value);
|
||||
background-color: #{$value};
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use "../../../scss/colors" as *;
|
||||
@use "../../../scss/variables" as *;
|
||||
@use "../../../scss/vendor/rfs" as *;
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
|
||||
//
|
||||
// Bootstrap docs content theming
|
||||
//
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
@use "../../../scss/config" as *;
|
||||
@use "../../../scss/colors" as *;
|
||||
@use "../../../scss/variables" as *;
|
||||
@use "../../../scss/vendor/rfs" as *;
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
@use "../../../scss/mixins/border-radius" as *;
|
||||
@use "../../../scss/mixins/transition" as *;
|
||||
@use "../../../scss/mixins/color-mode" as *;
|
||||
|
||||
.bd-masthead {
|
||||
--bd-pink-rgb: #{to-rgb($pink)};
|
||||
padding: 3rem 0;
|
||||
@@ -116,10 +125,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
[data-bs-theme="dark"] {
|
||||
.masthead-followup-icon {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @if $enable-dark-mode {
|
||||
// [data-bs-theme="dark"] {
|
||||
// .masthead-followup-icon {
|
||||
// mix-blend-mode: lighten;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
@use "../../../scss/colors" as *;
|
||||
// @use "../../../scss/variables" as *;
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
@use "../../../scss/mixins/border-radius" as *;
|
||||
@use "../../../scss/mixins/color-mode" as *;
|
||||
@use "../../../scss/mixins/transition" as *;
|
||||
@use "../../../scss/vendor/rfs" as *;
|
||||
|
||||
.bd-navbar {
|
||||
padding: .75rem 0;
|
||||
background-color: transparent;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../../../scss/vendor/rfs" as *;
|
||||
|
||||
//
|
||||
// Placeholder svg used in the docs.
|
||||
//
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
@use "../../../scss/mixins/color-mode" as *;
|
||||
@use "../../../scss/mixins/border-radius" as *;
|
||||
|
||||
// stylelint-disable selector-class-pattern
|
||||
|
||||
:root {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user