mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 08:39:56 +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.45.1",
|
"rollup": "^4.45.1",
|
||||||
"rollup-plugin-istanbul": "^5.0.0",
|
"rollup-plugin-istanbul": "^5.0.0",
|
||||||
"rtlcss": "^4.3.0",
|
"rtlcss": "^4.3.0",
|
||||||
"sass": "1.78.0",
|
"sass": "1.89.2",
|
||||||
"sass-true": "^9.0.0",
|
"sass-true": "^9.0.0",
|
||||||
"shelljs": "^0.10.0",
|
"shelljs": "^0.10.0",
|
||||||
"stylelint": "^16.21.1",
|
"stylelint": "^16.21.1",
|
||||||
@@ -3622,6 +3622,316 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@parcel/watcher": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
|
||||||
|
"dev": true,
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"detect-libc": "^1.0.3",
|
||||||
|
"is-glob": "^4.0.3",
|
||||||
|
"micromatch": "^4.0.5",
|
||||||
|
"node-addon-api": "^7.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"@parcel/watcher-android-arm64": "2.5.1",
|
||||||
|
"@parcel/watcher-darwin-arm64": "2.5.1",
|
||||||
|
"@parcel/watcher-darwin-x64": "2.5.1",
|
||||||
|
"@parcel/watcher-freebsd-x64": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm-glibc": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm-musl": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm64-glibc": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-arm64-musl": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-x64-glibc": "2.5.1",
|
||||||
|
"@parcel/watcher-linux-x64-musl": "2.5.1",
|
||||||
|
"@parcel/watcher-win32-arm64": "2.5.1",
|
||||||
|
"@parcel/watcher-win32-ia32": "2.5.1",
|
||||||
|
"@parcel/watcher-win32-x64": "2.5.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-android-arm64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-darwin-arm64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-darwin-x64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-freebsd-x64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"freebsd"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm-glibc": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm-musl": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm64-glibc": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-arm64-musl": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-x64-glibc": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-linux-x64-musl": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-win32-arm64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-win32-ia32": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
|
||||||
|
"cpu": [
|
||||||
|
"ia32"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@parcel/watcher-win32-x64": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/parcel"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@pkgjs/parseargs": {
|
"node_modules/@pkgjs/parseargs": {
|
||||||
"version": "0.11.0",
|
"version": "0.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
||||||
@@ -6703,14 +7013,17 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/detect-libc": {
|
"node_modules/detect-libc": {
|
||||||
"version": "2.0.4",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||||
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
|
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
"bin": {
|
||||||
|
"detect-libc": "bin/detect-libc.js"
|
||||||
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=8"
|
"node": ">=0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/deterministic-object-hash": {
|
"node_modules/deterministic-object-hash": {
|
||||||
@@ -9418,9 +9731,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/immutable": {
|
"node_modules/immutable": {
|
||||||
"version": "4.3.7",
|
"version": "5.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
|
||||||
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
|
"integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
@@ -13466,6 +13779,14 @@
|
|||||||
"url": "https://opencollective.com/unified"
|
"url": "https://opencollective.com/unified"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/node-addon-api": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||||
|
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/node-fetch": {
|
"node_modules/node-fetch": {
|
||||||
"version": "2.7.0",
|
"version": "2.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||||
@@ -16021,14 +16342,14 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/sass": {
|
"node_modules/sass": {
|
||||||
"version": "1.78.0",
|
"version": "1.89.2",
|
||||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
|
"resolved": "https://registry.npmjs.org/sass/-/sass-1.89.2.tgz",
|
||||||
"integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
|
"integrity": "sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": ">=3.0.0 <4.0.0",
|
"chokidar": "^4.0.0",
|
||||||
"immutable": "^4.0.0",
|
"immutable": "^5.0.2",
|
||||||
"source-map-js": ">=0.6.2 <2.0.0"
|
"source-map-js": ">=0.6.2 <2.0.0"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
@@ -16036,6 +16357,9 @@
|
|||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"@parcel/watcher": "^2.4.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sass-formatter": {
|
"node_modules/sass-formatter": {
|
||||||
@@ -16075,70 +16399,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sass/node_modules/chokidar": {
|
|
||||||
"version": "3.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
|
||||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"anymatch": "~3.1.2",
|
|
||||||
"braces": "~3.0.2",
|
|
||||||
"glob-parent": "~5.1.2",
|
|
||||||
"is-binary-path": "~2.1.0",
|
|
||||||
"is-glob": "~4.0.1",
|
|
||||||
"normalize-path": "~3.0.0",
|
|
||||||
"readdirp": "~3.6.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 8.10.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://paulmillr.com/funding/"
|
|
||||||
},
|
|
||||||
"optionalDependencies": {
|
|
||||||
"fsevents": "~2.3.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sass/node_modules/glob-parent": {
|
|
||||||
"version": "5.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
|
||||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"is-glob": "^4.0.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sass/node_modules/picomatch": {
|
|
||||||
"version": "2.3.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
|
||||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.6"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/jonschlinkert"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sass/node_modules/readdirp": {
|
|
||||||
"version": "3.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
|
||||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"picomatch": "^2.2.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sax": {
|
"node_modules/sax": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
|
||||||
@@ -16275,6 +16535,17 @@
|
|||||||
"@img/sharp-win32-x64": "0.33.5"
|
"@img/sharp-win32-x64": "0.33.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/sharp/node_modules/detect-libc": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"optional": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/sharp/node_modules/semver": {
|
"node_modules/sharp/node_modules/semver": {
|
||||||
"version": "7.7.2",
|
"version": "7.7.2",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
||||||
|
|||||||
@@ -42,11 +42,11 @@
|
|||||||
"start": "npm-run-all --parallel watch docs-serve",
|
"start": "npm-run-all --parallel watch docs-serve",
|
||||||
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
|
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
|
||||||
"css": "npm-run-all css-compile css-prefix css-rtl css-minify",
|
"css": "npm-run-all css-compile css-prefix css-rtl css-minify",
|
||||||
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
|
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css scss/bootstrap-grid.scss:dist/css/bootstrap-grid.css scss/bootstrap-reboot.scss:dist/css/bootstrap-reboot.css scss/bootstrap-utilities.scss:dist/css/bootstrap-utilities.css",
|
||||||
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
|
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
|
||||||
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
|
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
|
||||||
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
|
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
|
||||||
"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": "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-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
|
||||||
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
|
"css-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.45.1",
|
"rollup": "^4.45.1",
|
||||||
"rollup-plugin-istanbul": "^5.0.0",
|
"rollup-plugin-istanbul": "^5.0.0",
|
||||||
"rtlcss": "^4.3.0",
|
"rtlcss": "^4.3.0",
|
||||||
"sass": "1.78.0",
|
"sass": "1.89.2",
|
||||||
"sass-true": "^9.0.0",
|
"sass-true": "^9.0.0",
|
||||||
"shelljs": "^0.10.0",
|
"shelljs": "^0.10.0",
|
||||||
"stylelint": "^16.21.1",
|
"stylelint": "^16.21.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
|
// Base styles
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
@@ -57,7 +62,7 @@
|
|||||||
|
|
||||||
// scss-docs-start alert-modifiers
|
// scss-docs-start alert-modifiers
|
||||||
// Generate contextual modifier classes for colorizing the alert
|
// Generate contextual modifier classes for colorizing the alert
|
||||||
@each $state in map-keys($theme-colors) {
|
@each $state in map.keys($theme-colors) {
|
||||||
.alert-#{$state} {
|
.alert-#{$state} {
|
||||||
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||||
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Requires one of the contextual, color modifier classes for `color` and
|
// Requires one of the contextual, color modifier classes for `color` and
|
||||||
|
|||||||
7
scss/_banner.scss
Normal file
7
scss/_banner.scss
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
$file: "" !default;
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* Bootstrap #{$file} v6.0.0-dev (https://getbootstrap.com/)
|
||||||
|
* Copyright 2011-2025 The Bootstrap Authors
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
*/
|
||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
// scss-docs-start breadcrumb-css-vars
|
// scss-docs-start breadcrumb-css-vars
|
||||||
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
|
||||||
// Make the div behave like a button
|
// Make the div behave like a button
|
||||||
.btn-group,
|
.btn-group,
|
||||||
.btn-group-vertical {
|
.btn-group-vertical {
|
||||||
|
|||||||
@@ -1,3 +1,86 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
|
||||||
|
// Button variants
|
||||||
|
//
|
||||||
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||||
|
// and disabled options for all buttons
|
||||||
|
|
||||||
|
// scss-docs-start btn-variant-mixin
|
||||||
|
@mixin button-variant(
|
||||||
|
$background,
|
||||||
|
$border,
|
||||||
|
$color: color-contrast($background),
|
||||||
|
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
||||||
|
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
||||||
|
$hover-color: color-contrast($hover-background),
|
||||||
|
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
||||||
|
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
||||||
|
$active-color: color-contrast($active-background),
|
||||||
|
$disabled-background: $background,
|
||||||
|
$disabled-border: $border,
|
||||||
|
$disabled-color: color-contrast($disabled-background)
|
||||||
|
) {
|
||||||
|
--#{$prefix}btn-color: #{$color};
|
||||||
|
--#{$prefix}btn-bg: #{$background};
|
||||||
|
--#{$prefix}btn-border-color: #{$border};
|
||||||
|
--#{$prefix}btn-hover-color: #{$hover-color};
|
||||||
|
--#{$prefix}btn-hover-bg: #{$hover-background};
|
||||||
|
--#{$prefix}btn-hover-border-color: #{$hover-border};
|
||||||
|
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
|
||||||
|
--#{$prefix}btn-active-color: #{$active-color};
|
||||||
|
--#{$prefix}btn-active-bg: #{$active-background};
|
||||||
|
--#{$prefix}btn-active-border-color: #{$active-border};
|
||||||
|
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
||||||
|
--#{$prefix}btn-disabled-color: #{$disabled-color};
|
||||||
|
--#{$prefix}btn-disabled-bg: #{$disabled-background};
|
||||||
|
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
|
||||||
|
}
|
||||||
|
// scss-docs-end btn-variant-mixin
|
||||||
|
|
||||||
|
// scss-docs-start btn-outline-variant-mixin
|
||||||
|
@mixin button-outline-variant(
|
||||||
|
$color,
|
||||||
|
$color-hover: color-contrast($color),
|
||||||
|
$active-background: $color,
|
||||||
|
$active-border: $color,
|
||||||
|
$active-color: color-contrast($active-background)
|
||||||
|
) {
|
||||||
|
--#{$prefix}btn-color: #{$color};
|
||||||
|
--#{$prefix}btn-border-color: #{$color};
|
||||||
|
--#{$prefix}btn-hover-color: #{$color-hover};
|
||||||
|
--#{$prefix}btn-hover-bg: #{$active-background};
|
||||||
|
--#{$prefix}btn-hover-border-color: #{$active-border};
|
||||||
|
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
|
||||||
|
--#{$prefix}btn-active-color: #{$active-color};
|
||||||
|
--#{$prefix}btn-active-bg: #{$active-background};
|
||||||
|
--#{$prefix}btn-active-border-color: #{$active-border};
|
||||||
|
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
||||||
|
--#{$prefix}btn-disabled-color: #{$color};
|
||||||
|
--#{$prefix}btn-disabled-bg: transparent;
|
||||||
|
--#{$prefix}btn-disabled-border-color: #{$color};
|
||||||
|
--#{$prefix}gradient: none;
|
||||||
|
}
|
||||||
|
// scss-docs-end btn-outline-variant-mixin
|
||||||
|
|
||||||
|
// scss-docs-start btn-size-mixin
|
||||||
|
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||||
|
--#{$prefix}btn-padding-y: #{$padding-y};
|
||||||
|
--#{$prefix}btn-padding-x: #{$padding-x};
|
||||||
|
@include rfs($font-size, --#{$prefix}btn-font-size);
|
||||||
|
--#{$prefix}btn-border-radius: #{$border-radius};
|
||||||
|
}
|
||||||
|
// scss-docs-end btn-size-mixin
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,11 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/clearfix" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Notes on the classes:
|
// Notes on the classes:
|
||||||
//
|
//
|
||||||
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
|
||||||
// Transparent background and border properties included for button version.
|
// Transparent background and border properties included for button version.
|
||||||
// iOS requires the button element instead of an anchor tag.
|
// iOS requires the button element instead of an anchor tag.
|
||||||
// If you want the anchor version, it requires `href="#"`.
|
// If you want the anchor version, it requires `href="#"`.
|
||||||
|
|||||||
282
scss/_colors.scss
Normal file
282
scss/_colors.scss
Normal file
@@ -0,0 +1,282 @@
|
|||||||
|
$blue: #0d6efd !default;
|
||||||
|
$blue-100: #cfe2ff !default;
|
||||||
|
$blue-200: #9ec5fe !default;
|
||||||
|
$blue-300: #6ea8fe !default;
|
||||||
|
$blue-400: #3d8bfd !default;
|
||||||
|
$blue-500: $blue !default;
|
||||||
|
$blue-600: #0a58ca !default;
|
||||||
|
$blue-700: #084298 !default;
|
||||||
|
$blue-800: #052c65 !default;
|
||||||
|
$blue-900: #031633 !default;
|
||||||
|
|
||||||
|
$indigo: #6610f2 !default;
|
||||||
|
$indigo-100: #e0cffc !default;
|
||||||
|
$indigo-200: #c29ffa !default;
|
||||||
|
$indigo-300: #a370f7 !default;
|
||||||
|
$indigo-400: #8540f5 !default;
|
||||||
|
$indigo-500: $indigo !default;
|
||||||
|
$indigo-600: #520dc2 !default;
|
||||||
|
$indigo-700: #3d0a91 !default;
|
||||||
|
$indigo-800: #290661 !default;
|
||||||
|
$indigo-900: #140330 !default;
|
||||||
|
|
||||||
|
$purple: #6f42c1 !default;
|
||||||
|
$purple-100: #e2d9f3 !default;
|
||||||
|
$purple-200: #c5b3e6 !default;
|
||||||
|
$purple-300: #a98eda !default;
|
||||||
|
$purple-400: #8c68cd !default;
|
||||||
|
$purple-500: $purple !default;
|
||||||
|
$purple-600: #59359a !default;
|
||||||
|
$purple-700: #432874 !default;
|
||||||
|
$purple-800: #2c1a4d !default;
|
||||||
|
$purple-900: #160d27 !default;
|
||||||
|
|
||||||
|
$pink: #d63384 !default;
|
||||||
|
$pink-100: #f7d6e6 !default;
|
||||||
|
$pink-200: #efadce !default;
|
||||||
|
$pink-300: #e685b5 !default;
|
||||||
|
$pink-400: #de5c9d !default;
|
||||||
|
$pink-500: $pink !default;
|
||||||
|
$pink-600: #ab296a !default;
|
||||||
|
$pink-700: #801f4f !default;
|
||||||
|
$pink-800: #561435 !default;
|
||||||
|
$pink-900: #2b0a1a !default;
|
||||||
|
|
||||||
|
$red: #dc3545 !default;
|
||||||
|
$red-100: #f8d7da !default;
|
||||||
|
$red-200: #f1aeb5 !default;
|
||||||
|
$red-300: #ea868f !default;
|
||||||
|
$red-400: #e35d6a !default;
|
||||||
|
$red-500: $red !default;
|
||||||
|
$red-600: #b02a37 !default;
|
||||||
|
$red-700: #842029 !default;
|
||||||
|
$red-800: #58151c !default;
|
||||||
|
$red-900: #2c0b0e !default;
|
||||||
|
|
||||||
|
$orange: #fd7e14 !default;
|
||||||
|
$orange-100: #ffe5d0 !default;
|
||||||
|
$orange-200: #fecba1 !default;
|
||||||
|
$orange-300: #feb272 !default;
|
||||||
|
$orange-400: #fd9843 !default;
|
||||||
|
$orange-500: $orange !default;
|
||||||
|
$orange-600: #ca6510 !default;
|
||||||
|
$orange-700: #984c0c !default;
|
||||||
|
$orange-800: #653208 !default;
|
||||||
|
$orange-900: #331904 !default;
|
||||||
|
|
||||||
|
$yellow: #ffc107 !default;
|
||||||
|
$yellow-100: #fff3cd !default;
|
||||||
|
$yellow-200: #ffe69c !default;
|
||||||
|
$yellow-300: #ffda6a !default;
|
||||||
|
$yellow-400: #ffcd39 !default;
|
||||||
|
$yellow-500: $yellow !default;
|
||||||
|
$yellow-600: #cc9a06 !default;
|
||||||
|
$yellow-700: #997404 !default;
|
||||||
|
$yellow-800: #664d03 !default;
|
||||||
|
$yellow-900: #332701 !default;
|
||||||
|
|
||||||
|
$green: #198754 !default;
|
||||||
|
$green-100: #d1e7dd !default;
|
||||||
|
$green-200: #a3cfbb !default;
|
||||||
|
$green-300: #75b798 !default;
|
||||||
|
$green-400: #479f76 !default;
|
||||||
|
$green-500: $green !default;
|
||||||
|
$green-600: #146c43 !default;
|
||||||
|
$green-700: #0f5132 !default;
|
||||||
|
$green-800: #0a3622 !default;
|
||||||
|
$green-900: #051b11 !default;
|
||||||
|
|
||||||
|
$teal: #20c997 !default;
|
||||||
|
$teal-100: #d2f4ea !default;
|
||||||
|
$teal-200: #a6e9d5 !default;
|
||||||
|
$teal-300: #79dfc1 !default;
|
||||||
|
$teal-400: #4dd4ac !default;
|
||||||
|
$teal-500: $teal !default;
|
||||||
|
$teal-600: #1aa179 !default;
|
||||||
|
$teal-700: #13795b !default;
|
||||||
|
$teal-800: #0d503c !default;
|
||||||
|
$teal-900: #06281e !default;
|
||||||
|
|
||||||
|
$cyan: #0dcaf0 !default;
|
||||||
|
$cyan-100: #cff4fc !default;
|
||||||
|
$cyan-200: #9eeaf9 !default;
|
||||||
|
$cyan-300: #6edff6 !default;
|
||||||
|
$cyan-400: #3dd5f3 !default;
|
||||||
|
$cyan-500: $cyan !default;
|
||||||
|
$cyan-600: #0aa2c0 !default;
|
||||||
|
$cyan-700: #087990 !default;
|
||||||
|
$cyan-800: #055160 !default;
|
||||||
|
$cyan-900: #032830 !default;
|
||||||
|
|
||||||
|
$gray: #adb5bd !default;
|
||||||
|
$gray-100: #f8f9fa !default;
|
||||||
|
$gray-200: #e9ecef !default;
|
||||||
|
$gray-300: #dee2e6 !default;
|
||||||
|
$gray-400: #ced4da !default;
|
||||||
|
$gray-500: $gray !default;
|
||||||
|
$gray-600: #6c757d !default;
|
||||||
|
$gray-700: #495057 !default;
|
||||||
|
$gray-800: #343a40 !default;
|
||||||
|
$gray-900: #212529 !default;
|
||||||
|
|
||||||
|
$white: #fff !default;
|
||||||
|
$black: #000 !default;
|
||||||
|
|
||||||
|
$blues: (
|
||||||
|
"blue-100": $blue-100,
|
||||||
|
"blue-200": $blue-200,
|
||||||
|
"blue-300": $blue-300,
|
||||||
|
"blue-400": $blue-400,
|
||||||
|
"blue-500": $blue-500,
|
||||||
|
"blue-600": $blue-600,
|
||||||
|
"blue-700": $blue-700,
|
||||||
|
"blue-800": $blue-800,
|
||||||
|
"blue-900": $blue-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$indigos: (
|
||||||
|
"indigo-100": $indigo-100,
|
||||||
|
"indigo-200": $indigo-200,
|
||||||
|
"indigo-300": $indigo-300,
|
||||||
|
"indigo-400": $indigo-400,
|
||||||
|
"indigo-500": $indigo,
|
||||||
|
"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;
|
$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…
|
// 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
|
// Grid breakpoints
|
||||||
//
|
//
|
||||||
// Define the minimum dimensions at which your layout will change,
|
// Define the minimum dimensions at which your layout will change,
|
||||||
@@ -47,6 +71,7 @@ $container-max-widths: (
|
|||||||
|
|
||||||
$container-padding-x: $grid-gutter-width !default;
|
$container-padding-x: $grid-gutter-width !default;
|
||||||
|
|
||||||
|
$utilities: () !default;
|
||||||
|
|
||||||
// Characters which are escaped by the escape-svg function
|
// Characters which are escaped by the escape-svg function
|
||||||
$escaped-characters: (
|
$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>`)
|
// The dropdown wrapper (`<div>`)
|
||||||
.dropup,
|
.dropup,
|
||||||
.dropend,
|
.dropend,
|
||||||
@@ -85,7 +96,7 @@
|
|||||||
// We deliberately hardcode the `bs-` prefix because we check
|
// We deliberately hardcode the `bs-` prefix because we check
|
||||||
// this custom property in JS to determine Popper's positioning
|
// this custom property in JS to determine Popper's positioning
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
@import "forms/labels";
|
|
||||||
@import "forms/form-text";
|
|
||||||
@import "forms/form-control";
|
|
||||||
@import "forms/form-select";
|
|
||||||
@import "forms/form-check";
|
|
||||||
@import "forms/form-range";
|
|
||||||
@import "forms/floating-labels";
|
|
||||||
@import "forms/input-group";
|
|
||||||
@import "forms/validation";
|
|
||||||
@@ -1,3 +1,12 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "sass:list";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "sass:math";
|
||||||
|
@use "sass:meta";
|
||||||
|
@use "sass:string";
|
||||||
|
// @use "variables" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
|
||||||
// Bootstrap functions
|
// Bootstrap functions
|
||||||
//
|
//
|
||||||
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
||||||
@@ -8,7 +17,7 @@
|
|||||||
$prev-key: null;
|
$prev-key: null;
|
||||||
$prev-num: null;
|
$prev-num: null;
|
||||||
@each $key, $num in $map {
|
@each $key, $num in $map {
|
||||||
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
|
@if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
|
||||||
// Do nothing
|
// Do nothing
|
||||||
} @else if not comparable($prev-num, $num) {
|
} @else if not comparable($prev-num, $num) {
|
||||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||||
@@ -22,10 +31,10 @@
|
|||||||
|
|
||||||
// Starts at zero
|
// Starts at zero
|
||||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
||||||
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
@mixin _assert-starts-at-zero($map, $map-name: "$breakpoints") {
|
||||||
@if length($map) > 0 {
|
@if list.length($map) > 0 {
|
||||||
$values: map-values($map);
|
$values: map.values($map);
|
||||||
$first-value: nth($values, 1);
|
$first-value: list.nth($values, 1);
|
||||||
@if $first-value != 0 {
|
@if $first-value != 0 {
|
||||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||||
}
|
}
|
||||||
@@ -34,7 +43,7 @@
|
|||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
@function to-rgb($value) {
|
@function to-rgb($value) {
|
||||||
@return red($value), green($value), blue($value);
|
@return color.channel($value, "red"), color.channel($value, "green"), color.channel($value, "blue");
|
||||||
}
|
}
|
||||||
|
|
||||||
// stylelint-disable scss/dollar-variable-pattern
|
// stylelint-disable scss/dollar-variable-pattern
|
||||||
@@ -55,10 +64,10 @@
|
|||||||
// allow to pass the $key and $value of the map as an function argument
|
// allow to pass the $key and $value of the map as an function argument
|
||||||
$_args: ();
|
$_args: ();
|
||||||
@each $arg in $args {
|
@each $arg in $args {
|
||||||
$_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
|
$_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
|
||||||
}
|
}
|
||||||
|
|
||||||
$_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
|
$_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $_map;
|
@return $_map;
|
||||||
@@ -68,7 +77,7 @@
|
|||||||
@function varify($list) {
|
@function varify($list) {
|
||||||
$result: null;
|
$result: null;
|
||||||
@each $entry in $list {
|
@each $entry in $list {
|
||||||
$result: append($result, var(--#{$prefix}#{$entry}), space);
|
$result: list.append($result, var(--#{$prefix}#{$entry}), space);
|
||||||
}
|
}
|
||||||
@return $result;
|
@return $result;
|
||||||
}
|
}
|
||||||
@@ -79,7 +88,7 @@
|
|||||||
$result: ();
|
$result: ();
|
||||||
@each $key, $value in $map {
|
@each $key, $value in $map {
|
||||||
@if $key != 0 {
|
@if $key != 0 {
|
||||||
$result: map-merge($result, ("n" + $key: (-$value)));
|
$result: map.merge($result, ("n" + $key: (-$value)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@return $result;
|
@return $result;
|
||||||
@@ -89,8 +98,8 @@
|
|||||||
@function map-get-multiple($map, $values) {
|
@function map-get-multiple($map, $values) {
|
||||||
$result: ();
|
$result: ();
|
||||||
@each $key, $value in $map {
|
@each $key, $value in $map {
|
||||||
@if (index($values, $key) != null) {
|
@if (list.index($values, $key) != null) {
|
||||||
$result: map-merge($result, ($key: $value));
|
$result: map.merge($result, ($key: $value));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@return $result;
|
@return $result;
|
||||||
@@ -101,7 +110,7 @@
|
|||||||
$merged-maps: ();
|
$merged-maps: ();
|
||||||
|
|
||||||
@each $map in $maps {
|
@each $map in $maps {
|
||||||
$merged-maps: map-merge($merged-maps, $map);
|
$merged-maps: map.merge($merged-maps, $map);
|
||||||
}
|
}
|
||||||
@return $merged-maps;
|
@return $merged-maps;
|
||||||
}
|
}
|
||||||
@@ -115,10 +124,10 @@
|
|||||||
// @param {String} $replace ('') - New value
|
// @param {String} $replace ('') - New value
|
||||||
// @return {String} - Updated string
|
// @return {String} - Updated string
|
||||||
@function str-replace($string, $search, $replace: "") {
|
@function str-replace($string, $search, $replace: "") {
|
||||||
$index: str-index($string, $search);
|
$index: string.index($string, $search);
|
||||||
|
|
||||||
@if $index {
|
@if $index {
|
||||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $string;
|
@return $string;
|
||||||
@@ -129,11 +138,11 @@
|
|||||||
// Requires the use of quotes around data URIs.
|
// Requires the use of quotes around data URIs.
|
||||||
|
|
||||||
@function escape-svg($string) {
|
@function escape-svg($string) {
|
||||||
@if str-index($string, "data:image/svg+xml") {
|
@if string.index($string, "data:image/svg+xml") {
|
||||||
@each $char, $encoded in $escaped-characters {
|
@each $char, $encoded in $escaped-characters {
|
||||||
// Do not escape the url brackets
|
// Do not escape the url brackets
|
||||||
@if str-index($string, "url(") == 1 {
|
@if string.index($string, "url(") == 1 {
|
||||||
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
$string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
|
||||||
} @else {
|
} @else {
|
||||||
$string: str-replace($string, $char, $encoded);
|
$string: str-replace($string, $char, $encoded);
|
||||||
}
|
}
|
||||||
@@ -151,7 +160,7 @@
|
|||||||
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
|
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
|
||||||
|
|
||||||
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
||||||
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
$foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
|
||||||
$max-ratio: 0;
|
$max-ratio: 0;
|
||||||
$max-ratio-color: null;
|
$max-ratio-color: null;
|
||||||
|
|
||||||
@@ -174,7 +183,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
|||||||
$l1: luminance($background);
|
$l1: luminance($background);
|
||||||
$l2: luminance(opaque($background, $foreground));
|
$l2: luminance(opaque($background, $foreground));
|
||||||
|
|
||||||
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
|
@return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Return WCAG2.2 relative luminance
|
// Return WCAG2.2 relative luminance
|
||||||
@@ -182,121 +191,38 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
|
|||||||
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
|
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
|
||||||
@function luminance($color) {
|
@function luminance($color) {
|
||||||
$rgb: (
|
$rgb: (
|
||||||
"r": red($color),
|
"r": color.channel($color, "red"),
|
||||||
"g": green($color),
|
"g": color.channel($color, "green"),
|
||||||
"b": blue($color)
|
"b": color.channel($color, "blue")
|
||||||
);
|
);
|
||||||
|
|
||||||
@each $name, $value in $rgb {
|
@each $name, $value in $rgb {
|
||||||
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
|
$value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), list.nth($_luminance-list, math.round($value + 1)));
|
||||||
$rgb: map-merge($rgb, ($name: $value));
|
$rgb: map.merge($rgb, ($name: $value));
|
||||||
}
|
}
|
||||||
|
|
||||||
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
|
@return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Return opaque color
|
// Return opaque color
|
||||||
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
||||||
@function opaque($background, $foreground) {
|
@function opaque($background, $foreground) {
|
||||||
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
|
@return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-docs-start color-functions
|
// scss-docs-start color-functions
|
||||||
// Tint a color: mix a color with white
|
// // Tint a color: mix a color with white
|
||||||
@function tint-color($color, $weight) {
|
@function tint-color($color, $weight) {
|
||||||
@return mix(white, $color, $weight);
|
@return color.mix(white, $color, $weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Shade a color: mix a color with black
|
// // Shade a color: mix a color with black
|
||||||
@function shade-color($color, $weight) {
|
@function shade-color($color, $weight) {
|
||||||
@return mix(black, $color, $weight);
|
@return color.mix(black, $color, $weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Shade the color if the weight is positive, else tint it
|
// // Shade the color if the weight is positive, else tint it
|
||||||
@function shift-color($color, $weight) {
|
@function shift-color($color, $weight) {
|
||||||
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
||||||
}
|
}
|
||||||
// scss-docs-end color-functions
|
// scss-docs-end color-functions
|
||||||
|
|
||||||
// Return valid calc
|
|
||||||
@function add($value1, $value2, $return-calc: true) {
|
|
||||||
@if $value1 == null {
|
|
||||||
@return $value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $value2 == null {
|
|
||||||
@return $value1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
|
||||||
@return $value1 + $value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@function subtract($value1, $value2, $return-calc: true) {
|
|
||||||
@if $value1 == null and $value2 == null {
|
|
||||||
@return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $value1 == null {
|
|
||||||
@return -$value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $value2 == null {
|
|
||||||
@return $value1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
|
||||||
@return $value1 - $value2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if type-of($value2) != number {
|
|
||||||
$value2: unquote("(") + $value2 + unquote(")");
|
|
||||||
}
|
|
||||||
|
|
||||||
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@function divide($dividend, $divisor, $precision: 10) {
|
|
||||||
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
|
||||||
$dividend: abs($dividend);
|
|
||||||
$divisor: abs($divisor);
|
|
||||||
@if $dividend == 0 {
|
|
||||||
@return 0;
|
|
||||||
}
|
|
||||||
@if $divisor == 0 {
|
|
||||||
@error "Cannot divide by 0";
|
|
||||||
}
|
|
||||||
$remainder: $dividend;
|
|
||||||
$result: 0;
|
|
||||||
$factor: 10;
|
|
||||||
@while ($remainder > 0 and $precision >= 0) {
|
|
||||||
$quotient: 0;
|
|
||||||
@while ($remainder >= $divisor) {
|
|
||||||
$remainder: $remainder - $divisor;
|
|
||||||
$quotient: $quotient + 1;
|
|
||||||
}
|
|
||||||
$result: $result * 10 + $quotient;
|
|
||||||
$factor: $factor * .1;
|
|
||||||
$remainder: $remainder * 10;
|
|
||||||
$precision: $precision - 1;
|
|
||||||
@if ($precision < 0 and $remainder >= $divisor * 5) {
|
|
||||||
$result: $result + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$result: $result * $factor * $sign;
|
|
||||||
$dividend-unit: unit($dividend);
|
|
||||||
$divisor-unit: unit($divisor);
|
|
||||||
$unit-map: (
|
|
||||||
"px": 1px,
|
|
||||||
"rem": 1rem,
|
|
||||||
"em": 1em,
|
|
||||||
"%": 1%
|
|
||||||
);
|
|
||||||
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
|
|
||||||
$result: $result * map-get($unit-map, $dividend-unit);
|
|
||||||
}
|
|
||||||
@return $result;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,3 +1,11 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Easily usable on <ul>, <ol>, or <div>.
|
// Easily usable on <ul>, <ol>, or <div>.
|
||||||
@@ -121,7 +129,7 @@
|
|||||||
//
|
//
|
||||||
// Change the layout of list group items from vertical (default) to horizontal.
|
// Change the layout of list group items from vertical (default) to horizontal.
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
@@ -182,7 +190,7 @@
|
|||||||
// Add modifier classes to change text and background color on individual items.
|
// Add modifier classes to change text and background color on individual items.
|
||||||
// Organizationally, this must come after the `:hover` states.
|
// Organizationally, this must come after the `:hover` states.
|
||||||
|
|
||||||
@each $state in map-keys($theme-colors) {
|
@each $state in map.keys($theme-colors) {
|
||||||
.list-group-item-#{$state} {
|
.list-group-item-#{$state} {
|
||||||
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||||
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
|
||||||
// Re-assigned maps
|
// Re-assigned maps
|
||||||
//
|
//
|
||||||
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
|
// 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-end utilities-colors
|
||||||
|
|
||||||
// scss-docs-start utilities-text-colors
|
// scss-docs-start utilities-text-colors
|
||||||
$utilities-text: map-merge(
|
$utilities-text: map.merge(
|
||||||
$utilities-colors,
|
$utilities-colors,
|
||||||
(
|
(
|
||||||
"black": to-rgb($black),
|
"black": to-rgb($black),
|
||||||
@@ -123,7 +129,7 @@ $utilities-text-emphasis-colors: (
|
|||||||
// scss-docs-end utilities-text-colors
|
// scss-docs-end utilities-text-colors
|
||||||
|
|
||||||
// scss-docs-start utilities-bg-colors
|
// scss-docs-start utilities-bg-colors
|
||||||
$utilities-bg: map-merge(
|
$utilities-bg: map.merge(
|
||||||
$utilities-colors,
|
$utilities-colors,
|
||||||
(
|
(
|
||||||
"black": to-rgb($black),
|
"black": to-rgb($black),
|
||||||
@@ -146,7 +152,7 @@ $utilities-bg-subtle: (
|
|||||||
// scss-docs-end utilities-bg-colors
|
// scss-docs-end utilities-bg-colors
|
||||||
|
|
||||||
// scss-docs-start utilities-border-colors
|
// scss-docs-start utilities-border-colors
|
||||||
$utilities-border: map-merge(
|
$utilities-border: map.merge(
|
||||||
$utilities-colors,
|
$utilities-colors,
|
||||||
(
|
(
|
||||||
"black": to-rgb($black),
|
"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
|
// stylelint-disable function-disallowed-list
|
||||||
|
|
||||||
// .modal-open - body class for killing the scroll
|
// .modal-open - body class for killing the scroll
|
||||||
@@ -209,7 +220,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// scss-docs-start modal-fullscreen-loop
|
// scss-docs-start modal-fullscreen-loop
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
$postfix: if($infix != "", $infix + "-down", "");
|
$postfix: if($infix != "", $infix + "-down", "");
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Kickstart any navigation component with a set of style resets. Works with
|
// Kickstart any navigation component with a set of style resets. Works with
|
||||||
|
|||||||
@@ -1,3 +1,15 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/color-mode" as *;
|
||||||
|
@use "mixins/deprecate" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "layout/breakpoints" as *;
|
||||||
|
|
||||||
// Navbar
|
// Navbar
|
||||||
//
|
//
|
||||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||||
@@ -190,7 +202,7 @@
|
|||||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||||
// where your navbar collapses.
|
// where your navbar collapses.
|
||||||
.navbar-expand {
|
.navbar-expand {
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@@ -1,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
|
// stylelint-disable function-disallowed-list
|
||||||
|
|
||||||
%offcanvas-css-vars {
|
%offcanvas-css-vars {
|
||||||
@@ -17,7 +25,7 @@
|
|||||||
// scss-docs-end offcanvas-css-vars
|
// scss-docs-end offcanvas-css-vars
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
@@ -26,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,20 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/lists" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
|
// scss-docs-start pagination-mixin
|
||||||
|
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||||
|
--#{$prefix}pagination-padding-x: #{$padding-x};
|
||||||
|
--#{$prefix}pagination-padding-y: #{$padding-y};
|
||||||
|
@include rfs($font-size, --#{$prefix}pagination-font-size);
|
||||||
|
--#{$prefix}pagination-border-radius: #{$border-radius};
|
||||||
|
}
|
||||||
|
// scss-docs-end pagination-mixin
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
// scss-docs-start pagination-css-vars
|
// scss-docs-start pagination-css-vars
|
||||||
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
|
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
|
||||||
.placeholder {
|
.placeholder {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-height: 1em;
|
min-height: 1em;
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/reset-text" as *;
|
||||||
|
|
||||||
.popover {
|
.popover {
|
||||||
// scss-docs-start popover-css-vars
|
// scss-docs-start popover-css-vars
|
||||||
--#{$prefix}popover-zindex: #{$zindex-popover};
|
--#{$prefix}popover-zindex: #{$zindex-popover};
|
||||||
|
|||||||
@@ -1,3 +1,11 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
@use "mixins/gradients" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/box-shadow" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
// Disable animation if transitions are disabled
|
// Disable animation if transitions are disabled
|
||||||
|
|
||||||
// scss-docs-start progress-keyframes
|
// scss-docs-start progress-keyframes
|
||||||
|
|||||||
@@ -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,
|
:root,
|
||||||
[data-bs-theme="light"] {
|
[data-bs-theme="light"] {
|
||||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||||
@@ -41,8 +49,8 @@
|
|||||||
|
|
||||||
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
||||||
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||||
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
|
--#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
|
||||||
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
|
--#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
|
||||||
--#{$prefix}gradient: #{$gradient};
|
--#{$prefix}gradient: #{$gradient};
|
||||||
|
|
||||||
// Root and body
|
// Root and body
|
||||||
@@ -50,7 +58,7 @@
|
|||||||
@if $font-size-root != null {
|
@if $font-size-root != null {
|
||||||
--#{$prefix}root-font-size: #{$font-size-root};
|
--#{$prefix}root-font-size: #{$font-size-root};
|
||||||
}
|
}
|
||||||
--#{$prefix}body-font-family: #{inspect($font-family-base)};
|
--#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
|
||||||
@include rfs($font-size-base, --#{$prefix}body-font-size);
|
@include rfs($font-size-base, --#{$prefix}body-font-size);
|
||||||
--#{$prefix}body-font-weight: #{$font-weight-base};
|
--#{$prefix}body-font-weight: #{$font-weight-base};
|
||||||
--#{$prefix}body-line-height: #{$line-height-base};
|
--#{$prefix}body-line-height: #{$line-height-base};
|
||||||
|
|||||||
@@ -1,3 +1,18 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
|
||||||
|
// scss-docs-start spinner-variables
|
||||||
|
$spinner-width: 2rem !default;
|
||||||
|
$spinner-height: $spinner-width !default;
|
||||||
|
$spinner-vertical-align: -.125em !default;
|
||||||
|
$spinner-border-width: .25em !default;
|
||||||
|
$spinner-animation-speed: .75s !default;
|
||||||
|
|
||||||
|
$spinner-width-sm: 1rem !default;
|
||||||
|
$spinner-height-sm: $spinner-width-sm !default;
|
||||||
|
$spinner-border-width-sm: .2em !default;
|
||||||
|
// scss-docs-end spinner-variables
|
||||||
|
|
||||||
//
|
//
|
||||||
// Rotating border
|
// Rotating border
|
||||||
//
|
//
|
||||||
|
|||||||
153
scss/_theme.scss
Normal file
153
scss/_theme.scss
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
@use "sass:meta";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "config" as *;
|
||||||
|
@use "colors" as *;
|
||||||
|
|
||||||
|
@function theme-color-values($key) {
|
||||||
|
$result: ();
|
||||||
|
|
||||||
|
@each $color-name, $color-map in $new-theme-colors {
|
||||||
|
@if map.has-key($color-map, $key) {
|
||||||
|
$result: map.merge($result, ($color-name: map.get($color-map, $key)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recursive mixin to handle nested maps
|
||||||
|
@mixin create-css-vars($map, $parent-key: "") {
|
||||||
|
@each $key, $value in $map {
|
||||||
|
$current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");
|
||||||
|
|
||||||
|
@if meta.type-of($value) == "map" {
|
||||||
|
@include create-css-vars($value, $current-key);
|
||||||
|
} @else {
|
||||||
|
--#{$prefix}#{$current-key}: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// scss-docs-start theme-colors
|
||||||
|
$new-theme-colors: (
|
||||||
|
"primary": (
|
||||||
|
"base": var(--#{$prefix}blue-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"accent": (
|
||||||
|
"base": var(--#{$prefix}indigo-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"danger": (
|
||||||
|
"base": var(--#{$prefix}red-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"warning": (
|
||||||
|
"base": var(--#{$prefix}yellow-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}gray-900)
|
||||||
|
),
|
||||||
|
"success": (
|
||||||
|
"base": var(--#{$prefix}green-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}white)
|
||||||
|
),
|
||||||
|
"info": (
|
||||||
|
"base": var(--#{$prefix}cyan-500),
|
||||||
|
"text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
|
||||||
|
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": var(--#{$prefix}gray-900)
|
||||||
|
),
|
||||||
|
"secondary": (
|
||||||
|
"base": var(--#{$prefix}gray-300),
|
||||||
|
"text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
|
||||||
|
"bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
|
||||||
|
"bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
|
||||||
|
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
|
||||||
|
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
|
||||||
|
"border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
|
||||||
|
"focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
|
||||||
|
"contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
|
||||||
|
)
|
||||||
|
) !default;
|
||||||
|
// scss-docs-end theme-colors
|
||||||
|
|
||||||
|
// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
|
||||||
|
$theme-bgs: (
|
||||||
|
null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
|
||||||
|
"1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
|
||||||
|
"2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
|
||||||
|
"3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
|
||||||
|
"white": var(--#{$prefix}white),
|
||||||
|
"black": var(--#{$prefix}black),
|
||||||
|
"transparent": transparent,
|
||||||
|
"inherit": inherit,
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$theme-fgs: (
|
||||||
|
null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
|
||||||
|
"1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
|
||||||
|
"2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
|
||||||
|
"3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
|
||||||
|
"white": var(--#{$prefix}white),
|
||||||
|
"black": var(--#{$prefix}black),
|
||||||
|
"inherit": inherit,
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$theme-borders: (
|
||||||
|
null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
|
||||||
|
"muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
|
||||||
|
"subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
|
||||||
|
"emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// $util-opacity: (
|
||||||
|
// "10": .1,
|
||||||
|
// "20": .2,
|
||||||
|
// "30": .3,
|
||||||
|
// "40": .4,
|
||||||
|
// "50": .5,
|
||||||
|
// "60": .6,
|
||||||
|
// "70": .7,
|
||||||
|
// "80": .8,
|
||||||
|
// "90": .9,
|
||||||
|
// "100": 1
|
||||||
|
// ) !default;
|
||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
// scss-docs-start toast-css-vars
|
// scss-docs-start toast-css-vars
|
||||||
--#{$prefix}toast-zindex: #{$zindex-toast};
|
--#{$prefix}toast-zindex: #{$zindex-toast};
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/border-radius" as *;
|
||||||
|
@use "mixins/deprecate" as *;
|
||||||
|
@use "vendor/rfs" as *;
|
||||||
|
@use "mixins/reset-text" as *;
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
.tooltip {
|
.tooltip {
|
||||||
// scss-docs-start tooltip-css-vars
|
// scss-docs-start tooltip-css-vars
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "mixins/transition" as *;
|
||||||
|
|
||||||
.fade {
|
.fade {
|
||||||
@include transition($transition-fade);
|
@include transition($transition-fade);
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,15 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
@use "maps" as *;
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
|
|
||||||
$utilities: () !default;
|
$utilities: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
// stylelint-disable-next-line scss/dollar-variable-default
|
||||||
$utilities: map-merge(
|
$utilities: map.merge(
|
||||||
(
|
(
|
||||||
// scss-docs-start utils-vertical-align
|
// scss-docs-start utils-vertical-align
|
||||||
"align": (
|
"align": (
|
||||||
@@ -353,43 +360,43 @@ $utilities: map-merge(
|
|||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin,
|
property: margin,
|
||||||
class: m,
|
class: m,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-x": (
|
"margin-x": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-right margin-left,
|
property: margin-right margin-left,
|
||||||
class: mx,
|
class: mx,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-y": (
|
"margin-y": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-top margin-bottom,
|
property: margin-top margin-bottom,
|
||||||
class: my,
|
class: my,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-top": (
|
"margin-top": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-top,
|
property: margin-top,
|
||||||
class: mt,
|
class: mt,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-end": (
|
"margin-end": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-right,
|
property: margin-right,
|
||||||
class: me,
|
class: me,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-bottom": (
|
"margin-bottom": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-bottom,
|
property: margin-bottom,
|
||||||
class: mb,
|
class: mb,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
"margin-start": (
|
"margin-start": (
|
||||||
responsive: true,
|
responsive: true,
|
||||||
property: margin-left,
|
property: margin-left,
|
||||||
class: ms,
|
class: ms,
|
||||||
values: map-merge($spacers, (auto: auto))
|
values: map.merge($spacers, (auto: auto))
|
||||||
),
|
),
|
||||||
// Negative margin utilities
|
// Negative margin utilities
|
||||||
"negative-margin": (
|
"negative-margin": (
|
||||||
@@ -579,7 +586,7 @@ $utilities: map-merge(
|
|||||||
local-vars: (
|
local-vars: (
|
||||||
"text-opacity": 1
|
"text-opacity": 1
|
||||||
),
|
),
|
||||||
values: map-merge(
|
values: map.merge(
|
||||||
$utilities-text-colors,
|
$utilities-text-colors,
|
||||||
(
|
(
|
||||||
"muted": var(--#{$prefix}secondary-color), // deprecated
|
"muted": var(--#{$prefix}secondary-color), // deprecated
|
||||||
@@ -637,7 +644,7 @@ $utilities: map-merge(
|
|||||||
local-vars: (
|
local-vars: (
|
||||||
"link-underline-opacity": 1
|
"link-underline-opacity": 1
|
||||||
),
|
),
|
||||||
values: map-merge(
|
values: map.merge(
|
||||||
$utilities-links-underline,
|
$utilities-links-underline,
|
||||||
(
|
(
|
||||||
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
|
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
|
||||||
@@ -665,7 +672,7 @@ $utilities: map-merge(
|
|||||||
local-vars: (
|
local-vars: (
|
||||||
"bg-opacity": 1
|
"bg-opacity": 1
|
||||||
),
|
),
|
||||||
values: map-merge(
|
values: map.merge(
|
||||||
$utilities-bg-colors,
|
$utilities-bg-colors,
|
||||||
(
|
(
|
||||||
"transparent": transparent,
|
"transparent": transparent,
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ $info-bg-subtle-dark: shade-color($info, 80%) !default;
|
|||||||
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
||||||
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
||||||
$light-bg-subtle-dark: $gray-800 !default;
|
$light-bg-subtle-dark: $gray-800 !default;
|
||||||
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
|
$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
|
||||||
// scss-docs-end theme-bg-subtle-dark-variables
|
// scss-docs-end theme-bg-subtle-dark-variables
|
||||||
|
|
||||||
// scss-docs-start theme-border-subtle-dark-variables
|
// scss-docs-start theme-border-subtle-dark-variables
|
||||||
@@ -45,7 +45,7 @@ $body-bg-dark: $gray-900 !default;
|
|||||||
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
||||||
$body-secondary-bg-dark: $gray-800 !default;
|
$body-secondary-bg-dark: $gray-800 !default;
|
||||||
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
||||||
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
|
$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
|
||||||
$body-emphasis-color-dark: $white !default;
|
$body-emphasis-color-dark: $white !default;
|
||||||
$border-color-dark: $gray-700 !default;
|
$border-color-dark: $gray-700 !default;
|
||||||
$border-color-translucent-dark: rgba($white, .15) !default;
|
$border-color-translucent-dark: rgba($white, .15) !default;
|
||||||
|
|||||||
@@ -1,309 +1,21 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "sass:string";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
|
||||||
// Variables
|
// Variables
|
||||||
//
|
//
|
||||||
// Variables should follow the `$component-state-property-size` formula for
|
// Variables should follow the `$component-state-property-size` formula for
|
||||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||||
|
|
||||||
// Color system
|
|
||||||
|
|
||||||
// scss-docs-start gray-color-variables
|
|
||||||
$white: #fff !default;
|
|
||||||
$gray-100: #f8f9fa !default;
|
|
||||||
$gray-200: #e9ecef !default;
|
|
||||||
$gray-300: #dee2e6 !default;
|
|
||||||
$gray-400: #ced4da !default;
|
|
||||||
$gray-500: #adb5bd !default;
|
|
||||||
$gray-600: #6c757d !default;
|
|
||||||
$gray-700: #495057 !default;
|
|
||||||
$gray-800: #343a40 !default;
|
|
||||||
$gray-900: #212529 !default;
|
|
||||||
$black: #000 !default;
|
|
||||||
// scss-docs-end gray-color-variables
|
|
||||||
|
|
||||||
// fusv-disable
|
|
||||||
// scss-docs-start gray-colors-map
|
|
||||||
$grays: (
|
|
||||||
"100": $gray-100,
|
|
||||||
"200": $gray-200,
|
|
||||||
"300": $gray-300,
|
|
||||||
"400": $gray-400,
|
|
||||||
"500": $gray-500,
|
|
||||||
"600": $gray-600,
|
|
||||||
"700": $gray-700,
|
|
||||||
"800": $gray-800,
|
|
||||||
"900": $gray-900
|
|
||||||
) !default;
|
|
||||||
// scss-docs-end gray-colors-map
|
|
||||||
// fusv-enable
|
|
||||||
|
|
||||||
// scss-docs-start color-variables
|
|
||||||
$blue: #0d6efd !default;
|
|
||||||
$indigo: #6610f2 !default;
|
|
||||||
$purple: #6f42c1 !default;
|
|
||||||
$pink: #d63384 !default;
|
|
||||||
$red: #dc3545 !default;
|
|
||||||
$orange: #fd7e14 !default;
|
|
||||||
$yellow: #ffc107 !default;
|
|
||||||
$green: #198754 !default;
|
|
||||||
$teal: #20c997 !default;
|
|
||||||
$cyan: #0dcaf0 !default;
|
|
||||||
// scss-docs-end color-variables
|
|
||||||
|
|
||||||
// scss-docs-start colors-map
|
|
||||||
$colors: (
|
|
||||||
"blue": $blue,
|
|
||||||
"indigo": $indigo,
|
|
||||||
"purple": $purple,
|
|
||||||
"pink": $pink,
|
|
||||||
"red": $red,
|
|
||||||
"orange": $orange,
|
|
||||||
"yellow": $yellow,
|
|
||||||
"green": $green,
|
|
||||||
"teal": $teal,
|
|
||||||
"cyan": $cyan,
|
|
||||||
"black": $black,
|
|
||||||
"white": $white,
|
|
||||||
"gray": $gray-600,
|
|
||||||
"gray-dark": $gray-800
|
|
||||||
) !default;
|
|
||||||
// scss-docs-end colors-map
|
|
||||||
|
|
||||||
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
|
|
||||||
// See https://www.w3.org/TR/WCAG/#contrast-minimum
|
|
||||||
$min-contrast-ratio: 4.5 !default;
|
|
||||||
|
|
||||||
// Customize the light and dark text colors for use in our color contrast function.
|
|
||||||
$color-contrast-dark: $black !default;
|
|
||||||
$color-contrast-light: $white !default;
|
|
||||||
|
|
||||||
// fusv-disable
|
|
||||||
$blue-100: tint-color($blue, 80%) !default;
|
|
||||||
$blue-200: tint-color($blue, 60%) !default;
|
|
||||||
$blue-300: tint-color($blue, 40%) !default;
|
|
||||||
$blue-400: tint-color($blue, 20%) !default;
|
|
||||||
$blue-500: $blue !default;
|
|
||||||
$blue-600: shade-color($blue, 20%) !default;
|
|
||||||
$blue-700: shade-color($blue, 40%) !default;
|
|
||||||
$blue-800: shade-color($blue, 60%) !default;
|
|
||||||
$blue-900: shade-color($blue, 80%) !default;
|
|
||||||
|
|
||||||
$indigo-100: tint-color($indigo, 80%) !default;
|
|
||||||
$indigo-200: tint-color($indigo, 60%) !default;
|
|
||||||
$indigo-300: tint-color($indigo, 40%) !default;
|
|
||||||
$indigo-400: tint-color($indigo, 20%) !default;
|
|
||||||
$indigo-500: $indigo !default;
|
|
||||||
$indigo-600: shade-color($indigo, 20%) !default;
|
|
||||||
$indigo-700: shade-color($indigo, 40%) !default;
|
|
||||||
$indigo-800: shade-color($indigo, 60%) !default;
|
|
||||||
$indigo-900: shade-color($indigo, 80%) !default;
|
|
||||||
|
|
||||||
$purple-100: tint-color($purple, 80%) !default;
|
|
||||||
$purple-200: tint-color($purple, 60%) !default;
|
|
||||||
$purple-300: tint-color($purple, 40%) !default;
|
|
||||||
$purple-400: tint-color($purple, 20%) !default;
|
|
||||||
$purple-500: $purple !default;
|
|
||||||
$purple-600: shade-color($purple, 20%) !default;
|
|
||||||
$purple-700: shade-color($purple, 40%) !default;
|
|
||||||
$purple-800: shade-color($purple, 60%) !default;
|
|
||||||
$purple-900: shade-color($purple, 80%) !default;
|
|
||||||
|
|
||||||
$pink-100: tint-color($pink, 80%) !default;
|
|
||||||
$pink-200: tint-color($pink, 60%) !default;
|
|
||||||
$pink-300: tint-color($pink, 40%) !default;
|
|
||||||
$pink-400: tint-color($pink, 20%) !default;
|
|
||||||
$pink-500: $pink !default;
|
|
||||||
$pink-600: shade-color($pink, 20%) !default;
|
|
||||||
$pink-700: shade-color($pink, 40%) !default;
|
|
||||||
$pink-800: shade-color($pink, 60%) !default;
|
|
||||||
$pink-900: shade-color($pink, 80%) !default;
|
|
||||||
|
|
||||||
$red-100: tint-color($red, 80%) !default;
|
|
||||||
$red-200: tint-color($red, 60%) !default;
|
|
||||||
$red-300: tint-color($red, 40%) !default;
|
|
||||||
$red-400: tint-color($red, 20%) !default;
|
|
||||||
$red-500: $red !default;
|
|
||||||
$red-600: shade-color($red, 20%) !default;
|
|
||||||
$red-700: shade-color($red, 40%) !default;
|
|
||||||
$red-800: shade-color($red, 60%) !default;
|
|
||||||
$red-900: shade-color($red, 80%) !default;
|
|
||||||
|
|
||||||
$orange-100: tint-color($orange, 80%) !default;
|
|
||||||
$orange-200: tint-color($orange, 60%) !default;
|
|
||||||
$orange-300: tint-color($orange, 40%) !default;
|
|
||||||
$orange-400: tint-color($orange, 20%) !default;
|
|
||||||
$orange-500: $orange !default;
|
|
||||||
$orange-600: shade-color($orange, 20%) !default;
|
|
||||||
$orange-700: shade-color($orange, 40%) !default;
|
|
||||||
$orange-800: shade-color($orange, 60%) !default;
|
|
||||||
$orange-900: shade-color($orange, 80%) !default;
|
|
||||||
|
|
||||||
$yellow-100: tint-color($yellow, 80%) !default;
|
|
||||||
$yellow-200: tint-color($yellow, 60%) !default;
|
|
||||||
$yellow-300: tint-color($yellow, 40%) !default;
|
|
||||||
$yellow-400: tint-color($yellow, 20%) !default;
|
|
||||||
$yellow-500: $yellow !default;
|
|
||||||
$yellow-600: shade-color($yellow, 20%) !default;
|
|
||||||
$yellow-700: shade-color($yellow, 40%) !default;
|
|
||||||
$yellow-800: shade-color($yellow, 60%) !default;
|
|
||||||
$yellow-900: shade-color($yellow, 80%) !default;
|
|
||||||
|
|
||||||
$green-100: tint-color($green, 80%) !default;
|
|
||||||
$green-200: tint-color($green, 60%) !default;
|
|
||||||
$green-300: tint-color($green, 40%) !default;
|
|
||||||
$green-400: tint-color($green, 20%) !default;
|
|
||||||
$green-500: $green !default;
|
|
||||||
$green-600: shade-color($green, 20%) !default;
|
|
||||||
$green-700: shade-color($green, 40%) !default;
|
|
||||||
$green-800: shade-color($green, 60%) !default;
|
|
||||||
$green-900: shade-color($green, 80%) !default;
|
|
||||||
|
|
||||||
$teal-100: tint-color($teal, 80%) !default;
|
|
||||||
$teal-200: tint-color($teal, 60%) !default;
|
|
||||||
$teal-300: tint-color($teal, 40%) !default;
|
|
||||||
$teal-400: tint-color($teal, 20%) !default;
|
|
||||||
$teal-500: $teal !default;
|
|
||||||
$teal-600: shade-color($teal, 20%) !default;
|
|
||||||
$teal-700: shade-color($teal, 40%) !default;
|
|
||||||
$teal-800: shade-color($teal, 60%) !default;
|
|
||||||
$teal-900: shade-color($teal, 80%) !default;
|
|
||||||
|
|
||||||
$cyan-100: tint-color($cyan, 80%) !default;
|
|
||||||
$cyan-200: tint-color($cyan, 60%) !default;
|
|
||||||
$cyan-300: tint-color($cyan, 40%) !default;
|
|
||||||
$cyan-400: tint-color($cyan, 20%) !default;
|
|
||||||
$cyan-500: $cyan !default;
|
|
||||||
$cyan-600: shade-color($cyan, 20%) !default;
|
|
||||||
$cyan-700: shade-color($cyan, 40%) !default;
|
|
||||||
$cyan-800: shade-color($cyan, 60%) !default;
|
|
||||||
$cyan-900: shade-color($cyan, 80%) !default;
|
|
||||||
|
|
||||||
$blues: (
|
|
||||||
"blue-100": $blue-100,
|
|
||||||
"blue-200": $blue-200,
|
|
||||||
"blue-300": $blue-300,
|
|
||||||
"blue-400": $blue-400,
|
|
||||||
"blue-500": $blue-500,
|
|
||||||
"blue-600": $blue-600,
|
|
||||||
"blue-700": $blue-700,
|
|
||||||
"blue-800": $blue-800,
|
|
||||||
"blue-900": $blue-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$indigos: (
|
|
||||||
"indigo-100": $indigo-100,
|
|
||||||
"indigo-200": $indigo-200,
|
|
||||||
"indigo-300": $indigo-300,
|
|
||||||
"indigo-400": $indigo-400,
|
|
||||||
"indigo-500": $indigo-500,
|
|
||||||
"indigo-600": $indigo-600,
|
|
||||||
"indigo-700": $indigo-700,
|
|
||||||
"indigo-800": $indigo-800,
|
|
||||||
"indigo-900": $indigo-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$purples: (
|
|
||||||
"purple-100": $purple-100,
|
|
||||||
"purple-200": $purple-200,
|
|
||||||
"purple-300": $purple-300,
|
|
||||||
"purple-400": $purple-400,
|
|
||||||
"purple-500": $purple-500,
|
|
||||||
"purple-600": $purple-600,
|
|
||||||
"purple-700": $purple-700,
|
|
||||||
"purple-800": $purple-800,
|
|
||||||
"purple-900": $purple-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$pinks: (
|
|
||||||
"pink-100": $pink-100,
|
|
||||||
"pink-200": $pink-200,
|
|
||||||
"pink-300": $pink-300,
|
|
||||||
"pink-400": $pink-400,
|
|
||||||
"pink-500": $pink-500,
|
|
||||||
"pink-600": $pink-600,
|
|
||||||
"pink-700": $pink-700,
|
|
||||||
"pink-800": $pink-800,
|
|
||||||
"pink-900": $pink-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$reds: (
|
|
||||||
"red-100": $red-100,
|
|
||||||
"red-200": $red-200,
|
|
||||||
"red-300": $red-300,
|
|
||||||
"red-400": $red-400,
|
|
||||||
"red-500": $red-500,
|
|
||||||
"red-600": $red-600,
|
|
||||||
"red-700": $red-700,
|
|
||||||
"red-800": $red-800,
|
|
||||||
"red-900": $red-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$oranges: (
|
|
||||||
"orange-100": $orange-100,
|
|
||||||
"orange-200": $orange-200,
|
|
||||||
"orange-300": $orange-300,
|
|
||||||
"orange-400": $orange-400,
|
|
||||||
"orange-500": $orange-500,
|
|
||||||
"orange-600": $orange-600,
|
|
||||||
"orange-700": $orange-700,
|
|
||||||
"orange-800": $orange-800,
|
|
||||||
"orange-900": $orange-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$yellows: (
|
|
||||||
"yellow-100": $yellow-100,
|
|
||||||
"yellow-200": $yellow-200,
|
|
||||||
"yellow-300": $yellow-300,
|
|
||||||
"yellow-400": $yellow-400,
|
|
||||||
"yellow-500": $yellow-500,
|
|
||||||
"yellow-600": $yellow-600,
|
|
||||||
"yellow-700": $yellow-700,
|
|
||||||
"yellow-800": $yellow-800,
|
|
||||||
"yellow-900": $yellow-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$greens: (
|
|
||||||
"green-100": $green-100,
|
|
||||||
"green-200": $green-200,
|
|
||||||
"green-300": $green-300,
|
|
||||||
"green-400": $green-400,
|
|
||||||
"green-500": $green-500,
|
|
||||||
"green-600": $green-600,
|
|
||||||
"green-700": $green-700,
|
|
||||||
"green-800": $green-800,
|
|
||||||
"green-900": $green-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$teals: (
|
|
||||||
"teal-100": $teal-100,
|
|
||||||
"teal-200": $teal-200,
|
|
||||||
"teal-300": $teal-300,
|
|
||||||
"teal-400": $teal-400,
|
|
||||||
"teal-500": $teal-500,
|
|
||||||
"teal-600": $teal-600,
|
|
||||||
"teal-700": $teal-700,
|
|
||||||
"teal-800": $teal-800,
|
|
||||||
"teal-900": $teal-900
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$cyans: (
|
|
||||||
"cyan-100": $cyan-100,
|
|
||||||
"cyan-200": $cyan-200,
|
|
||||||
"cyan-300": $cyan-300,
|
|
||||||
"cyan-400": $cyan-400,
|
|
||||||
"cyan-500": $cyan-500,
|
|
||||||
"cyan-600": $cyan-600,
|
|
||||||
"cyan-700": $cyan-700,
|
|
||||||
"cyan-800": $cyan-800,
|
|
||||||
"cyan-900": $cyan-900
|
|
||||||
) !default;
|
|
||||||
// fusv-enable
|
|
||||||
|
|
||||||
// scss-docs-start theme-color-variables
|
// scss-docs-start theme-color-variables
|
||||||
$primary: $blue !default;
|
$primary: $purple-500 !default;
|
||||||
$secondary: $gray-600 !default;
|
$secondary: $gray-600 !default;
|
||||||
$success: $green !default;
|
$success: $green-500 !default;
|
||||||
$info: $cyan !default;
|
$info: $cyan-500 !default;
|
||||||
$warning: $yellow !default;
|
$warning: $yellow-500 !default;
|
||||||
$danger: $red !default;
|
$danger: $red-500 !default;
|
||||||
$light: $gray-100 !default;
|
$light: $gray-100 !default;
|
||||||
$dark: $gray-900 !default;
|
$dark: $gray-900 !default;
|
||||||
// scss-docs-end theme-color-variables
|
// scss-docs-end theme-color-variables
|
||||||
@@ -339,7 +51,7 @@ $success-bg-subtle: tint-color($success, 80%) !default;
|
|||||||
$info-bg-subtle: tint-color($info, 80%) !default;
|
$info-bg-subtle: tint-color($info, 80%) !default;
|
||||||
$warning-bg-subtle: tint-color($warning, 80%) !default;
|
$warning-bg-subtle: tint-color($warning, 80%) !default;
|
||||||
$danger-bg-subtle: tint-color($danger, 80%) !default;
|
$danger-bg-subtle: tint-color($danger, 80%) !default;
|
||||||
$light-bg-subtle: mix($gray-100, $white) !default;
|
$light-bg-subtle: color.mix($gray-100, $white) !default;
|
||||||
$dark-bg-subtle: $gray-400 !default;
|
$dark-bg-subtle: $gray-400 !default;
|
||||||
// scss-docs-end theme-bg-subtle-variables
|
// scss-docs-end theme-bg-subtle-variables
|
||||||
|
|
||||||
@@ -363,34 +75,38 @@ $escaped-characters: (
|
|||||||
(")", "%29"),
|
(")", "%29"),
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
// Options
|
// // Options
|
||||||
//
|
// //
|
||||||
// Quickly modify global styling by enabling or disabling optional features.
|
// // Quickly modify global styling by enabling or disabling optional features.
|
||||||
|
|
||||||
$enable-caret: true !default;
|
// $enable-caret: true !default;
|
||||||
$enable-rounded: true !default;
|
// $enable-rounded: true !default;
|
||||||
$enable-shadows: false !default;
|
// $enable-shadows: false !default;
|
||||||
$enable-gradients: false !default;
|
// $enable-gradients: false !default;
|
||||||
$enable-transitions: true !default;
|
// $enable-transitions: true !default;
|
||||||
$enable-reduced-motion: true !default;
|
// $enable-reduced-motion: true !default;
|
||||||
$enable-smooth-scroll: true !default;
|
// $enable-smooth-scroll: true !default;
|
||||||
$enable-grid-classes: true !default;
|
// $enable-grid-classes: true !default;
|
||||||
$enable-container-classes: true !default;
|
// $enable-container-classes: true !default;
|
||||||
$enable-cssgrid: false !default;
|
// $enable-cssgrid: false !default;
|
||||||
$enable-button-pointers: true !default;
|
// $enable-button-pointers: true !default;
|
||||||
$enable-rfs: true !default;
|
// $enable-rfs: true !default;
|
||||||
$enable-validation-icons: true !default;
|
// $enable-validation-icons: true !default;
|
||||||
$enable-negative-margins: false !default;
|
// $enable-negative-margins: false !default;
|
||||||
$enable-deprecation-messages: true !default;
|
// $enable-deprecation-messages: true !default;
|
||||||
$enable-important-utilities: true !default;
|
// $enable-important-utilities: true !default;
|
||||||
|
|
||||||
$enable-dark-mode: true !default;
|
// $enable-dark-mode: true !default;
|
||||||
$color-mode-type: data !default; // `data` or `media-query`
|
// $color-mode-type: data !default; // `data` or `media-query`
|
||||||
|
|
||||||
// Prefix for :root CSS variables
|
// // Prefix for :root CSS variables
|
||||||
|
// $prefix: bs- !default;
|
||||||
|
|
||||||
|
// $color-mode-type: "media-query" !default;
|
||||||
|
// $color-contrast-dark: #000 !default;
|
||||||
|
// $color-contrast-light: #fff !default;
|
||||||
|
// $min-contrast-ratio: 4.5 !default;
|
||||||
|
|
||||||
// $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
|
|
||||||
// $prefix: $variable-prefix !default;
|
|
||||||
|
|
||||||
// Gradient
|
// Gradient
|
||||||
//
|
//
|
||||||
@@ -475,54 +191,54 @@ $icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
|
|||||||
$paragraph-margin-bottom: 1rem !default;
|
$paragraph-margin-bottom: 1rem !default;
|
||||||
|
|
||||||
|
|
||||||
// // Grid breakpoints
|
// Grid breakpoints
|
||||||
// //
|
//
|
||||||
// // Define the minimum dimensions at which your layout will change,
|
// Define the minimum dimensions at which your layout will change,
|
||||||
// // adapting to different screen sizes, for use in media queries.
|
// adapting to different screen sizes, for use in media queries.
|
||||||
|
|
||||||
// // scss-docs-start grid-breakpoints
|
// scss-docs-start grid-breakpoints
|
||||||
// $grid-breakpoints: (
|
$grid-breakpoints: (
|
||||||
// xs: 0,
|
xs: 0,
|
||||||
// sm: 576px,
|
sm: 576px,
|
||||||
// md: 768px,
|
md: 768px,
|
||||||
// lg: 992px,
|
lg: 992px,
|
||||||
// xl: 1200px,
|
xl: 1200px,
|
||||||
// xxl: 1400px
|
xxl: 1400px
|
||||||
// ) !default;
|
) !default;
|
||||||
// // scss-docs-end grid-breakpoints
|
// scss-docs-end grid-breakpoints
|
||||||
|
|
||||||
// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||||
// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
||||||
|
|
||||||
|
|
||||||
// // Grid containers
|
// Grid containers
|
||||||
// //
|
//
|
||||||
// // Define the maximum width of `.container` for different screen sizes.
|
// Define the maximum width of `.container` for different screen sizes.
|
||||||
|
|
||||||
// // scss-docs-start container-max-widths
|
// scss-docs-start container-max-widths
|
||||||
// $container-max-widths: (
|
$container-max-widths: (
|
||||||
// sm: 540px,
|
sm: 540px,
|
||||||
// md: 720px,
|
md: 720px,
|
||||||
// lg: 960px,
|
lg: 960px,
|
||||||
// xl: 1140px,
|
xl: 1140px,
|
||||||
// xxl: 1320px
|
xxl: 1320px
|
||||||
// ) !default;
|
) !default;
|
||||||
// // scss-docs-end container-max-widths
|
// scss-docs-end container-max-widths
|
||||||
|
|
||||||
// @include _assert-ascending($container-max-widths, "$container-max-widths");
|
// @include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||||
|
|
||||||
|
|
||||||
// // Grid columns
|
// Grid columns
|
||||||
// //
|
//
|
||||||
// // Set the number of columns and specify the width of the gutters.
|
// Set the number of columns and specify the width of the gutters.
|
||||||
|
|
||||||
// $grid-columns: 12 !default;
|
$grid-columns: 12 !default;
|
||||||
// $grid-gutter-width: 1.5rem !default;
|
$grid-gutter-width: 1.5rem !default;
|
||||||
// $grid-row-columns: 6 !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
|
// Components
|
||||||
@@ -589,10 +305,11 @@ $transition-collapse-width: width .35s ease !default;
|
|||||||
// stylelint-disable function-disallowed-list
|
// stylelint-disable function-disallowed-list
|
||||||
// scss-docs-start aspect-ratios
|
// scss-docs-start aspect-ratios
|
||||||
$aspect-ratios: (
|
$aspect-ratios: (
|
||||||
"1x1": 100%,
|
"auto": auto,
|
||||||
"4x3": calc(3 / 4 * 100%),
|
"4x3": #{"4 / 3"},
|
||||||
"16x9": calc(9 / 16 * 100%),
|
"1x1": #{"1 / 1"},
|
||||||
"21x9": calc(9 / 21 * 100%)
|
"16x9": #{"16 / 9"},
|
||||||
|
"21x9": #{"21 / 9"}
|
||||||
) !default;
|
) !default;
|
||||||
// scss-docs-end aspect-ratios
|
// scss-docs-end aspect-ratios
|
||||||
// stylelint-enable function-disallowed-list
|
// 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-color: var(--#{$prefix}link-color) !default;
|
||||||
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
||||||
$btn-link-disabled-color: $gray-600 !default;
|
$btn-link-disabled-color: $gray-600 !default;
|
||||||
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
|
$btn-link-color-contrast: color-contrast($link-color) !default;
|
||||||
|
$btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
|
||||||
|
|
||||||
// Allows for customizing button radius independently from global border radius
|
// Allows for customizing button radius independently from global border radius
|
||||||
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
||||||
@@ -1639,7 +1357,7 @@ $breadcrumb-margin-bottom: 1rem !default;
|
|||||||
$breadcrumb-bg: null !default;
|
$breadcrumb-bg: null !default;
|
||||||
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
|
||||||
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
|
||||||
$breadcrumb-divider: quote("/") !default;
|
$breadcrumb-divider: string.quote("/") !default;
|
||||||
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
||||||
$breadcrumb-border-radius: null !default;
|
$breadcrumb-border-radius: null !default;
|
||||||
// scss-docs-end breadcrumb-variables
|
// scss-docs-end breadcrumb-variables
|
||||||
@@ -1684,21 +1402,6 @@ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Depre
|
|||||||
// scss-docs-end carousel-dark-variables
|
// scss-docs-end carousel-dark-variables
|
||||||
|
|
||||||
|
|
||||||
// Spinners
|
|
||||||
|
|
||||||
// scss-docs-start spinner-variables
|
|
||||||
$spinner-width: 2rem !default;
|
|
||||||
$spinner-height: $spinner-width !default;
|
|
||||||
$spinner-vertical-align: -.125em !default;
|
|
||||||
$spinner-border-width: .25em !default;
|
|
||||||
$spinner-animation-speed: .75s !default;
|
|
||||||
|
|
||||||
$spinner-width-sm: 1rem !default;
|
|
||||||
$spinner-height-sm: $spinner-width-sm !default;
|
|
||||||
$spinner-border-width-sm: .2em !default;
|
|
||||||
// scss-docs-end spinner-variables
|
|
||||||
|
|
||||||
|
|
||||||
// Close
|
// Close
|
||||||
|
|
||||||
// scss-docs-start close-variables
|
// scss-docs-start close-variables
|
||||||
@@ -1750,4 +1453,105 @@ $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, remo
|
|||||||
|
|
||||||
$pre-color: null !default;
|
$pre-color: null !default;
|
||||||
|
|
||||||
@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
|
// Dark color mode variables
|
||||||
|
//
|
||||||
|
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
|
||||||
|
|
||||||
|
//
|
||||||
|
// Global colors
|
||||||
|
//
|
||||||
|
|
||||||
|
// scss-docs-start sass-dark-mode-vars
|
||||||
|
// scss-docs-start theme-text-dark-variables
|
||||||
|
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
|
||||||
|
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
|
||||||
|
$success-text-emphasis-dark: tint-color($success, 40%) !default;
|
||||||
|
$info-text-emphasis-dark: tint-color($info, 40%) !default;
|
||||||
|
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
|
||||||
|
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
|
||||||
|
$light-text-emphasis-dark: $gray-100 !default;
|
||||||
|
$dark-text-emphasis-dark: $gray-300 !default;
|
||||||
|
// scss-docs-end theme-text-dark-variables
|
||||||
|
|
||||||
|
// scss-docs-start theme-bg-subtle-dark-variables
|
||||||
|
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
|
||||||
|
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
|
||||||
|
$success-bg-subtle-dark: shade-color($success, 80%) !default;
|
||||||
|
$info-bg-subtle-dark: shade-color($info, 80%) !default;
|
||||||
|
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
||||||
|
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
||||||
|
$light-bg-subtle-dark: $gray-800 !default;
|
||||||
|
$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
|
||||||
|
// scss-docs-end theme-bg-subtle-dark-variables
|
||||||
|
|
||||||
|
// scss-docs-start theme-border-subtle-dark-variables
|
||||||
|
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
|
||||||
|
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
|
||||||
|
$success-border-subtle-dark: shade-color($success, 40%) !default;
|
||||||
|
$info-border-subtle-dark: shade-color($info, 40%) !default;
|
||||||
|
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
|
||||||
|
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
|
||||||
|
$light-border-subtle-dark: $gray-700 !default;
|
||||||
|
$dark-border-subtle-dark: $gray-800 !default;
|
||||||
|
// scss-docs-end theme-border-subtle-dark-variables
|
||||||
|
|
||||||
|
$body-color-dark: $gray-300 !default;
|
||||||
|
$body-bg-dark: $gray-900 !default;
|
||||||
|
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
||||||
|
$body-secondary-bg-dark: $gray-800 !default;
|
||||||
|
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
||||||
|
$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
|
||||||
|
$body-emphasis-color-dark: $white !default;
|
||||||
|
$border-color-dark: $gray-700 !default;
|
||||||
|
$border-color-translucent-dark: rgba($white, .15) !default;
|
||||||
|
$headings-color-dark: inherit !default;
|
||||||
|
$link-color-dark: tint-color($primary, 40%) !default;
|
||||||
|
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
||||||
|
$code-color-dark: tint-color($code-color, 40%) !default;
|
||||||
|
$mark-color-dark: $body-color-dark !default;
|
||||||
|
$mark-bg-dark: $yellow-800 !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Forms
|
||||||
|
//
|
||||||
|
|
||||||
|
$form-select-indicator-color-dark: $body-color-dark !default;
|
||||||
|
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||||
|
|
||||||
|
$form-switch-color-dark: rgba($white, .25) !default;
|
||||||
|
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
|
||||||
|
|
||||||
|
// scss-docs-start form-validation-colors-dark
|
||||||
|
$form-valid-color-dark: $green-300 !default;
|
||||||
|
$form-valid-border-color-dark: $green-300 !default;
|
||||||
|
$form-invalid-color-dark: $red-300 !default;
|
||||||
|
$form-invalid-border-color-dark: $red-300 !default;
|
||||||
|
// scss-docs-end form-validation-colors-dark
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Accordion
|
||||||
|
//
|
||||||
|
|
||||||
|
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
|
||||||
|
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
|
||||||
|
|
||||||
|
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||||
|
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||||
|
// scss-docs-end sass-dark-mode-vars
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Carousel
|
||||||
|
//
|
||||||
|
|
||||||
|
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
|
||||||
|
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
|
||||||
|
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Close button
|
||||||
|
//
|
||||||
|
|
||||||
|
$btn-close-filter-dark: $btn-close-white-filter !default;
|
||||||
|
|||||||
33
scss/bootstrap-grid.scss
vendored
33
scss/bootstrap-grid.scss
vendored
@@ -1,25 +1,20 @@
|
|||||||
@import "mixins/banner";
|
@use "banner" with (
|
||||||
@include bsBanner(Grid);
|
$file: "Grid"
|
||||||
|
);
|
||||||
|
|
||||||
$include-column-box-sizing: true !default;
|
@use "sass:map";
|
||||||
|
@use "colors" as *;
|
||||||
|
@use "config" as *;
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "functions" as *;
|
||||||
|
@use "maps" as *;
|
||||||
|
|
||||||
@import "functions";
|
@forward "utilities"; // Make utilities available downstream
|
||||||
@import "variables";
|
@use "utilities" as *; // Bring utilities into the current namespace
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
|
|
||||||
@import "mixins/breakpoints";
|
@forward "layout/containers";
|
||||||
@import "mixins/container";
|
@forward "layout/grid";
|
||||||
@import "mixins/grid";
|
|
||||||
@import "mixins/utilities";
|
|
||||||
|
|
||||||
@import "vendor/rfs";
|
|
||||||
|
|
||||||
@import "containers";
|
|
||||||
@import "grid";
|
|
||||||
|
|
||||||
@import "utilities";
|
|
||||||
// Only use the utilities we need
|
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
// stylelint-disable-next-line scss/dollar-variable-default
|
||||||
$utilities: map-get-multiple(
|
$utilities: map-get-multiple(
|
||||||
$utilities,
|
$utilities,
|
||||||
@@ -59,4 +54,4 @@ $utilities: map-get-multiple(
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@import "utilities/api";
|
@use "utilities/api";
|
||||||
|
|||||||
14
scss/bootstrap-reboot.scss
vendored
14
scss/bootstrap-reboot.scss
vendored
@@ -1,10 +1,6 @@
|
|||||||
@import "mixins/banner";
|
@use "banner" with (
|
||||||
@include bsBanner(Reboot);
|
$file: "Reboot"
|
||||||
|
);
|
||||||
|
|
||||||
@import "functions";
|
@forward "root";
|
||||||
@import "variables";
|
@forward "content/reboot";
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
@import "mixins";
|
|
||||||
@import "root";
|
|
||||||
@import "reboot";
|
|
||||||
|
|||||||
19
scss/bootstrap-utilities.scss
vendored
19
scss/bootstrap-utilities.scss
vendored
@@ -1,19 +1,16 @@
|
|||||||
@import "mixins/banner";
|
@use "banner" with (
|
||||||
@include bsBanner(Utilities);
|
$file: "Utilities"
|
||||||
|
);
|
||||||
|
|
||||||
// Configuration
|
// Configuration
|
||||||
@import "functions";
|
// @forward "variables";
|
||||||
@import "variables";
|
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
@import "mixins";
|
|
||||||
@import "utilities";
|
|
||||||
|
|
||||||
// Layout & components
|
// Layout & components
|
||||||
@import "root";
|
@use "root" as *;
|
||||||
|
|
||||||
// Helpers
|
// Helpers
|
||||||
@import "helpers";
|
@forward "helpers";
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
@import "utilities/api";
|
@use "utilities" as *;
|
||||||
|
@use "utilities/api";
|
||||||
|
|||||||
83
scss/bootstrap.scss
vendored
83
scss/bootstrap.scss
vendored
@@ -1,55 +1,46 @@
|
|||||||
// @import "mixins/banner";
|
@use "banner";
|
||||||
// @include bsBanner("");
|
|
||||||
|
|
||||||
|
|
||||||
// scss-docs-start import-stack
|
// scss-docs-start import-stack
|
||||||
// Configuration
|
// Global CSS variables, layer definitions, and configuration
|
||||||
@use "config" as *;
|
@use "root";
|
||||||
|
|
||||||
@import "functions";
|
// Reboot & Content
|
||||||
@import "variables";
|
@use "content";
|
||||||
@import "variables-dark";
|
|
||||||
@import "maps";
|
|
||||||
@import "mixins";
|
|
||||||
@import "utilities";
|
|
||||||
|
|
||||||
// Layout & components
|
// Layout
|
||||||
@import "root";
|
@use "layout";
|
||||||
@import "reboot";
|
|
||||||
@import "type";
|
// Forms
|
||||||
@import "images";
|
@use "forms";
|
||||||
// @import "containers";
|
|
||||||
// @import "grid";
|
// Components
|
||||||
@import "layout";
|
@use "accordion";
|
||||||
@import "tables";
|
@use "alert";
|
||||||
@import "forms";
|
@use "badge";
|
||||||
@import "buttons";
|
@use "breadcrumb";
|
||||||
@import "transitions";
|
@use "buttons";
|
||||||
@import "dropdown";
|
@use "button-group";
|
||||||
@import "button-group";
|
@use "card";
|
||||||
@import "nav";
|
@use "carousel";
|
||||||
@import "navbar";
|
@use "close";
|
||||||
@import "card";
|
@use "dropdown";
|
||||||
@import "accordion";
|
@use "list-group";
|
||||||
@import "breadcrumb";
|
@use "modal";
|
||||||
@import "pagination";
|
@use "nav";
|
||||||
@import "badge";
|
@use "navbar";
|
||||||
@import "alert";
|
@use "offcanvas";
|
||||||
@import "progress";
|
@use "pagination";
|
||||||
@import "list-group";
|
@use "placeholders";
|
||||||
@import "close";
|
@use "popover";
|
||||||
@import "toasts";
|
@use "progress";
|
||||||
@import "modal";
|
@use "spinners";
|
||||||
@import "tooltip";
|
@use "toasts";
|
||||||
@import "popover";
|
@use "tooltip";
|
||||||
@import "carousel";
|
@use "transitions";
|
||||||
@import "spinners";
|
|
||||||
@import "offcanvas";
|
|
||||||
@import "placeholders";
|
|
||||||
|
|
||||||
// Helpers
|
// Helpers
|
||||||
@import "helpers";
|
@use "helpers";
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
@import "utilities/api";
|
@use "utilities/api";
|
||||||
// scss-docs-end import-stack
|
// scss-docs-end import-stack
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/image" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
|
||||||
// Responsive images (ensure images don't scale beyond their parents)
|
// Responsive images (ensure images don't scale beyond their parents)
|
||||||
//
|
//
|
||||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
|
||||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||||
|
|
||||||
|
|
||||||
@@ -1,3 +1,37 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "sass:math";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../colors" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../functions" as *;
|
||||||
|
@use "../layout/breakpoints" as *;
|
||||||
|
|
||||||
|
// scss-docs-start table-variant
|
||||||
|
@mixin table-variant($state, $background) {
|
||||||
|
.table-#{$state} {
|
||||||
|
$color: color-contrast(opaque($body-bg, $background));
|
||||||
|
$hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
|
||||||
|
$striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
|
||||||
|
$active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
|
||||||
|
$table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
|
||||||
|
|
||||||
|
--#{$prefix}table-color: #{$color};
|
||||||
|
--#{$prefix}table-bg: #{$background};
|
||||||
|
--#{$prefix}table-border-color: #{$table-border-color};
|
||||||
|
--#{$prefix}table-striped-bg: #{$striped-bg};
|
||||||
|
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
|
||||||
|
--#{$prefix}table-active-bg: #{$active-bg};
|
||||||
|
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
|
||||||
|
--#{$prefix}table-hover-bg: #{$hover-bg};
|
||||||
|
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
|
||||||
|
|
||||||
|
color: var(--#{$prefix}table-color);
|
||||||
|
border-color: var(--#{$prefix}table-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// scss-docs-end table-variant
|
||||||
|
|
||||||
//
|
//
|
||||||
// Basic Bootstrap table
|
// Basic Bootstrap table
|
||||||
//
|
//
|
||||||
@@ -159,7 +193,7 @@
|
|||||||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||||
// size of where your table will overflow.
|
// size of where your table will overflow.
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
@include media-breakpoint-down($breakpoint) {
|
@include media-breakpoint-down($breakpoint) {
|
||||||
@@ -1,29 +1,35 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../mixins/lists" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Headings
|
// Headings
|
||||||
//
|
//
|
||||||
.h1 {
|
// mdo-do: remove extend
|
||||||
@extend h1;
|
// .h1 {
|
||||||
}
|
// @extend h1;
|
||||||
|
// }
|
||||||
|
|
||||||
.h2 {
|
// .h2 {
|
||||||
@extend h2;
|
// @extend h2;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.h3 {
|
// .h3 {
|
||||||
@extend h3;
|
// @extend h3;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.h4 {
|
// .h4 {
|
||||||
@extend h4;
|
// @extend h4;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.h5 {
|
// .h5 {
|
||||||
@extend h5;
|
// @extend h5;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.h6 {
|
// .h6 {
|
||||||
@extend h6;
|
// @extend h6;
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
@@ -46,11 +52,11 @@
|
|||||||
// Emphasis
|
// Emphasis
|
||||||
//
|
//
|
||||||
.small {
|
.small {
|
||||||
@extend small;
|
// @extend small;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark {
|
.mark {
|
||||||
@extend mark;
|
// @extend mark;
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
4
scss/content/index.scss
Normal file
4
scss/content/index.scss
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
@forward "reboot";
|
||||||
|
@forward "type";
|
||||||
|
@forward "tables";
|
||||||
|
@forward "images";
|
||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
|
||||||
.form-floating {
|
.form-floating {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,12 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../functions" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/color-mode" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Check/radio
|
// Check/radio
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,11 @@
|
|||||||
|
@use "sass:math";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/gradients" as *;
|
||||||
//
|
//
|
||||||
// General form controls (plus a few specific high-level interventions)
|
// General form controls (plus a few specific high-level interventions)
|
||||||
//
|
//
|
||||||
@@ -56,7 +64,7 @@
|
|||||||
// https://github.com/twbs/bootstrap/issues/23307
|
// https://github.com/twbs/bootstrap/issues/23307
|
||||||
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
|
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
|
||||||
// Multiply line-height by 1em if it has no unit
|
// Multiply line-height by 1em if it has no unit
|
||||||
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||||
|
|
||||||
// Android Chrome type="date" is taller than the other inputs
|
// Android Chrome type="date" is taller than the other inputs
|
||||||
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
|
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/gradients" as *;
|
||||||
|
|
||||||
// Range
|
// Range
|
||||||
//
|
//
|
||||||
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
|
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
|
||||||
|
|||||||
@@ -1,3 +1,11 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
@use "../mixins/color-mode" as *;
|
||||||
|
|
||||||
// Select
|
// Select
|
||||||
//
|
//
|
||||||
// Replaces the browser default select with a custom one, mostly pulled from
|
// Replaces the browser default select with a custom one, mostly pulled from
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
//
|
//
|
||||||
// Form text
|
// Form text
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "sass:string";
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
@@ -116,8 +122,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
$validation-messages: "";
|
$validation-messages: "";
|
||||||
@each $state in map-keys($form-validation-states) {
|
@each $state in map.keys($form-validation-states) {
|
||||||
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
|
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
|
||||||
}
|
}
|
||||||
|
|
||||||
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
|
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
//
|
//
|
||||||
// Labels
|
// Labels
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../vendor/rfs" as *;
|
||||||
|
@use "../mixins/border-radius" as *;
|
||||||
|
@use "../mixins/box-shadow" as *;
|
||||||
|
|
||||||
// Form validation
|
// Form validation
|
||||||
//
|
//
|
||||||
// Provide feedback to users when form field values are valid or invalid. Works
|
// Provide feedback to users when form field values are valid or invalid. Works
|
||||||
@@ -5,6 +11,171 @@
|
|||||||
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||||
// server-side validation.
|
// server-side validation.
|
||||||
|
|
||||||
|
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
||||||
|
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
||||||
|
|
||||||
|
// scss-docs-start form-validation-mixins
|
||||||
|
@mixin form-validation-state-selector($state) {
|
||||||
|
@if ($state == "valid" or $state == "invalid") {
|
||||||
|
.was-validated #{if(&, "&", "")}:#{$state},
|
||||||
|
#{if(&, "&", "")}.is-#{$state} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
#{if(&, "&", "")}.is-#{$state} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin form-validation-state(
|
||||||
|
$state,
|
||||||
|
$color,
|
||||||
|
$icon,
|
||||||
|
$tooltip-color: color-contrast($color),
|
||||||
|
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
||||||
|
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
|
||||||
|
$border-color: $color
|
||||||
|
) {
|
||||||
|
.#{$state}-feedback {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: $form-feedback-margin-top;
|
||||||
|
@include font-size($form-feedback-font-size);
|
||||||
|
font-style: $form-feedback-font-style;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$state}-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 5;
|
||||||
|
display: none;
|
||||||
|
max-width: 100%; // Contain to parent when possible
|
||||||
|
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
||||||
|
margin-top: .1rem;
|
||||||
|
@include font-size($form-feedback-tooltip-font-size);
|
||||||
|
line-height: $form-feedback-tooltip-line-height;
|
||||||
|
color: $tooltip-color;
|
||||||
|
background-color: $tooltip-bg-color;
|
||||||
|
@include border-radius($form-feedback-tooltip-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
~ .#{$state}-feedback,
|
||||||
|
~ .#{$state}-tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
border-color: $border-color;
|
||||||
|
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
padding-right: $input-height-inner;
|
||||||
|
background-image: escape-svg($icon);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right $input-height-inner-quarter center;
|
||||||
|
background-size: $input-height-inner-half $input-height-inner-half;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $border-color;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@include box-shadow($input-box-shadow, $focus-box-shadow);
|
||||||
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// stylelint-disable-next-line selector-no-qualifying-type
|
||||||
|
textarea.form-control {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
padding-right: $input-height-inner;
|
||||||
|
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
border-color: $border-color;
|
||||||
|
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
&:not([multiple]):not([size]),
|
||||||
|
&:not([multiple])[size="1"] {
|
||||||
|
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
|
||||||
|
padding-right: $form-select-feedback-icon-padding-end;
|
||||||
|
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
||||||
|
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $border-color;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
|
||||||
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-color {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
@if $enable-validation-icons {
|
||||||
|
width: add($form-color-width, $input-height-inner);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
border-color: $border-color;
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
~ .form-check-label {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-check-inline .form-check-input {
|
||||||
|
~ .#{$state}-feedback {
|
||||||
|
margin-left: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
> .form-control:not(:focus),
|
||||||
|
> .form-select:not(:focus),
|
||||||
|
> .form-floating:not(:focus-within) {
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
@if $state == "valid" {
|
||||||
|
z-index: 3;
|
||||||
|
} @else if $state == "invalid" {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// scss-docs-end form-validation-mixins
|
||||||
|
|
||||||
|
|
||||||
// scss-docs-start form-validation-states-loop
|
// scss-docs-start form-validation-states-loop
|
||||||
@each $state, $data in $form-validation-states {
|
@each $state, $data in $form-validation-states {
|
||||||
@include form-validation-state($state, $data...);
|
@include form-validation-state($state, $data...);
|
||||||
|
|||||||
9
scss/forms/index.scss
Normal file
9
scss/forms/index.scss
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
@forward "labels";
|
||||||
|
@forward "form-text";
|
||||||
|
@forward "form-control";
|
||||||
|
@forward "form-select";
|
||||||
|
@forward "form-check";
|
||||||
|
@forward "form-range";
|
||||||
|
@forward "floating-labels";
|
||||||
|
@forward "input-group";
|
||||||
|
@forward "validation";
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../mixins/clearfix" as *;
|
||||||
|
|
||||||
.clearfix {
|
.clearfix {
|
||||||
@include clearfix();
|
@include clearfix();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
.text-bg-#{$color} {
|
.text-bg-#{$color} {
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
.link-#{$color} {
|
.link-#{$color} {
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
.focus-ring:focus {
|
.focus-ring:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
|
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../mixins/transition" as *;
|
||||||
|
|
||||||
.icon-link {
|
.icon-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
gap: $icon-link-gap;
|
gap: $icon-link-gap;
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
@use "../layout/breakpoints" as *;
|
||||||
|
|
||||||
// Shorthand
|
// Shorthand
|
||||||
|
|
||||||
.fixed-top {
|
.fixed-top {
|
||||||
@@ -17,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Responsive sticky top and bottom
|
// Responsive sticky top and bottom
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
// mdo-do: remve for utilities
|
||||||
|
|
||||||
// Credit: Nicolas Gallagher and SUIT CSS.
|
// Credit: Nicolas Gallagher and SUIT CSS.
|
||||||
|
|
||||||
.ratio {
|
.ratio {
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Stretched link
|
// Stretched link
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
//
|
@use "../mixins/text-truncate" as *;
|
||||||
// Text truncation
|
// Text truncation
|
||||||
//
|
//
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../mixins/visually-hidden" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Visually hidden
|
// Visually hidden
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
.vr {
|
.vr {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
|
|||||||
11
scss/helpers/index.scss
Normal file
11
scss/helpers/index.scss
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
@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.
|
// Breakpoint viewport sizes and media queries.
|
||||||
//
|
//
|
||||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||||
@@ -14,12 +18,12 @@
|
|||||||
// md
|
// md
|
||||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
||||||
// md
|
// md
|
||||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
|
||||||
$n: index($breakpoint-names, $name);
|
$n: list.index($breakpoint-names, $name);
|
||||||
@if not $n {
|
@if not $n {
|
||||||
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
||||||
}
|
}
|
||||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
@return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||||
@@ -27,7 +31,7 @@
|
|||||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||||
// 576px
|
// 576px
|
||||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||||
$min: map-get($breakpoints, $name);
|
$min: map.get($breakpoints, $name);
|
||||||
@return if($min != 0, $min, null);
|
@return if($min != 0, $min, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -41,7 +45,7 @@
|
|||||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||||
// 767.98px
|
// 767.98px
|
||||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||||
$max: map-get($breakpoints, $name);
|
$max: map.get($breakpoints, $name);
|
||||||
@return if($max and $max > 0, $max - .02, null);
|
@return if($max and $max > 0, $max - .02, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -61,8 +61,8 @@
|
|||||||
--#{$prefix}gap: #{$grid-gutter-width};
|
--#{$prefix}gap: #{$grid-gutter-width};
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: row;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||||
|
grid-auto-flow: row;
|
||||||
gap: var(--#{$prefix}gap);
|
gap: var(--#{$prefix}gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
@import "breakpoints";
|
@forward "breakpoints";
|
||||||
@import "containers";
|
@forward "containers";
|
||||||
@import "grid";
|
@forward "grid";
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
|
|
||||||
|
|
||||||
// scss-docs-start alert-variant-mixin
|
|
||||||
@mixin alert-variant($background, $border, $color) {
|
|
||||||
--#{$prefix}alert-color: #{$color};
|
|
||||||
--#{$prefix}alert-bg: #{$background};
|
|
||||||
--#{$prefix}alert-border-color: #{$border};
|
|
||||||
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
|
|
||||||
|
|
||||||
@if $enable-gradients {
|
|
||||||
background-image: var(--#{$prefix}gradient);
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-link {
|
|
||||||
color: var(--#{$prefix}alert-link-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-docs-end alert-variant-mixin
|
|
||||||
@@ -1,3 +1,9 @@
|
|||||||
|
@use "sass:list";
|
||||||
|
@use "sass:math";
|
||||||
|
@use "sass:meta";
|
||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// stylelint-disable property-disallowed-list
|
// stylelint-disable property-disallowed-list
|
||||||
// Single side border-radius
|
// Single side border-radius
|
||||||
|
|
||||||
@@ -5,10 +11,10 @@
|
|||||||
@function valid-radius($radius) {
|
@function valid-radius($radius) {
|
||||||
$return: ();
|
$return: ();
|
||||||
@each $value in $radius {
|
@each $value in $radius {
|
||||||
@if type-of($value) == number {
|
@if meta.type-of($value) == number {
|
||||||
$return: append($return, max($value, 0));
|
$return: list.append($return, math.max($value, 0));
|
||||||
} @else {
|
} @else {
|
||||||
$return: append($return, $value);
|
$return: list.append($return, $value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@return $return;
|
@return $return;
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
@mixin box-shadow($shadow...) {
|
@mixin box-shadow($shadow...) {
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
$result: ();
|
$result: ();
|
||||||
|
|||||||
@@ -1,70 +0,0 @@
|
|||||||
// Button variants
|
|
||||||
//
|
|
||||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
|
||||||
// and disabled options for all buttons
|
|
||||||
|
|
||||||
// scss-docs-start btn-variant-mixin
|
|
||||||
@mixin button-variant(
|
|
||||||
$background,
|
|
||||||
$border,
|
|
||||||
$color: color-contrast($background),
|
|
||||||
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
|
||||||
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
|
||||||
$hover-color: color-contrast($hover-background),
|
|
||||||
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
|
||||||
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
|
||||||
$active-color: color-contrast($active-background),
|
|
||||||
$disabled-background: $background,
|
|
||||||
$disabled-border: $border,
|
|
||||||
$disabled-color: color-contrast($disabled-background)
|
|
||||||
) {
|
|
||||||
--#{$prefix}btn-color: #{$color};
|
|
||||||
--#{$prefix}btn-bg: #{$background};
|
|
||||||
--#{$prefix}btn-border-color: #{$border};
|
|
||||||
--#{$prefix}btn-hover-color: #{$hover-color};
|
|
||||||
--#{$prefix}btn-hover-bg: #{$hover-background};
|
|
||||||
--#{$prefix}btn-hover-border-color: #{$hover-border};
|
|
||||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
|
|
||||||
--#{$prefix}btn-active-color: #{$active-color};
|
|
||||||
--#{$prefix}btn-active-bg: #{$active-background};
|
|
||||||
--#{$prefix}btn-active-border-color: #{$active-border};
|
|
||||||
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
|
||||||
--#{$prefix}btn-disabled-color: #{$disabled-color};
|
|
||||||
--#{$prefix}btn-disabled-bg: #{$disabled-background};
|
|
||||||
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
|
|
||||||
}
|
|
||||||
// scss-docs-end btn-variant-mixin
|
|
||||||
|
|
||||||
// scss-docs-start btn-outline-variant-mixin
|
|
||||||
@mixin button-outline-variant(
|
|
||||||
$color,
|
|
||||||
$color-hover: color-contrast($color),
|
|
||||||
$active-background: $color,
|
|
||||||
$active-border: $color,
|
|
||||||
$active-color: color-contrast($active-background)
|
|
||||||
) {
|
|
||||||
--#{$prefix}btn-color: #{$color};
|
|
||||||
--#{$prefix}btn-border-color: #{$color};
|
|
||||||
--#{$prefix}btn-hover-color: #{$color-hover};
|
|
||||||
--#{$prefix}btn-hover-bg: #{$active-background};
|
|
||||||
--#{$prefix}btn-hover-border-color: #{$active-border};
|
|
||||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
|
|
||||||
--#{$prefix}btn-active-color: #{$active-color};
|
|
||||||
--#{$prefix}btn-active-bg: #{$active-background};
|
|
||||||
--#{$prefix}btn-active-border-color: #{$active-border};
|
|
||||||
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
|
||||||
--#{$prefix}btn-disabled-color: #{$color};
|
|
||||||
--#{$prefix}btn-disabled-bg: transparent;
|
|
||||||
--#{$prefix}btn-disabled-border-color: #{$color};
|
|
||||||
--#{$prefix}gradient: none;
|
|
||||||
}
|
|
||||||
// scss-docs-end btn-outline-variant-mixin
|
|
||||||
|
|
||||||
// scss-docs-start btn-size-mixin
|
|
||||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
|
||||||
--#{$prefix}btn-padding-y: #{$padding-y};
|
|
||||||
--#{$prefix}btn-padding-x: #{$padding-x};
|
|
||||||
@include rfs($font-size, --#{$prefix}btn-font-size);
|
|
||||||
--#{$prefix}btn-border-radius: #{$border-radius};
|
|
||||||
}
|
|
||||||
// scss-docs-end btn-size-mixin
|
|
||||||
@@ -1,3 +1,6 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
// scss-docs-start caret-mixins
|
// scss-docs-start caret-mixins
|
||||||
@mixin caret-down($width: $caret-width) {
|
@mixin caret-down($width: $caret-width) {
|
||||||
border-top: $width solid;
|
border-top: $width solid;
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// scss-docs-start color-mode-mixin
|
// scss-docs-start color-mode-mixin
|
||||||
@mixin color-mode($mode: light, $root: false) {
|
@mixin color-mode($mode: light, $root: false) {
|
||||||
@if $color-mode-type == "media-query" {
|
@if $color-mode-type == "media-query" {
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// Deprecate mixin
|
// Deprecate mixin
|
||||||
//
|
//
|
||||||
// This mixin can be used to deprecate mixins or functions.
|
// This mixin can be used to deprecate mixins or functions.
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
@use "../colors" as *;
|
||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// Gradients
|
// Gradients
|
||||||
|
|
||||||
// scss-docs-start gradient-bg-mixin
|
// scss-docs-start gradient-bg-mixin
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
|
|
||||||
|
|
||||||
// List Groups
|
|
||||||
|
|
||||||
// scss-docs-start list-group-mixin
|
|
||||||
@mixin list-group-item-variant($state, $background, $color) {
|
|
||||||
.list-group-item-#{$state} {
|
|
||||||
color: $color;
|
|
||||||
background-color: $background;
|
|
||||||
|
|
||||||
&.list-group-item-action {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: $color;
|
|
||||||
background-color: shade-color($background, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $white;
|
|
||||||
background-color: $color;
|
|
||||||
border-color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-docs-end list-group-mixin
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
// Pagination
|
|
||||||
|
|
||||||
// scss-docs-start pagination-mixin
|
|
||||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
|
||||||
--#{$prefix}pagination-padding-x: #{$padding-x};
|
|
||||||
--#{$prefix}pagination-padding-y: #{$padding-y};
|
|
||||||
@include rfs($font-size, --#{$prefix}pagination-font-size);
|
|
||||||
--#{$prefix}pagination-border-radius: #{$border-radius};
|
|
||||||
}
|
|
||||||
// scss-docs-end pagination-mixin
|
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
@mixin reset-text {
|
@mixin reset-text {
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
|
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
|
||||||
|
|||||||
@@ -1,24 +0,0 @@
|
|||||||
// scss-docs-start table-variant
|
|
||||||
@mixin table-variant($state, $background) {
|
|
||||||
.table-#{$state} {
|
|
||||||
$color: color-contrast(opaque($body-bg, $background));
|
|
||||||
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
|
|
||||||
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
|
|
||||||
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
|
|
||||||
$table-border-color: mix($color, $background, percentage($table-border-factor));
|
|
||||||
|
|
||||||
--#{$prefix}table-color: #{$color};
|
|
||||||
--#{$prefix}table-bg: #{$background};
|
|
||||||
--#{$prefix}table-border-color: #{$table-border-color};
|
|
||||||
--#{$prefix}table-striped-bg: #{$striped-bg};
|
|
||||||
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
|
|
||||||
--#{$prefix}table-active-bg: #{$active-bg};
|
|
||||||
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
|
|
||||||
--#{$prefix}table-hover-bg: #{$hover-bg};
|
|
||||||
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
|
|
||||||
|
|
||||||
color: var(--#{$prefix}table-color);
|
|
||||||
border-color: var(--#{$prefix}table-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-docs-end table-variant
|
|
||||||
@@ -1,10 +1,13 @@
|
|||||||
|
@use "sass:list";
|
||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// stylelint-disable property-disallowed-list
|
// stylelint-disable property-disallowed-list
|
||||||
@mixin transition($transition...) {
|
@mixin transition($transition...) {
|
||||||
@if length($transition) == 0 {
|
@if list.length($transition) == 0 {
|
||||||
$transition: $transition-base;
|
$transition: $transition-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if length($transition) > 1 {
|
@if list.length($transition) > 1 {
|
||||||
@each $value in $transition {
|
@each $value in $transition {
|
||||||
@if $value == null or $value == none {
|
@if $value == null or $value == none {
|
||||||
@warn "The keyword 'none' or 'null' must be used as a single argument.";
|
@warn "The keyword 'none' or 'null' must be used as a single argument.";
|
||||||
@@ -13,11 +16,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
@if nth($transition, 1) != null {
|
@if list.nth($transition, 1) != null {
|
||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
|
@if $enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,37 +1,48 @@
|
|||||||
|
@use "sass:list";
|
||||||
|
@use "sass:map";
|
||||||
|
@use "sass:meta";
|
||||||
|
@use "sass:string";
|
||||||
|
@use "../config" as *;
|
||||||
|
|
||||||
// Utility generator
|
// Utility generator
|
||||||
// Used to generate utilities & print utilities
|
// Used to generate utilities & print utilities
|
||||||
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
||||||
$values: map-get($utility, values);
|
$values: map.get($utility, values);
|
||||||
|
|
||||||
// If the values are a list or string, convert it into a map
|
// If the values are a list or string, convert it into a map
|
||||||
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
|
||||||
$values: zip($values, $values);
|
// A single value is converted to a map with a null key.
|
||||||
|
@if list.length($values) == 1 {
|
||||||
|
$values: (null: list.nth($values, 1));
|
||||||
|
} @else {
|
||||||
|
$values: list.zip($values, $values);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $key, $value in $values {
|
@each $key, $value in $values {
|
||||||
$properties: map-get($utility, property);
|
$properties: map.get($utility, property);
|
||||||
|
|
||||||
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
||||||
@if type-of($properties) == "string" {
|
@if meta.type-of($properties) == "string" {
|
||||||
$properties: append((), $properties);
|
$properties: list.append((), $properties);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use custom class if present
|
// Use custom class if present
|
||||||
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
$property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
|
||||||
$property-class: if($property-class == null, "", $property-class);
|
$property-class: if($property-class == null, "", $property-class);
|
||||||
|
|
||||||
// Use custom CSS variable name if present, otherwise default to `class`
|
// Use custom CSS variable name if present, otherwise default to `class`
|
||||||
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
|
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
|
||||||
|
|
||||||
// State params to generate pseudo-classes
|
// State params to generate pseudo-classes
|
||||||
$state: if(map-has-key($utility, state), map-get($utility, state), ());
|
$state: if(map.has-key($utility, state), map.get($utility, state), ());
|
||||||
|
|
||||||
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
|
||||||
|
|
||||||
// Don't prefix if value key is null (e.g. with shadow class)
|
// Don't prefix if value key is null (e.g. with shadow class)
|
||||||
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
||||||
|
|
||||||
@if map-get($utility, rfs) {
|
@if map.get($utility, rfs) {
|
||||||
// Inside the media query
|
// Inside the media query
|
||||||
@if $is-rfs-media-query {
|
@if $is-rfs-media-query {
|
||||||
$val: rfs-value($value);
|
$val: rfs-value($value);
|
||||||
@@ -44,9 +55,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$is-css-var: map-get($utility, css-var);
|
$is-css-var: map.get($utility, css-var);
|
||||||
$is-local-vars: map-get($utility, local-vars);
|
$is-local-vars: map.get($utility, local-vars);
|
||||||
$is-rtl: map-get($utility, rtl);
|
$is-rtl: map.get($utility, rtl);
|
||||||
|
|
||||||
@if $value != null {
|
@if $value != null {
|
||||||
@if $is-rtl == false {
|
@if $is-rtl == false {
|
||||||
|
|||||||
34
scss/mixins/index.scss
Normal file
34
scss/mixins/index.scss
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
// Toggles
|
||||||
|
//
|
||||||
|
// Used in conjunction with global variables to enable certain theme features.
|
||||||
|
|
||||||
|
// Vendor
|
||||||
|
// @forward "vendor/rfs";
|
||||||
|
|
||||||
|
// Deprecate
|
||||||
|
@forward "deprecate";
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
@forward "color-mode";
|
||||||
|
@forward "color-scheme";
|
||||||
|
@forward "image";
|
||||||
|
@forward "resize";
|
||||||
|
@forward "visually-hidden";
|
||||||
|
@forward "reset-text";
|
||||||
|
@forward "text-truncate";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@forward "utilities";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@forward "backdrop";
|
||||||
|
@forward "caret";
|
||||||
|
|
||||||
|
// Skins
|
||||||
|
@forward "border-radius";
|
||||||
|
@forward "box-shadow";
|
||||||
|
@forward "gradients";
|
||||||
|
@forward "transition";
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
@forward "clearfix";
|
||||||
@@ -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
|
// stylelint-disable selector-attribute-quotes
|
||||||
|
|
||||||
|
@import "../../colors";
|
||||||
@import "../../functions";
|
@import "../../functions";
|
||||||
@import "../../variables";
|
@import "../../variables";
|
||||||
@import "../../variables-dark";
|
@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
|
// Loop over each breakpoint
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||||
|
|
||||||
// Generate media query if needed
|
// Generate media query if needed
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
@@ -9,7 +18,7 @@
|
|||||||
@each $key, $utility in $utilities {
|
@each $key, $utility in $utilities {
|
||||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
// 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
|
// 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);
|
@include generate-utility($utility, $infix);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -18,15 +27,15 @@
|
|||||||
|
|
||||||
// RFS rescaling
|
// RFS rescaling
|
||||||
@media (min-width: $rfs-mq-value) {
|
@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);
|
$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
|
// Loop over each utility property
|
||||||
@each $key, $utility in $utilities {
|
@each $key, $utility in $utilities {
|
||||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
// 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
|
// 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);
|
@include generate-utility($utility, $infix, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -40,7 +49,7 @@
|
|||||||
@each $key, $utility in $utilities {
|
@each $key, $utility in $utilities {
|
||||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||||
// Then check if the utility needs print styles
|
// 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");
|
@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
|
// stylelint-disable scss/dimension-no-non-numeric-values
|
||||||
|
|
||||||
// SCSS RFS mixin
|
// SCSS RFS mixin
|
||||||
@@ -30,7 +35,7 @@ $rfs-two-dimensional: false !default;
|
|||||||
// Factor of decrease
|
// Factor of decrease
|
||||||
$rfs-factor: 10 !default;
|
$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.";
|
@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;
|
$enable-rfs: true !default;
|
||||||
|
|
||||||
// Cache $rfs-base-value unit
|
// Cache $rfs-base-value unit
|
||||||
$rfs-base-value-unit: unit($rfs-base-value);
|
$rfs-base-value-unit: math.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove px-unit from $rfs-base-value for calculations
|
// Remove px-unit from $rfs-base-value for calculations
|
||||||
@if $rfs-base-value-unit == px {
|
@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 {
|
@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
|
// 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
|
// Remove unit from $rfs-breakpoint for calculations
|
||||||
@if $rfs-breakpoint-unit-cache == px {
|
@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" {
|
@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
|
// 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-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);
|
$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
|
// Helper function to get the formatted non-responsive value
|
||||||
@function rfs-value($values) {
|
@function rfs-value($values) {
|
||||||
// Convert to list
|
// Convert to list
|
||||||
$values: if(type-of($values) != list, ($values,), $values);
|
$values: if(meta.type-of($values) != list, ($values,), $values);
|
||||||
|
|
||||||
$val: "";
|
$val: "";
|
||||||
|
|
||||||
@@ -201,15 +164,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
|||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
// Cache $value unit
|
// 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 {
|
@if $unit == px {
|
||||||
// Convert to rem if needed
|
// 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 {
|
@else if $unit == rem {
|
||||||
// Convert to px if needed
|
// 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 {
|
} @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
|
// 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;
|
$val: $val + " " + $value;
|
||||||
@@ -218,13 +181,13 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Remove first space
|
// 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
|
// Helper function to get the responsive value calculated by RFS
|
||||||
@function rfs-fluid-value($values) {
|
@function rfs-fluid-value($values) {
|
||||||
// Convert to list
|
// Convert to list
|
||||||
$values: if(type-of($values) != list, ($values,), $values);
|
$values: if(meta.type-of($values) != list, ($values,), $values);
|
||||||
|
|
||||||
$val: "";
|
$val: "";
|
||||||
|
|
||||||
@@ -234,28 +197,28 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
|
|||||||
$val: $val + " 0";
|
$val: $val + " 0";
|
||||||
} @else {
|
} @else {
|
||||||
// Cache $value unit
|
// 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 $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 {
|
@if not $unit or $unit != px and $unit != rem {
|
||||||
$val: $val + " " + $value;
|
$val: $val + " " + $value;
|
||||||
} @else {
|
} @else {
|
||||||
// Remove unit from $value for calculations
|
// 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
|
// Only add the media query if the value is greater than the minimum value
|
||||||
@if abs($value) <= $rfs-base-value or not $enable-rfs {
|
@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 {
|
@else {
|
||||||
// Calculate the minimum value
|
// 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
|
// Calculate difference between $value and the minimum value
|
||||||
$value-diff: abs($value) - $value-min;
|
$value-diff: abs($value) - $value-min;
|
||||||
|
|
||||||
// Base value formatting
|
// 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
|
// Use negative value if needed
|
||||||
$min-width: if($value < 0, -$min-width, $min-width);
|
$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);
|
$variable-unit: if($rfs-two-dimensional, vmin, vw);
|
||||||
|
|
||||||
// Calculate the variable width between 0 and $rfs-breakpoint
|
// 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
|
// Return the calculated value
|
||||||
$val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
|
$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
|
// Remove first space
|
||||||
@return unquote(str-slice($val, 2));
|
@return string.unquote(string.slice($val, 2));
|
||||||
}
|
}
|
||||||
|
|
||||||
// RFS mixin
|
// RFS mixin
|
||||||
|
|||||||
@@ -157,7 +157,7 @@ For both spinners, small spinner modifier classes are used to update the values
|
|||||||
|
|
||||||
### Sass variables
|
### Sass variables
|
||||||
|
|
||||||
<ScssDocs name="spinner-variables" file="scss/_variables.scss" />
|
<ScssDocs name="spinner-variables" file="scss/_spinners.scss" />
|
||||||
|
|
||||||
### Keyframes
|
### 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
|
// stylelint-disable declaration-no-important, selector-max-id
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
@use "../../../scss/variables" as *;
|
||||||
|
@use "../../../scss/mixins/transition" as *;
|
||||||
|
|
||||||
.anchor-link {
|
.anchor-link {
|
||||||
padding: 0 .175rem;
|
padding: 0 .175rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
@use "../../../scss/layout/breakpoints" as *;
|
||||||
|
@use "../../../scss/mixins/border-radius" as *;
|
||||||
|
|
||||||
// clipboard.js
|
// clipboard.js
|
||||||
//
|
//
|
||||||
// JS-based `Copy` buttons for code snippets.
|
// 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
|
// 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} {
|
.swatch-#{$color} {
|
||||||
color: color-contrast($value);
|
color: color-contrast($value);
|
||||||
background-color: #{$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
|
// 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-masthead {
|
||||||
--bd-pink-rgb: #{to-rgb($pink)};
|
--bd-pink-rgb: #{to-rgb($pink)};
|
||||||
padding: 3rem 0;
|
padding: 3rem 0;
|
||||||
@@ -116,10 +125,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-dark-mode {
|
// @if $enable-dark-mode {
|
||||||
[data-bs-theme="dark"] {
|
// [data-bs-theme="dark"] {
|
||||||
.masthead-followup-icon {
|
// .masthead-followup-icon {
|
||||||
mix-blend-mode: lighten;
|
// 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 {
|
.bd-navbar {
|
||||||
padding: .75rem 0;
|
padding: .75rem 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use "../../../scss/vendor/rfs" as *;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Placeholder svg used in the docs.
|
// 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
|
// stylelint-disable selector-class-pattern
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user