From 26c1fbe839482bf152cefcf57aa8797549fd8387 Mon Sep 17 00:00:00 2001 From: Matthew Orahood Date: Wed, 16 Sep 2020 06:01:31 -0400 Subject: [PATCH 01/67] Update webpack.md potcss-loader now uses the `postcssOptions` key. https://www.npmjs.com/package/postcss-loader --- site/content/docs/5.0/getting-started/webpack.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/site/content/docs/5.0/getting-started/webpack.md b/site/content/docs/5.0/getting-started/webpack.md index c67152f8d..693f96109 100644 --- a/site/content/docs/5.0/getting-started/webpack.md +++ b/site/content/docs/5.0/getting-started/webpack.md @@ -55,10 +55,12 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s }, { loader: 'postcss-loader', // Run postcss actions options: { - plugins: function () { // postcss plugins, can be exported to postcss.config.js - return [ - require('autoprefixer') - ]; + postcssOptions: { + plugins: function () { // post css plugins, can be exported to postcss.config.js + return [ + require('autoprefixer') + ]; + } } } }, { From 4e9a29e47ae776064b5afe931a347d61a4390451 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 18 Sep 2020 14:53:44 +0300 Subject: [PATCH 02/67] Update webpack.md Format snippets --- .../docs/5.0/getting-started/webpack.md | 32 ++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/site/content/docs/5.0/getting-started/webpack.md b/site/content/docs/5.0/getting-started/webpack.md index 693f96109..89870a684 100644 --- a/site/content/docs/5.0/getting-started/webpack.md +++ b/site/content/docs/5.0/getting-started/webpack.md @@ -45,18 +45,24 @@ First, create your own `_custom.scss` and use it to override the [built-in custo For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar: {{< highlight js >}} -... +// ... { test: /\.(scss)$/, use: [{ - loader: 'style-loader', // inject CSS to page + // inject CSS to page + loader: 'style-loader' }, { - loader: 'css-loader', // translates CSS into CommonJS modules + // translates CSS into CommonJS modules + loader: 'css-loader' }, { - loader: 'postcss-loader', // Run postcss actions + // Run postcss actions + loader: 'postcss-loader', options: { + // `postcssOptions` is needed for postcss 8.x; + // if you use postcss 7.x skip the key postcssOptions: { - plugins: function () { // post css plugins, can be exported to postcss.config.js + // postcss plugins, can be exported to postcss.config.js + plugins: function () { return [ require('autoprefixer') ]; @@ -64,10 +70,11 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s } } }, { - loader: 'sass-loader' // compiles Sass to CSS + // compiles Sass to CSS + loader: 'sass-loader' }] -}, -... +} +// ... {{< /highlight >}} ### Importing Compiled CSS @@ -81,14 +88,17 @@ import 'bootstrap/dist/css/bootstrap.min.css'; In this case you may use your existing rule for `css` without any special modifications to webpack config, except you don't need `sass-loader` just [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader). {{< highlight js >}} -... +// ... module: { rules: [ { test: /\.css$/, - use: ['style-loader', 'css-loader'] + use: [ + 'style-loader', + 'css-loader' + ] } ] } -... +// ... {{< /highlight >}} From 7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d Mon Sep 17 00:00:00 2001 From: Jaume Sala Date: Mon, 21 Sep 2020 04:42:41 +0200 Subject: [PATCH 03/67] Extra position utilities (#31280) * Extra position utilities Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires. * Update extra position utilities * add default position values map * tweak examples * add real life examples * fix double colon Co-authored-by: XhmikosR --- scss/_utilities.scss | 23 ++++++ scss/_variables.scss | 11 +++ site/assets/scss/_component-examples.scss | 23 ++++++ site/content/docs/5.0/utilities/position.md | 84 ++++++++++++++++++++- 4 files changed, 140 insertions(+), 1 deletion(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 69615ec4e..e9a9b1e33 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -39,6 +39,29 @@ $utilities: map-merge( property: position, values: static relative absolute fixed sticky ), + "top": ( + property: top, + values: $position-values + ), + "bottom": ( + property: bottom, + values: $position-values + ), + "left": ( + property: left, + values: $position-values + ), + "right": ( + property: right, + values: $position-values + ), + "translate-middle": ( + property: transform, + class: translate-middle, + values: ( + null: (translateX(-50%) translateY(-50%)) + ) + ), "border": ( property: border, values: ( diff --git a/scss/_variables.scss b/scss/_variables.scss index bdf2d62a4..610a56962 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -246,6 +246,17 @@ $spacers: ( $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; +// Position +// +// Define the edge positioning anchors of the position utilities. + +$position-values: ( + 0: 0, + 50: 50%, + 100: 100% +) !default; + + // Body // // Settings for the `` element. diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 4b7aa4355..7391f5998 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -217,6 +217,29 @@ } } +.bd-example-position-utils { + position: relative; + padding: 3em; + + .position-relative { + height: 200px; + background-color: #f5f5f5; + } + + .position-absolute { + width: 2em; + height: 2em; + background-color: $dark; + @include border-radius(); + } +} + +.bd-example-position-examples { + &::after { + content: none; + } +} + // // Code snippets // diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md index 4af457da4..8928ecd81 100644 --- a/site/content/docs/5.0/utilities/position.md +++ b/site/content/docs/5.0/utilities/position.md @@ -6,7 +6,7 @@ group: utilities toc: true --- -## Common values +## Position values Quick positioning classes are available, though they are not responsive. @@ -17,3 +17,85 @@ Quick positioning classes are available, though they are not responsive.
...
...
{{< /highlight >}} + +## Arrange elements + +Arrange elements easily with the edge positioning utilities. The format is `{property}-{position}`. + +Where *property* is one of: + +- `top` - for the vertical `top` position +- `left` - for the horizontal `left` position +- `bottom` - for the vertical `bottom` position +- `right` - for the horizontal `right` position + +Where *position* is one of: + +- `0` - for `0` edge position +- `50` - for `50%` edge position +- `100` - for `100%` edge position + +(You can add more position values by adding entries to the `$position-values` Sass map variable.) + +{{< example class="bd-example-position-utils" >}} +
+
+
+
+
+
+
+
+{{< /example >}} + +## Center elements + +In addition, you can also center the elements with the transform utility class `.translate-middle`. + +This class applies the transformations `translateX(-50%)` and `translateY(-50%)` to the element which, in combination with the edge positioning utilities, allows you to absolute center an element. + +{{< example class="bd-example-position-utils" >}} +
+
+
+
+
+
+
+
+
+
+
+{{< /example >}} + +## Examples + +Here are some real life examples of these classes: + +{{< example class="bd-example-position-examples d-flex justify-content-around" >}} + + + + + +{{< /example >}} + +You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable. + +{{< example class="bd-example-position-examples" >}} +
+
+
+
+ + + +
+{{< /example >}} + From bb794bf9046dec3bb8a49eb82fefccf7c6381f91 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 22 Sep 2020 11:45:30 +0300 Subject: [PATCH 04/67] Bump eslint-plugin-unicorn from 21.0.0 to 22.0.0 (#31723) Bumps [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) from 21.0.0 to 22.0.0. - [Release notes](https://github.com/sindresorhus/eslint-plugin-unicorn/releases) - [Commits](https://github.com/sindresorhus/eslint-plugin-unicorn/compare/v21.0.0...v22.0.0) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 10 +++++----- package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 284d05192..17d070c5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4141,18 +4141,18 @@ } }, "eslint-plugin-unicorn": { - "version": "21.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-21.0.0.tgz", - "integrity": "sha512-S8v7+v4gZTQPj4pKKvexhgSUaLQSyItvxW2SVZDaX9Iu5IjlAmF2eni+L6w8a2aqshxgU8Lle4FIAVDtuejSKQ==", + "version": "22.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-22.0.0.tgz", + "integrity": "sha512-jXPOauNiVFYLr+AeU3l21Ao+iDl/G08vUWui21RCI2L1TJIIoJvAMjMR6I+QPKr8FgIumzuR6gzDKCtEx2IkzA==", "dev": true, "requires": { "ci-info": "^2.0.0", "clean-regexp": "^1.0.0", "eslint-ast-utils": "^1.1.0", - "eslint-template-visitor": "^2.0.0", + "eslint-template-visitor": "^2.2.1", "eslint-utils": "^2.1.0", "import-modules": "^2.0.0", - "lodash": "^4.17.15", + "lodash": "^4.17.20", "pluralize": "^8.0.0", "read-pkg-up": "^7.0.1", "regexp-tree": "^0.1.21", diff --git a/package.json b/package.json index 5f8c352fa..d91cc26a8 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "eslint": "^7.9.0", "eslint-config-xo": "^0.32.1", "eslint-plugin-import": "^2.22.0", - "eslint-plugin-unicorn": "^21.0.0", + "eslint-plugin-unicorn": "^22.0.0", "find-unused-sass-variables": "^2.0.0", "glob": "^7.1.6", "hammer-simulator": "0.0.1", From 5706ce38eba781838b64d8aa6e19f03a15e5cdc4 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 22 Sep 2020 11:50:14 +0300 Subject: [PATCH 05/67] Bump @rollup/plugin-commonjs from 15.0.0 to 15.1.0 (#31724) Bumps [@rollup/plugin-commonjs](https://github.com/rollup/plugins) from 15.0.0 to 15.1.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/commonjs-v15.0.0...commonjs-v15.1.0) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 17d070c5b..46b75f2de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1151,9 +1151,9 @@ } }, "@rollup/plugin-commonjs": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-15.0.0.tgz", - "integrity": "sha512-8uAdikHqVyrT32w1zB9VhW6uGwGjhKgnDNP4pQJsjdnyF4FgCj6/bmv24c7v2CuKhq32CcyCwRzMPEElaKkn0w==", + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-15.1.0.tgz", + "integrity": "sha512-xCQqz4z/o0h2syQ7d9LskIMvBSH4PX5PjYdpSSvgS+pQik3WahkQVNWg3D8XJeYjZoVWnIUQYDghuEMRGrmQYQ==", "dev": true, "requires": { "@rollup/pluginutils": "^3.1.0", diff --git a/package.json b/package.json index d91cc26a8..dc77037ef 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "@babel/core": "^7.11.6", "@babel/preset-env": "^7.11.5", "@rollup/plugin-babel": "^5.2.1", - "@rollup/plugin-commonjs": "^15.0.0", + "@rollup/plugin-commonjs": "^15.1.0", "@rollup/plugin-node-resolve": "^9.0.0", "autoprefixer": "^9.8.6", "bundlewatch": "^0.3.0", From 6b1cdd099041f2971cb9456a4cf3b27306909194 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 22 Sep 2020 11:53:57 +0300 Subject: [PATCH 06/67] Bump rollup from 2.26.11 to 2.28.1 (#31725) Bumps [rollup](https://github.com/rollup/rollup) from 2.26.11 to 2.28.1. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.26.11...v2.28.1) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 46b75f2de..56d1db30a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9868,9 +9868,9 @@ } }, "rollup": { - "version": "2.26.11", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.11.tgz", - "integrity": "sha512-xyfxxhsE6hW57xhfL1I+ixH8l2bdoIMaAecdQiWF3N7IgJEMu99JG+daBiSZQjnBpzFxa0/xZm+3pbCdAQehHw==", + "version": "2.28.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.28.1.tgz", + "integrity": "sha512-DOtVoqOZt3+FjPJWLU8hDIvBjUylc9s6IZvy76XklxzcLvAQLtVAG/bbhsMhcWnYxC0TKKcf1QQ/tg29zeID0Q==", "dev": true, "requires": { "fsevents": "~2.1.2" diff --git a/package.json b/package.json index dc77037ef..9093ead10 100644 --- a/package.json +++ b/package.json @@ -128,7 +128,7 @@ "npm-run-all": "^4.1.5", "popper.js": "^1.16.1", "postcss-cli": "^7.1.2", - "rollup": "^2.26.11", + "rollup": "^2.28.1", "rollup-plugin-istanbul": "^2.0.1", "shelljs": "^0.8.4", "sirv-cli": "^1.0.6", From fe77208a01b9b41ce13a9c68139d9f1618c48ec9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 21 Sep 2020 16:27:26 -0700 Subject: [PATCH 07/67] Add new variable for -padding-x --- scss/_dropdown.scss | 2 +- scss/_variables.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index b30f2ba7e..f87fc8eb9 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -21,7 +21,7 @@ z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu min-width: $dropdown-min-width; - padding: $dropdown-padding-y 0; + padding: $dropdown-padding-y $dropdown-padding-x; margin: $dropdown-spacer 0 0; // override default ul @include font-size($dropdown-font-size); color: $dropdown-color; diff --git a/scss/_variables.scss b/scss/_variables.scss index 610a56962..be8c014b3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -928,6 +928,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; // Dropdown menu container and contents. $dropdown-min-width: 10rem !default; +$dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; $dropdown-font-size: $font-size-base !default; From 99777662c678341b0220630c05a9526faab36c95 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 1 Sep 2020 15:16:50 -0700 Subject: [PATCH 08/67] Rename .close to .btn-close, replace times sign with background SVG, update focus state --- scss/_alert.scss | 7 +- scss/_close.scss | 42 +++++----- scss/_modal.scss | 2 +- scss/_variables.scss | 12 +-- site/content/docs/5.0/components/alerts.md | 4 +- .../docs/5.0/components/close-button.md | 11 +-- site/content/docs/5.0/components/modal.md | 76 +++++-------------- 7 files changed, 55 insertions(+), 99 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index 19157b298..078aaaa68 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -27,15 +27,14 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: $close-font-size + $alert-padding-x * 2; + padding-right: $alert-padding-x * 3.5; // Adjust close link position - .close { + .btn-close { position: absolute; top: 0; right: 0; - padding: $alert-padding-y $alert-padding-x; - color: inherit; + padding: $alert-padding-y * 1.25 $alert-padding-x; } } diff --git a/scss/_close.scss b/scss/_close.scss index dd6541e0d..6bc621f06 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,36 +1,36 @@ -.close { - @include font-size($close-font-size); - font-weight: $close-font-weight; - line-height: 1; - color: $close-color; - text-shadow: $close-text-shadow; +// transparent background and border properties included for button version. +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +.btn-close { + box-sizing: content-box; + width: $btn-close-width; + height: $btn-close-height; + padding: $btn-close-padding-y $btn-close-padding-x; + color: $btn-close-color; + background: transparent escape-svg($btn-close-bg) no-repeat center center / $btn-close-width auto; // include transparent for button elements + background-clip: content-box; + border: 0; // for button elements + @include border-radius(); opacity: .5; // Override 's hover style &:hover { - color: $close-color; + color: $btn-close-color; text-decoration: none; + opacity: .75; } - &:hover, &:focus { - opacity: .75; + outline: none; + box-shadow: $btn-close-focus-shadow; + opacity: 1; } &:disabled, &.disabled { pointer-events: none; + user-select: none; } } - -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - -// stylelint-disable-next-line selector-no-qualifying-type -button.close { - padding: 0; - background-color: transparent; - border: 0; -} diff --git a/scss/_modal.scss b/scss/_modal.scss index 5443ef124..9cf3aa89a 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -118,7 +118,7 @@ border-bottom: $modal-header-border-width solid $modal-header-border-color; @include border-top-radius($modal-content-inner-border-radius); - .close { + .btn-close { padding: $modal-header-padding; // auto on the left force icon to the right even when there is no .modal-title margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; diff --git a/scss/_variables.scss b/scss/_variables.scss index be8c014b3..266a497a7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1269,11 +1269,13 @@ $spinner-border-width-sm: .2em !default; // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; - +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: .25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $black !default; +$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-focus-shadow: $input-btn-focus-box-shadow !default; // Code diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index dace2f718..c58e93a23 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -66,9 +66,7 @@ You can see this in action with a live demo: {{< example >}} {{< /example >}} diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md index 28211cd5d..1a83d7a96 100644 --- a/site/content/docs/5.0/components/close-button.md +++ b/site/content/docs/5.0/components/close-button.md @@ -5,14 +5,9 @@ description: A generic close button for dismissing content like modals and alert group: components --- -**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` applied to, preventing hover and active states from triggering. +**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` and `user-select: none` applied to preventing hover and active states from triggering. {{< example >}} - - - + + {{< /example >}} diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 19d0aae37..fbf36f0dd 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -66,9 +66,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
Modal title
- +

Modal body text goes here.

@@ -91,9 +89,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
- +

Woohoo, you're reading this text in a modal!

@@ -124,9 +120,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
- +
... @@ -149,9 +143,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
- +

I will not close if you click outside me. Don't even try to press escape key.

@@ -182,9 +174,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
- +
... @@ -208,9 +198,7 @@ When modals become too long for the user's viewport or device, they scroll indep
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -253,9 +241,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -307,9 +293,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -327,9 +311,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -376,9 +358,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
- +
Popover in a modal
@@ -511,9 +491,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
- +
@@ -638,9 +616,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
- +
... @@ -654,9 +630,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
- +
... @@ -670,9 +644,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
- +
... @@ -736,9 +708,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

@@ -772,9 +742,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
... @@ -791,9 +759,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
... @@ -810,9 +776,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
... @@ -829,9 +793,7 @@ Another override is the option to pop up a modal that covers the user viewport,
- +
... From 1af79bbc5267428af9fcb4a8fc9e6ab0b30328f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:06:50 -0700 Subject: [PATCH 09/67] Increase width of focus styles so it's more pixel perfect out of the box --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 266a497a7..b5fb6a000 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -555,7 +555,7 @@ $input-btn-font-family: null !default; $input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; -$input-btn-focus-width: .2rem !default; +$input-btn-focus-width: .25em !default; $input-btn-focus-color-opacity: .25 !default; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; From 1e69503a7367669f700c18c79bd7ba525fee3361 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:07:04 -0700 Subject: [PATCH 10/67] Increase margin in button examples to better highlight focus styles --- site/assets/scss/_component-examples.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 7391f5998..87dcd1565 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -122,8 +122,7 @@ // Buttons > .btn, > .btn-group { - margin-top: .25rem; - margin-bottom: .25rem; + margin: .25rem .125rem; } > .btn-toolbar + .btn-toolbar { margin-top: .5rem; From 95f81f833153f8680328ff15c88147e96b0525ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:12:16 -0700 Subject: [PATCH 11/67] Add opacity variables, set opacity on disabled state --- scss/_close.scss | 7 ++++--- scss/_variables.scss | 4 ++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/scss/_close.scss b/scss/_close.scss index 6bc621f06..037df1666 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -13,24 +13,25 @@ background-clip: content-box; border: 0; // for button elements @include border-radius(); - opacity: .5; + opacity: $btn-close-opacity; // Override 's hover style &:hover { color: $btn-close-color; text-decoration: none; - opacity: .75; + opacity: $btn-close-hover-opacity; } &:focus { outline: none; box-shadow: $btn-close-focus-shadow; - opacity: 1; + opacity: $btn-close-focus-opacity; } &:disabled, &.disabled { pointer-events: none; user-select: none; + opacity: $btn-close-disabled-opacity; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index b5fb6a000..84a1f4abc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1276,6 +1276,10 @@ $btn-close-padding-y: $btn-close-padding-x !default; $btn-close-color: $black !default; $btn-close-bg: url("data:image/svg+xml,") !default; $btn-close-focus-shadow: $input-btn-focus-box-shadow !default; +$btn-close-opacity: .5 !default; +$btn-close-hover-opacity: .75 !default; +$btn-close-focus-opacity: 1 !default; +$btn-close-disabled-opacity: .25 !default; // Code From 57fc28a8548c88d7e79224e9f51611c3d5b278e2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:14:45 -0700 Subject: [PATCH 12/67] Add details to the Migration page --- site/content/docs/5.0/migration.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 2c9dc4011..01f33d444 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -48,6 +48,12 @@ toc: true - Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin. [See #30639.](https://github.com/twbs/bootstrap/pull/30639) +#### Close button + +- Renamed `.close` to `.btn-close` for a less generic name. +- Close buttons now use a `background-image` (embedded SVG) instead of a `×` in the HTML, allowing for easier customization without the need to touch your markup. +- Added new variables to better control the customization. + #### Navs - Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class. From 4778deac023a0e359fe5321eb431f00b5f2b8c83 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:21:45 -0700 Subject: [PATCH 13/67] Tweak sizing and alignment of .btn-close in modal headers --- scss/_modal.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/scss/_modal.scss b/scss/_modal.scss index 9cf3aa89a..06ab5644d 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -112,16 +112,15 @@ .modal-header { display: flex; flex-shrink: 0; - align-items: flex-start; // so the close btn always stays on the upper right corner + align-items: center; justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends padding: $modal-header-padding; border-bottom: $modal-header-border-width solid $modal-header-border-color; @include border-top-radius($modal-content-inner-border-radius); .btn-close { - padding: $modal-header-padding; - // auto on the left force icon to the right even when there is no .modal-title - margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; + padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2); + margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto; } } From 67f33a06c7c0a7431981b91e27f0f58b29fd9724 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:22:00 -0700 Subject: [PATCH 14/67] Update some close button examples --- site/content/docs/5.0/components/alerts.md | 4 +--- site/content/docs/5.0/components/modal.md | 6 ++---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index c58e93a23..79eccab88 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -90,9 +90,7 @@ alertList.forEach(function (alert) { Or with `data` attributes on a button **within the alert**, as demonstrated above: {{< highlight html >}} - + {{< /highlight >}} Note that closing an alert will remove it from the DOM. diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index fbf36f0dd..bb00382a2 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -44,9 +44,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
Modal title
- +

Modal body text goes here.

@@ -400,7 +398,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
- +
From fae9aef3dbc9674eadd4d0187b58653bcef96a2a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:47:05 -0700 Subject: [PATCH 15/67] Update toasts dismiss (moving more styles to CSS instead of utilities), fix some more close examples, and add a new .btn-close-white variant --- scss/_close.scss | 4 ++ scss/_toasts.scss | 5 ++ scss/_variables.scss | 2 +- .../docs/5.0/components/close-button.md | 21 +++++++- site/content/docs/5.0/components/toasts.md | 54 +++++-------------- site/content/docs/5.0/migration.md | 1 + 6 files changed, 44 insertions(+), 43 deletions(-) diff --git a/scss/_close.scss b/scss/_close.scss index 037df1666..35bdc3560 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -35,3 +35,7 @@ opacity: $btn-close-disabled-opacity; } } + +.btn-close-white { + filter: invert(1); +} diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 4db51b6b0..e2b98e600 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -36,6 +36,11 @@ background-clip: padding-box; border-bottom: $toast-border-width solid $toast-header-border-color; @include border-top-radius(subtract($toast-border-radius, $toast-border-width)); + + .btn-close { + margin-right: $toast-padding-x / -2; + margin-left: $toast-padding-x; + } } .toast-body { diff --git a/scss/_variables.scss b/scss/_variables.scss index 84a1f4abc..abd2d8d93 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1071,7 +1071,7 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; -$toast-padding-y: .25rem !default; +$toast-padding-y: .5rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; $toast-background-color: rgba($white, .85) !default; diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md index 1a83d7a96..ba4d17bdc 100644 --- a/site/content/docs/5.0/components/close-button.md +++ b/site/content/docs/5.0/components/close-button.md @@ -3,11 +3,30 @@ layout: docs title: Close button description: A generic close button for dismissing content like modals and alerts. group: components +toc: true --- -**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` and `user-select: none` applied to preventing hover and active states from triggering. +## Example + +Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`. {{< example >}} +{{< /example >}} + +## Disabled state + +Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering. + +{{< example >}} {{< /example >}} + +## White variant + +Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `backdrop-filter` property to invert the `background-image`. + +{{< example class="bg-dark" >}} + + +{{< /example >}} diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index ee8eba458..06d4fa37e 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -34,9 +34,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap 11 mins ago - +
Hello, world! This is a toast message. @@ -54,9 +52,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap 11 mins ago - +
Hello, world! This is a toast message. @@ -74,9 +70,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap just now - +
See? Just like this. @@ -88,9 +82,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap 2 seconds ago - +
Heads up, toasts will stack automatically @@ -103,16 +95,11 @@ When you have multiple toasts, we default to vertically stacking them in a reada Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout. {{< example class="bg-light" >}} - {{< /highlight >}} +## Dark dropdowns + +Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items. + +{{< example >}} +
+ + +
+{{< /example >}} + +And putting it to use in a navbar: + +{{< example >}} + +{{< /example >}} + ## Directions ### Dropup From adc70c71301693836cccdabb247aba46ab68de3e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 24 Sep 2020 22:11:14 +0300 Subject: [PATCH 29/67] README.md: show brotli size too (#31259) --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b3caa9072..02be7302f 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,9 @@ Read the [Getting started page](https://v5.getbootstrap.com/docs/5.0/getting-sta [![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap)](https://david-dm.org/twbs/bootstrap?type=dev) [![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/main)](https://coveralls.io/github/twbs/bootstrap?branch=main) [![CSS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) +[![CSS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css) [![JS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js) +[![JS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229) [![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap)](#backers) [![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap)](#sponsors) From 979c66b6745638bfa896cd007125d35cef630194 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 24 Sep 2020 22:20:01 +0300 Subject: [PATCH 30/67] docs: link to the Asynchronous functions section (#31738) --- site/layouts/partials/callout-danger-async-methods.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/layouts/partials/callout-danger-async-methods.md b/site/layouts/partials/callout-danger-async-methods.md index 4ac5b27b3..c8afdc2df 100644 --- a/site/layouts/partials/callout-danger-async-methods.md +++ b/site/layouts/partials/callout-danger-async-methods.md @@ -2,4 +2,4 @@ All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**. -[See our JavaScript documentation for more information](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/). +[See our JavaScript documentation for more information](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#asynchronous-functions-and-transitions). From f951be36a11a6ae96fc27d9caf3476f729016b1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 24 Sep 2020 13:16:20 -0700 Subject: [PATCH 31/67] Carousel enhancements, including .carousel-dark (#31650) * Replace existing carousel control icons with chevrons from Bootstrap Icons * Add .carousel-dark variant * Test * Add variable for .carousel-dark filter * Update _variables.scss Co-authored-by: XhmikosR --- scss/_carousel.scss | 17 ++++++++ scss/_variables.scss | 12 ++++-- site/content/docs/5.0/components/carousel.md | 44 ++++++++++++++++++++ 3 files changed, 69 insertions(+), 4 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 84ffd6cea..ef77cbb61 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -193,3 +193,20 @@ color: $carousel-caption-color; text-align: center; } + +// Dark mode carousel + +.carousel-dark { + .carousel-control-prev-icon, + .carousel-control-next-icon { + filter: $carousel-dark-control-icon-filter; + } + + .carousel-indicators li { + background-color: $carousel-dark-indicator-active-bg; + } + + .carousel-caption { + color: $carousel-dark-caption-color; + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 79bb5f0e5..15f5d8153 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1254,14 +1254,18 @@ $carousel-caption-color: $white !default; $carousel-caption-padding-y: 1.25rem !default; $carousel-caption-spacer: 1.25rem !default; -$carousel-control-icon-width: 20px !default; +$carousel-control-icon-width: 2rem !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$carousel-dark-indicator-active-bg: $black !default; +$carousel-dark-caption-color: $black !default; +$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; + // Spinners @@ -1288,7 +1292,7 @@ $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; $btn-close-focus-opacity: 1 !default; $btn-close-disabled-opacity: .25 !default; -$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Code diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index b0de24cce..3222e06b9 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -206,6 +206,50 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
{{< /example >}} +## Dark variant + +Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`. + +{{< example >}} + +{{< /example >}} ## Usage From caef1214040b7a35c3c69fb6f023d4862613f1e4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 24 Sep 2020 13:25:10 -0700 Subject: [PATCH 32/67] Fix bundlewatch test I missed --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 7cab49f39..b89e0207b 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -30,7 +30,7 @@ }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "21 kB" + "maxSize": "21.5 kB" }, { "path": "./dist/js/bootstrap.bundle.js", From ca225788484e6aa11186434595984242882af126 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Fri, 25 Sep 2020 11:12:00 +0200 Subject: [PATCH 33/67] Restore `rem` unit (#31746) Fix unintentional unit change in https://github.com/twbs/bootstrap/commit/1af79bbc5267428af9fcb4a8fc9e6ab0b30328f4#diff-d8ee409a461718bfb6240710c8c73382 --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 15f5d8153..cd911ba3c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -545,7 +545,7 @@ $input-btn-font-family: null !default; $input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; -$input-btn-focus-width: .25em !default; +$input-btn-focus-width: .25rem !default; $input-btn-focus-color-opacity: .25 !default; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; From 74279460c2647853d44d5b03f2965792fc243f45 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Sep 2020 09:35:24 -0700 Subject: [PATCH 34/67] v5: Adjust docs sidebar and navbar (#31119) * Hide the docs nav on mobile, redesign it for two columns on narrow devices * Tweak spacing on ToC * Redesign sidebar and subnav * Revamp subnav mobile layout so everything's on one line * Tighten up masthead a little * Switch the icon for the subnav and do a little icon toggling * Fix mobile overflow since we changed guters stuff * Add the widths * make the subnav icon purple --- site/assets/scss/_masthead.scss | 4 - site/assets/scss/_navbar.scss | 19 +++-- site/assets/scss/_sidebar.scss | 15 ++++ site/assets/scss/_subnav.scss | 28 ++++++- site/layouts/_default/docs.html | 12 +-- site/layouts/partials/docs-navbar.html | 97 +++++++++++++----------- site/layouts/partials/docs-sidebar.html | 2 +- site/layouts/partials/docs-subnav.html | 13 ++-- site/layouts/partials/docs-versions.html | 6 +- site/layouts/partials/home/masthead.html | 2 +- site/layouts/partials/icons/collapse.svg | 4 + site/layouts/partials/icons/expand.svg | 4 + site/layouts/partials/icons/list.svg | 3 + 13 files changed, 130 insertions(+), 79 deletions(-) create mode 100644 site/layouts/partials/icons/collapse.svg create mode 100644 site/layouts/partials/icons/expand.svg create mode 100644 site/layouts/partials/icons/list.svg diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 770815a5a..a8ea52c86 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -2,10 +2,6 @@ padding: 3rem 0; background: linear-gradient(165deg, lighten($bd-purple-light, 16%) 50%, $white 50%); - @include media-breakpoint-up(sm) { - padding: 5rem 0; - } - h1 { @include font-size(4rem); line-height: 1; diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 1ba779f93..954304c3f 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,22 +1,21 @@ .bd-navbar { - padding: .625rem 0; + padding: .75rem 0; background-color: $bd-purple-bright; - @include media-breakpoint-down(lg) { - .navbar-nav-scroll { - width: 100%; + .navbar-toggler { + padding: 0; + border: 0; - .navbar-nav { - margin: -.5rem 0; - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - } + .bi { + width: 2rem; + fill: currentColor; } } .navbar-nav { .nav-link { + padding-right: $spacer / 4; + padding-left: $spacer / 4; color: rgba($white, .85); &:hover, diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 8f7db2e57..0575a465e 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,4 +1,11 @@ +.bd-sidebar { + @include media-breakpoint-down(md) { + margin: 0 -.75rem 1rem; + } +} + .bd-links { + overflow: auto; font-weight: 600; @include media-breakpoint-up(md) { @@ -14,6 +21,14 @@ overflow-y: auto; } + > ul { + @include media-breakpoint-down(md) { + padding: 1.5rem .75rem; + background-color: $gray-100; + border-bottom: 1px solid $gray-200; + } + } + a { padding: .1875rem .5rem; margin-top: .125rem; diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index c65b665db..566bc17fd 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -25,12 +25,32 @@ } .bd-search { - @include media-breakpoint-down(md) { - width: 100%; - } - .form-control:focus { border-color: $bd-purple-bright; box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); } } + +.bd-sidebar-toggle { + color: $text-muted; + + &:hover, + &:focus { + color: $bd-purple-bright; + } + + &:focus { + box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + } + + .bi { + fill: currentColor; + } + + .bi-collapse { display: none; } + + &:not(.collapsed) { + .bi-expand { display: none; } + .bi-collapse { display: inline-block; } + } +} diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index d54e2a9fd..5a5b64366 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -9,13 +9,13 @@ {{ partial "docs-navbar" . }} {{ partial "docs-subnav" . }} -
+
-
+
View on GitHub

{{ .Title | markdownify }}

@@ -25,10 +25,10 @@
{{ if (eq .Page.Params.toc true) }} -
- On this page - {{ .TableOfContents }} -
+
+ On this page + {{ .TableOfContents }} +
{{ end }}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index ac0c38443..e62c050f5 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -1,58 +1,67 @@ -
+
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 8fd77361f..776da2db1 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -2,7 +2,7 @@ {{- $url := split .Permalink "/" -}} {{- $page_slug := index $url (sub (len $url) 2) -}} -