Test out using postcss-custom-media to reduce responsive variants

diff --git a/package-lock.json b/package-lock.json
index cd9cd2a446ebd1e81447334b79ba51fce9ad6a86..54a747266212e26d5a407fdeef8ca349af1b3593 100644 (file)
--- 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 b40c1fc89330ddad66f61328c8138245b44f3e0d..35819ea00c806bc15984be54ab9836aabf68f195 100644 (file)
--- 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 b65355f440d5a6d27ae0c6f3fce26ef76fece392..8fdb1bb76e92e7cceecb0ce0b069cd1af1315400 100644 (file)
--- 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);