From 310758110e103c3711ed28785f4f0d2f9fffccea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 2 Dec 2020 21:43:38 -0800 Subject: [PATCH 001/171] Stub out a quick-grid helper class --- scss/_helpers.scss | 1 + scss/helpers/_quick-grid.scss | 7 ++ site/content/docs/5.0/helpers/quick-grid.md | 73 +++++++++++++++++++++ site/data/sidebar.yml | 1 + 4 files changed, 82 insertions(+) create mode 100644 scss/helpers/_quick-grid.scss create mode 100644 site/content/docs/5.0/helpers/quick-grid.md diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 8f566d12f..121ecc064 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -2,6 +2,7 @@ @import "helpers/colored-links"; @import "helpers/ratio"; @import "helpers/position"; +@import "helpers/quick-grid"; @import "helpers/visually-hidden"; @import "helpers/stretched-link"; @import "helpers/text-truncation"; diff --git a/scss/helpers/_quick-grid.scss b/scss/helpers/_quick-grid.scss new file mode 100644 index 000000000..7dfa33a66 --- /dev/null +++ b/scss/helpers/_quick-grid.scss @@ -0,0 +1,7 @@ +// scss-docs-start quick-grid +.quick-grid { + --columns: 1; + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); +} +// scss-docs-end quick-grid diff --git a/site/content/docs/5.0/helpers/quick-grid.md b/site/content/docs/5.0/helpers/quick-grid.md new file mode 100644 index 000000000..8af4b1550 --- /dev/null +++ b/site/content/docs/5.0/helpers/quick-grid.md @@ -0,0 +1,73 @@ +--- +layout: docs +title: Quick grid +description: Helpers that build on top of our CSS Grid utilities to make component layout faster and easier than ever. +group: helpers +toc: true +--- + +## How it works + +The quick grid helper utilizes CSS Grid layout and some local CSS custom properties to quickly and efficiently configure the layout of set of elements. + +{{< scss-docs name="quick-grid" file="scss/helpers/_quick-grid.scss" >}} + +We set the `display` to engage the CSS Grid, specify a default `--columns` count of `1` for easy vertical stacking, and provide a column template that uses the `--columns` to equally layout any number of columns. + +When paired with `.gap-*` utilities, you can easily adjust the `gap` between elements. + +## Examples + +### Vertical + +Create a single column of stacked items. + +{{< example >}} +
+
First item
+
Second item
+
Third item
+
+{{< /example >}} + +And the same approach with ` + + + +{{< /example >}} + +### Horizontal + +Quickly turn a vertical stack into a horizontal stack by adding increasing the default `--columns` to any number. + +{{< example >}} +
+
First item
+
Second item
+
Third item
+
+{{< /example >}} + +And once again, the same but with ` + + + +{{< /example >}} + +When you have a `--columns` value higher than the number of elements, they'll only take up their fraction of the available space. + +{{< example >}} +
+ + + +
+{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index a12db2550..9da57b08b 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -82,6 +82,7 @@ - title: Colored links - title: Ratio - title: Position + - title: Quick grid - title: Visually hidden - title: Stretched link - title: Text truncation From 321ee7a1ad8584c1bfe604b5d16950d6051d52a4 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 4 Dec 2020 16:00:21 +0200 Subject: [PATCH 002/171] cheatsheet.js: use `event` instead of `e` (#32335) --- site/content/docs/5.0/examples/cheatsheet/cheatsheet.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js index bafea8e92..541cf9350 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js @@ -28,8 +28,8 @@ // Disable empty links document.querySelectorAll('[href="#"]') .forEach(function (link) { - link.addEventListener('click', function (e) { - e.preventDefault() + link.addEventListener('click', function (event) { + event.preventDefault() }) }) From 1f2e600304fc9ac6b0bd98ce5d02ee9048d7791f Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sun, 29 Nov 2020 15:22:15 +0100 Subject: [PATCH 003/171] Add toast positioning --- scss/_toasts.scss | 28 +++++----- scss/_variables.scss | 1 + site/assets/scss/_component-examples.scss | 5 ++ site/content/docs/5.0/components/toasts.md | 64 ++++++++++++---------- 4 files changed, 55 insertions(+), 43 deletions(-) diff --git a/scss/_toasts.scss b/scss/_toasts.scss index e2b98e600..7a1cf7354 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,25 +1,17 @@ .toast { - max-width: $toast-max-width; + width: $toast-max-width; + max-width: 100%; @include font-size($toast-font-size); color: $toast-color; + pointer-events: auto; background-color: $toast-background-color; background-clip: padding-box; border: $toast-border-width solid $toast-border-color; box-shadow: $toast-box-shadow; - opacity: 0; @include border-radius($toast-border-radius); - &:not(:last-child) { - margin-bottom: $toast-padding-x; - } - - &.showing { - opacity: 1; - } - - &.show { - display: block; - opacity: 1; + &:not(.showing):not(.show) { + opacity: 0; } &.hide { @@ -27,6 +19,16 @@ } } +.toast-container { + width: max-content; + max-width: 100%; + pointer-events: none; + + > :not(:last-child) { + margin-bottom: $toast-spacing; + } +} + .toast-header { display: flex; align-items: center; diff --git a/scss/_variables.scss b/scss/_variables.scss index b97e520d7..d9acaca98 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1108,6 +1108,7 @@ $toast-border-width: 1px !default; $toast-border-color: rgba(0, 0, 0, .1) !default; $toast-border-radius: $border-radius !default; $toast-box-shadow: $box-shadow !default; +$toast-spacing: $container-padding-x !default; $toast-header-color: $gray-600 !default; $toast-header-background-color: rgba($white, .85) !default; diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index b29635500..ce7ea7539 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -265,6 +265,11 @@ } } +// Toasts +.bd-example-toasts { + min-height: 240px; +} + // // Code snippets // diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index be368c76e..ecee0ecdf 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -13,7 +13,6 @@ Toasts are lightweight notifications designed to mimic the push notifications th Things to know when using the toast plugin: - Toasts are opt-in for performance reasons, so **you must initialize them yourself**. -- **Please note that you are responsible for positioning toasts.** - Toasts will automatically hide if you do not specify `autohide: false`. {{< callout info >}} @@ -62,30 +61,32 @@ Toasts are slightly translucent, too, so they blend over whatever they might app ### Stacking -When you have multiple toasts, we default to vertically stacking them in a readable manner. +You can stack toasts by wrapping them in a toast container, which will vertically add some spacing. {{< example class="bg-light" >}} -