From 9982b2d2df1aea64f13c83b08a79857fb30c6d03 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Dec 2022 21:49:11 -0800 Subject: [PATCH] Test out using postcss-custom-media to reduce responsive variants --- package-lock.json | 99 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + scss/_navbar.scss | 62 +++++++++++++++++++++++++++++ 3 files changed, 162 insertions(+) diff --git a/package-lock.json b/package-lock.json index cd9cd2a446..54a7472662 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,6 +58,7 @@ "npm-run-all": "^4.1.5", "postcss": "^8.4.20", "postcss-cli": "^10.1.0", + "postcss-custom-media": "^9.0.1", "rollup": "^3.9.0", "rollup-plugin-istanbul": "^4.0.0", "rtlcss": "^4.0.0", @@ -1710,6 +1711,52 @@ "node": ">=0.1.90" } }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-1.0.0.tgz", + "integrity": "sha512-lPphY34yfV15tEXiz/SYaU8hwqAhbAwqiTExv5tOfc7QZxT70VVYrsiPBaX1osdWZFowrDEAhHe4H3JnyzbjhA==", + "dev": true, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^1.0.0" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-1.0.0.tgz", + "integrity": "sha512-xdFjdQ+zqqkOsmee+kYRieZD9Cqh4hr01YBQ2/8NtTkMMxbtRX18MC50LX6cMrtaLryqmIdZHN9e16/l0QqnQw==", + "dev": true, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + }, + "node_modules/@csstools/media-query-list-parser": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-1.0.0.tgz", + "integrity": "sha512-HsTj5ejI8NKKZ4IEd6kK2kQZA/JmIVlUV8+XvO/YS9ntrlYPnbmFT3rkqtbxOVfEafblYCNOpeNw1c+fKGkAqw==", + "dev": true, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^1.0.0", + "@csstools/css-tokenizer": "^1.0.0" + } + }, "node_modules/@csstools/selector-specificity": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", @@ -8382,6 +8429,27 @@ "node": ">=12" } }, + "node_modules/postcss-custom-media": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.0.1.tgz", + "integrity": "sha512-CimS72gZZ0V4WPFg7t7EqFVLxJ0mqwAJSsuk+LNHSo9ApC7d/SuOr65sKrUY/D8locOh+3s4yO7IdqQ9cRSR7Q==", + "dev": true, + "dependencies": { + "@csstools/css-parser-algorithms": "^1.0.0", + "@csstools/css-tokenizer": "^1.0.0", + "@csstools/media-query-list-parser": "^1.0.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/postcss-load-config": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", @@ -12035,6 +12103,26 @@ "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==", "dev": true }, + "@csstools/css-parser-algorithms": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-1.0.0.tgz", + "integrity": "sha512-lPphY34yfV15tEXiz/SYaU8hwqAhbAwqiTExv5tOfc7QZxT70VVYrsiPBaX1osdWZFowrDEAhHe4H3JnyzbjhA==", + "dev": true, + "requires": {} + }, + "@csstools/css-tokenizer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-1.0.0.tgz", + "integrity": "sha512-xdFjdQ+zqqkOsmee+kYRieZD9Cqh4hr01YBQ2/8NtTkMMxbtRX18MC50LX6cMrtaLryqmIdZHN9e16/l0QqnQw==", + "dev": true + }, + "@csstools/media-query-list-parser": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-1.0.0.tgz", + "integrity": "sha512-HsTj5ejI8NKKZ4IEd6kK2kQZA/JmIVlUV8+XvO/YS9ntrlYPnbmFT3rkqtbxOVfEafblYCNOpeNw1c+fKGkAqw==", + "dev": true, + "requires": {} + }, "@csstools/selector-specificity": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", @@ -16985,6 +17073,17 @@ } } }, + "postcss-custom-media": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.0.1.tgz", + "integrity": "sha512-CimS72gZZ0V4WPFg7t7EqFVLxJ0mqwAJSsuk+LNHSo9ApC7d/SuOr65sKrUY/D8locOh+3s4yO7IdqQ9cRSR7Q==", + "dev": true, + "requires": { + "@csstools/css-parser-algorithms": "^1.0.0", + "@csstools/css-tokenizer": "^1.0.0", + "@csstools/media-query-list-parser": "^1.0.0" + } + }, "postcss-load-config": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", diff --git a/package.json b/package.json index b40c1fc893..35819ea00c 100644 --- a/package.json +++ b/package.json @@ -142,6 +142,7 @@ "npm-run-all": "^4.1.5", "postcss": "^8.4.20", "postcss-cli": "^10.1.0", + "postcss-custom-media": "^9.0.1", "rollup": "^3.9.0", "rollup-plugin-istanbul": "^4.0.0", "rtlcss": "^4.0.0", diff --git a/scss/_navbar.scss b/scss/_navbar.scss index b65355f440..8fdb1bb76e 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -187,6 +187,68 @@ // scss-docs-start navbar-expand-loop // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. +@custom-media --navbar-expand (min-width: 768px); + +@media (--navbar-expand) { + .new-navbar-expand { + flex-wrap: nowrap; + justify-content: flex-start; + + .navbar-nav { + flex-direction: row; + + .dropdown-menu { + position: absolute; + } + + .nav-link { + padding-right: var(--#{$prefix}navbar-nav-link-padding-x); + padding-left: var(--#{$prefix}navbar-nav-link-padding-x); + } + } + + .navbar-nav-scroll { + overflow: visible; + } + + .navbar-collapse { + display: flex !important; // stylelint-disable-line declaration-no-important + flex-basis: auto; + } + + .navbar-toggler { + display: none; + } + + .offcanvas { + // stylelint-disable declaration-no-important + position: static; + z-index: auto; + flex-grow: 1; + width: auto !important; + height: auto !important; + visibility: visible !important; + background-color: transparent !important; + border: 0 !important; + transform: none !important; + @include box-shadow(none); + @include transition(none); + // stylelint-enable declaration-no-important + + .offcanvas-header { + display: none; + } + + .offcanvas-body { + display: flex; + flex-grow: 0; + padding: 0; + overflow-y: visible; + } + } + } +} + .navbar-expand { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints);