Skip to content

Commit

Permalink
Merge branch 'main' into patrickhlauke-issue36506
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickhlauke
patrickhlauke committed Aug 25, 2022
2 parents e8b8dd6 + c3c6591 commit 08ca108
Show file tree
Hide file tree
Showing 11 changed files with 719 additions and 540 deletions.
1,153 changes: 627 additions & 526 deletions package-lock.json
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions package.json
View file
Expand Up @@ -104,19 +104,19 @@
"@popperjs/core": "^2.11.5"
},
"devDependencies": {
"@babel/cli": "^7.18.9",
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"@babel/cli": "^7.18.10",
"@babel/core": "^7.18.10",
"@babel/preset-env": "^7.18.10",
"@popperjs/core": "^2.11.5",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.1",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^4.0.0",
"autoprefixer": "^10.4.7",
"autoprefixer": "^10.4.8",
"bundlewatch": "^0.3.3",
"clean-css-cli": "^5.6.1",
"cross-env": "^7.0.3",
"eslint": "^8.20.0",
"eslint": "^8.21.0",
"eslint-config-xo": "^0.41.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-markdown": "^3.0.0",
Expand All @@ -141,10 +141,10 @@
"npm-run-all": "^4.1.5",
"postcss": "^8.4.14",
"postcss-cli": "^10.0.0",
"rollup": "^2.77.0",
"rollup": "^2.77.2",
"rollup-plugin-istanbul": "^3.0.0",
"rtlcss": "^3.5.0",
"sass": "^1.54.0",
"sass": "^1.54.2",
"shelljs": "^0.8.5",
"stylelint": "^14.9.1",
"stylelint-config-twbs-bootstrap": "^5.0.0",
Expand Down
2 changes: 1 addition & 1 deletion scss/_functions.scss
View file
Expand Up @@ -109,7 +109,7 @@
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @author Kitty Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
Expand Down
3 changes: 2 additions & 1 deletion scss/_list-group.scss
View file
Expand Up @@ -104,7 +104,8 @@
border-color: var(--#{$prefix}list-group-active-border-color);
}

& + & {
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
& + .list-group-item {
border-top-width: 0;

&.active {
Expand Down
1 change: 1 addition & 0 deletions scss/forms/_floating-labels.scss
View file
Expand Up @@ -16,6 +16,7 @@
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
Expand Down
7 changes: 5 additions & 2 deletions scss/forms/_input-group.scss
View file
Expand Up @@ -120,10 +120,13 @@
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}

> :not(:first-child):not(.dropdown-menu):not(.form-floating)#{$validation-messages},
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: -$input-border-width;
@include border-start-radius(0);
}

> .form-floating:not(:first-child) > .form-control,
> .form-floating:not(:first-child) > .form-select {
margin-left: -$input-border-width;
@include border-start-radius(0);
}
}
9 changes: 8 additions & 1 deletion site/content/docs/5.2/components/popovers.md
View file
Expand Up @@ -83,6 +83,14 @@ const popover = new bootstrap.Popover('.example-popover', {
})
```

Another situation where you'll want to set an explicit custom `container` are popovers inside a [modal dialog]({{< docsref "/components/modal" >}}), to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won't be able to focus or activate these interactive elements.

```js
const popover = new bootstrap.Popover('.example-popover', {
container: '.modal-body'
})
```

### Custom popovers

{{< added-in "5.2.0" >}}
Expand Down Expand Up @@ -176,7 +184,6 @@ Additionally, while it is possible to also include interactive controls (such as
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
{{< /callout >}}


{{< bs-table "table" >}}
| Name | Type | Default | Description |
| --- | --- | --- | --- |
Expand Down
5 changes: 5 additions & 0 deletions site/content/docs/5.2/examples/features/features.css
View file
Expand Up @@ -29,3 +29,8 @@
background-position: center center;
background-size: cover;
}

.feature-icon-small {
width: 3rem;
height: 3rem;
}
59 changes: 59 additions & 0 deletions site/content/docs/5.2/examples/features/index.html
View file
Expand Up @@ -285,4 +285,63 @@ <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
</div>
</div>
</div>

<div class="b-example-divider"></div>

<div class="container px-4 py-5">
<h2 class="pb-2 border-bottom">Features with title</h2>

<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="d-flex flex-column align-items-start gap-2">
<h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary btn-lg">Primary button</a>
</div>
<div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="d-flex flex-column gap-2">
<div
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#collection" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
</div>

<div class="d-flex flex-column gap-2">
<div
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#gear-fill" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
</div>

<div class="d-flex flex-column gap-2">
<div
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#speedometer" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
</div>

<div class="d-flex flex-column gap-2">
<div
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em">
<use xlink:href="#table" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
</div>
</div>
</main>
2 changes: 1 addition & 1 deletion site/content/docs/5.2/forms/layout.md
View file
Expand Up @@ -291,7 +291,7 @@ You can then remix that once again with size-specific column classes.

## Inline forms

Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly.
Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-check` align properly.

{{< example >}}
<form class="row row-cols-lg-auto g-3 align-items-center">
Expand Down
4 changes: 3 additions & 1 deletion site/content/docs/5.2/layout/grid.md
View file
Expand Up @@ -420,6 +420,7 @@ Variables and maps determine the number of columns, the gutter width, and the me
```scss
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-row-columns: 6;
```

{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
Expand Down Expand Up @@ -499,11 +500,12 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus

### Columns and gutters

The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters.
The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters. `$grid-row-columns` is used to set the maximum number of columns of `.row-cols-*`, any number over this limit is ignored.

```scss
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;
```

### Grid tiers
Expand Down

0 comments on commit 08ca108

Please sign in to comment.