From c1bb1acf54bb86c7ea8cbb2c5d81bdf960d50f84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= Date: Fri, 6 Nov 2020 09:46:49 +0100 Subject: [PATCH 01/29] Remove firefox workaround for ::file-selector-button margin. (#32064) As per https://bugzilla.mozilla.org/show_bug.cgi?id=1673895, this workaround shouldn't be necessary in FF83+. Co-authored-by: XhmikosR --- scss/forms/_form-control.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 1fd1e1a8b..bac416f8c 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -78,7 +78,6 @@ padding: $input-padding-y $input-padding-x; margin: (-$input-padding-y) (-$input-padding-x); margin-inline-end: $input-padding-x; - -moz-margin-end: subtract($input-padding-x, 5px); // stylelint-disable-line property-no-vendor-prefix color: $form-file-button-color; @include gradient-bg($form-file-button-bg); pointer-events: none; @@ -156,7 +155,6 @@ padding: $input-padding-y-sm $input-padding-x-sm; margin: (-$input-padding-y-sm) (-$input-padding-x-sm); margin-inline-end: $input-padding-x-sm; - -moz-margin-end: subtract($input-padding-x-sm, 5px); // stylelint-disable-line property-no-vendor-prefix } &::-webkit-file-upload-button { @@ -177,7 +175,6 @@ padding: $input-padding-y-lg $input-padding-x-lg; margin: (-$input-padding-y-lg) (-$input-padding-x-lg); margin-inline-end: $input-padding-x-lg; - -moz-margin-end: subtract($input-padding-x-lg, 5px); // stylelint-disable-line property-no-vendor-prefix } &::-webkit-file-upload-button { From 82f24161320dc98fc529414e7cbf5d21e6f7616c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 6 Nov 2020 12:00:03 +0200 Subject: [PATCH 02/29] stylelint: pass the ` --rd` flag (#32063) * stylelint: pass the ` --rd` flag Should report any needless disables * Update _button-group.scss * Update _floating-labels.scss --- package.json | 2 +- scss/_button-group.scss | 2 -- scss/forms/_floating-labels.scss | 2 -- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index c2047c73b..15170d720 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "css": "npm-run-all css-compile css-prefix css-minify", "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/", "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*", - "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache", + "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd", "css-lint-vars": "fusv scss/ site/assets/scss/", "css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-utilities.min.css dist/css/bootstrap-utilities.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css", "css-prefix": "npm-run-all --parallel css-prefix-*", diff --git a/scss/_button-group.scss b/scss/_button-group.scss index b15c6292e..1571d1ea9 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-no-qualifying-type - // Make the div behave like a button .btn-group, .btn-group-vertical { diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 42e56f27b..8b2e2b8eb 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-no-vendor-prefix - .form-floating { position: relative; From f20335b6c1427e35aecf9a28b29629d83ec3f364 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Nov 2020 04:35:17 -0800 Subject: [PATCH 03/29] Add .d-grid to our display utilities (#32066) Co-authored-by: XhmikosR --- scss/_utilities.scss | 2 +- site/content/docs/5.0/utilities/display.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 7c98e6f51..cf6d4c8c5 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -23,7 +23,7 @@ $utilities: map-merge( print: true, property: display, class: d, - values: inline inline-block block table table-row table-cell flex inline-flex none + values: inline inline-block block grid table table-row table-cell flex inline-flex none ), "shadow": ( property: box-shadow, diff --git a/site/content/docs/5.0/utilities/display.md b/site/content/docs/5.0/utilities/display.md index a62878fde..2d033ba85 100644 --- a/site/content/docs/5.0/utilities/display.md +++ b/site/content/docs/5.0/utilities/display.md @@ -25,6 +25,7 @@ Where *value* is one of: - `inline` - `inline-block` - `block` +- `grid` - `table` - `table-cell` - `table-row` @@ -135,6 +136,7 @@ Change the `display` value of elements when printing with our print display util - `.d-print-inline` - `.d-print-inline-block` - `.d-print-block` +- `.d-print-grid` - `.d-print-table` - `.d-print-table-row` - `.d-print-table-cell` From 6a3761254050222d80eda2926ad6b6946a8787aa Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Nov 2020 21:36:51 +0200 Subject: [PATCH 04/29] Add dedicated accordion component based on Collapse JS --- .bundlewatch.config.json | 2 +- scss/_accordion.scss | 124 ++++++++++++++++++ scss/_card.scss | 27 ---- scss/_variables.scss | 27 ++++ scss/bootstrap.scss | 1 + site/content/docs/5.0/components/accordion.md | 106 +++++++++++++++ site/content/docs/5.0/components/alerts.md | 3 - site/content/docs/5.0/components/collapse.md | 52 -------- site/data/sidebar.yml | 1 + 9 files changed, 260 insertions(+), 83 deletions(-) create mode 100644 scss/_accordion.scss create mode 100644 site/content/docs/5.0/components/accordion.md diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index dd21b6d2f..3833ae9a6 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -30,7 +30,7 @@ }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "21.5 kB" + "maxSize": "21.75 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss new file mode 100644 index 000000000..53715274a --- /dev/null +++ b/scss/_accordion.scss @@ -0,0 +1,124 @@ +// +// Base styles +// + +.accordion-button { + display: flex; + align-items: center; + width: 100%; + padding: $accordion-button-padding-y $accordion-button-padding-x; + @include font-size($font-size-base); + color: $accordion-button-color; + background-color: $accordion-button-bg; + border: solid $accordion-border-color; + border-width: $accordion-border-width $accordion-border-width 0; + @include border-radius(0); + overflow-anchor: none; + + &:not(.collapsed) { + color: $accordion-button-active-color; + background-color: $accordion-button-active-bg; + + &::after { + background-image: escape-svg($accordion-button-active-icon); + transform: $accordion-icon-transform; + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: $accordion-icon-width; + height: $accordion-icon-width; + margin-left: auto; + content: ""; + background-image: escape-svg($accordion-button-icon); + background-repeat: no-repeat; + background-size: $accordion-icon-width; + transform-origin: center center; + @include transition($accordion-icon-transition); + } + + &:focus { + position: relative; + outline: 0; + box-shadow: $btn-focus-box-shadow; + } +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + @include border-radius($accordion-border-radius); + + &:last-of-type { + .accordion-button { + border-bottom-width: $accordion-border-width; + + // Only set a border-radius on the last item if the accordion is collapsed + &.collapsed { + @include border-bottom-radius($accordion-border-radius); + } + } + + .accordion-body { + border-width: 0 $accordion-border-width $accordion-border-width; + @include border-bottom-radius($accordion-border-radius); + } + } + + &:first-of-type { + .accordion-button { + @include border-top-radius($accordion-border-radius); + } + } +} + +.accordion-body { + padding: $accordion-body-padding-y $accordion-body-padding-x; + border: solid $accordion-border-color; + border-width: $accordion-border-width $accordion-border-width 0; +} + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-button { + border-right: 0; + border-left: 0; + @include border-radius(0); + } + + .accordion-body { + border-width: 0; + } + + .accordion-item { + border-right-width: 0; + border-left-width: 0; + @include border-radius(0); + + &:first-of-type { + .accordion-button { + border-top-width: 0; + @include border-top-radius(0); + } + } + + &:last-of-type { + .accordion-button { + border-bottom-width: 0; + @include border-bottom-radius(0); + } + + .accordion-body { + border-width: 0; + } + } + } +} diff --git a/scss/_card.scss b/scss/_card.scss index a526ec143..9b0f4969a 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -213,30 +213,3 @@ } } } - - -// -// Accordion -// - -.accordion { - overflow-anchor: none; - - > .card { - overflow: hidden; - - &:not(:last-of-type) { - border-bottom: 0; - @include border-bottom-radius(0); - } - - &:not(:first-of-type) { - @include border-top-radius(0); - } - - > .card-header { - @include border-radius(0); - margin-bottom: -$card-border-width; - } - } -} diff --git a/scss/_variables.scss b/scss/_variables.scss index 781ec79a4..6c5a070f2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1014,6 +1014,33 @@ $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width / 2 !default; +// Accordion +$accordion-padding-y: 1rem !default; +$accordion-padding-x: 1.25rem !default; +$accordion-color: $body-color !default; +$accordion-bg: transparent !default; +$accordion-border-width: $border-width !default; +$accordion-border-color: rgba($black, .125) !default; +$accordion-border-radius: $border-radius !default; + +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-padding-x: $accordion-padding-x !default; +$accordion-button-color: $accordion-color !default; +$accordion-button-bg: $accordion-bg !default; +$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default; +$accordion-button-active-color: $primary !default; + +$accordion-icon-width: 1.25rem !default; +$accordion-icon-color: $accordion-color !default; +$accordion-icon-active-color: $accordion-button-active-color !default; +$accordion-icon-transition: transform .2s ease-in-out !default; +$accordion-icon-transform: rotate(180deg) !default; + +$accordion-button-icon: url("data:image/svg+xml,") !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default; // Tooltips diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index c65caab6d..27514484c 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -28,6 +28,7 @@ @import "nav"; @import "navbar"; @import "card"; +@import "accordion"; @import "breadcrumb"; @import "pagination"; @import "badge"; diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md new file mode 100644 index 000000000..9844cf868 --- /dev/null +++ b/site/content/docs/5.0/components/accordion.md @@ -0,0 +1,106 @@ +--- +layout: docs +title: Accordion +description: Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. +group: components +aliases: + - "/components/" + - "/docs/5.0/components/" +toc: true +--- + +## How it works + +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`. + +{{< callout info >}} +{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< /callout >}} + +## Example + +Click the accordions below to expand/collapse the accordion content. + +{{< example >}} +
+
+

+ +

+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+{{< /example >}} + +### Flush + +Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. + +{{< example class="bg-light" >}} +
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+{{< /example >}} + +## Accessibility + +Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 3eecceea2..5c68a3d4c 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -3,9 +3,6 @@ layout: docs title: Alerts description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. group: components -aliases: - - "/components/" - - "/docs/5.0/components/" toc: true --- diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index c460f6b9a..076c17289 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -69,58 +69,6 @@ Multiple ` - - - -
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
- -
-
-

- -

-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
-
-
-

- -

-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
- -{{< /example >}} - ## Accessibility Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `` or `
`), the attribute `role="button"` should be added to the element. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 7ee35db95..a12db2550 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -53,6 +53,7 @@ - title: Components pages: + - title: Accordion - title: Alerts - title: Badge - title: Breadcrumb From 3df4dd15e407dce8bc665fc0140497312856ec47 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Nov 2020 12:56:24 -0800 Subject: [PATCH 05/29] Update relative position hack for layers Switches to slightly more verbose, but more consistent, z-index layering we use elsewhere (e.g., pagination). Doing this ensures we're not toggling position on and off, but rather z-index. --- scss/_accordion.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 53715274a..0990a15c6 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -3,6 +3,7 @@ // .accordion-button { + position: relative; display: flex; align-items: center; width: 100%; @@ -39,8 +40,12 @@ @include transition($accordion-icon-transition); } + &:hover { + z-index: 2; + } + &:focus { - position: relative; + z-index: 3; outline: 0; box-shadow: $btn-focus-box-shadow; } From d6a72c4e1bb1dafdb21e759e42c2e6aa574ade74 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Nov 2020 12:56:38 -0800 Subject: [PATCH 06/29] Remove default transform-origin per code review --- scss/_accordion.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 0990a15c6..479aad1cc 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -36,7 +36,6 @@ background-image: escape-svg($accordion-button-icon); background-repeat: no-repeat; background-size: $accordion-icon-width; - transform-origin: center center; @include transition($accordion-icon-transition); } From 4c1f807142d4ddd6b63ea56b148ec20a5ae194bc Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 5 Nov 2020 21:18:38 +0100 Subject: [PATCH 07/29] Fix missing border & add transitions --- scss/_accordion.scss | 63 +++++++++---------- scss/_variables.scss | 4 ++ site/content/docs/5.0/components/accordion.md | 12 ++-- 3 files changed, 40 insertions(+), 39 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 479aad1cc..a68aaa70e 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -11,10 +11,14 @@ @include font-size($font-size-base); color: $accordion-button-color; background-color: $accordion-button-bg; - border: solid $accordion-border-color; - border-width: $accordion-border-width $accordion-border-width 0; + border: $accordion-border-width solid $accordion-border-color; @include border-radius(0); overflow-anchor: none; + @include transition($accordion-transition); + + &.collapsed { + border-bottom-width: 0; + } &:not(.collapsed) { color: $accordion-button-active-color; @@ -45,8 +49,9 @@ &:focus { z-index: 3; + border-color: $accordion-button-focus-border-color; outline: 0; - box-shadow: $btn-focus-box-shadow; + box-shadow: $accordion-button-focus-box-shadow; } } @@ -55,35 +60,35 @@ } .accordion-item { - @include border-radius($accordion-border-radius); - - &:last-of-type { - .accordion-button { - border-bottom-width: $accordion-border-width; - - // Only set a border-radius on the last item if the accordion is collapsed - &.collapsed { - @include border-bottom-radius($accordion-border-radius); - } - } - - .accordion-body { - border-width: 0 $accordion-border-width $accordion-border-width; - @include border-bottom-radius($accordion-border-radius); - } - } - &:first-of-type { .accordion-button { @include border-top-radius($accordion-border-radius); } } + + &:last-of-type { + .accordion-button { + // Only set a border-radius on the last item if the accordion is collapsed + &.collapsed { + border-bottom-width: $accordion-border-width; + @include border-bottom-radius($accordion-border-radius); + } + } + + .accordion-collapse { + border-bottom-width: $accordion-border-width; + @include border-bottom-radius($accordion-border-radius); + } + } +} + +.accordion-collapse { + border: solid $accordion-border-color; + border-width: 0 $accordion-border-width; } .accordion-body { padding: $accordion-body-padding-y $accordion-body-padding-x; - border: solid $accordion-border-color; - border-width: $accordion-border-width $accordion-border-width 0; } @@ -98,15 +103,11 @@ @include border-radius(0); } - .accordion-body { + .accordion-collapse { border-width: 0; } .accordion-item { - border-right-width: 0; - border-left-width: 0; - @include border-radius(0); - &:first-of-type { .accordion-button { border-top-width: 0; @@ -115,14 +116,10 @@ } &:last-of-type { - .accordion-button { + .accordion-button.collapsed { border-bottom-width: 0; @include border-bottom-radius(0); } - - .accordion-body { - border-width: 0; - } } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 6c5a070f2..7773ebaf1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1030,9 +1030,13 @@ $accordion-button-padding-y: $accordion-padding-y !default; $accordion-button-padding-x: $accordion-padding-x !default; $accordion-button-color: $accordion-color !default; $accordion-button-bg: $accordion-bg !default; +$accordion-transition: $btn-transition, border-radius .15s ease !default; $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default; $accordion-button-active-color: $primary !default; +$accordion-button-focus-border-color: $input-focus-border-color !default; +$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; + $accordion-icon-width: 1.25rem !default; $accordion-icon-color: $accordion-color !default; $accordion-icon-active-color: $accordion-button-active-color !default; diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md index 9844cf868..1f08a7911 100644 --- a/site/content/docs/5.0/components/accordion.md +++ b/site/content/docs/5.0/components/accordion.md @@ -29,7 +29,7 @@ Click the accordions below to expand/collapse the accordion content. Accordion Item #1 -
+
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
@@ -41,7 +41,7 @@ Click the accordions below to expand/collapse the accordion content. Accordion Item #2 -
+
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
@@ -53,7 +53,7 @@ Click the accordions below to expand/collapse the accordion content. Accordion Item #3 -
+
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
@@ -74,7 +74,7 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a Accordion Item #1 -
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
@@ -84,7 +84,7 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a Accordion Item #2 -
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
@@ -94,7 +94,7 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a Accordion Item #3 -
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
From 82ac087c4d0c73f2e470f82c933463aede3f1284 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 5 Nov 2020 21:26:01 +0100 Subject: [PATCH 08/29] Shade color for better color contrast --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 7773ebaf1..d1782f2c4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1032,7 +1032,7 @@ $accordion-button-color: $accordion-color !default; $accordion-button-bg: $accordion-bg !default; $accordion-transition: $btn-transition, border-radius .15s ease !default; $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default; -$accordion-button-active-color: $primary !default; +$accordion-button-active-color: shade-color($primary, 10%) !default; $accordion-button-focus-border-color: $input-focus-border-color !default; $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; From bb6daab961c8698900e2d0c01e5793f9219334d9 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 6 Nov 2020 11:00:11 +0200 Subject: [PATCH 09/29] _variables.scss: reorder SVG attributes This results in slightly better gzip compression --- scss/_variables.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index d1782f2c4..de7656e91 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -814,7 +814,7 @@ $form-feedback-invalid-color: $danger !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; -$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; // scss-docs-start form-validation-states $form-validation-states: ( @@ -1043,8 +1043,8 @@ $accordion-icon-active-color: $accordion-button-active-color !defaul $accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transform: rotate(180deg) !default; -$accordion-button-icon: url("data:image/svg+xml,") !default; -$accordion-button-active-icon: url("data:image/svg+xml,") !default; +$accordion-button-icon: url("data:image/svg+xml,") !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default; // Tooltips @@ -1281,8 +1281,8 @@ $carousel-caption-spacer: 1.25rem !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`) @@ -1311,7 +1311,7 @@ $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-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; From 95df642ac91910f738f59b9182563e1d638ed927 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 8 Nov 2020 20:31:19 +0200 Subject: [PATCH 10/29] reboot.md: mention "Liberation Sans" (#32084) --- site/content/docs/5.0/content/reboot.md | 1 + 1 file changed, 1 insertion(+) diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md index 18f4fb088..60564c152 100644 --- a/site/content/docs/5.0/content/reboot.md +++ b/site/content/docs/5.0/content/reboot.md @@ -45,6 +45,7 @@ $font-family-sans-serif: "Helvetica Neue", Arial, // Linux "Noto Sans", + "Liberation Sans", // Sans serif fallback sans-serif, // Emoji fonts From afd5eea2a7221b8e9148eef431fec37d21da5f70 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 8 Nov 2020 20:32:32 +0200 Subject: [PATCH 11/29] config.yml: remove the unused "expo" parameter (#32086) --- config.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/config.yml b/config.yml index 81d1c794c..bcaec1cdd 100644 --- a/config.yml +++ b/config.yml @@ -57,7 +57,6 @@ params: slack: "https://bootstrap-slack.herokuapp.com/" opencollective: "https://opencollective.com/bootstrap" blog: "https://blog.getbootstrap.com/" - expo: "https://expo.getbootstrap.com/" themes: "https://themes.getbootstrap.com/" icons: "https://icons.getbootstrap.com/" From 270f7be9d2777eb8d1ecc18f3476c699eba33278 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 8 Nov 2020 20:33:04 +0200 Subject: [PATCH 12/29] download.md: link to JS files comparison too (#32087) --- site/content/docs/5.0/getting-started/download.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/getting-started/download.md b/site/content/docs/5.0/getting-started/download.md index 1b62d9835..cca375065 100644 --- a/site/content/docs/5.0/getting-started/download.md +++ b/site/content/docs/5.0/getting-started/download.md @@ -11,7 +11,7 @@ toc: true Download ready-to-use compiled code for **Bootstrap v{{< param current_version >}}** to easily drop into your project, which includes: - Compiled and minified CSS bundles (see [CSS files comparison]({{< docsref "/getting-started/contents#css-files" >}})) -- Compiled and minified JavaScript plugins +- Compiled and minified JavaScript plugins (see [JS files comparison]({{< docsref "/getting-started/contents#js-files" >}})) This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js. From 4ed742e4db4717fc7de68a542fe2d825cdddfeb7 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 8 Nov 2020 20:36:46 +0200 Subject: [PATCH 13/29] Partially revert "Move this to a partial to work around the stray `p` issue." (#32076) This partially reverts commit 23ddfa99a33c81916666326e0cfd2582dacfca44. --- .../docs/5.0/getting-started/introduction.md | 16 +++++++++++++++- .../components-requiring-javascript.html | 15 --------------- 2 files changed, 15 insertions(+), 16 deletions(-) delete mode 100644 site/layouts/partials/getting-started/components-requiring-javascript.html diff --git a/site/content/docs/5.0/getting-started/introduction.md b/site/content/docs/5.0/getting-started/introduction.md index 2415c900a..ed04c98d6 100644 --- a/site/content/docs/5.0/getting-started/introduction.md +++ b/site/content/docs/5.0/getting-started/introduction.md @@ -51,7 +51,21 @@ If you use ` @@ -36,7 +36,7 @@ Include everything you need in one script with our bundle. Our `bootstrap.bundle #### Separate -If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins. +If you decide to go with the separate scripts solution, Popper.js must come first (if you're using tooltips or popovers), and then our JavaScript plugins. ```html From 2ab98a43f0f6bc2a9cbfd8469e6b140f1b26ce50 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 10 Nov 2020 17:18:18 +0200 Subject: [PATCH 29/29] Bump autoprefixer from 10.0.1 to 10.0.2 (#32119) Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.0.1 to 10.0.2. - [Release notes](https://github.com/postcss/autoprefixer/releases) - [Changelog](https://github.com/postcss/autoprefixer/blob/master/CHANGELOG.md) - [Commits](https://github.com/postcss/autoprefixer/compare/10.0.1...10.0.2) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 43 ++++++++++++++++++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index edf66fa8d..99ed92f57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1569,17 +1569,50 @@ "optional": true }, "autoprefixer": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.1.tgz", - "integrity": "sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==", + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.2.tgz", + "integrity": "sha512-okBmu9OMdt6DNEcZmnl0IYVv8Xl/xYWRSnc2OJ9UJEOt1u30opG1B8aLsViqKryBaYv1SKB4f85fOGZs5zYxHQ==", "dev": true, "requires": { - "browserslist": "^4.14.5", - "caniuse-lite": "^1.0.30001137", + "browserslist": "^4.14.7", + "caniuse-lite": "^1.0.30001157", "colorette": "^1.2.1", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", "postcss-value-parser": "^4.1.0" + }, + "dependencies": { + "browserslist": { + "version": "4.14.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.7.tgz", + "integrity": "sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30001157", + "colorette": "^1.2.1", + "electron-to-chromium": "^1.3.591", + "escalade": "^3.1.1", + "node-releases": "^1.1.66" + } + }, + "caniuse-lite": { + "version": "1.0.30001157", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz", + "integrity": "sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.592", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.592.tgz", + "integrity": "sha512-kGNowksvqQiPb1pUSQKpd8JFoGPLxYOwduNRCqCxGh/2Q1qE2JdmwouCW41lUzDxOb/2RIV4lR0tVIfboWlO9A==", + "dev": true + }, + "node-releases": { + "version": "1.1.66", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.66.tgz", + "integrity": "sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==", + "dev": true + } } }, "axios": { diff --git a/package.json b/package.json index 950c99b86..c03fdd521 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@rollup/plugin-babel": "^5.2.1", "@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-node-resolve": "^10.0.0", - "autoprefixer": "^10.0.1", + "autoprefixer": "^10.0.2", "bundlewatch": "^0.3.1", "clean-css-cli": "^4.3.0", "cross-env": "^7.0.2",