rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2022-12-28 21:49:11 -08:00
parent 97576345b1
commit 9982b2d2df
3 changed files with 162 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

62
scss/_navbar.scss
View File

@ -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);