diff --git a/package-lock.json b/package-lock.json index dbff8122c1..935b80fdf2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@popperjs/core": "^2.11.5", "@symfony/webpack-encore": "^4.1.1", "bazinga-translator": "^5.0.0", - "bootstrap": "^5.1.3", + "bootstrap": "^5.3.1", "bootstrap-datepicker": "^1.9.0", "bootstrap-sass": "^3.4.3", "check-password-strength": "^2.0.0", @@ -43,11 +43,12 @@ "jstree": "^3.3.12", "jstree-bootstrap-theme": "^1.0.1", "mini-css-extract-plugin": "^2.6.1", - "node-sass": "^8.0.0", + "postcss-easing-gradients": "^3.0.1", "postcss-import": "^15.0.0", "postcss-loader": "^7.0.1", "postcss-preset-env": "^7.8.3", "requestanimationframe": "0.0.23", + "sass": "^1.69.5", "sass-loader": "^13.2.0", "select2": "^4.0.12", "select2-bootstrap-5-theme": "^1.2.0", @@ -2406,7 +2407,9 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", @@ -2641,6 +2644,8 @@ "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz", "integrity": "sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@gar/promisify": "^1.1.3", "semver": "^7.3.5" @@ -2654,6 +2659,8 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -2666,6 +2673,8 @@ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -2680,7 +2689,9 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/@npmcli/move-file": { "version": "2.0.1", @@ -2688,6 +2699,8 @@ "integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==", "deprecated": "This functionality has been moved to @npmcli/fs", "dev": true, + "optional": true, + "peer": true, "dependencies": { "mkdirp": "^1.0.4", "rimraf": "^3.0.2" @@ -2701,6 +2714,8 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "glob": "^7.1.3" }, @@ -3686,6 +3701,8 @@ "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">= 10" } @@ -4307,7 +4324,9 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/accepts": { "version": "1.3.8", @@ -4371,6 +4390,8 @@ "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "debug": "4" }, @@ -4383,6 +4404,8 @@ "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz", "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "humanize-ms": "^1.2.1" }, @@ -4395,6 +4418,8 @@ "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "clean-stack": "^2.0.0", "indent-string": "^4.0.0" @@ -4495,13 +4520,17 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/are-we-there-yet": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz", "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "delegates": "^1.0.0", "readable-stream": "^3.6.0" @@ -4710,6 +4739,8 @@ "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": "*" } @@ -5173,6 +5204,8 @@ "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz", "integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@npmcli/fs": "^2.1.0", "@npmcli/move-file": "^2.0.0", @@ -5202,6 +5235,8 @@ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -5211,6 +5246,8 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -5230,6 +5267,8 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=12" } @@ -5239,6 +5278,8 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -5251,6 +5292,8 @@ "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "aggregate-error": "^3.0.0" }, @@ -5266,6 +5309,8 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "glob": "^7.1.3" }, @@ -5281,6 +5326,8 @@ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5291,6 +5338,8 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -5311,6 +5360,8 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -5356,6 +5407,8 @@ "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz", "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "camelcase": "^5.3.1", "map-obj": "^4.0.0", @@ -5373,6 +5426,8 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=6" } @@ -5468,10 +5523,18 @@ "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=10" } }, + "node_modules/chroma-js": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-1.4.1.tgz", + "integrity": "sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==", + "dev": true + }, "node_modules/chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", @@ -5502,6 +5565,8 @@ "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=6" } @@ -5526,6 +5591,8 @@ "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", @@ -5581,6 +5648,8 @@ "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", "dev": true, + "optional": true, + "peer": true, "bin": { "color-support": "bin.js" } @@ -5686,7 +5755,9 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/content-disposition": { "version": "0.5.4", @@ -6312,7 +6383,9 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/depd": { "version": "2.0.0", @@ -6456,6 +6529,12 @@ "url": "https://github.com/motdotla/dotenv?sponsor=1" } }, + "node_modules/easing-coordinates": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/easing-coordinates/-/easing-coordinates-2.0.2.tgz", + "integrity": "sha512-uQpJaLQX2CKVnN27YvN4sL4pXyEFGAv00y4zgrC46H0EBHrDhJc/8OsT2CQ5/6yz6+d+u8ACGd9bo4v83FNVlg==", + "dev": true + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -6497,6 +6576,7 @@ "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", "dev": true, "optional": true, + "peer": true, "dependencies": { "iconv-lite": "^0.6.2" } @@ -6529,6 +6609,8 @@ "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=6" } @@ -6550,7 +6632,9 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz", "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/error": { "version": "7.2.1", @@ -7897,6 +7981,8 @@ "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.0.0" }, @@ -7955,6 +8041,8 @@ "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz", "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "aproba": "^1.0.3 || ^2.0.0", "color-support": "^1.1.3", @@ -7974,6 +8062,8 @@ "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz", "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "globule": "^1.0.0" }, @@ -8006,6 +8096,8 @@ "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": "6.* || 8.* || >= 10.*" } @@ -8039,6 +8131,8 @@ "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -8202,6 +8296,8 @@ "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.4.tgz", "integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "glob": "~7.1.1", "lodash": "^4.17.21", @@ -8216,6 +8312,8 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -8236,6 +8334,8 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz", "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -8359,7 +8459,9 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/hash-sum": { "version": "2.0.0", @@ -8518,7 +8620,9 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/http-deceiver": { "version": "1.2.7", @@ -8567,6 +8671,8 @@ "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@tootallnate/once": "2", "agent-base": "6", @@ -8617,6 +8723,8 @@ "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "agent-base": "6", "debug": "4" @@ -8639,6 +8747,8 @@ "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "ms": "^2.0.0" } @@ -8649,6 +8759,7 @@ "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", "dev": true, "optional": true, + "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -8696,6 +8807,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -8831,6 +8948,8 @@ "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -8839,7 +8958,9 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/inflight": { "version": "1.0.6", @@ -8900,7 +9021,9 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/ipaddr.js": { "version": "2.1.0", @@ -9096,7 +9219,9 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz", "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/is-map": { "version": "2.0.2", @@ -9519,7 +9644,9 @@ "version": "2.6.4", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/js-tokens": { "version": "4.0.0", @@ -9838,6 +9965,8 @@ "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz", "integrity": "sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "agentkeepalive": "^4.2.1", "cacache": "^16.1.0", @@ -9865,6 +9994,8 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=12" } @@ -9920,6 +10051,8 @@ "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz", "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@types/minimist": "^1.2.0", "camelcase-keys": "^6.2.2", @@ -9946,6 +10079,8 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=10" } @@ -10104,6 +10239,8 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -10116,6 +10253,8 @@ "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz", "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.0.0" }, @@ -10128,6 +10267,8 @@ "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-2.1.2.tgz", "integrity": "sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.1.6", "minipass-sized": "^1.0.3", @@ -10145,6 +10286,8 @@ "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz", "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.0.0" }, @@ -10157,6 +10300,8 @@ "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz", "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.0.0" }, @@ -10169,6 +10314,8 @@ "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz", "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.0.0" }, @@ -10180,13 +10327,17 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/minizlib": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.0.0", "yallist": "^4.0.0" @@ -10199,13 +10350,17 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/mkdirp": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", "dev": true, + "optional": true, + "peer": true, "bin": { "mkdirp": "bin/cmd.js" }, @@ -10235,7 +10390,9 @@ "version": "2.18.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz", "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/nanoid": { "version": "3.3.6", @@ -10289,6 +10446,8 @@ "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz", "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "env-paths": "^2.2.0", "glob": "^7.1.4", @@ -10313,6 +10472,8 @@ "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz", "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@gar/promisify": "^1.0.1", "semver": "^7.3.5" @@ -10324,6 +10485,8 @@ "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==", "deprecated": "This functionality has been moved to @npmcli/fs", "dev": true, + "optional": true, + "peer": true, "dependencies": { "mkdirp": "^1.0.4", "rimraf": "^3.0.2" @@ -10337,6 +10500,8 @@ "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">= 6" } @@ -10346,6 +10511,8 @@ "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz", "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@npmcli/fs": "^1.0.0", "@npmcli/move-file": "^1.0.1", @@ -10375,6 +10542,8 @@ "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@tootallnate/once": "1", "agent-base": "6", @@ -10389,6 +10558,8 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -10401,6 +10572,8 @@ "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz", "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "agentkeepalive": "^4.1.3", "cacache": "^15.2.0", @@ -10428,6 +10601,8 @@ "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz", "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.1.0", "minipass-sized": "^1.0.3", @@ -10445,6 +10620,8 @@ "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "aggregate-error": "^3.0.0" }, @@ -10460,6 +10637,8 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "glob": "^7.1.3" }, @@ -10475,6 +10654,8 @@ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -10490,6 +10671,8 @@ "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz", "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "agent-base": "^6.0.2", "debug": "^4.3.3", @@ -10504,6 +10687,8 @@ "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.1.1" }, @@ -10516,6 +10701,8 @@ "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "unique-slug": "^2.0.0" } @@ -10525,6 +10712,8 @@ "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz", "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "imurmurhash": "^0.1.4" } @@ -10533,7 +10722,9 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/node-notifier": { "version": "9.0.1", @@ -10594,6 +10785,8 @@ "integrity": "sha512-jPzqCF2/e6JXw6r3VxfIqYc8tKQdkj5Z/BDATYyG6FL6b/LuYBNFGFVhus0mthcWifHm/JzBpKAd+3eXsWeK/A==", "dev": true, "hasInstallScript": true, + "optional": true, + "peer": true, "dependencies": { "async-foreach": "^0.1.3", "chalk": "^4.1.2", @@ -10622,6 +10815,8 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -10637,6 +10832,8 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -10653,6 +10850,8 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -10664,13 +10863,17 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/node-sass/node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -10680,6 +10883,8 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -10692,6 +10897,8 @@ "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "abbrev": "1" }, @@ -10792,6 +10999,8 @@ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz", "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "are-we-there-yet": "^3.0.0", "console-control-strings": "^1.1.0", @@ -11733,6 +11942,50 @@ "postcss": "^8.2" } }, + "node_modules/postcss-easing-gradients": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/postcss-easing-gradients/-/postcss-easing-gradients-3.0.1.tgz", + "integrity": "sha512-UrOKb4cenjGmMmrheETw7Cjnn/IKn3xgTvHs92b0sSwMhKgeZKxJpduGRjYZ8wgpu3zOzzgQpRwOLhhtMofayA==", + "dev": true, + "dependencies": { + "chroma-js": "^1.3.7", + "easing-coordinates": "^2.0.0", + "postcss": "^7.0.2", + "postcss-value-parser": "^3.3.0" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/postcss-easing-gradients/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/postcss-easing-gradients/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/postcss-easing-gradients/node_modules/postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, "node_modules/postcss-env-function": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz", @@ -12615,13 +12868,17 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/promise-retry": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz", "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "err-code": "^2.0.2", "retry": "^0.12.0" @@ -12710,6 +12967,8 @@ "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz", "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -12797,6 +13056,8 @@ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@types/normalize-package-data": "^2.4.0", "normalize-package-data": "^2.5.0", @@ -12812,6 +13073,8 @@ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz", "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "find-up": "^4.1.0", "read-pkg": "^5.2.0", @@ -12829,6 +13092,8 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" @@ -12842,6 +13107,8 @@ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "p-locate": "^4.1.0" }, @@ -12854,6 +13121,8 @@ "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "p-try": "^2.0.0" }, @@ -12869,6 +13138,8 @@ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "p-limit": "^2.2.0" }, @@ -12881,6 +13152,8 @@ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -12890,6 +13163,8 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -12898,13 +13173,17 @@ "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/read-pkg/node_modules/normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "hosted-git-info": "^2.1.4", "resolve": "^1.10.0", @@ -12917,6 +13196,8 @@ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "dev": true, + "optional": true, + "peer": true, "bin": { "semver": "bin/semver" } @@ -12926,6 +13207,8 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -12974,6 +13257,8 @@ "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" @@ -13139,6 +13424,8 @@ "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -13232,6 +13519,8 @@ "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz", "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">= 4" } @@ -13343,11 +13632,30 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/sass-graph": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz", "integrity": "sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "glob": "^7.0.0", "lodash": "^4.17.11", @@ -13422,6 +13730,8 @@ "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz", "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "js-base64": "^2.4.9", "source-map": "^0.7.3" @@ -13432,6 +13742,8 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">= 8" } @@ -13629,7 +13941,9 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/set-function-length": { "version": "1.1.1", @@ -13800,6 +14114,8 @@ "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" @@ -13821,6 +14137,8 @@ "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz", "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "ip": "^2.0.0", "smart-buffer": "^4.2.0" @@ -13835,6 +14153,8 @@ "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz", "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "agent-base": "^6.0.2", "debug": "^4.3.3", @@ -13946,6 +14266,8 @@ "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz", "integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "minipass": "^3.1.1" }, @@ -14058,6 +14380,8 @@ "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz", "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "readable-stream": "^2.0.1" } @@ -14066,13 +14390,17 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/stdout-stream/node_modules/readable-stream": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -14087,13 +14415,17 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/stdout-stream/node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "safe-buffer": "~5.1.0" } @@ -14225,6 +14557,8 @@ "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "min-indent": "^1.0.0" }, @@ -14872,6 +15206,8 @@ "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz", "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", @@ -14889,6 +15225,8 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -14897,7 +15235,9 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/terser": { "version": "5.22.0", @@ -15153,6 +15493,8 @@ "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz", "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -15161,7 +15503,9 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz", "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/tsconfig-paths": { "version": "3.14.2", @@ -15210,6 +15554,8 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=10" }, @@ -15374,6 +15720,8 @@ "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz", "integrity": "sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "unique-slug": "^3.0.0" }, @@ -15386,6 +15734,8 @@ "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz", "integrity": "sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "imurmurhash": "^0.1.4" }, @@ -16204,6 +16554,8 @@ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "string-width": "^1.0.2 || 2 || 3 || 4" } @@ -16220,6 +16572,8 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -16237,6 +16591,8 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -16252,6 +16608,8 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -16263,7 +16621,9 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/wrappy": { "version": "1.0.2", @@ -16328,6 +16688,8 @@ "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=10" } @@ -16353,6 +16715,8 @@ "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", diff --git a/package.json b/package.json index 4e716b3be2..22e9ad7bc2 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@popperjs/core": "^2.11.5", "@symfony/webpack-encore": "^4.1.1", "bazinga-translator": "^5.0.0", - "bootstrap": "^5.1.3", + "bootstrap": "^5.3.1", "bootstrap-datepicker": "^1.9.0", "bootstrap-sass": "^3.4.3", "check-password-strength": "^2.0.0", @@ -36,11 +36,12 @@ "jstree": "^3.3.12", "jstree-bootstrap-theme": "^1.0.1", "mini-css-extract-plugin": "^2.6.1", - "node-sass": "^8.0.0", + "postcss-easing-gradients": "^3.0.1", "postcss-import": "^15.0.0", "postcss-loader": "^7.0.1", "postcss-preset-env": "^7.8.3", "requestanimationframe": "0.0.23", + "sass": "^1.69.5", "sass-loader": "^13.2.0", "select2": "^4.0.12", "select2-bootstrap-5-theme": "^1.2.0", @@ -90,7 +91,7 @@ ] }, "volta": { - "node": "20.7.0" + "node": "20.9.0" }, "dependencies": { "stylelint": "^15.10.3", diff --git a/postcss.config.js b/postcss.config.js index 000f8a3740..f08ab6d2aa 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -8,6 +8,7 @@ module.exports = { warnings: false } } - } + }, + 'postcss-easing-gradients': {} } } diff --git a/src/Themes/Custom/assets/public/images/android-chrome-192x192.png b/src/Themes/Custom/assets/public/images/android-chrome-192x192.png new file mode 100644 index 0000000000..3d98a786b1 Binary files /dev/null and b/src/Themes/Custom/assets/public/images/android-chrome-192x192.png differ diff --git a/src/Themes/Custom/assets/public/images/android-chrome-512x512.png b/src/Themes/Custom/assets/public/images/android-chrome-512x512.png new file mode 100644 index 0000000000..4f2fd8e957 Binary files /dev/null and b/src/Themes/Custom/assets/public/images/android-chrome-512x512.png differ diff --git a/src/Themes/Custom/assets/public/images/apple-touch-icon.png b/src/Themes/Custom/assets/public/images/apple-touch-icon.png new file mode 100644 index 0000000000..2482ce13ce Binary files /dev/null and b/src/Themes/Custom/assets/public/images/apple-touch-icon.png differ diff --git a/src/Themes/Custom/assets/public/images/favicon.ico b/src/Themes/Custom/assets/public/images/favicon.ico new file mode 100644 index 0000000000..4296f431f3 Binary files /dev/null and b/src/Themes/Custom/assets/public/images/favicon.ico differ diff --git a/src/Themes/Custom/assets/public/images/favicon.svg b/src/Themes/Custom/assets/public/images/favicon.svg new file mode 100644 index 0000000000..518bd92683 --- /dev/null +++ b/src/Themes/Custom/assets/public/images/favicon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/Themes/Custom/assets/public/images/mstile-310x310.png b/src/Themes/Custom/assets/public/images/mstile-310x310.png new file mode 100644 index 0000000000..8909221656 Binary files /dev/null and b/src/Themes/Custom/assets/public/images/mstile-310x310.png differ diff --git a/src/Themes/Custom/assets/public/images/site.webmanifest b/src/Themes/Custom/assets/public/images/site.webmanifest new file mode 100644 index 0000000000..b20abb7cbb --- /dev/null +++ b/src/Themes/Custom/assets/public/images/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/src/Themes/Custom/assets/public/images/thumbnail.png b/src/Themes/Custom/assets/public/images/thumbnail.png new file mode 100644 index 0000000000..0b179a9c32 Binary files /dev/null and b/src/Themes/Custom/assets/public/images/thumbnail.png differ diff --git a/src/Themes/Custom/assets/public/images/tile.png b/src/Themes/Custom/assets/public/images/tile.png new file mode 100644 index 0000000000..e221896396 Binary files /dev/null and b/src/Themes/Custom/assets/public/images/tile.png differ diff --git a/src/Themes/Custom/assets/webpack/fonts/.gitkeep b/src/Themes/Custom/assets/webpack/fonts/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Themes/Custom/assets/webpack/js/Fork.js b/src/Themes/Custom/assets/webpack/js/Fork.js new file mode 100644 index 0000000000..60bf56cd37 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/js/Fork.js @@ -0,0 +1,19 @@ +// import plugins +import 'bootstrap' + +// component imports +import { Components } from '../../../../../Modules/Frontend/assets/Frontend/webpack/js/_Components' +import NavbarToggler from './components/navbar-toggler' + +export class Fork { + initFrontend () { + this.components = new Components() + this.components.initComponents() + } +} + +$(window).on('load', () => { + window.frontend = new Fork() + window.frontend.initFrontend() + window.navbarToggler = new NavbarToggler() +}) diff --git a/src/Themes/Custom/assets/webpack/js/components/navbar-toggler.js b/src/Themes/Custom/assets/webpack/js/components/navbar-toggler.js new file mode 100644 index 0000000000..f2d1812946 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/js/components/navbar-toggler.js @@ -0,0 +1,6 @@ +export default function NavbarToggler () { + const toggler = document.querySelector('.navbar-toggler') + toggler.addEventListener('click', function () { + document.querySelector('body').classList.toggle('nav-expanded') + }) +} diff --git a/src/Themes/Custom/assets/webpack/scss/_bootstrap-imports.scss b/src/Themes/Custom/assets/webpack/scss/_bootstrap-imports.scss new file mode 100644 index 0000000000..87c6a7a4d7 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/_bootstrap-imports.scss @@ -0,0 +1,52 @@ +/*! + * Bootstrap v5.0.2 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ + +// scss-docs-start import-stack +// Configuration +@import '~bootstrap/scss/mixins'; +@import '~bootstrap/scss/maps'; +@import '~bootstrap/scss/utilities'; + +// Layout & components +@import '~bootstrap/scss/root'; +@import '~bootstrap/scss/reboot'; +@import '~bootstrap/scss/type'; +@import '~bootstrap/scss/images'; +@import '~bootstrap/scss/containers'; +@import '~bootstrap/scss/grid'; +@import '~bootstrap/scss/tables'; +@import '~bootstrap/scss/forms'; +@import '~bootstrap/scss/buttons'; +@import '~bootstrap/scss/transitions'; +@import '~bootstrap/scss/dropdown'; +@import '~bootstrap/scss/button-group'; +@import '~bootstrap/scss/nav'; +@import '~bootstrap/scss/navbar'; +@import '~bootstrap/scss/card'; +@import '~bootstrap/scss/accordion'; +@import '~bootstrap/scss/breadcrumb'; +@import '~bootstrap/scss/pagination'; +@import '~bootstrap/scss/badge'; +@import '~bootstrap/scss/alert'; +@import '~bootstrap/scss/progress'; +@import '~bootstrap/scss/list-group'; +@import '~bootstrap/scss/close'; +@import '~bootstrap/scss/toasts'; +@import '~bootstrap/scss/modal'; +@import '~bootstrap/scss/tooltip'; +@import '~bootstrap/scss/popover'; +@import '~bootstrap/scss/carousel'; +@import '~bootstrap/scss/spinners'; +@import '~bootstrap/scss/offcanvas'; +@import '~bootstrap/scss/placeholders'; + +// Helpers +@import '~bootstrap/scss/helpers'; + +// Utilities +@import '~bootstrap/scss/utilities/api'; +// scss-docs-end import-stack diff --git a/src/Themes/Custom/assets/webpack/scss/_bootstrap-variables.scss b/src/Themes/Custom/assets/webpack/scss/_bootstrap-variables.scss new file mode 100644 index 0000000000..c6cc865b49 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/_bootstrap-variables.scss @@ -0,0 +1,1758 @@ +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + +// Color system + +// scss-docs-start gray-color-variables +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; +// 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 +); +// scss-docs-end gray-colors-map +// fusv-enable + +// scss-docs-start color-variables +$blue-light: #2f77d1; +$blue: #045a90; +$blue-dark: #014b79; +$blue-darker: #012545; +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #d63384; +$red: #dc3545; +$orange: #fd7e14; +$yellow: #ffc107; +$green: #198754; +$teal: #20c997; +$cyan: #0dcaf0; +// 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 +); +// scss-docs-end colors-map + +// scss-docs-start brands-map +$brands: ( + "facebook": #3b5998, + "twitter": #00acee, + "linked-in": #2867B2 +); +// scss-docs-end brands-map + +// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. +// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +$min-contrast-ratio: 4.5; + +// Customize the light and dark text colors for use in our color contrast function. +$color-contrast-dark: $black; +$color-contrast-light: $white; + +// fusv-disable +$blue-100: tint-color($blue, 80%); +$blue-200: tint-color($blue, 60%); +$blue-300: tint-color($blue, 40%); +$blue-400: tint-color($blue, 20%); +$blue-500: $blue; +$blue-600: shade-color($blue, 20%); +$blue-700: shade-color($blue, 40%); +$blue-800: shade-color($blue, 60%); +$blue-900: shade-color($blue, 80%); + +$indigo-100: tint-color($indigo, 80%); +$indigo-200: tint-color($indigo, 60%); +$indigo-300: tint-color($indigo, 40%); +$indigo-400: tint-color($indigo, 20%); +$indigo-500: $indigo; +$indigo-600: shade-color($indigo, 20%); +$indigo-700: shade-color($indigo, 40%); +$indigo-800: shade-color($indigo, 60%); +$indigo-900: shade-color($indigo, 80%); + +$purple-100: tint-color($purple, 80%); +$purple-200: tint-color($purple, 60%); +$purple-300: tint-color($purple, 40%); +$purple-400: tint-color($purple, 20%); +$purple-500: $purple; +$purple-600: shade-color($purple, 20%); +$purple-700: shade-color($purple, 40%); +$purple-800: shade-color($purple, 60%); +$purple-900: shade-color($purple, 80%); + +$pink-100: tint-color($pink, 80%); +$pink-200: tint-color($pink, 60%); +$pink-300: tint-color($pink, 40%); +$pink-400: tint-color($pink, 20%); +$pink-500: $pink; +$pink-600: shade-color($pink, 20%); +$pink-700: shade-color($pink, 40%); +$pink-800: shade-color($pink, 60%); +$pink-900: shade-color($pink, 80%); + +$red-100: tint-color($red, 80%); +$red-200: tint-color($red, 60%); +$red-300: tint-color($red, 40%); +$red-400: tint-color($red, 20%); +$red-500: $red; +$red-600: shade-color($red, 20%); +$red-700: shade-color($red, 40%); +$red-800: shade-color($red, 60%); +$red-900: shade-color($red, 80%); + +$orange-100: tint-color($orange, 80%); +$orange-200: tint-color($orange, 60%); +$orange-300: tint-color($orange, 40%); +$orange-400: tint-color($orange, 20%); +$orange-500: $orange; +$orange-600: shade-color($orange, 20%); +$orange-700: shade-color($orange, 40%); +$orange-800: shade-color($orange, 60%); +$orange-900: shade-color($orange, 80%); + +$yellow-100: tint-color($yellow, 80%); +$yellow-200: tint-color($yellow, 60%); +$yellow-300: tint-color($yellow, 40%); +$yellow-400: tint-color($yellow, 20%); +$yellow-500: $yellow; +$yellow-600: shade-color($yellow, 20%); +$yellow-700: shade-color($yellow, 40%); +$yellow-800: shade-color($yellow, 60%); +$yellow-900: shade-color($yellow, 80%); + +$green-100: tint-color($green, 80%); +$green-200: tint-color($green, 60%); +$green-300: tint-color($green, 40%); +$green-400: tint-color($green, 20%); +$green-500: $green; +$green-600: shade-color($green, 20%); +$green-700: shade-color($green, 40%); +$green-800: shade-color($green, 60%); +$green-900: shade-color($green, 80%); + +$teal-100: tint-color($teal, 80%); +$teal-200: tint-color($teal, 60%); +$teal-300: tint-color($teal, 40%); +$teal-400: tint-color($teal, 20%); +$teal-500: $teal; +$teal-600: shade-color($teal, 20%); +$teal-700: shade-color($teal, 40%); +$teal-800: shade-color($teal, 60%); +$teal-900: shade-color($teal, 80%); + +$cyan-100: tint-color($cyan, 80%); +$cyan-200: tint-color($cyan, 60%); +$cyan-300: tint-color($cyan, 40%); +$cyan-400: tint-color($cyan, 20%); +$cyan-500: $cyan; +$cyan-600: shade-color($cyan, 20%); +$cyan-700: shade-color($cyan, 40%); +$cyan-800: shade-color($cyan, 60%); +$cyan-900: shade-color($cyan, 80%); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); +// fusv-enable + +// scss-docs-start theme-color-variables +$primary: $blue; +$secondary: $gray-600; +$success: $green; +$info: $cyan; +$warning: $yellow; +$danger: $red; +$light: $gray-100; +$dark: $gray-900; +// scss-docs-end theme-color-variables + +// scss-docs-start theme-colors-map +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark +); +// scss-docs-end theme-colors-map + +// scss-docs-start theme-text-variables +$primary-text-emphasis: shade-color($primary, 60%); +$secondary-text-emphasis: shade-color($secondary, 60%); +$success-text-emphasis: shade-color($success, 60%); +$info-text-emphasis: shade-color($info, 60%); +$warning-text-emphasis: shade-color($warning, 60%); +$danger-text-emphasis: shade-color($danger, 60%); +$light-text-emphasis: $gray-700; +$dark-text-emphasis: $gray-700; +// scss-docs-end theme-text-variables + +// scss-docs-start theme-bg-subtle-variables +$primary-bg-subtle: tint-color($primary, 80%); +$secondary-bg-subtle: tint-color($secondary, 80%); +$success-bg-subtle: tint-color($success, 80%); +$info-bg-subtle: tint-color($info, 80%); +$warning-bg-subtle: tint-color($warning, 80%); +$danger-bg-subtle: tint-color($danger, 80%); +$light-bg-subtle: mix($gray-100, $white); +$dark-bg-subtle: $gray-400; +// scss-docs-end theme-bg-subtle-variables + +// scss-docs-start theme-border-subtle-variables +$primary-border-subtle: tint-color($primary, 60%); +$secondary-border-subtle: tint-color($secondary, 60%); +$success-border-subtle: tint-color($success, 60%); +$info-border-subtle: tint-color($info, 60%); +$warning-border-subtle: tint-color($warning, 60%); +$danger-border-subtle: tint-color($danger, 60%); +$light-border-subtle: $gray-200; +$dark-border-subtle: $gray-500; +// scss-docs-end theme-border-subtle-variables + +// Characters which are escaped by the escape-svg function +$escaped-characters: ( + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), +); + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret: true; +$enable-rounded: true; +$enable-shadows: false; +$enable-gradients: false; +$enable-transitions: true; +$enable-reduced-motion: true; +$enable-smooth-scroll: true; +$enable-grid-classes: true; +$enable-container-classes: true; +$enable-cssgrid: false; +$enable-button-pointers: true; +$enable-rfs: true; +$enable-validation-icons: true; +$enable-negative-margins: false; +$enable-deprecation-messages: true; +$enable-important-utilities: true; + +$enable-dark-mode: false; +$color-mode-type: data; // `data` or `media-query` + +// Prefix for :root CSS variables + +$variable-prefix: bs-; // Deprecated in v5.2.0 for the shorter `$prefix` +$prefix: $variable-prefix; + +// Gradient +// +// The gradient which is added to components if `$enable-gradients` is `true` +// This gradient is also added to elements with `.bg-gradient` +// scss-docs-start variable-gradient +$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); +// scss-docs-end variable-gradient + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +// scss-docs-start spacer-variables-maps +$spacer: 1rem; +$spacers: ( + 0: 0, + 1: $spacer * .25, + 2: $spacer * .5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, +); +// scss-docs-end spacer-variables-maps + +// Position +// +// Define the edge positioning anchors of the position utilities. + +// scss-docs-start position-map +$position-values: ( + 0: 0, + 50: 50%, + 100: 100% +); +// scss-docs-end position-map + +// Body +// +// Settings for the `` element. + +$body-text-align: null; +$body-color: $gray-900; +$body-bg: $white; + +$body-secondary-color: rgba($body-color, .75); +$body-secondary-bg: $gray-200; + +$body-tertiary-color: rgba($body-color, .5); +$body-tertiary-bg: $gray-100; + +$body-emphasis-color: $black; + +// Links +// +// Style anchor elements. + +$link-color: $primary; +$link-decoration: underline; +$link-shade-percentage: 20%; +$link-hover-color: shift-color($link-color, $link-shade-percentage); +$link-hover-decoration: null; + +$stretched-link-pseudo-element: after; +$stretched-link-z-index: 1; + +// Icon links +// scss-docs-start icon-link-variables +$icon-link-gap: .375rem; +$icon-link-underline-offset: .25em; +$icon-link-icon-size: 1em; +$icon-link-icon-transition: .2s ease-in-out transform; +$icon-link-icon-transform: translate3d(.25em, 0, 0); +// scss-docs-end icon-link-variables + +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem; + + +// Grid breakpoints +// +// Define the minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +// scss-docs-start grid-breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px +); +// scss-docs-end grid-breakpoints + +@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); + + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +// scss-docs-start container-max-widths +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px +); +// scss-docs-end container-max-widths + +@include _assert-ascending($container-max-widths, "$container-max-widths"); + + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12; +$grid-gutter-width: 1.5rem; +$grid-row-columns: 6; + +// Container padding + +$container-padding-x: $grid-gutter-width; + + +// Components +// +// Define common padding and border radius sizes and more. + +// scss-docs-start border-variables +$border-width: 1px; +$border-widths: ( + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px +); +$border-style: solid; +$border-color: $gray-300; +$border-color-translucent: rgba($black, .175); +// scss-docs-end border-variables + +// scss-docs-start border-radius-variables +$border-radius: .375rem; +$border-radius-sm: .25rem; +$border-radius-lg: .5rem; +$border-radius-xl: 1rem; +$border-radius-xxl: 2rem; +$border-radius-pill: 50rem; +// scss-docs-end border-radius-variables +// fusv-disable +$border-radius-2xl: $border-radius-xxl; // Deprecated in v5.3.0 +// fusv-enable + +// scss-docs-start box-shadow-variables +$box-shadow: 0 .5rem 1rem rgba($black, .15); +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075); +$box-shadow-lg: 0 1rem 3rem rgba($black, .175); +$box-shadow-inset: inset 0 1px 2px rgba($black, .075); +// scss-docs-end box-shadow-variables + +$component-active-color: $white; +$component-active-bg: $primary; + +// scss-docs-start focus-ring-variables +$focus-ring-width: .25rem; +$focus-ring-opacity: .25; +$focus-ring-color: rgba($primary, $focus-ring-opacity); +$focus-ring-blur: 0; +$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color; +// scss-docs-end focus-ring-variables + +// scss-docs-start caret-variables +$caret-width: .3em; +$caret-vertical-align: $caret-width * .85; +$caret-spacing: $caret-width * .85; +// scss-docs-end caret-variables + +$transition-base: all .2s ease-in-out; +$transition-fade: opacity .15s linear; +// scss-docs-start collapse-transition +$transition-collapse: height .35s ease; +$transition-collapse-width: width .35s ease; +// scss-docs-end collapse-transition + +// stylelint-disable function-disallowed-list +// scss-docs-start aspect-ratios +$aspect-ratios: ( + "1x1": 100%, + "4x3": calc(3 / 4 * 100%), + "16x9": calc(9 / 16 * 100%), + "21x9": calc(9 / 21 * 100%) +); +// scss-docs-end aspect-ratios +// stylelint-enable function-disallowed-list + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// scss-docs-start font-variables +// stylelint-disable value-keyword-case +$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +// stylelint-enable value-keyword-case +$font-family-base: var(--#{$prefix}font-sans-serif); +$font-family-code: var(--#{$prefix}font-monospace); + +// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins +// $font-size-base affects the font size of the body text +$font-size-root: null; +$font-size-base: 1rem; // Assumes the browser default, typically `16px` +$font-size-sm: $font-size-base * .875; +$font-size-lg: $font-size-base * 1.25; + +$font-weight-lighter: lighter; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-medium: 500; +$font-weight-semibold: 600; +$font-weight-bold: 700; +$font-weight-bolder: bolder; + +$font-weight-base: $font-weight-normal; + +$line-height-base: 1.5; +$line-height-sm: 1.25; +$line-height-lg: 2; + +$h1-font-size: $font-size-base * 2.5; +$h2-font-size: $font-size-base * 2; +$h3-font-size: $font-size-base * 1.75; +$h4-font-size: $font-size-base * 1.5; +$h5-font-size: $font-size-base * 1.25; +$h6-font-size: $font-size-base; +// scss-docs-end font-variables + +// scss-docs-start font-sizes +$font-sizes: ( + 1: $h1-font-size, + 2: $h2-font-size, + 3: $h3-font-size, + 4: $h4-font-size, + 5: $h5-font-size, + 6: $h6-font-size +); +// scss-docs-end font-sizes + +// scss-docs-start headings-variables +$headings-margin-bottom: $spacer * .5; +$headings-font-family: null; +$headings-font-style: null; +$headings-font-weight: 500; +$headings-line-height: 1.2; +$headings-color: inherit; +// scss-docs-end headings-variables + +// scss-docs-start display-headings +$display-font-sizes: ( + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem +); + +$display-font-family: null; +$display-font-style: null; +$display-font-weight: 300; +$display-line-height: $headings-line-height; +// scss-docs-end display-headings + +// scss-docs-start type-variables +$lead-font-size: $font-size-base * 1.25; +$lead-font-weight: 300; + +$small-font-size: .875em; + +$sub-sup-font-size: .75em; + +// fusv-disable +$text-muted: var(--#{$prefix}secondary-color); // Deprecated in 5.3.0 +// fusv-enable + +$initialism-font-size: $small-font-size; + +$blockquote-margin-y: $spacer; +$blockquote-font-size: $font-size-base * 1.25; +$blockquote-footer-color: $gray-600; +$blockquote-footer-font-size: $small-font-size; + +$hr-margin-y: $spacer; +$hr-color: inherit; + +// fusv-disable +$hr-bg-color: null; // Deprecated in v5.2.0 +$hr-height: null; // Deprecated in v5.2.0 +// fusv-enable + +$hr-border-color: null; // Allows for inherited colors +$hr-border-width: var(--#{$prefix}border-width); +$hr-opacity: .25; + +// scss-docs-start vr-variables +$vr-border-width: var(--#{$prefix}border-width); +// scss-docs-end vr-variables + +$legend-margin-bottom: .5rem; +$legend-font-size: 1.5rem; +$legend-font-weight: null; + +$dt-font-weight: $font-weight-bold; + +$list-inline-padding: .5rem; + +$mark-padding: .1875em; +$mark-bg: $yellow-100; +// scss-docs-end type-variables + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +// scss-docs-start table-variables +$table-cell-padding-y: .5rem; +$table-cell-padding-x: .5rem; +$table-cell-padding-y-sm: .25rem; +$table-cell-padding-x-sm: .25rem; + +$table-cell-vertical-align: top; + +$table-color: var(--#{$prefix}body-color); +$table-bg: var(--#{$prefix}body-bg); +$table-accent-bg: transparent; + +$table-th-font-weight: null; + +$table-striped-color: $table-color; +$table-striped-bg-factor: .05; +$table-striped-bg: rgba($black, $table-striped-bg-factor); + +$table-active-color: $table-color; +$table-active-bg-factor: .1; +$table-active-bg: rgba($black, $table-active-bg-factor); + +$table-hover-color: $table-color; +$table-hover-bg-factor: .075; +$table-hover-bg: rgba($black, $table-hover-bg-factor); + +$table-border-factor: .1; +$table-border-width: var(--#{$prefix}border-width); +$table-border-color: var(--#{$prefix}border-color); + +$table-striped-order: odd; +$table-striped-columns-order: even; + +$table-group-separator-color: currentcolor; + +$table-caption-color: var(--#{$prefix}secondary-color); + +$table-bg-scale: -80%; +// scss-docs-end table-variables + +// scss-docs-start table-loop +$table-variants: ( + "primary": shift-color($primary, $table-bg-scale), + "secondary": shift-color($secondary, $table-bg-scale), + "success": shift-color($success, $table-bg-scale), + "info": shift-color($info, $table-bg-scale), + "warning": shift-color($warning, $table-bg-scale), + "danger": shift-color($danger, $table-bg-scale), + "light": $light, + "dark": $dark, +); +// scss-docs-end table-loop + + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +// scss-docs-start input-btn-variables +$input-btn-padding-y: .375rem; +$input-btn-padding-x: .75rem; +$input-btn-font-family: null; +$input-btn-font-size: $font-size-base; +$input-btn-line-height: $line-height-base; + +$input-btn-focus-width: $focus-ring-width; +$input-btn-focus-color-opacity: $focus-ring-opacity; +$input-btn-focus-color: $focus-ring-color; +$input-btn-focus-blur: $focus-ring-blur; +$input-btn-focus-box-shadow: $focus-ring-box-shadow; + +$input-btn-padding-y-sm: .25rem; +$input-btn-padding-x-sm: .5rem; +$input-btn-font-size-sm: $font-size-sm; + +$input-btn-padding-y-lg: .5rem; +$input-btn-padding-x-lg: 1rem; +$input-btn-font-size-lg: $font-size-lg; + +$input-btn-border-width: var(--#{$prefix}border-width); +// scss-docs-end input-btn-variables + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +// scss-docs-start btn-variables +$btn-color: var(--#{$prefix}body-color); +$btn-padding-y: $input-btn-padding-y; +$btn-padding-x: $input-btn-padding-x; +$btn-font-family: $input-btn-font-family; +$btn-font-size: $input-btn-font-size; +$btn-line-height: $input-btn-line-height; +$btn-white-space: null; // Set to `nowrap` to prevent text wrapping + +$btn-padding-y-sm: $input-btn-padding-y-sm; +$btn-padding-x-sm: $input-btn-padding-x-sm; +$btn-font-size-sm: $input-btn-font-size-sm; + +$btn-padding-y-lg: $input-btn-padding-y-lg; +$btn-padding-x-lg: $input-btn-padding-x-lg; +$btn-font-size-lg: $input-btn-font-size-lg; + +$btn-border-width: $input-btn-border-width; + +$btn-font-weight: $font-weight-normal; +$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075); +$btn-focus-width: $input-btn-focus-width; +$btn-focus-box-shadow: $input-btn-focus-box-shadow; +$btn-disabled-opacity: .65; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); + +$btn-link-color: var(--#{$prefix}link-color); +$btn-link-hover-color: var(--#{$prefix}link-hover-color); +$btn-link-disabled-color: $gray-600; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: var(--#{$prefix}border-radius); +$btn-border-radius-sm: var(--#{$prefix}border-radius-sm); +$btn-border-radius-lg: var(--#{$prefix}border-radius-lg); + +$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$btn-hover-bg-shade-amount: 15%; +$btn-hover-bg-tint-amount: 15%; +$btn-hover-border-shade-amount: 20%; +$btn-hover-border-tint-amount: 10%; +$btn-active-bg-shade-amount: 20%; +$btn-active-bg-tint-amount: 20%; +$btn-active-border-shade-amount: 25%; +$btn-active-border-tint-amount: 10%; +// scss-docs-end btn-variables + + +// Forms + +// scss-docs-start form-text-variables +$form-text-margin-top: .25rem; +$form-text-font-size: $small-font-size; +$form-text-font-style: null; +$form-text-font-weight: null; +$form-text-color: var(--#{$prefix}secondary-color); +// scss-docs-end form-text-variables + +// scss-docs-start form-label-variables +$form-label-margin-bottom: .5rem; +$form-label-margin-end: 2px; +$form-label-font-size: null; +$form-label-font-style: null; +$form-label-font-weight: null; +$form-label-color: null; +// scss-docs-end form-label-variables + +// scss-docs-start form-input-variables +$input-padding-y: $input-btn-padding-y; +$input-padding-x: $input-btn-padding-x; +$input-font-family: $input-btn-font-family; +$input-font-size: $input-btn-font-size; +$input-font-weight: $font-weight-base; +$input-line-height: $input-btn-line-height; + +$input-padding-y-sm: $input-btn-padding-y-sm; +$input-padding-x-sm: $input-btn-padding-x-sm; +$input-font-size-sm: $input-btn-font-size-sm; + +$input-padding-y-lg: $input-btn-padding-y-lg; +$input-padding-x-lg: $input-btn-padding-x-lg; +$input-font-size-lg: $input-btn-font-size-lg; + +$input-bg: var(--#{$prefix}body-bg); +$input-disabled-color: null; +$input-disabled-bg: var(--#{$prefix}secondary-bg); +$input-disabled-border-color: null; + +$input-color: var(--#{$prefix}body-color); +$input-border-color: var(--#{$prefix}border-color); +$input-border-width: $input-btn-border-width; +$input-box-shadow: $box-shadow-inset; + +$input-border-radius: var(--#{$prefix}border-radius); +$input-border-radius-sm: var(--#{$prefix}border-radius-sm); +$input-border-radius-lg: var(--#{$prefix}border-radius-lg); + +$input-focus-bg: $input-bg; +$input-focus-border-color: tint-color($component-active-bg, 50%); +$input-focus-color: $input-color; +$input-focus-width: $input-btn-focus-width; +$input-focus-box-shadow: $input-btn-focus-box-shadow; + +$input-placeholder-color: var(--#{$prefix}secondary-color); +$input-plaintext-color: var(--#{$prefix}body-color); + +$input-height-border: calc(#{$input-border-width} * 2); // stylelint-disable-line function-disallowed-list + +$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2); +$input-height-inner-half: add($input-line-height * .5em, $input-padding-y); +$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5); + +$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)); +$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)); +$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)); + +$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$form-color-width: 3rem; +// scss-docs-end form-input-variables + +// scss-docs-start form-check-variables +$form-check-input-width: 1em; +$form-check-min-height: $font-size-base * $line-height-base; +$form-check-padding-start: $form-check-input-width + .5em; +$form-check-margin-bottom: .125rem; +$form-check-label-color: null; +$form-check-label-cursor: null; +$form-check-transition: null; + +$form-check-input-active-filter: brightness(90%); + +$form-check-input-bg: $input-bg; +$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); +$form-check-input-border-radius: .25em; +$form-check-radio-border-radius: 50%; +$form-check-input-focus-border: $input-focus-border-color; +$form-check-input-focus-box-shadow: $focus-ring-box-shadow; + +$form-check-input-checked-color: $component-active-color; +$form-check-input-checked-bg-color: $component-active-bg; +$form-check-input-checked-border-color: $form-check-input-checked-bg-color; +$form-check-input-checked-bg-image: url("data:image/svg+xml,"); +$form-check-radio-checked-bg-image: url("data:image/svg+xml,"); + +$form-check-input-indeterminate-color: $component-active-color; +$form-check-input-indeterminate-bg-color: $component-active-bg; +$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color; +$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,"); + +$form-check-input-disabled-opacity: .5; +$form-check-label-disabled-opacity: $form-check-input-disabled-opacity; +$form-check-btn-check-disabled-opacity: $btn-disabled-opacity; + +$form-check-inline-margin-end: 1rem; +// scss-docs-end form-check-variables + +// scss-docs-start form-switch-variables +$form-switch-color: rgba($black, .25); +$form-switch-width: 2em; +$form-switch-padding-start: $form-switch-width + .5em; +$form-switch-bg-image: url("data:image/svg+xml,"); +$form-switch-border-radius: $form-switch-width; +$form-switch-transition: background-position .15s ease-in-out; + +$form-switch-focus-color: $input-focus-border-color; +$form-switch-focus-bg-image: url("data:image/svg+xml,"); + +$form-switch-checked-color: $component-active-color; +$form-switch-checked-bg-image: url("data:image/svg+xml,"); +$form-switch-checked-bg-position: right center; +// scss-docs-end form-switch-variables + +// scss-docs-start input-group-variables +$input-group-addon-padding-y: $input-padding-y; +$input-group-addon-padding-x: $input-padding-x; +$input-group-addon-font-weight: $input-font-weight; +$input-group-addon-color: $input-color; +$input-group-addon-bg: var(--#{$prefix}tertiary-bg); +$input-group-addon-border-color: $input-border-color; +// scss-docs-end input-group-variables + +// scss-docs-start form-select-variables +$form-select-padding-y: $input-padding-y; +$form-select-padding-x: $input-padding-x; +$form-select-font-family: $input-font-family; +$form-select-font-size: $input-font-size; +$form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image +$form-select-font-weight: $input-font-weight; +$form-select-line-height: $input-line-height; +$form-select-color: $input-color; +$form-select-bg: $input-bg; +$form-select-disabled-color: null; +$form-select-disabled-bg: $input-disabled-bg; +$form-select-disabled-border-color: $input-disabled-border-color; +$form-select-bg-position: right $form-select-padding-x center; +$form-select-bg-size: 16px 12px; // In pixels because image dimensions +$form-select-indicator-color: $gray-800; +$form-select-indicator: url("data:image/svg+xml,"); + +$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding; +$form-select-feedback-icon-position: center right $form-select-indicator-padding; +$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half; + +$form-select-border-width: $input-border-width; +$form-select-border-color: $input-border-color; +$form-select-border-radius: $input-border-radius; +$form-select-box-shadow: $box-shadow-inset; + +$form-select-focus-border-color: $input-focus-border-color; +$form-select-focus-width: $input-focus-width; +$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color; + +$form-select-padding-y-sm: $input-padding-y-sm; +$form-select-padding-x-sm: $input-padding-x-sm; +$form-select-font-size-sm: $input-font-size-sm; +$form-select-border-radius-sm: $input-border-radius-sm; + +$form-select-padding-y-lg: $input-padding-y-lg; +$form-select-padding-x-lg: $input-padding-x-lg; +$form-select-font-size-lg: $input-font-size-lg; +$form-select-border-radius-lg: $input-border-radius-lg; + +$form-select-transition: $input-transition; +// scss-docs-end form-select-variables + +// scss-docs-start form-range-variables +$form-range-track-width: 100%; +$form-range-track-height: .5rem; +$form-range-track-cursor: pointer; +$form-range-track-bg: var(--#{$prefix}tertiary-bg); +$form-range-track-border-radius: 1rem; +$form-range-track-box-shadow: $box-shadow-inset; + +$form-range-thumb-width: 1rem; +$form-range-thumb-height: $form-range-thumb-width; +$form-range-thumb-bg: $component-active-bg; +$form-range-thumb-border: 0; +$form-range-thumb-border-radius: 1rem; +$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1); +$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow; +$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge +$form-range-thumb-active-bg: tint-color($component-active-bg, 70%); +$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color); +$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; +// scss-docs-end form-range-variables + +// scss-docs-start form-file-variables +$form-file-button-color: $input-color; +$form-file-button-bg: var(--#{$prefix}tertiary-bg); +$form-file-button-hover-bg: var(--#{$prefix}secondary-bg); +// scss-docs-end form-file-variables + +// scss-docs-start form-floating-variables +$form-floating-height: add(3.5rem, $input-height-border); +$form-floating-line-height: 1.25; +$form-floating-padding-x: $input-padding-x; +$form-floating-padding-y: 1rem; +$form-floating-input-padding-t: 1.625rem; +$form-floating-input-padding-b: .625rem; +$form-floating-label-height: 1.5em; +$form-floating-label-opacity: .65; +$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem); +$form-floating-label-disabled-color: $gray-600; +$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out; +// scss-docs-end form-floating-variables + +// Form validation + +// scss-docs-start form-feedback-variables +$form-feedback-margin-top: $form-text-margin-top; +$form-feedback-font-size: $form-text-font-size; +$form-feedback-font-style: $form-text-font-style; +$form-feedback-valid-color: $success; +$form-feedback-invalid-color: $danger; + +$form-feedback-icon-valid-color: $form-feedback-valid-color; +$form-feedback-icon-valid: url("data:image/svg+xml,"); +$form-feedback-icon-invalid-color: $form-feedback-invalid-color; +$form-feedback-icon-invalid: url("data:image/svg+xml,"); +// scss-docs-end form-feedback-variables + +// scss-docs-start form-validation-colors +$form-valid-color: $form-feedback-valid-color; +$form-valid-border-color: $form-feedback-valid-color; +$form-invalid-color: $form-feedback-invalid-color; +$form-invalid-border-color: $form-feedback-invalid-color; +// scss-docs-end form-validation-colors + +// scss-docs-start form-validation-states +$form-validation-states: ( + "valid": ( + "color": var(--#{$prefix}form-valid-color), + "icon": $form-feedback-icon-valid, + "tooltip-color": #fff, + "tooltip-bg-color": var(--#{$prefix}success), + "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity), + "border-color": var(--#{$prefix}form-valid-border-color), + ), + "invalid": ( + "color": var(--#{$prefix}form-invalid-color), + "icon": $form-feedback-icon-invalid, + "tooltip-color": #fff, + "tooltip-bg-color": var(--#{$prefix}danger), + "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity), + "border-color": var(--#{$prefix}form-invalid-border-color), + ) +); +// scss-docs-end form-validation-states + +// Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. + +// scss-docs-start zindex-stack +$zindex-dropdown: 1000; +$zindex-sticky: 1020; +$zindex-fixed: 1030; +$zindex-offcanvas-backdrop: 1040; +$zindex-offcanvas: 1045; +$zindex-modal-backdrop: 1110; +$zindex-modal: 1120; +$zindex-popover: 1070; +$zindex-tooltip: 1080; +$zindex-toast: 1090; +// scss-docs-end zindex-stack + +// scss-docs-start zindex-levels-map +$zindex-levels: ( + n1: -1, + 0: 0, + 1: 1, + 2: 2, + 3: 3 +); +// scss-docs-end zindex-levels-map + + +// Navs + +// scss-docs-start nav-variables +$nav-link-padding-y: .5rem; +$nav-link-padding-x: 1rem; +$nav-link-font-size: null; +$nav-link-font-weight: null; +$nav-link-color: var(--#{$prefix}link-color); +$nav-link-hover-color: var(--#{$prefix}link-hover-color); +$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; +$nav-link-disabled-color: var(--#{$prefix}secondary-color); +$nav-link-focus-box-shadow: $focus-ring-box-shadow; + +$nav-tabs-border-color: var(--#{$prefix}border-color); +$nav-tabs-border-width: var(--#{$prefix}border-width); +$nav-tabs-border-radius: var(--#{$prefix}border-radius); +$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color; +$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color); +$nav-tabs-link-active-bg: var(--#{$prefix}body-bg); +$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg; + +$nav-pills-border-radius: var(--#{$prefix}border-radius); +$nav-pills-link-active-color: $component-active-color; +$nav-pills-link-active-bg: $component-active-bg; + +$nav-underline-gap: 1rem; +$nav-underline-border-width: .125rem; +$nav-underline-link-active-color: var(--#{$prefix}emphasis-color); +// scss-docs-end nav-variables + + +// Navbar + +// scss-docs-start navbar-variables +$navbar-padding-y: $spacer * .5; +$navbar-padding-x: null; + +$navbar-nav-link-padding-x: .5rem; + +$navbar-brand-font-size: $font-size-lg; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5; +$navbar-brand-margin-end: 1rem; + +$navbar-toggler-padding-y: .25rem; +$navbar-toggler-padding-x: .75rem; +$navbar-toggler-font-size: $font-size-lg; +$navbar-toggler-border-radius: $btn-border-radius; +$navbar-toggler-focus-width: $btn-focus-width; +$navbar-toggler-transition: box-shadow .15s ease-in-out; + +$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65); +$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8); +$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1); +$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3); +$navbar-light-icon-color: rgba($body-color, .75); +$navbar-light-toggler-icon-bg: url("data:image/svg+xml,"); +$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15); +$navbar-light-brand-color: $navbar-light-active-color; +$navbar-light-brand-hover-color: $navbar-light-active-color; +// scss-docs-end navbar-variables + +// scss-docs-start navbar-dark-variables +$navbar-dark-color: $white; +$navbar-dark-hover-color: rgba($white, .75); +$navbar-dark-active-color: $white; +$navbar-dark-disabled-color: rgba($white, .25); +$navbar-dark-icon-color: $navbar-dark-color; +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,"); +$navbar-dark-toggler-border-color: rgba($white, .1); +$navbar-dark-brand-color: $navbar-dark-active-color; +$navbar-dark-brand-hover-color: $navbar-dark-active-color; +// scss-docs-end navbar-dark-variables + + +// Dropdowns +// +// Dropdown menu container and contents. + +// scss-docs-start dropdown-variables +$dropdown-min-width: 10rem; +$dropdown-padding-x: 0; +$dropdown-padding-y: .5rem; +$dropdown-spacer: .125rem; +$dropdown-font-size: $font-size-base; +$dropdown-color: var(--#{$prefix}body-color); +$dropdown-bg: var(--#{$prefix}body-bg); +$dropdown-border-color: var(--#{$prefix}border-color-translucent); +$dropdown-border-radius: var(--#{$prefix}border-radius); +$dropdown-border-width: var(--#{$prefix}border-width); +$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list +$dropdown-divider-bg: $dropdown-border-color; +$dropdown-divider-margin-y: $spacer * .5; +$dropdown-box-shadow: $box-shadow; + +$dropdown-link-color: var(--#{$prefix}body-color); +$dropdown-link-hover-color: $dropdown-link-color; +$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg); + +$dropdown-link-active-color: $component-active-color; +$dropdown-link-active-bg: $component-active-bg; + +$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color); + +$dropdown-item-padding-y: $spacer * .25; +$dropdown-item-padding-x: $spacer; + +$dropdown-header-color: $gray-600; +$dropdown-header-padding-x: $dropdown-item-padding-x; +$dropdown-header-padding-y: $dropdown-padding-y; +// fusv-disable +$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0 +// fusv-enable +// scss-docs-end dropdown-variables + +// scss-docs-start dropdown-dark-variables +$dropdown-dark-color: $gray-300; +$dropdown-dark-bg: $gray-800; +$dropdown-dark-border-color: $dropdown-border-color; +$dropdown-dark-divider-bg: $dropdown-divider-bg; +$dropdown-dark-box-shadow: null; +$dropdown-dark-link-color: $dropdown-dark-color; +$dropdown-dark-link-hover-color: $white; +$dropdown-dark-link-hover-bg: rgba($white, .15); +$dropdown-dark-link-active-color: $dropdown-link-active-color; +$dropdown-dark-link-active-bg: $dropdown-link-active-bg; +$dropdown-dark-link-disabled-color: $gray-500; +$dropdown-dark-header-color: $gray-500; +// scss-docs-end dropdown-dark-variables + + +// Pagination + +// scss-docs-start pagination-variables +$pagination-padding-y: .375rem; +$pagination-padding-x: .75rem; +$pagination-padding-y-sm: .25rem; +$pagination-padding-x-sm: .5rem; +$pagination-padding-y-lg: .75rem; +$pagination-padding-x-lg: 1.5rem; + +$pagination-font-size: $font-size-base; + +$pagination-color: var(--#{$prefix}link-color); +$pagination-bg: var(--#{$prefix}body-bg); +$pagination-border-radius: var(--#{$prefix}border-radius); +$pagination-border-width: var(--#{$prefix}border-width); +$pagination-margin-start: calc(#{$pagination-border-width} * -1); // stylelint-disable-line function-disallowed-list +$pagination-border-color: var(--#{$prefix}border-color); + +$pagination-focus-color: var(--#{$prefix}link-hover-color); +$pagination-focus-bg: var(--#{$prefix}secondary-bg); +$pagination-focus-box-shadow: $focus-ring-box-shadow; +$pagination-focus-outline: 0; + +$pagination-hover-color: var(--#{$prefix}link-hover-color); +$pagination-hover-bg: var(--#{$prefix}tertiary-bg); +$pagination-hover-border-color: var(--#{$prefix}border-color); // Todo in v6: remove this? + +$pagination-active-color: $component-active-color; +$pagination-active-bg: $component-active-bg; +$pagination-active-border-color: $component-active-bg; + +$pagination-disabled-color: var(--#{$prefix}secondary-color); +$pagination-disabled-bg: var(--#{$prefix}secondary-bg); +$pagination-disabled-border-color: var(--#{$prefix}border-color); + +$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm); +$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg); +// scss-docs-end pagination-variables + + +// Placeholders + +// scss-docs-start placeholders +$placeholder-opacity-max: .5; +$placeholder-opacity-min: .2; +// scss-docs-end placeholders + +// Cards + +// scss-docs-start card-variables +$card-spacer-y: $spacer; +$card-spacer-x: $spacer; +$card-title-spacer-y: $spacer * .5; +$card-title-color: null; +$card-subtitle-color: null; +$card-border-width: var(--#{$prefix}border-width); +$card-border-color: var(--#{$prefix}border-color-translucent); +$card-border-radius: var(--#{$prefix}border-radius); +$card-box-shadow: null; +$card-inner-border-radius: subtract($card-border-radius, $card-border-width); +$card-cap-padding-y: $card-spacer-y * .5; +$card-cap-padding-x: $card-spacer-x; +$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03); +$card-cap-color: null; +$card-height: null; +$card-color: null; +$card-bg: var(--#{$prefix}body-bg); +$card-img-overlay-padding: $spacer; +$card-group-margin: $grid-gutter-width * .5; +// scss-docs-end card-variables + +// Accordion + +// scss-docs-start accordion-variables +$accordion-padding-y: 1rem; +$accordion-padding-x: 1.25rem; +$accordion-color: var(--#{$prefix}body-color); +$accordion-bg: var(--#{$prefix}body-bg); +$accordion-border-width: var(--#{$prefix}border-width); +$accordion-border-color: var(--#{$prefix}border-color); +$accordion-border-radius: var(--#{$prefix}border-radius); +$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width); + +$accordion-body-padding-y: $accordion-padding-y; +$accordion-body-padding-x: $accordion-padding-x; + +$accordion-button-padding-y: $accordion-padding-y; +$accordion-button-padding-x: $accordion-padding-x; +$accordion-button-color: var(--#{$prefix}body-color); +$accordion-button-bg: var(--#{$prefix}accordion-bg); +$accordion-transition: $btn-transition, border-radius .15s ease; +$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle); +$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis); + +$accordion-button-focus-border-color: $input-focus-border-color; +$accordion-button-focus-box-shadow: $btn-focus-box-shadow; + +$accordion-icon-width: 1.25rem; +$accordion-icon-color: $body-color; +$accordion-icon-active-color: $primary-text-emphasis; +$accordion-icon-transition: transform .2s ease-in-out; +$accordion-icon-transform: rotate(-180deg); + +$accordion-button-icon: url("data:image/svg+xml,"); +$accordion-button-active-icon: url("data:image/svg+xml,"); +// scss-docs-end accordion-variables + +// Tooltips + +// scss-docs-start tooltip-variables +$tooltip-font-size: $font-size-sm; +$tooltip-max-width: 200px; +$tooltip-color: var(--#{$prefix}body-bg); +$tooltip-bg: var(--#{$prefix}emphasis-color); +$tooltip-border-radius: var(--#{$prefix}border-radius); +$tooltip-opacity: .9; +$tooltip-padding-y: $spacer * .25; +$tooltip-padding-x: $spacer * .5; +$tooltip-margin: null; // TODO: remove this in v6 + +$tooltip-arrow-width: .8rem; +$tooltip-arrow-height: .4rem; +// fusv-disable +$tooltip-arrow-color: null; // Deprecated in Bootstrap 5.2.0 for CSS variables +// fusv-enable +// scss-docs-end tooltip-variables + +// Form tooltips must come after regular tooltips +// scss-docs-start tooltip-feedback-variables +$form-feedback-tooltip-padding-y: $tooltip-padding-y; +$form-feedback-tooltip-padding-x: $tooltip-padding-x; +$form-feedback-tooltip-font-size: $tooltip-font-size; +$form-feedback-tooltip-line-height: null; +$form-feedback-tooltip-opacity: $tooltip-opacity; +$form-feedback-tooltip-border-radius: $tooltip-border-radius; +// scss-docs-end tooltip-feedback-variables + + +// Popovers + +// scss-docs-start popover-variables +$popover-font-size: $font-size-sm; +$popover-bg: var(--#{$prefix}body-bg); +$popover-max-width: 276px; +$popover-border-width: var(--#{$prefix}border-width); +$popover-border-color: var(--#{$prefix}border-color-translucent); +$popover-border-radius: var(--#{$prefix}border-radius-lg); +$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list +$popover-box-shadow: $box-shadow; + +$popover-header-font-size: $font-size-base; +$popover-header-bg: var(--#{$prefix}secondary-bg); +$popover-header-color: $headings-color; +$popover-header-padding-y: .5rem; +$popover-header-padding-x: $spacer; + +$popover-body-color: var(--#{$prefix}body-color); +$popover-body-padding-y: $spacer; +$popover-body-padding-x: $spacer; + +$popover-arrow-width: 1rem; +$popover-arrow-height: .5rem; +// scss-docs-end popover-variables + +// fusv-disable +// Deprecated in Bootstrap 5.2.0 for CSS variables +$popover-arrow-color: $popover-bg; +$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent); +// fusv-enable + + +// Toasts + +// scss-docs-start toast-variables +$toast-max-width: 350px; +$toast-padding-x: .75rem; +$toast-padding-y: .5rem; +$toast-font-size: .875rem; +$toast-color: null; +$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85); +$toast-border-width: var(--#{$prefix}border-width); +$toast-border-color: var(--#{$prefix}border-color-translucent); +$toast-border-radius: var(--#{$prefix}border-radius); +$toast-box-shadow: var(--#{$prefix}box-shadow); +$toast-spacing: $container-padding-x; + +$toast-header-color: var(--#{$prefix}secondary-color); +$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85); +$toast-header-border-color: $toast-border-color; +// scss-docs-end toast-variables + + +// Badges + +// scss-docs-start badge-variables +$badge-font-size: .75em; +$badge-font-weight: $font-weight-bold; +$badge-color: $white; +$badge-padding-y: .35em; +$badge-padding-x: .65em; +$badge-border-radius: var(--#{$prefix}border-radius); +// scss-docs-end badge-variables + + +// Modals + +// scss-docs-start modal-variables +$modal-inner-padding: $spacer; + +$modal-footer-margin-between: .5rem; + +$modal-dialog-margin: .5rem; +$modal-dialog-margin-y-sm-up: 1.75rem; + +$modal-title-line-height: $line-height-base; + +$modal-content-color: null; +$modal-content-bg: var(--#{$prefix}body-bg); +$modal-content-border-color: var(--#{$prefix}border-color-translucent); +$modal-content-border-width: var(--#{$prefix}border-width); +$modal-content-border-radius: var(--#{$prefix}border-radius-lg); +$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width); +$modal-content-box-shadow-xs: $box-shadow-sm; +$modal-content-box-shadow-sm-up: $box-shadow; + +$modal-backdrop-bg: $black; +$modal-backdrop-opacity: .5; + +$modal-header-border-color: var(--#{$prefix}border-color); +$modal-header-border-width: $modal-content-border-width; +$modal-header-padding-y: $modal-inner-padding; +$modal-header-padding-x: $modal-inner-padding; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility + +$modal-footer-bg: null; +$modal-footer-border-color: $modal-header-border-color; +$modal-footer-border-width: $modal-header-border-width; + +$modal-sm: 300px; +$modal-md: 500px; +$modal-lg: 800px; +$modal-xl: 1140px; + +$modal-fade-transform: translate(0, -50px); +$modal-show-transform: none; +$modal-transition: transform .3s ease-out; +$modal-scale-transform: scale(1.02); +// scss-docs-end modal-variables + + +// Alerts +// +// Define alert colors, border radius, and padding. + +// scss-docs-start alert-variables +$alert-padding-y: $spacer; +$alert-padding-x: $spacer; +$alert-margin-bottom: 1rem; +$alert-border-radius: var(--#{$prefix}border-radius); +$alert-link-font-weight: $font-weight-bold; +$alert-border-width: var(--#{$prefix}border-width); +$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side +// scss-docs-end alert-variables + +// fusv-disable +$alert-bg-scale: -80%; // Deprecated in v5.2.0, to be removed in v6 +$alert-border-scale: -70%; // Deprecated in v5.2.0, to be removed in v6 +$alert-color-scale: 40%; // Deprecated in v5.2.0, to be removed in v6 +// fusv-enable + +// Progress bars + +// scss-docs-start progress-variables +$progress-height: 1rem; +$progress-font-size: $font-size-base * .75; +$progress-bg: var(--#{$prefix}secondary-bg); +$progress-border-radius: var(--#{$prefix}border-radius); +$progress-box-shadow: var(--#{$prefix}box-shadow-inset); +$progress-bar-color: $white; +$progress-bar-bg: $primary; +$progress-bar-animation-timing: 1s linear infinite; +$progress-bar-transition: width .6s ease; +// scss-docs-end progress-variables + + +// List group + +// scss-docs-start list-group-variables +$list-group-color: var(--#{$prefix}body-color); +$list-group-bg: var(--#{$prefix}body-bg); +$list-group-border-color: var(--#{$prefix}border-color); +$list-group-border-width: var(--#{$prefix}border-width); +$list-group-border-radius: var(--#{$prefix}border-radius); + +$list-group-item-padding-y: $spacer * .5; +$list-group-item-padding-x: $spacer; +// fusv-disable +$list-group-item-bg-scale: -80%; // Deprecated in v5.3.0 +$list-group-item-color-scale: 40%; // Deprecated in v5.3.0 +// fusv-enable + +$list-group-hover-bg: var(--#{$prefix}tertiary-bg); +$list-group-active-color: $component-active-color; +$list-group-active-bg: $component-active-bg; +$list-group-active-border-color: $list-group-active-bg; + +$list-group-disabled-color: var(--#{$prefix}secondary-color); +$list-group-disabled-bg: $list-group-bg; + +$list-group-action-color: var(--#{$prefix}secondary-color); +$list-group-action-hover-color: var(--#{$prefix}emphasis-color); + +$list-group-action-active-color: var(--#{$prefix}body-color); +$list-group-action-active-bg: var(--#{$prefix}secondary-bg); +// scss-docs-end list-group-variables + + +// Image thumbnails + +// scss-docs-start thumbnail-variables +$thumbnail-padding: .25rem; +$thumbnail-bg: var(--#{$prefix}body-bg); +$thumbnail-border-width: var(--#{$prefix}border-width); +$thumbnail-border-color: var(--#{$prefix}border-color); +$thumbnail-border-radius: var(--#{$prefix}border-radius); +$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm); +// scss-docs-end thumbnail-variables + + +// Figures + +// scss-docs-start figure-variables +$figure-caption-font-size: $small-font-size; +$figure-caption-color: var(--#{$prefix}secondary-color); +// scss-docs-end figure-variables + + +// Breadcrumbs + +// scss-docs-start breadcrumb-variables +$breadcrumb-font-size: null; +$breadcrumb-padding-y: 0; +$breadcrumb-padding-x: 0; +$breadcrumb-item-padding-x: .5rem; +$breadcrumb-margin-bottom: 1rem; +$breadcrumb-bg: null; +$breadcrumb-divider-color: var(--#{$prefix}secondary-color); +$breadcrumb-active-color: var(--#{$prefix}secondary-color); +$breadcrumb-divider: quote("/"); +$breadcrumb-divider-flipped: $breadcrumb-divider; +$breadcrumb-border-radius: null; +// scss-docs-end breadcrumb-variables + +// Carousel + +// scss-docs-start carousel-variables +$carousel-control-color: $white; +$carousel-control-width: 15%; +$carousel-control-opacity: .5; +$carousel-control-hover-opacity: .9; +$carousel-control-transition: opacity .15s ease; + +$carousel-indicator-width: 30px; +$carousel-indicator-height: 3px; +$carousel-indicator-hit-area-height: 10px; +$carousel-indicator-spacer: 3px; +$carousel-indicator-opacity: .5; +$carousel-indicator-active-bg: $white; +$carousel-indicator-active-opacity: 1; +$carousel-indicator-transition: opacity .6s ease; + +$carousel-caption-width: 70%; +$carousel-caption-color: $white; +$carousel-caption-padding-y: 1.25rem; +$carousel-caption-spacer: 1.25rem; + +$carousel-control-icon-width: 2rem; + +$carousel-control-prev-icon-bg: url("data:image/svg+xml,"); +$carousel-control-next-icon-bg: url("data:image/svg+xml,"); + +$carousel-transition-duration: .6s; +$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +// scss-docs-end carousel-variables + +// scss-docs-start carousel-dark-variables +$carousel-dark-indicator-active-bg: $black; +$carousel-dark-caption-color: $black; +$carousel-dark-control-icon-filter: invert(1) grayscale(100); +// scss-docs-end carousel-dark-variables + + +// Spinners + +// scss-docs-start spinner-variables +$spinner-width: 2rem; +$spinner-height: $spinner-width; +$spinner-vertical-align: -.125em; +$spinner-border-width: .25em; +$spinner-animation-speed: .75s; + +$spinner-width-sm: 1rem; +$spinner-height-sm: $spinner-width-sm; +$spinner-border-width-sm: .2em; +// scss-docs-end spinner-variables + + +// Close + +// scss-docs-start close-variables +$btn-close-width: 1em; +$btn-close-height: $btn-close-width; +$btn-close-padding-x: .25em; +$btn-close-padding-y: $btn-close-padding-x; +$btn-close-color: $black; +$btn-close-bg: url("data:image/svg+xml,"); +$btn-close-focus-shadow: $focus-ring-box-shadow; +$btn-close-opacity: .5; +$btn-close-hover-opacity: .75; +$btn-close-focus-opacity: 1; +$btn-close-disabled-opacity: .25; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); +// scss-docs-end close-variables + + +// Offcanvas + +// scss-docs-start offcanvas-variables +$offcanvas-padding-y: $modal-inner-padding; +$offcanvas-padding-x: $modal-inner-padding; +$offcanvas-horizontal-width: 400px; +$offcanvas-vertical-height: 30vh; +$offcanvas-transition-duration: .3s; +$offcanvas-border-color: $modal-content-border-color; +$offcanvas-border-width: $modal-content-border-width; +$offcanvas-title-line-height: $modal-title-line-height; +$offcanvas-bg-color: var(--#{$prefix}body-bg); +$offcanvas-color: var(--#{$prefix}body-color); +$offcanvas-box-shadow: $modal-content-box-shadow-xs; +$offcanvas-backdrop-bg: $modal-backdrop-bg; +$offcanvas-backdrop-opacity: $modal-backdrop-opacity; +$navbar-offcanvas-padding-top: 84px; +// scss-docs-end offcanvas-variables + +// Code + +$code-font-size: $small-font-size; +$code-color: $pink; + +$kbd-padding-y: .1875rem; +$kbd-padding-x: .375rem; +$kbd-font-size: $code-font-size; +$kbd-color: var(--#{$prefix}body-bg); +$kbd-bg: var(--#{$prefix}body-color); +$nested-kbd-font-weight: null; // Deprecated in v5.2.0, removing in v6 + +$pre-color: null; diff --git a/src/Themes/Custom/assets/webpack/scss/_overwrite-variables.scss b/src/Themes/Custom/assets/webpack/scss/_overwrite-variables.scss new file mode 100644 index 0000000000..5ed2020561 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/_overwrite-variables.scss @@ -0,0 +1 @@ +$pswp__assets-path: '/'; diff --git a/src/Themes/Custom/assets/webpack/scss/base/_base.scss b/src/Themes/Custom/assets/webpack/scss/base/_base.scss new file mode 100644 index 0000000000..8789183e1b --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/base/_base.scss @@ -0,0 +1,28 @@ +img { + max-width: 100%; +} + +// make sure images in a p tag (inserted through backend editor) have a max-width and max-height +p img { + max-width: 100%; + max-height: 100%; +} + +.skip-content { + height: 1px; + position: absolute; + left: 50%; + overflow: hidden; + width: 1px; + z-index: -1; + + &:focus { + height: auto; + width: auto; + z-index: 10; + } +} + +.box-shadow { + box-shadow: $box-shadow-sm; +} diff --git a/src/Themes/Custom/assets/webpack/scss/base/_fonts.scss b/src/Themes/Custom/assets/webpack/scss/base/_fonts.scss new file mode 100644 index 0000000000..e8d0e10795 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/base/_fonts.scss @@ -0,0 +1,19 @@ +@mixin font-import($font-name, $font-file, $style: normal, $weight: 400) { + + @font-face { + font-family: "#{$font-name}"; + src: url("../../fonts/#{$font-file}.eot"); /* IE9 Compat Modes */ + src: url("../../fonts/#{$font-file}.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */ + url("../../fonts/#{$font-file}.woff2") format('woff2'), + url("../../fonts/#{$font-file}.woff") format('woff'), /* Modern Browsers */ + url("../../fonts/#{$font-file}.ttf") format('truetype'), /* Safari, Android, iOS */ + url("../../fonts/#{$font-file}.svg") format('svg'); /* Legacy iOS */ + + font-style: $style; + font-weight: $weight; + } +} + +@include font-import(Poppins, Poppins-Regular, normal, 400); +@include font-import(Poppins, Poppins-SemiBold, normal, 600); +@include font-import(Poppins, Poppins-Bold, normal, 700); diff --git a/src/Themes/Custom/assets/webpack/scss/base/_gradients.scss b/src/Themes/Custom/assets/webpack/scss/base/_gradients.scss new file mode 100644 index 0000000000..ae24c622e7 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/base/_gradients.scss @@ -0,0 +1,9 @@ +// docs: https://github.com/larsenwork/postcss-easing-gradients +// editor: https://larsenwork.com/easing-gradients/#editor + +// standard gradient with easing. See docs for more examples. +.ease { + /* stylelint-disable */ + background: linear-gradient(green, ease, red); + /* stylelint-enable */ +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_alerts.scss b/src/Themes/Custom/assets/webpack/scss/components/_alerts.scss new file mode 100644 index 0000000000..ea2e050e9f --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_alerts.scss @@ -0,0 +1,8 @@ +.alert { + color: $white; + + a:not(.btn) { + color: $white; + text-decoration: underline; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_breadcrumbs.scss b/src/Themes/Custom/assets/webpack/scss/components/_breadcrumbs.scss new file mode 100644 index 0000000000..3953de3484 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_breadcrumbs.scss @@ -0,0 +1,4 @@ +.breadcrumb { + margin: 0; + padding: $paragraph-margin-bottom 0; +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_button-share.scss b/src/Themes/Custom/assets/webpack/scss/components/_button-share.scss new file mode 100644 index 0000000000..bc9f356483 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_button-share.scss @@ -0,0 +1,20 @@ +.btn-share { + color: $white; + padding: .375rem .5rem; + + &:hover, + &:focus { + color: $white; + } +} + +@each $color, $value in $brands { + .btn-#{$color} { + background: $value; + + &:hover, + &:focus { + background: darken($value, 15%); + } + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_cookiebar.scss b/src/Themes/Custom/assets/webpack/scss/components/_cookiebar.scss new file mode 100644 index 0000000000..7e7859cd1d --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_cookiebar.scss @@ -0,0 +1,9 @@ +.cookiebar { + border-radius: 0; + margin-bottom: 0; + padding: 0.75rem 0; + + .close { + font-size: $font-size-sm; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_dropdown.scss b/src/Themes/Custom/assets/webpack/scss/components/_dropdown.scss new file mode 100644 index 0000000000..3a34ad6904 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_dropdown.scss @@ -0,0 +1,22 @@ +.dropdown-toggle { + display: inline-flex; + align-items: center; + + // change fill color in background-image url to change dropdown-toggle icon color + &::after { + width: 12px; + height: 12px; + margin-top: 2px; + border: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath fill='%236c757d' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E"); + background-size: 12px; + background-repeat: no-repeat; + background-position: center; + } + + @include media-breakpoint-down(lg) { + &::after { + display: none; + } + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_error.scss b/src/Themes/Custom/assets/webpack/scss/components/_error.scss new file mode 100644 index 0000000000..5093cfeb77 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_error.scss @@ -0,0 +1,7 @@ +#error { + @include media-breakpoint-up(lg) { + h1 { + font-size: 4.5rem; + } + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_footer.scss b/src/Themes/Custom/assets/webpack/scss/components/_footer.scss new file mode 100644 index 0000000000..98d66ed3af --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_footer.scss @@ -0,0 +1,30 @@ +html, +body { + height: 100%; +} + +body { + display: flex; + flex-direction: column; +} + +#root { + flex: 1 0 auto; +} + +footer { + flex-shrink: 0; + background-color: $primary; + + .nav-link, .nav-link.disabled { + color: $white; + } + + .nav-link { + &:hover, + &:focus { + color: $white; + text-decoration: underline; + } + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_forms.scss b/src/Themes/Custom/assets/webpack/scss/components/_forms.scss new file mode 100644 index 0000000000..5efa70ab66 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_forms.scss @@ -0,0 +1,55 @@ +label { + + abbr[title], + abbr[data-original-title] { + border: none; + text-decoration: none; + } +} + +select.form-control[size] { + height: $input-height; +} + +.input-group .twitter-typeahead { + flex: 1 1 0%; + min-width: 0; + margin-bottom: 0; +} + +.grecaptcha-badge { + z-index: 9000; +} + +.has-danger { + .form-control-feedback, + .form-label { + color: $danger; + } + + .form-control { + border-color: $danger; + } +} + +.invalid-feedback { + display: block; +} + +abbr[title] { + border: 0; + text-decoration: none; +} + +select.form-control[size] { + height: $input-height; +} + +.input-group .twitter-typeahead { + float: none; + width: auto; +} + +.form-group { + margin-bottom: $spacer; +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_headers.scss b/src/Themes/Custom/assets/webpack/scss/components/_headers.scss new file mode 100644 index 0000000000..8a4d96b5a5 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_headers.scss @@ -0,0 +1,38 @@ +.header { + background-size: cover; + background-position: center; + min-height: 250px; + + .page-header { + border-bottom: 0; + text-align: center; + padding: 0; + + h1 { + font-size: $h2-font-size; + color: $white; + -webkit-font-smoothing: antialiased; + margin: 0; + } + } + + &.header-blue { + background-color: $blue-dark; + } +} + +@include media-breakpoint-up(lg) { + .header { + min-height: 350px; + + .page-header h1 { + font-size: $h1-font-size; + } + } +} + +@include media-breakpoint-up(xl) { + .header { + min-height: 400px; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_labels.scss b/src/Themes/Custom/assets/webpack/scss/components/_labels.scss new file mode 100644 index 0000000000..93c8ecaa8d --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_labels.scss @@ -0,0 +1,3 @@ +.label + .label { + margin-left: $form-label-margin-end; +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_lightbox.scss b/src/Themes/Custom/assets/webpack/scss/components/_lightbox.scss new file mode 100644 index 0000000000..651fee3e9e --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_lightbox.scss @@ -0,0 +1,13 @@ +.widget-media-library-lightbox { + line-height: 0; + column-count: 5; + column-gap: $grid-gutter-width * .5; + + img { + max-width: 100%; + } + + figcaption { + display: none; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_media-library-lightbox.scss b/src/Themes/Custom/assets/webpack/scss/components/_media-library-lightbox.scss new file mode 100644 index 0000000000..84e7cbd7a6 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_media-library-lightbox.scss @@ -0,0 +1,15 @@ +.grid-container { + &.grid-masonry { + columns: 3; + column-gap: 1rem; + + .grid-item { + display: inline-block; + text-align: center; + } + + figure { + margin-bottom: 1rem; + } + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_modules.scss b/src/Themes/Custom/assets/webpack/scss/components/_modules.scss new file mode 100644 index 0000000000..5c5a1649df --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_modules.scss @@ -0,0 +1,32 @@ +.block-heading, +.block-article-heading { + border-bottom: 0; + color: $primary; + font-size: $font-size-sm; + padding: 0 0 15px; + margin: 0; + + h1 { + font-size: $font-size-base * 3; + } + + h2, + h3 { + + a { + border-bottom: 2px solid $link-color; + + &:hover, + &:focus { + border-color: $link-hover-color; + text-decoration: none; + } + } + } +} + +.block-body { + img { + margin-bottom: $paragraph-margin-bottom; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_navbar-languages.scss b/src/Themes/Custom/assets/webpack/scss/components/_navbar-languages.scss new file mode 100644 index 0000000000..44f38dab22 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_navbar-languages.scss @@ -0,0 +1,29 @@ +.navbar-language { + @include media-breakpoint-down(lg) { + .nav-item { + .nav-link.dropdown-toggle { + padding: 8px $dropdown-item-padding-x 8px 0; + color: $primary; + } + } + + .dropdown, .dropdown-menu { + display: flex !important; + } + + .dropdown-item { + padding-top: 8px; + padding-bottom: 8px; + } + } + + .dropdown-item { + &:hover, &:focus { + color: $primary; + } + + &:active { + background-color: $white; + } + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_navbar-offcanvas.scss b/src/Themes/Custom/assets/webpack/scss/components/_navbar-offcanvas.scss new file mode 100644 index 0000000000..022e92a429 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_navbar-offcanvas.scss @@ -0,0 +1,47 @@ +.navbar { + @include media-breakpoint-down(lg) { + .offcanvas { + padding-top: $navbar-offcanvas-padding-top; + width: 100vw; + max-width: 100vw; + border-left: none; + + .offcanvas-body { + padding-top: 0; + display: flex; + flex-flow: column nowrap; + } + + .nav-item { + .nav-link { + color: $body-color; + } + + &.active { + .nav-link { + color: $primary; + } + } + } + + .dropdown-menu { + position: static; + display: block; + border: none; + padding: 0; + } + + .navbar-language { + .dropdown-toggle { + color: $primary; + } + } + } + } +} + +.nav-expanded { + .navbar-brand { + color: $primary; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_navbar-toggler.scss b/src/Themes/Custom/assets/webpack/scss/components/_navbar-toggler.scss new file mode 100644 index 0000000000..9a62714bb4 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_navbar-toggler.scss @@ -0,0 +1,91 @@ +$navbar-icon-width: 19px; +$navbar-icon-line-height: 2px; +$navbar-icon-color: $primary; +$navbar-icon-hover-color: $blue-dark; +$navbar-icon-open-color: $primary; +$navbar-icon-margin-x: 15px; +$navbar-icon-margin-y: 0; + +.navbar-toggler { + background-color: transparent; + border: none; + color: $dark; + z-index: 2000; + margin-left: 0.5rem; + margin-right: 0.5rem; + + &:focus { + box-shadow: none; + } + + &:hover, &:focus { + .navbar-toggler-icon { + background-color: $navbar-icon-hover-color; + + &::before, + &::after { + background-color: $navbar-icon-hover-color; + } + } + } + + .navbar-toggler-icon { + background-color: $navbar-icon-color; + background-image: none; + height: $navbar-icon-line-height; + margin: $navbar-icon-margin-x $navbar-icon-margin-y; + position: relative; + transition: background-color 0.20s ease-in-out; + width: $navbar-icon-width; + + &::before, + &::after { + transition-property: background-color, transform, top, bottom; + transition-duration: 0.20s; + transition-timing-function: ease-in-out; + background-color: $navbar-icon-color; + content: ''; + height: $navbar-icon-line-height; + left: 0; + position: absolute; + width: $navbar-icon-width; + } + + &::before { + top: -7px; + } + + &::after { + bottom: -7px; + } + } +} + +.nav-expanded { + .navbar-toggler-icon { + background-color: transparent !important; + + &::before, + &::after { + background-color: $navbar-icon-open-color !important; + } + + &:hover, &:focus { + &::before, + &::after { + background-color: $navbar-icon-open-color !important; + } + } + + &::before { + top: 0; + transform: rotate(45deg); + width: $navbar-icon-width; + } + + &::after { + bottom: 0; + transform: rotate(-45deg); + } + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_navbar.scss b/src/Themes/Custom/assets/webpack/scss/components/_navbar.scss new file mode 100644 index 0000000000..71393f321a --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_navbar.scss @@ -0,0 +1,56 @@ +.navbar-light { + border: 0; + margin-bottom: 0; + padding: 0; + + .navbar-nav { + .nav-item { + background-color: transparent; + + &.active { + background: transparent !important; + .nav-link { + color: $primary; + } + } + } + + .nav-link { + font-weight: 500; + -webkit-font-smoothing: antialiased; + } + + .nav-link:hover, + .nav-link:focus, + .dropdown-toggle-split:hover + .nav-link, + .dropdown-toggle-split:focus + .nav-link, + .nav-item.active { + color: $primary; + } + } +} + +.navbar-brand { + font-family: 'Courgette', "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: 0.8rem 0 0.8rem 1rem; + padding: 0; +} + +.navbar-toggler { + border: 0; + margin-right: 1rem; +} + +@include media-breakpoint-up(lg) { + .navbar-brand { + margin: 0.8rem 1rem 0.8rem 0; + } +} + +.navbar { + z-index: 1100; +} + +.navbar-brand { + z-index: 1100; +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_privacy-consent-dialog.scss b/src/Themes/Custom/assets/webpack/scss/components/_privacy-consent-dialog.scss new file mode 100644 index 0000000000..86f6e10341 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_privacy-consent-dialog.scss @@ -0,0 +1,42 @@ +#privacyConsentDialog { + position: fixed; + display: block; + height: auto; + max-height: calc(100vh - env(safe-area-inset-bottom)); + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100vw; + z-index: $zindex-modal - 1; + overflow-y: auto; + + form { + max-height: 100%; + overflow-y: auto; + } + + .modal-dialog { + margin: 1rem; + + @include media-breakpoint-up(md) { + margin: 3rem; + } + + .modal-header, .modal-body, .modal-footer { + padding: 1rem 1rem; + } + } + + .btn-link { + text-decoration: underline; + } + + + @include media-breakpoint-up(sm) { + left: unset; + right: unset; + top: unset; + width: auto; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_privacy_dialog.scss b/src/Themes/Custom/assets/webpack/scss/components/_privacy_dialog.scss new file mode 100644 index 0000000000..286054bc9b --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_privacy_dialog.scss @@ -0,0 +1,20 @@ +#privacyConsentDialog { + bottom: $spacer/2; + left: $spacer/2; + right: $spacer/2; + font-size: $font-size-sm; + position: fixed; + z-index: $zindex-modal - 1; + + .modal-dialog { + margin: 0; + } +} + +@include media-breakpoint-up(sm) { + #privacyConsentDialog { + bottom: $spacer; + left: $spacer; + right: auto; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_quote.scss b/src/Themes/Custom/assets/webpack/scss/components/_quote.scss new file mode 100644 index 0000000000..45413224a2 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_quote.scss @@ -0,0 +1,27 @@ +.blog-quote { + padding: ($spacer * 2) $spacer; + background-color: $gray-100; + position: relative; + text-align: center; + margin-bottom: 3rem; + + .quote-icon { + position: absolute; + font-size: 36px; + top: -28px; + color: $primary; + } + + .quote-text { + color: $blue; + font-weight: 600; + } + + figure { + margin-bottom: 0; + } + + .blockquote { + margin-bottom: 0; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_search.scss b/src/Themes/Custom/assets/webpack/scss/components/_search.scss new file mode 100644 index 0000000000..25496a0462 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_search.scss @@ -0,0 +1,18 @@ +@include media-breakpoint-down(lg) { + .search { + width: 100%; + + form { + width: 100%; + } + + .twitter-typeahead { + flex-grow: 1; + } + } + + .dropdown-menu.dropdown-search { + width: 80vw; + right: -100%; + } +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_sections.scss b/src/Themes/Custom/assets/webpack/scss/components/_sections.scss new file mode 100644 index 0000000000..a2dd544296 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_sections.scss @@ -0,0 +1,11 @@ +$section-padding-x: 70px; +$section-padding-x-sm: 50px; + + +.section-default { + padding: $section-padding-x-sm 0 $section-padding-x; +} + +.section-home { + padding: $section-padding-x 0; +} diff --git a/src/Themes/Custom/assets/webpack/scss/components/_slider.scss b/src/Themes/Custom/assets/webpack/scss/components/_slider.scss new file mode 100644 index 0000000000..ef39126586 --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/components/_slider.scss @@ -0,0 +1,9 @@ +.slick-prev { + left: 25px; + z-index: 10; +} + +.slick-next { + right: 25px; + z-index: 10; +} diff --git a/src/Themes/Custom/assets/webpack/scss/screen.scss b/src/Themes/Custom/assets/webpack/scss/screen.scss new file mode 100644 index 0000000000..4c36bb069b --- /dev/null +++ b/src/Themes/Custom/assets/webpack/scss/screen.scss @@ -0,0 +1,41 @@ +@charset 'UTF-8'; + +// import fonts first - remove when using CDN +@import "base/fonts"; + +// Bootstrap +@import "~bootstrap/scss/functions"; +@import 'bootstrap-variables'; +@import 'overwrite-variables'; +@import '~bootstrap/scss/variables'; +@import '~bootstrap/scss/variables-dark'; +@import 'bootstrap-imports'; + +// Base styles +@import 'base/base'; + +// Components +@import 'components/alerts'; +@import 'components/breadcrumbs'; +@import 'components/button'; +@import 'components/button-share'; +@import 'components/cookiebar'; +@import 'components/dropdown'; +@import 'components/error'; +@import 'components/footer'; +@import 'components/forms'; +@import 'components/headers'; +@import 'components/labels'; +@import 'components/lightbox'; +@import 'components/media-library-lightbox'; +@import 'components/modules'; +@import 'components/navbar'; +@import 'components/navbar-languages'; +@import 'components/navbar-offcanvas'; +@import 'components/navbar-toggler'; +@import 'components/privacy_dialog'; +@import 'components/privacy-consent-dialog'; +@import 'components/quote'; +@import 'components/search'; +@import 'components/sections'; +@import 'components/slider'; diff --git a/src/Themes/Custom/templates/Blog/Actions/Article.html.twig b/src/Themes/Custom/templates/Blog/Actions/Article.html.twig new file mode 100644 index 0000000000..1dea5e08a7 --- /dev/null +++ b/src/Themes/Custom/templates/Blog/Actions/Article.html.twig @@ -0,0 +1,78 @@ +{% macro preview(item) %} +
+ + + +
+
+
+ {% if not item.introduction %} + {{ item.text|parse_blocks }} + {% else %} + {{ item.introduction|parse_blocks }} + {% endif %} +
+ {% if item.image %} +
+ {{ item.title }} +
+ {% endif %} +
+
+
+{% endmacro %} diff --git a/src/Themes/Custom/templates/Blog/Actions/Category.html.twig b/src/Themes/Custom/templates/Blog/Actions/Category.html.twig new file mode 100644 index 0000000000..3bdbf4003c --- /dev/null +++ b/src/Themes/Custom/templates/Blog/Actions/Category.html.twig @@ -0,0 +1,11 @@ +{% extends "@ForkFrontendModules/Blog/Layout/Templates/Category.html.twig" %} + +{% import "Modules/Blog/Layout/Templates/Article.html.twig" as article %} + +{% block block_body %} +
+ {% for item in items %} + {{ article.preview(item) }} + {% endfor %} +
+{% endblock %} diff --git a/src/Themes/Custom/templates/Blog/Actions/Detail.html.twig b/src/Themes/Custom/templates/Blog/Actions/Detail.html.twig new file mode 100644 index 0000000000..0e453e882d --- /dev/null +++ b/src/Themes/Custom/templates/Blog/Actions/Detail.html.twig @@ -0,0 +1,66 @@ +{% extends "@ForkFrontendModules/Blog/Layout/Templates/Detail.html.twig" %} + +{% block block_heading %} + +{% endblock %} + +{% block block_body %} +
+ {% if item.image %} + {{ item.title }} + {% endif %} + {{ item.text|parse_blocks }} +
+
+

{{ 'lbl.Share'|trans|ucfirst }}:

+ +
+{% endblock %} diff --git a/src/Themes/Custom/templates/Blog/Actions/Index.html.twig b/src/Themes/Custom/templates/Blog/Actions/Index.html.twig new file mode 100644 index 0000000000..e13ce1a653 --- /dev/null +++ b/src/Themes/Custom/templates/Blog/Actions/Index.html.twig @@ -0,0 +1,10 @@ +{% extends "@ForkFrontendModules/Blog/Layout/Templates/Index.html.twig" %} +{% import "Modules/Blog/Layout/Templates/Article.html.twig" as article %} + +{% block block_body %} +
+ {% for item in items %} + {{ article.preview(item) }} + {% endfor %} +
+{% endblock %} diff --git a/src/Themes/Custom/templates/Blog/Widgets/RecentArticlesFull.html.twig b/src/Themes/Custom/templates/Blog/Widgets/RecentArticlesFull.html.twig new file mode 100644 index 0000000000..33214f4484 --- /dev/null +++ b/src/Themes/Custom/templates/Blog/Widgets/RecentArticlesFull.html.twig @@ -0,0 +1,81 @@ +{% extends "@ForkFrontendModules/Blog/Layout/Widgets/RecentArticlesFull.html.twig" %} + +{% block widget_body %} +
+ {% for post in widgetBlogRecentArticlesFull %} +
+ + + + + +
+ {% if post.image %} + {{ post.title }} + {% endif %} + {% if not post.introduction %} + {{ post.text|parse_blocks }} + {% else %} + {{ post.introduction|parse_blocks }} + {% endif %} +
+
+ {% endfor %} +
+{% endblock %} diff --git a/src/Themes/Custom/templates/Frontend/base/Base.html.twig b/src/Themes/Custom/templates/Frontend/base/Base.html.twig new file mode 100644 index 0000000000..6d24f64ebf --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Base.html.twig @@ -0,0 +1,54 @@ +{% include "@Frontend/base/Head.html.twig" %} + + +{# Site wide HTML just after body tag #} +{{ site_html_start_of_body|raw }} + +
+ {% block privacyConsentDialog %} + {% include "@Frontend/base/PrivacyConsentDialog.html.twig" %} + {% endblock %} + + {% block navigation %} + {% include "@Frontend/base/Navbar.html.twig" %} + {% endblock %} + +
+
+ {% block pageTitle %} + {% if not hideContentTitle %} +
+

{{ contentTitle }}

+
+ {% endif %} + {% endblock %} +
+
+ +
+ {% block breadcrumb %} +
+
+ {% include "@Frontend/base/Breadcrumb.html.twig" %} +
+
+ {% endblock %} + + {% block mainContent %} + {% endblock %} +
+ +
+{% block footer %} + {% include "@Frontend/base/Footer.html.twig" %} +{% endblock %} + +{# General Javascript #} +{% for js in jsFiles %} + +{% endfor %} + +{# Site wide HTML just before closing body tag #} +{{ site_html_end_of_body|raw }} + + diff --git a/src/Themes/Custom/templates/Frontend/base/Default.html.twig b/src/Themes/Custom/templates/Frontend/base/Default.html.twig new file mode 100644 index 0000000000..9c811b0bbf --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Default.html.twig @@ -0,0 +1,12 @@ +{% extends '@Frontend/base/Base.html.twig' %} + +{% block mainContent %} +
+
+
+ {% block main %} + {% endblock %} +
+
+
+{% endblock %} diff --git a/src/Themes/Custom/templates/Frontend/base/Error.html.twig b/src/Themes/Custom/templates/Frontend/base/Error.html.twig new file mode 100644 index 0000000000..c187a7c0c9 --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Error.html.twig @@ -0,0 +1,15 @@ +{% extends 'Core/Layout/Templates/Base.html.twig' %} + +{% block main %} +
+ {% include 'Core/Layout/Templates/Breadcrumb.html.twig' %} +
+ +
+ {% for block in positions.main %} + {% if block.html %} + {{ block.html|raw }} + {% endif %} + {% endfor %} +
+{% endblock %} diff --git a/src/Themes/Custom/templates/Frontend/base/Footer.html.twig b/src/Themes/Custom/templates/Frontend/base/Footer.html.twig new file mode 100644 index 0000000000..17b0c49671 --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Footer.html.twig @@ -0,0 +1,23 @@ + diff --git a/src/Themes/Custom/templates/Frontend/base/Head.html.twig b/src/Themes/Custom/templates/Frontend/base/Head.html.twig new file mode 100644 index 0000000000..07e8d4a05e --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Head.html.twig @@ -0,0 +1,43 @@ + + + + + + + {# {{ meta|raw }}#} + {# {{ metaCustom|raw }}#} + + {{ page_title|ucfirst }} | {{ siteTitle }} + + {# Favicon and Apple touch icon #} + + + + {# Windows tile #} + + + + + {# Font awesome #} + + + {# Stylesheets #} + {{ encore_entry_script_tags('Custom/js/Fork', null, 'ThemeConfig') }} + {{ encore_entry_link_tags('Custom/css/screen', null, 'ThemeConfig') }} + + {# Site wide HTML in the head tag #} + {{ site_html_head|raw }} + + {# Google Fonts #} + + + {% for cssFile in cssFiles %} + + {% endfor %} + + {% if app.debug %} + + {% endif %} + + {{ jsData|raw }} + diff --git a/src/Themes/Custom/templates/Frontend/base/Home.html.twig b/src/Themes/Custom/templates/Frontend/base/Home.html.twig new file mode 100644 index 0000000000..850f525646 --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Home.html.twig @@ -0,0 +1,15 @@ +{% extends '@Frontend/base/Base.html.twig' %} + +{% block breadcrumb %} +{% endblock %} + +{% block mainContent %} +
+
+
+ {% block main %} + {% endblock %} +
+
+
+{% endblock %} diff --git a/src/Themes/Custom/templates/Frontend/base/Languages.html.twig b/src/Themes/Custom/templates/Frontend/base/Languages.html.twig new file mode 100644 index 0000000000..55d29817d9 --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Languages.html.twig @@ -0,0 +1,21 @@ +{% if locales is defined and locales|count > 1 %} + +{% endif %} diff --git a/src/Themes/Custom/templates/Frontend/base/Navbar.html.twig b/src/Themes/Custom/templates/Frontend/base/Navbar.html.twig new file mode 100644 index 0000000000..19f32c6eae --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Navbar.html.twig @@ -0,0 +1,40 @@ + diff --git a/src/Themes/Custom/templates/Frontend/base/Navigation.html.twig b/src/Themes/Custom/templates/Frontend/base/Navigation.html.twig new file mode 100644 index 0000000000..2e9e39624c --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/Navigation.html.twig @@ -0,0 +1,20 @@ +{% if navigation %} + +{% endif %} diff --git a/src/Themes/Custom/templates/Frontend/base/NavigationDropdown.html.twig b/src/Themes/Custom/templates/Frontend/base/NavigationDropdown.html.twig new file mode 100644 index 0000000000..2be9c0f7eb --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/NavigationDropdown.html.twig @@ -0,0 +1,7 @@ +{% if navigation %} + {% for nav in navigation %} +
  • + {{ nav.navigation_title|e('html') }} +
    • + {% endfor %} +{% endif %} diff --git a/src/Themes/Custom/templates/Frontend/base/PrivacyConsentDialog.html.twig b/src/Themes/Custom/templates/Frontend/base/PrivacyConsentDialog.html.twig new file mode 100644 index 0000000000..d1acc672c7 --- /dev/null +++ b/src/Themes/Custom/templates/Frontend/base/PrivacyConsentDialog.html.twig @@ -0,0 +1,70 @@ +{% if privacyConsentEnabled %} + +{% endif %} diff --git a/src/Themes/Custom/theme.xml b/src/Themes/Custom/theme.xml new file mode 100644 index 0000000000..c1e9e6c22f --- /dev/null +++ b/src/Themes/Custom/theme.xml @@ -0,0 +1,34 @@ + + + Custom + 1.0.0 + + 6.0.0 + 7.0.0 + + + + Sumocoders + https://www.sumocoders.be + + + images/thumbnail.png + + + + + + + + + diff --git a/src/Themes/Fork/assets/webpack/scss/_bootstrap-imports.scss b/src/Themes/Fork/assets/webpack/scss/_bootstrap-imports.scss index d85eb9b680..22474e2cc9 100644 --- a/src/Themes/Fork/assets/webpack/scss/_bootstrap-imports.scss +++ b/src/Themes/Fork/assets/webpack/scss/_bootstrap-imports.scss @@ -7,45 +7,46 @@ // scss-docs-start import-stack // Configuration -//@import "~bootstrap/scss/functions"; -//@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/utilities"; +//@import "bootstrap/scss/functions"; +//@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; // Layout & components -@import "~bootstrap/scss/root"; -@import "~bootstrap/scss/reboot"; -@import "~bootstrap/scss/type"; -@import "~bootstrap/scss/images"; -@import "~bootstrap/scss/containers"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/tables"; -@import "~bootstrap/scss/forms"; -@import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/transitions"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; -@import "~bootstrap/scss/card"; -@import "~bootstrap/scss/accordion"; -@import "~bootstrap/scss/breadcrumb"; -@import "~bootstrap/scss/pagination"; -@import "~bootstrap/scss/badge"; -@import "~bootstrap/scss/alert"; -@import "~bootstrap/scss/progress"; -@import "~bootstrap/scss/list-group"; -@import "~bootstrap/scss/close"; -@import "~bootstrap/scss/toasts"; -@import "~bootstrap/scss/modal"; -@import "~bootstrap/scss/tooltip"; -@import "~bootstrap/scss/popover"; -@import "~bootstrap/scss/carousel"; -@import "~bootstrap/scss/spinners"; -@import "~bootstrap/scss/offcanvas"; +@import "bootstrap/scss/root"; +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/containers"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/transitions"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/accordion"; +@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/badge"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/progress"; +@import "bootstrap/scss/list-group"; +@import "bootstrap/scss/close"; +@import "bootstrap/scss/toasts"; +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/carousel"; +@import "bootstrap/scss/spinners"; +@import "bootstrap/scss/offcanvas"; // Helpers -@import "~bootstrap/scss/helpers"; +@import "bootstrap/scss/helpers"; // Utilities -@import "~bootstrap/scss/utilities/api"; +@import "bootstrap/scss/utilities/api"; +// scss-docs-end import-stack diff --git a/src/Themes/Fork/assets/webpack/scss/_bootstrap-variables.scss b/src/Themes/Fork/assets/webpack/scss/_bootstrap-variables.scss index 25ac1da24e..a8b2404408 100644 --- a/src/Themes/Fork/assets/webpack/scss/_bootstrap-variables.scss +++ b/src/Themes/Fork/assets/webpack/scss/_bootstrap-variables.scss @@ -1,5 +1,3 @@ -$bootstrap-sass-asset-helper: false; - // Variables // // Variables should follow the `$component-state-property-size` formula for @@ -25,15 +23,15 @@ $black: #000; // 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 + "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 ); // scss-docs-end gray-colors-map // fusv-enable @@ -81,32 +79,6 @@ $brands: ( ); // scss-docs-end brands-map -// scss-docs-start theme-color-variables -$primary: $blue; -$secondary: $gray-600; -$success: $green; -$info: $cyan; -$warning: $yellow; -$danger: $red; -$light: $gray-100; -$middle: $gray-550; -$dark: $gray-800; -// scss-docs-end theme-color-variables - -// scss-docs-start theme-colors-map -$theme-colors: ( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "middle": $middle, - "dark": $dark -); -// scss-docs-end theme-colors-map - // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast $min-contrast-ratio: 4.5; @@ -215,15 +187,194 @@ $cyan-600: shade-color($cyan, 20%); $cyan-700: shade-color($cyan, 40%); $cyan-800: shade-color($cyan, 60%); $cyan-900: shade-color($cyan, 80%); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); + +$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 +); // fusv-enable +// scss-docs-start theme-color-variables +$primary: $blue; +$secondary: $gray-600; +$success: $green; +$info: $cyan; +$warning: $yellow; +$danger: $red; +$light: $gray-100; +$middle: $gray-550; +$dark: $gray-800; +// scss-docs-end theme-color-variables + +// scss-docs-start theme-colors-map +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "middle": $middle, + "dark": $dark +); +// scss-docs-end theme-colors-mapçc + +// scss-docs-start theme-text-variables +$primary-text-emphasis: shade-color($primary, 60%); +$secondary-text-emphasis: shade-color($secondary, 60%); +$success-text-emphasis: shade-color($success, 60%); +$info-text-emphasis: shade-color($info, 60%); +$warning-text-emphasis: shade-color($warning, 60%); +$danger-text-emphasis: shade-color($danger, 60%); +$light-text-emphasis: $gray-700; +$dark-text-emphasis: $gray-700; +// scss-docs-end theme-text-variables + +// scss-docs-start theme-bg-subtle-variables +$primary-bg-subtle: tint-color($primary, 80%); +$secondary-bg-subtle: tint-color($secondary, 80%); +$success-bg-subtle: tint-color($success, 80%); +$info-bg-subtle: tint-color($info, 80%); +$warning-bg-subtle: tint-color($warning, 80%); +$danger-bg-subtle: tint-color($danger, 80%); +$light-bg-subtle: mix($gray-100, $white); +$dark-bg-subtle: $gray-400; +// scss-docs-end theme-bg-subtle-variables + +// scss-docs-start theme-border-subtle-variables +$primary-border-subtle: tint-color($primary, 60%); +$secondary-border-subtle: tint-color($secondary, 60%); +$success-border-subtle: tint-color($success, 60%); +$info-border-subtle: tint-color($info, 60%); +$warning-border-subtle: tint-color($warning, 60%); +$danger-border-subtle: tint-color($danger, 60%); +$light-border-subtle: $gray-200; +$dark-border-subtle: $gray-500; +// scss-docs-end theme-border-subtle-variables + // Characters which are escaped by the escape-svg function $escaped-characters: ( - ("<", "%3c"), - (">", "%3e"), - ("#", "%23"), - ("(", "%28"), - (")", "%29"), + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), ); // Options @@ -238,6 +389,8 @@ $enable-transitions: true; $enable-reduced-motion: true; $enable-smooth-scroll: true; $enable-grid-classes: true; +$enable-container-classes: true; +$enable-cssgrid: false; $enable-button-pointers: true; $enable-rfs: true; $enable-validation-icons: true; @@ -245,9 +398,13 @@ $enable-negative-margins: false; $enable-deprecation-messages: true; $enable-important-utilities: true; +$enable-dark-mode: false; +$color-mode-type: data; // `data` or `media-query` + // Prefix for :root CSS variables -$variable-prefix: bs-; +$variable-prefix: bs-; // Deprecated in v5.2.0 for the shorter `$prefix` +$prefix: $variable-prefix; // Gradient // @@ -266,15 +423,13 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); // scss-docs-start spacer-variables-maps $spacer: 1rem; $spacers: ( - 0: 0, - 1: $spacer / 4, - 2: $spacer / 2, - 3: $spacer, - 4: $spacer * 1.5, - 5: $spacer * 3, + 0: 0, + 1: $spacer * .25, + 2: $spacer * .5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, ); - -$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null); // scss-docs-end spacer-variables-maps // Position @@ -283,9 +438,9 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null); // scss-docs-start position-map $position-values: ( - 0: 0, - 50: 50%, - 100: 100% + 0: 0, + 50: 50%, + 100: 100% ); // scss-docs-end position-map @@ -293,24 +448,40 @@ $position-values: ( // // Settings for the `` element. -$body-bg: $white; -$body-color: $gray-900; $body-text-align: null; +$body-color: $gray-900; +$body-bg: $white; + +$body-secondary-color: rgba($body-color, .75); +$body-secondary-bg: $gray-200; + +$body-tertiary-color: rgba($body-color, .5); +$body-tertiary-bg: $gray-100; +$body-emphasis-color: $black; // Links // // Style anchor elements. -$link-color: $blue-dark; -$link-decoration: none; +$link-color: $primary; +$link-decoration: underline; $link-shade-percentage: 20%; -$link-hover-color: $blue-darker; -$link-hover-decoration: underline; +$link-hover-color: shift-color($link-color, $link-shade-percentage); +$link-hover-decoration: null; $stretched-link-pseudo-element: after; $stretched-link-z-index: 1; +// Icon links +// scss-docs-start icon-link-variables +$icon-link-gap: .375rem; +$icon-link-underline-offset: .25em; +$icon-link-icon-size: 1em; +$icon-link-icon-transition: .2s ease-in-out transform; +$icon-link-icon-transform: translate3d(.25em, 0, 0); +// scss-docs-end icon-link-variables + // Paragraphs // // Style p element. @@ -325,12 +496,12 @@ $paragraph-margin-bottom: 1rem; // scss-docs-start grid-breakpoints $grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px ); // scss-docs-end grid-breakpoints @@ -344,11 +515,11 @@ $grid-breakpoints: ( // scss-docs-start container-max-widths $container-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px, - xxl: 1320px + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px ); // scss-docs-end container-max-widths @@ -363,11 +534,9 @@ $grid-columns: 12; $grid-gutter-width: 1.5rem; $grid-row-columns: 6; -$gutters: $spacers; - // Container padding -$container-padding-x: $grid-gutter-width / 2; +$container-padding-x: $grid-gutter-width; // Components @@ -377,22 +546,28 @@ $container-padding-x: $grid-gutter-width / 2; // scss-docs-start border-variables $border-width: 1px; $border-widths: ( - 1: 1px, - 2: 2px, - 3: 3px, - 4: 4px, - 5: 5px + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px ); - +$border-style: solid; $border-color: $gray-300; +$border-color-translucent: rgba($black, .175); // scss-docs-end border-variables // scss-docs-start border-radius-variables -$border-radius: .25rem; -$border-radius-sm: .2rem; -$border-radius-lg: .3rem; +$border-radius: .375rem; +$border-radius-sm: .25rem; +$border-radius-lg: .5rem; +$border-radius-xl: 1rem; +$border-radius-xxl: 2rem; $border-radius-pill: 50rem; // scss-docs-end border-radius-variables +// fusv-disable +$border-radius-2xl: $border-radius-xxl; // Deprecated in v5.3.0 +// fusv-enable // scss-docs-start box-shadow-variables $box-shadow: 0 .5rem 1rem rgba($black, .15); @@ -404,6 +579,14 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075); $component-active-color: $white; $component-active-bg: $primary; +// scss-docs-start focus-ring-variables +$focus-ring-width: .25rem; +$focus-ring-opacity: .25; +$focus-ring-color: rgba($primary, $focus-ring-opacity); +$focus-ring-blur: 0; +$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color; +// scss-docs-end focus-ring-variables + // scss-docs-start caret-variables $caret-width: .3em; $caret-vertical-align: $caret-width * .85; @@ -414,15 +597,16 @@ $transition-base: all .2s ease-in-out; $transition-fade: opacity .15s linear; // scss-docs-start collapse-transition $transition-collapse: height .35s ease; +$transition-collapse-width: width .35s ease; // scss-docs-end collapse-transition // stylelint-disable function-disallowed-list // scss-docs-start aspect-ratios $aspect-ratios: ( - "1x1": 100%, - "4x3": calc(3 / 4 * 100%), - "16x9": calc(9 / 16 * 100%), - "21x9": calc(9 / 21 * 100%) + "1x1": 100%, + "4x3": calc(3 / 4 * 100%), + "16x9": calc(9 / 16 * 100%), + "21x9": calc(9 / 21 * 100%) ); // scss-docs-end aspect-ratios // stylelint-enable function-disallowed-list @@ -433,15 +617,14 @@ $aspect-ratios: ( // scss-docs-start font-variables // stylelint-disable value-keyword-case -$font-family-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -$font-family-base: $font-family-sans-serif; // stylelint-enable value-keyword-case -$font-family-base: var(--#{$variable-prefix}font-sans-serif); -$font-family-code: var(--#{$variable-prefix}font-monospace); +$font-family-base: var(--#{$prefix}font-sans-serif); +$font-family-code: var(--#{$prefix}font-monospace); -// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins -// $font-size-base effects the font size of the body text +// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins +// $font-size-base affects the font size of the body text $font-size-root: null; $font-size-base: 1rem; // Assumes the browser default, typically `16px` $font-size-sm: $font-size-base * .875; @@ -450,6 +633,8 @@ $font-size-lg: $font-size-base * 1.25; $font-weight-lighter: lighter; $font-weight-light: 300; $font-weight-normal: 400; +$font-weight-medium: 500; +$font-weight-semibold: 600; $font-weight-bold: 700; $font-weight-bolder: bolder; @@ -459,9 +644,9 @@ $line-height-base: 1.5; $line-height-sm: 1.25; $line-height-lg: 2; -$h1-font-size: $font-size-base * 5; -$h2-font-size: $font-size-base * 2.375; -$h3-font-size: $font-size-base * 1.875; +$h1-font-size: $font-size-base * 2.5; +$h2-font-size: $font-size-base * 2; +$h3-font-size: $font-size-base * 1.75; $h4-font-size: $font-size-base * 1.5; $h5-font-size: $font-size-base * 1.25; $h6-font-size: $font-size-base; @@ -469,33 +654,36 @@ $h6-font-size: $font-size-base; // scss-docs-start font-sizes $font-sizes: ( - 1: $h1-font-size, - 2: $h2-font-size, - 3: $h3-font-size, - 4: $h4-font-size, - 5: $h5-font-size, - 6: $h6-font-size + 1: $h1-font-size, + 2: $h2-font-size, + 3: $h3-font-size, + 4: $h4-font-size, + 5: $h5-font-size, + 6: $h6-font-size ); // scss-docs-end font-sizes // scss-docs-start headings-variables -$headings-margin-bottom: $spacer / 2; +$headings-margin-bottom: $spacer * .5; $headings-font-family: null; $headings-font-style: null; -$headings-font-weight: 900; +$headings-font-weight: 500; $headings-line-height: 1.2; -$headings-color: $blue-dark; +$headings-color: inherit; +// scss-docs-end headings-variables // scss-docs-start display-headings $display-font-sizes: ( - 1: 5rem, - 2: 4.5rem, - 3: 4rem, - 4: 3.5rem, - 5: 3rem, - 6: 2.5rem + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem ); +$display-font-family: null; +$display-font-style: null; $display-font-weight: 300; $display-line-height: $headings-line-height; // scss-docs-end display-headings @@ -508,7 +696,9 @@ $small-font-size: .875em; $sub-sup-font-size: .75em; -$text-muted: $gray-600; +// fusv-disable +$text-muted: var(--#{$prefix}secondary-color); // Deprecated in 5.3.0 +// fusv-enable $initialism-font-size: $small-font-size; @@ -519,22 +709,30 @@ $blockquote-footer-font-size: $small-font-size; $hr-margin-y: $spacer; $hr-color: inherit; -$hr-height: $border-width; + +// fusv-disable +$hr-bg-color: null; // Deprecated in v5.2.0 +$hr-height: null; // Deprecated in v5.2.0 +// fusv-enable + +$hr-border-color: null; // Allows for inherited colors +$hr-border-width: var(--#{$prefix}border-width); $hr-opacity: .25; +// scss-docs-start vr-variables +$vr-border-width: var(--#{$prefix}border-width); +// scss-docs-end vr-variables + $legend-margin-bottom: .5rem; $legend-font-size: 1.5rem; $legend-font-weight: null; -$mark-padding: .2em; - $dt-font-weight: $font-weight-bold; -$nested-kbd-font-weight: $font-weight-bold; - $list-inline-padding: .5rem; -$mark-bg: #fcf8e3; +$mark-padding: .1875em; +$mark-bg: $yellow-100; // scss-docs-end type-variables @@ -550,8 +748,9 @@ $table-cell-padding-x-sm: .25rem; $table-cell-vertical-align: top; -$table-color: $body-color; -$table-bg: transparent; +$table-color: var(--#{$prefix}body-color); +$table-bg: var(--#{$prefix}body-bg); +$table-accent-bg: transparent; $table-th-font-weight: null; @@ -568,28 +767,29 @@ $table-hover-bg-factor: .075; $table-hover-bg: rgba($black, $table-hover-bg-factor); $table-border-factor: .1; -$table-border-width: $border-width; -$table-border-color: $border-color; +$table-border-width: var(--#{$prefix}border-width); +$table-border-color: var(--#{$prefix}border-color); $table-striped-order: odd; +$table-striped-columns-order: even; -$table-group-separator-color: currentColor; +$table-group-separator-color: currentcolor; -$table-caption-color: $text-muted; +$table-caption-color: var(--#{$prefix}secondary-color); $table-bg-scale: -80%; // scss-docs-end table-variables // scss-docs-start table-loop $table-variants: ( - "primary": shift-color($primary, $table-bg-scale), - "secondary": shift-color($secondary, $table-bg-scale), - "success": shift-color($success, $table-bg-scale), - "info": shift-color($info, $table-bg-scale), - "warning": shift-color($warning, $table-bg-scale), - "danger": shift-color($danger, $table-bg-scale), - "light": $light, - "dark": $dark, + "primary": shift-color($primary, $table-bg-scale), + "secondary": shift-color($secondary, $table-bg-scale), + "success": shift-color($success, $table-bg-scale), + "info": shift-color($info, $table-bg-scale), + "warning": shift-color($warning, $table-bg-scale), + "danger": shift-color($danger, $table-bg-scale), + "light": $light, + "dark": $dark, ); // scss-docs-end table-loop @@ -605,11 +805,11 @@ $input-btn-font-family: null; $input-btn-font-size: $font-size-base; $input-btn-line-height: $line-height-base; -$input-btn-focus-width: .25rem; -$input-btn-focus-color-opacity: .25; -$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity); -$input-btn-focus-blur: 0; -$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color; +$input-btn-focus-width: $focus-ring-width; +$input-btn-focus-color-opacity: $focus-ring-opacity; +$input-btn-focus-color: $focus-ring-color; +$input-btn-focus-blur: $focus-ring-blur; +$input-btn-focus-box-shadow: $focus-ring-box-shadow; $input-btn-padding-y-sm: .25rem; $input-btn-padding-x-sm: .5rem; @@ -619,7 +819,7 @@ $input-btn-padding-y-lg: .5rem; $input-btn-padding-x-lg: 1rem; $input-btn-font-size-lg: $font-size-lg; -$input-btn-border-width: $border-width; +$input-btn-border-width: var(--#{$prefix}border-width); // scss-docs-end input-btn-variables @@ -628,6 +828,7 @@ $input-btn-border-width: $border-width; // For each of Bootstrap's buttons, define text, background, and border color. // scss-docs-start btn-variables +$btn-color: var(--#{$prefix}body-color); $btn-padding-y: $input-btn-padding-y; $btn-padding-x: $input-btn-padding-x; $btn-font-family: $input-btn-font-family; @@ -652,14 +853,14 @@ $btn-focus-box-shadow: $input-btn-focus-box-shadow; $btn-disabled-opacity: .65; $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); -$btn-link-color: $link-color; -$btn-link-hover-color: $link-hover-color; +$btn-link-color: var(--#{$prefix}link-color); +$btn-link-hover-color: var(--#{$prefix}link-hover-color); $btn-link-disabled-color: $gray-600; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius; -$btn-border-radius-sm: $border-radius-sm; -$btn-border-radius-lg: $border-radius-lg; +$btn-border-radius: var(--#{$prefix}border-radius); +$btn-border-radius-sm: var(--#{$prefix}border-radius-sm); +$btn-border-radius-lg: var(--#{$prefix}border-radius-lg); $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; @@ -681,7 +882,7 @@ $form-text-margin-top: .25rem; $form-text-font-size: $small-font-size; $form-text-font-style: null; $form-text-font-weight: null; -$form-text-color: $text-muted; +$form-text-color: var(--#{$prefix}secondary-color); // scss-docs-end form-text-variables // scss-docs-start form-label-variables @@ -708,18 +909,19 @@ $input-padding-y-lg: $input-btn-padding-y-lg; $input-padding-x-lg: $input-btn-padding-x-lg; $input-font-size-lg: $input-btn-font-size-lg; -$input-bg: $white; -$input-disabled-bg: $gray-200; +$input-bg: var(--#{$prefix}body-bg); +$input-disabled-color: null; +$input-disabled-bg: var(--#{$prefix}secondary-bg); $input-disabled-border-color: null; -$input-color: $body-color; -$input-border-color: $gray-400; +$input-color: var(--#{$prefix}body-color); +$input-border-color: var(--#{$prefix}border-color); $input-border-width: $input-btn-border-width; $input-box-shadow: $box-shadow-inset; -$input-border-radius: $border-radius; -$input-border-radius-sm: $border-radius-sm; -$input-border-radius-lg: $border-radius-lg; +$input-border-radius: var(--#{$prefix}border-radius); +$input-border-radius-sm: var(--#{$prefix}border-radius-sm); +$input-border-radius-lg: var(--#{$prefix}border-radius-lg); $input-focus-bg: $input-bg; $input-focus-border-color: tint-color($component-active-bg, 50%); @@ -727,20 +929,22 @@ $input-focus-color: $input-color; $input-focus-width: $input-btn-focus-width; $input-focus-box-shadow: $input-btn-focus-box-shadow; -$input-placeholder-color: $gray-600; -$input-plaintext-color: $body-color; +$input-placeholder-color: var(--#{$prefix}secondary-color); +$input-plaintext-color: var(--#{$prefix}body-color); -$input-height-border: $input-border-width * 2; +$input-height-border: calc(#{$input-border-width} * 2); // stylelint-disable-line function-disallowed-list $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2); $input-height-inner-half: add($input-line-height * .5em, $input-padding-y); -$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2); +$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5); $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)); $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)); $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)); $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + +$form-color-width: 3rem; // scss-docs-end form-input-variables // scss-docs-start form-check-variables @@ -755,16 +959,16 @@ $form-check-transition: null; $form-check-input-active-filter: brightness(90%); $form-check-input-bg: $input-bg; -$form-check-input-border: 1px solid rgba($black, .25); +$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); $form-check-input-border-radius: .25em; $form-check-radio-border-radius: 50%; $form-check-input-focus-border: $input-focus-border-color; -$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow; +$form-check-input-focus-box-shadow: $focus-ring-box-shadow; $form-check-input-checked-color: $component-active-color; $form-check-input-checked-bg-color: $component-active-bg; $form-check-input-checked-border-color: $form-check-input-checked-bg-color; -$form-check-input-checked-bg-image: url("data:image/svg+xml,"); +$form-check-input-checked-bg-image: url("data:image/svg+xml,"); $form-check-radio-checked-bg-image: url("data:image/svg+xml,"); $form-check-input-indeterminate-color: $component-active-color; @@ -780,7 +984,7 @@ $form-check-inline-margin-end: 1rem; // scss-docs-end form-check-variables // scss-docs-start form-switch-variables -$form-switch-color: rgba(0, 0, 0, .25); +$form-switch-color: rgba($black, .25); $form-switch-width: 2em; $form-switch-padding-start: $form-switch-width + .5em; $form-switch-bg-image: url("data:image/svg+xml,"); @@ -800,7 +1004,7 @@ $input-group-addon-padding-y: $input-padding-y; $input-group-addon-padding-x: $input-padding-x; $input-group-addon-font-weight: $input-font-weight; $input-group-addon-color: $input-color; -$input-group-addon-bg: $gray-200; +$input-group-addon-bg: var(--#{$prefix}tertiary-bg); $input-group-addon-border-color: $input-border-color; // scss-docs-end input-group-variables @@ -815,12 +1019,12 @@ $form-select-line-height: $input-line-height; $form-select-color: $input-color; $form-select-bg: $input-bg; $form-select-disabled-color: null; -$form-select-disabled-bg: $gray-200; +$form-select-disabled-bg: $input-disabled-bg; $form-select-disabled-border-color: $input-disabled-border-color; $form-select-bg-position: right $form-select-padding-x center; $form-select-bg-size: 16px 12px; // In pixels because image dimensions $form-select-indicator-color: $gray-800; -$form-select-indicator: url("data:image/svg+xml,"); +$form-select-indicator: url("data:image/svg+xml,"); $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding; $form-select-feedback-icon-position: center right $form-select-indicator-padding; @@ -828,7 +1032,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i $form-select-border-width: $input-border-width; $form-select-border-color: $input-border-color; -$form-select-border-radius: $border-radius; +$form-select-border-radius: $input-border-radius; $form-select-box-shadow: $box-shadow-inset; $form-select-focus-border-color: $input-focus-border-color; @@ -838,17 +1042,21 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focu $form-select-padding-y-sm: $input-padding-y-sm; $form-select-padding-x-sm: $input-padding-x-sm; $form-select-font-size-sm: $input-font-size-sm; +$form-select-border-radius-sm: $input-border-radius-sm; $form-select-padding-y-lg: $input-padding-y-lg; $form-select-padding-x-lg: $input-padding-x-lg; $form-select-font-size-lg: $input-font-size-lg; +$form-select-border-radius-lg: $input-border-radius-lg; + +$form-select-transition: $input-transition; // scss-docs-end form-select-variables // scss-docs-start form-range-variables $form-range-track-width: 100%; $form-range-track-height: .5rem; $form-range-track-cursor: pointer; -$form-range-track-bg: $gray-300; +$form-range-track-bg: var(--#{$prefix}tertiary-bg); $form-range-track-border-radius: 1rem; $form-range-track-box-shadow: $box-shadow-inset; @@ -861,25 +1069,28 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1); $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow; $form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge $form-range-thumb-active-bg: tint-color($component-active-bg, 70%); -$form-range-thumb-disabled-bg: $gray-500; +$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color); $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; // scss-docs-end form-range-variables // scss-docs-start form-file-variables $form-file-button-color: $input-color; -$form-file-button-bg: $input-group-addon-bg; -$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%); +$form-file-button-bg: var(--#{$prefix}tertiary-bg); +$form-file-button-hover-bg: var(--#{$prefix}secondary-bg); // scss-docs-end form-file-variables // scss-docs-start form-floating-variables -$form-floating-height: add(3.5rem, $input-height-border); -$form-floating-padding-x: $input-padding-x; -$form-floating-padding-y: 1rem; -$form-floating-input-padding-t: 1.625rem; -$form-floating-input-padding-b: .625rem; -$form-floating-label-opacity: .65; -$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem); -$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out; +$form-floating-height: add(3.5rem, $input-height-border); +$form-floating-line-height: 1.25; +$form-floating-padding-x: $input-padding-x; +$form-floating-padding-y: 1rem; +$form-floating-input-padding-t: 1.625rem; +$form-floating-input-padding-b: .625rem; +$form-floating-label-height: 1.5em; +$form-floating-label-opacity: .65; +$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem); +$form-floating-label-disabled-color: $gray-600; +$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out; // scss-docs-end form-floating-variables // Form validation @@ -892,21 +1103,36 @@ $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; -$form-feedback-icon-valid: url("data:image/svg+xml,"); +$form-feedback-icon-valid: url("data:image/svg+xml,"); $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url("data:image/svg+xml,"); // scss-docs-end form-feedback-variables +// scss-docs-start form-validation-colors +$form-valid-color: $form-feedback-valid-color; +$form-valid-border-color: $form-feedback-valid-color; +$form-invalid-color: $form-feedback-invalid-color; +$form-invalid-border-color: $form-feedback-invalid-color; +// scss-docs-end form-validation-colors + // scss-docs-start form-validation-states $form-validation-states: ( - "valid": ( - "color": $form-feedback-valid-color, - "icon": $form-feedback-icon-valid - ), - "invalid": ( - "color": $form-feedback-invalid-color, - "icon": $form-feedback-icon-invalid - ) + "valid": ( + "color": var(--#{$prefix}form-valid-color), + "icon": $form-feedback-icon-valid, + "tooltip-color": #fff, + "tooltip-bg-color": var(--#{$prefix}success), + "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity), + "border-color": var(--#{$prefix}form-valid-border-color), + ), + "invalid": ( + "color": var(--#{$prefix}form-invalid-color), + "icon": $form-feedback-icon-invalid, + "tooltip-color": #fff, + "tooltip-bg-color": var(--#{$prefix}danger), + "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity), + "border-color": var(--#{$prefix}form-invalid-border-color), + ) ); // scss-docs-end form-validation-states @@ -919,13 +1145,25 @@ $form-validation-states: ( $zindex-dropdown: 1000; $zindex-sticky: 1020; $zindex-fixed: 1030; -$zindex-modal-backdrop: 1040; -$zindex-offcanvas: 1050; -$zindex-modal: 1060; +$zindex-offcanvas-backdrop: 1040; +$zindex-offcanvas: 1045; +$zindex-modal-backdrop: 1110; +$zindex-modal: 1120; $zindex-popover: 1070; $zindex-tooltip: 1080; +$zindex-toast: 1090; // scss-docs-end zindex-stack +// scss-docs-start zindex-levels-map +$zindex-levels: ( + n1: -1, + 0: 0, + 1: 1, + 2: 2, + 3: 3 +); +// scss-docs-end zindex-levels-map + // Navs @@ -934,29 +1172,34 @@ $nav-link-padding-y: .5rem; $nav-link-padding-x: 1rem; $nav-link-font-size: null; $nav-link-font-weight: null; -$nav-link-color: null; -$nav-link-hover-color: null; +$nav-link-color: var(--#{$prefix}link-color); +$nav-link-hover-color: var(--#{$prefix}link-hover-color); $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; -$nav-link-disabled-color: $gray-600; - -$nav-tabs-border-color: $gray-300; -$nav-tabs-border-width: $border-width; -$nav-tabs-border-radius: $border-radius; -$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color; -$nav-tabs-link-active-color: $gray-700; -$nav-tabs-link-active-bg: $body-bg; -$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg; - -$nav-pills-border-radius: $border-radius; +$nav-link-disabled-color: var(--#{$prefix}secondary-color); +$nav-link-focus-box-shadow: $focus-ring-box-shadow; + +$nav-tabs-border-color: var(--#{$prefix}border-color); +$nav-tabs-border-width: var(--#{$prefix}border-width); +$nav-tabs-border-radius: var(--#{$prefix}border-radius); +$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color; +$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color); +$nav-tabs-link-active-bg: var(--#{$prefix}body-bg); +$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg; + +$nav-pills-border-radius: var(--#{$prefix}border-radius); $nav-pills-link-active-color: $component-active-color; $nav-pills-link-active-bg: $component-active-bg; + +$nav-underline-gap: 1rem; +$nav-underline-border-width: .125rem; +$nav-underline-link-active-color: var(--#{$prefix}emphasis-color); // scss-docs-end nav-variables // Navbar // scss-docs-start navbar-variables -$navbar-padding-y: $spacer / 2; +$navbar-padding-y: $spacer * .5; $navbar-padding-x: null; $navbar-nav-link-padding-x: .5rem; @@ -965,7 +1208,7 @@ $navbar-brand-font-size: $font-size-lg; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2; $navbar-brand-height: $navbar-brand-font-size * $line-height-base; -$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5; $navbar-brand-margin-end: 1rem; $navbar-toggler-padding-y: .25rem; @@ -974,28 +1217,29 @@ $navbar-toggler-font-size: $font-size-lg; $navbar-toggler-border-radius: $btn-border-radius; $navbar-toggler-focus-width: $btn-focus-width; $navbar-toggler-transition: box-shadow .15s ease-in-out; + +$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65); +$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8); +$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1); +$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3); +$navbar-light-icon-color: rgba($body-color, .75); +$navbar-light-toggler-icon-bg: url("data:image/svg+xml,"); +$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15); +$navbar-light-brand-color: $navbar-light-active-color; +$navbar-light-brand-hover-color: $navbar-light-active-color; // scss-docs-end navbar-variables -// scss-docs-start navbar-theme-variables -$navbar-dark-color: $white; -$navbar-dark-hover-color: $white; +// scss-docs-start navbar-dark-variables +$navbar-dark-color: rgba($white, .55); +$navbar-dark-hover-color: rgba($white, .75); $navbar-dark-active-color: $white; $navbar-dark-disabled-color: rgba($white, .25); -$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,"); +$navbar-dark-icon-color: $navbar-dark-color; +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,"); $navbar-dark-toggler-border-color: rgba($white, .1); - -$navbar-light-color: rgba($black, .55); -$navbar-light-hover-color: rgba($black, .7); -$navbar-light-active-color: rgba($black, .9); -$navbar-light-disabled-color: rgba($black, .3); -$navbar-light-toggler-icon-bg: url("data:image/svg+xml,"); -$navbar-light-toggler-border-color: rgba($black, .1); - -$navbar-light-brand-color: $navbar-light-active-color; -$navbar-light-brand-hover-color: $navbar-light-active-color; -$navbar-dark-brand-color: $navbar-dark-active-color; -$navbar-dark-brand-hover-color: $navbar-dark-active-color; -// scss-docs-end navbar-theme-variables +$navbar-dark-brand-color: $navbar-dark-active-color; +$navbar-dark-brand-hover-color: $navbar-dark-active-color; +// scss-docs-end navbar-dark-variables // Dropdowns @@ -1008,30 +1252,34 @@ $dropdown-padding-x: 0; $dropdown-padding-y: .5rem; $dropdown-spacer: .125rem; $dropdown-font-size: $font-size-base; -$dropdown-color: $body-color; -$dropdown-bg: $white; -$dropdown-border-color: rgba($black, .15); -$dropdown-border-radius: $border-radius; -$dropdown-border-width: $border-width; -$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width); +$dropdown-color: var(--#{$prefix}body-color); +$dropdown-bg: var(--#{$prefix}body-bg); +$dropdown-border-color: var(--#{$prefix}border-color-translucent); +$dropdown-border-radius: var(--#{$prefix}border-radius); +$dropdown-border-width: var(--#{$prefix}border-width); +$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list $dropdown-divider-bg: $dropdown-border-color; -$dropdown-divider-margin-y: $spacer / 2; +$dropdown-divider-margin-y: $spacer * .5; $dropdown-box-shadow: $box-shadow; -$dropdown-link-color: $gray-900; -$dropdown-link-hover-color: shade-color($gray-900, 10%); -$dropdown-link-hover-bg: $gray-200; +$dropdown-link-color: var(--#{$prefix}body-color); +$dropdown-link-hover-color: $dropdown-link-color; +$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg); $dropdown-link-active-color: $component-active-color; $dropdown-link-active-bg: $component-active-bg; -$dropdown-link-disabled-color: $gray-500; +$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color); -$dropdown-item-padding-y: $spacer / 4; +$dropdown-item-padding-y: $spacer * .25; $dropdown-item-padding-x: $spacer; $dropdown-header-color: $gray-600; -$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x; +$dropdown-header-padding-x: $dropdown-item-padding-x; +$dropdown-header-padding-y: $dropdown-padding-y; +// fusv-disable +$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0 +// fusv-enable // scss-docs-end dropdown-variables // scss-docs-start dropdown-dark-variables @@ -1060,56 +1308,68 @@ $pagination-padding-x-sm: .5rem; $pagination-padding-y-lg: .75rem; $pagination-padding-x-lg: 1.5rem; -$pagination-color: $link-color; -$pagination-bg: $white; -$pagination-border-width: $border-width; -$pagination-border-radius: $border-radius; -$pagination-margin-start: -$pagination-border-width; -$pagination-border-color: $gray-300; +$pagination-font-size: $font-size-base; -$pagination-focus-color: $link-hover-color; -$pagination-focus-bg: $gray-200; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow; +$pagination-color: var(--#{$prefix}link-color); +$pagination-bg: var(--#{$prefix}body-bg); +$pagination-border-radius: var(--#{$prefix}border-radius); +$pagination-border-width: var(--#{$prefix}border-width); +$pagination-margin-start: calc(#{$pagination-border-width} * -1); // stylelint-disable-line function-disallowed-list +$pagination-border-color: var(--#{$prefix}border-color); + +$pagination-focus-color: var(--#{$prefix}link-hover-color); +$pagination-focus-bg: var(--#{$prefix}secondary-bg); +$pagination-focus-box-shadow: $focus-ring-box-shadow; $pagination-focus-outline: 0; -$pagination-hover-color: $link-hover-color; -$pagination-hover-bg: $gray-200; -$pagination-hover-border-color: $gray-300; +$pagination-hover-color: var(--#{$prefix}link-hover-color); +$pagination-hover-bg: var(--#{$prefix}tertiary-bg); +$pagination-hover-border-color: var(--#{$prefix}border-color); // Todo in v6: remove this? $pagination-active-color: $component-active-color; $pagination-active-bg: $component-active-bg; -$pagination-active-border-color: $pagination-active-bg; +$pagination-active-border-color: $component-active-bg; -$pagination-disabled-color: $gray-600; -$pagination-disabled-bg: $white; -$pagination-disabled-border-color: $gray-300; +$pagination-disabled-color: var(--#{$prefix}secondary-color); +$pagination-disabled-bg: var(--#{$prefix}secondary-bg); +$pagination-disabled-border-color: var(--#{$prefix}border-color); $pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; -$pagination-border-radius-sm: $border-radius-sm; -$pagination-border-radius-lg: $border-radius-lg; +$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm); +$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg); // scss-docs-end pagination-variables +// Placeholders + +// scss-docs-start placeholders +$placeholder-opacity-max: .5; +$placeholder-opacity-min: .2; +// scss-docs-end placeholders + // Cards // scss-docs-start card-variables $card-spacer-y: $spacer; $card-spacer-x: $spacer; -$card-title-spacer-y: $spacer / 2; -$card-border-width: $border-width; -$card-border-radius: $border-radius; -$card-border-color: rgba($black, .125); +$card-title-spacer-y: $spacer * .5; +$card-title-color: null; +$card-subtitle-color: null; +$card-border-width: var(--#{$prefix}border-width); +$card-border-color: var(--#{$prefix}border-color-translucent); +$card-border-radius: var(--#{$prefix}border-radius); +$card-box-shadow: null; $card-inner-border-radius: subtract($card-border-radius, $card-border-width); -$card-cap-padding-y: $card-spacer-y / 2; +$card-cap-padding-y: $card-spacer-y * .5; $card-cap-padding-x: $card-spacer-x; -$card-cap-bg: rgba($black, .03); +$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03); $card-cap-color: null; $card-height: null; $card-color: null; -$card-bg: $white; +$card-bg: var(--#{$prefix}body-bg); $card-img-overlay-padding: $spacer; -$card-group-margin: $grid-gutter-width / 2; +$card-group-margin: $grid-gutter-width * .5; // scss-docs-end card-variables // Accordion @@ -1117,11 +1377,11 @@ $card-group-margin: $grid-gutter-width / 2; // scss-docs-start accordion-variables $accordion-padding-y: 1rem; $accordion-padding-x: 1.25rem; -$accordion-color: $body-color; -$accordion-bg: $body-bg; -$accordion-border-width: $border-width; -$accordion-border-color: rgba($black, .125); -$accordion-border-radius: $border-radius; +$accordion-color: var(--#{$prefix}body-color); +$accordion-bg: var(--#{$prefix}body-bg); +$accordion-border-width: var(--#{$prefix}border-width); +$accordion-border-color: var(--#{$prefix}border-color); +$accordion-border-radius: var(--#{$prefix}border-radius); $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width); $accordion-body-padding-y: $accordion-padding-y; @@ -1129,18 +1389,18 @@ $accordion-body-padding-x: $accordion-padding-x; $accordion-button-padding-y: $accordion-padding-y; $accordion-button-padding-x: $accordion-padding-x; -$accordion-button-color: $accordion-color; -$accordion-button-bg: $accordion-bg; +$accordion-button-color: var(--#{$prefix}body-color); +$accordion-button-bg: var(--#{$prefix}accordion-bg); $accordion-transition: $btn-transition, border-radius .15s ease; -$accordion-button-active-bg: tint-color($component-active-bg, 90%); -$accordion-button-active-color: shade-color($primary, 10%); +$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle); +$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis); $accordion-button-focus-border-color: $input-focus-border-color; $accordion-button-focus-box-shadow: $btn-focus-box-shadow; $accordion-icon-width: 1.25rem; -$accordion-icon-color: $accordion-color; -$accordion-icon-active-color: $accordion-button-active-color; +$accordion-icon-color: $body-color; +$accordion-icon-active-color: $primary-text-emphasis; $accordion-icon-transition: transform .2s ease-in-out; $accordion-icon-transform: rotate(-180deg); @@ -1153,17 +1413,19 @@ $accordion-button-active-icon: url("data:image/svg+xml,"); -$btn-close-focus-shadow: $input-btn-focus-box-shadow; +$btn-close-bg: url("data:image/svg+xml,"); +$btn-close-focus-shadow: $focus-ring-box-shadow; $btn-close-opacity: .5; $btn-close-hover-opacity: .75; $btn-close-focus-opacity: 1; @@ -1462,9 +1737,11 @@ $offcanvas-transition-duration: .3s; $offcanvas-border-color: $modal-content-border-color; $offcanvas-border-width: $modal-content-border-width; $offcanvas-title-line-height: $modal-title-line-height; -$offcanvas-bg-color: $modal-content-bg; -$offcanvas-color: $modal-content-color; +$offcanvas-bg-color: var(--#{$prefix}body-bg); +$offcanvas-color: var(--#{$prefix}body-color); $offcanvas-box-shadow: $modal-content-box-shadow-xs; +$offcanvas-backdrop-bg: $modal-backdrop-bg; +$offcanvas-backdrop-opacity: $modal-backdrop-opacity; // scss-docs-end offcanvas-variables // Code @@ -1472,10 +1749,11 @@ $offcanvas-box-shadow: $modal-content-box-shadow-xs; $code-font-size: $small-font-size; $code-color: $pink; -$kbd-padding-y: .2rem; -$kbd-padding-x: .4rem; +$kbd-padding-y: .1875rem; +$kbd-padding-x: .375rem; $kbd-font-size: $code-font-size; -$kbd-color: $white; -$kbd-bg: $gray-900; +$kbd-color: var(--#{$prefix}body-bg); +$kbd-bg: var(--#{$prefix}body-color); +$nested-kbd-font-weight: null; // Deprecated in v5.2.0, removing in v6 $pre-color: null; diff --git a/src/Themes/Fork/assets/webpack/scss/screen.scss b/src/Themes/Fork/assets/webpack/scss/screen.scss index 333cc65368..10a1bc3ca6 100644 --- a/src/Themes/Fork/assets/webpack/scss/screen.scss +++ b/src/Themes/Fork/assets/webpack/scss/screen.scss @@ -4,14 +4,11 @@ @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/variables-dark"; -@import "~bootstrap/scss/maps"; -@import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/utilities"; -@import "~bootstrap/scss/helpers"; -@import "~bootstrap/scss/utilities/api"; @import 'bootstrap-variables'; -@import 'bootstrap-imports'; @import 'overwrite-variables'; +@import "~bootstrap/scss/maps"; +@import 'bootstrap-imports'; + // Plugins