Add new .overflow-x, .overflow-y, and object-fit utilities

Overflow utilities are self-explanatory.

The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container. Offers a responsive alternative to using `background-image` for a resizable fill/fit image.

scss/_close.scss

@@ -4,37 +4,46 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
+  --#{$prefix}btn-close-color: #{$btn-close-color};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
+
   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) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  color: var(--#{$prefix}btn-close-color);
+  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
   border: 0; // for button elements
   @include border-radius();
-  opacity: $btn-close-opacity;
+  opacity: var(--#{$prefix}btn-close-opacity);
 
   // Override <a>'s hover style
   &:hover {
-    color: $btn-close-color;
+    color: var(--#{$prefix}btn-close-color);
     text-decoration: none;
-    opacity: $btn-close-hover-opacity;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
   }
 
   &:focus {
     outline: 0;
-    box-shadow: $btn-close-focus-shadow;
-    opacity: $btn-close-focus-opacity;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
   }
 
   &:disabled,
   &.disabled {
     pointer-events: none;
     user-select: none;
-    opacity: $btn-close-disabled-opacity;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
 }
 
 .btn-close-white {
-  filter: $btn-close-white-filter;
+  filter: var(--#{$prefix}btn-close-white-filter);
 }

scss/_offcanvas.scss

@@ -12,6 +12,9 @@
   --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
   --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
+  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
+  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
   // scss-docs-end offcanvas-css-vars
 }
 
@@ -42,7 +45,7 @@
       background-clip: padding-box;
       outline: 0;
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(transform $offcanvas-transition-duration ease-in-out);
+      @include transition(var(--#{$prefix}offcanvas-transition));
 
       &.offcanvas-start {
         top: 0;
@@ -134,7 +137,7 @@
 
 .offcanvas-title {
   margin-bottom: 0;
-  line-height: $offcanvas-title-line-height;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }
 
 .offcanvas-body {

scss/_root.scss

@@ -70,4 +70,8 @@
   --#{$prefix}code-color: #{$code-color};
 
   --#{$prefix}highlight-bg: #{$mark-bg};
+
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
 }

scss/_utilities.scss

@@ -22,6 +22,20 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-float
+    // Object Fit utilities
+    // scss-docs-start utils-object-fit
+    "object-fit": (
+      responsive: true,
+      property: object-fit,
+      values: (
+        contain: contain,
+        cover: cover,
+        fill: fill,
+        scale: scale-down,
+        none: none,
+      )
+    ),
+    // scss-docs-end utils-object-fit
     // Opacity utilities
     // scss-docs-start utils-opacity
     "opacity": (
@@ -40,6 +54,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
@@ -473,11 +495,12 @@ $utilities: map-merge(
       property: font-weight,
       class: fw,
       values: (
-        light: $font-weight-light,
         lighter: $font-weight-lighter,
+        light: $font-weight-light,
         normal: $font-weight-normal,
-        bold: $font-weight-bold,
+        medium: $font-weight-medium,
         semibold: $font-weight-semibold,
+        bold: $font-weight-bold,
         bolder: $font-weight-bolder
       )
     ),

scss/_variables.scss

@@ -556,6 +556,7 @@ $font-size-lg:                $font-size-base * 1.25 !default;
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
+$font-weight-medium:          500 !default;
 $font-weight-semibold:        600 !default;
 $font-weight-bold:            700 !default;
 $font-weight-bolder:          bolder !default;

scss/mixins/_alert.scss

@@ -3,13 +3,14 @@
   --#{$prefix}alert-color: #{$color};
   --#{$prefix}alert-bg: #{$background};
   --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
 
   @if $enable-gradients {
     background-image: var(--#{$prefix}gradient);
   }
 
   .alert-link {
-    color: shade-color($color, 20%);
+    color: var(--#{$prefix}alert-link-color);
   }
 }
 // scss-docs-end alert-variant-mixin

site/content/docs/5.2/utilities/object-fit.md

@@ -0,0 +1,62 @@
+---
+layout: docs
+title: Object fit
+description: Use the object fit utilities to sets how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
+group: utilities
+toc: true
+---
+
+## How it works
+
+Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the container in a variety of ways; such as <i>"preserve that aspect ratio"</i> or <i>"stretch up and take up as much space as possible"</i>. 
+
+Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values
+
+- `contain`
+- `cover`
+- `fill`
+- `scale` (for scale-down)
+- `none`
+
+## Examples
+
+Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
+
+{{< example class="d-flex overflow-auto" >}}
+{{< placeholder width="20%" height="120" class="object-fit-contain  border rounded" text="Object Fit Contain" markup="img" >}}
+{{< placeholder width="20%" height="120" class="object-fit-cover  border rounded" text="Object Fit Cover" markup="img" >}}
+{{< placeholder width="20%" height="120" class="object-fit-fill  border rounded" text="Object Fit Fill" markup="img" >}}
+{{< placeholder width="20%" height="120" class="object-fit-scale  border rounded" text="Object Fit Scale Down" markup="img" >}}
+{{< placeholder width="20%" height="120" class="object-fit-none  border rounded" text="Object Fit None" markup="img" >}}
+{{< /example >}}
+
+## Responsive
+
+Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
+
+
+{{< example class="d-flex overflow-auto" >}}
+{{< placeholder width="20%" height="80" class="object-fit-sm-contain  border rounded" text="Contain on sm" markup="img" >}}
+{{< placeholder width="20%" height="80" class="object-fit-md-contain  border rounded" text="Contain on md" markup="img" >}}
+{{< placeholder width="20%" height="80" class="object-fit-lg-contain  border rounded" text="Contain on lg" markup="img" >}}
+{{< placeholder width="20%" height="80" class="object-fit-xl-contain  border rounded" text="Contain on xl" markup="img" >}}
+{{< placeholder width="20%" height="80" class="object-fit-xxl-contain  border rounded" text="Contain on xxl" markup="img" >}}
+{{< /example >}}
+
+## Video Tags
+
+Just like `<img>` tags, the `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` tags.
+
+```html
+  <video src="..." class="object-fit-contain" autoplay></video>
+  <video src="..." class="object-fit-cover" autoplay></video>
+  <video src="..." class="object-fit-fill" autoplay></video>
+  <video src="..." class="object-fit-scale" autoplay></video>
+  <video src="..." class="object-fit-none" autoplay></video>
+```
+
+### Utilities API
+
+Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-object-fit" file="scss/_utilities.scss" >}}

site/content/docs/5.2/utilities/overflow.md

@@ -3,8 +3,11 @@ layout: docs
 title: Overflow
 description: Use these shorthand utilities for quickly configuring how content overflows an element.
 group: utilities
+toc: true
 ---
 
+## Overflow
+
 Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
 
 <div class="bd-example d-md-flex">
@@ -29,6 +32,67 @@ Adjust the `overflow` property on the fly with four default values and classes.
 <div class="overflow-scroll">...</div>
 ```
 
+## Vertical and Horizontal Overflow
+
+Specify how the overflowing content within the horizontal direction <i>(x-axis)</i> or vertical direction <i>(y-axis)</i> of the element should behave. Classes can be combined for various effects as you need.
+
+### Overflow-x
+
+Adjust the `overflow-x` property with four default values and classes. These will only affect the overflow of content horizontally:
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
+    <div><code>.overflow-x-auto</code> example on an element</div>
+    <div> with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-hidden</code> example</div>
+    <div>on an element with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-visible</code> example </div>
+    <div>on an element with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-scroll</code> example on an element</div>
+    <div> with set width and height dimensions.</div>
+  </div>
+</div>
+
+```html
+<div class="overflow-x-auto">...</div>
+<div class="overflow-x-hidden">...</div>
+<div class="overflow-x-visible">...</div>
+<div class="overflow-x-scroll">...</div>
+```
+
+
+### Overflow-y
+
+Adjust the `overflow-y` property with four default values and classes. These will only affect the overflow of content vertically:
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-auto</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-visible</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
+  </div>
+</div>
+
+```html
+<div class="overflow-y-auto">...</div>
+<div class="overflow-y-hidden">...</div>
+<div class="overflow-y-visible">...</div>
+<div class="overflow-y-scroll">...</div>
+```
+
 Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
 
 ## Sass

site/data/sidebar.yml

@@ -123,6 +123,7 @@
     - title: Flex
     - title: Float
     - title: Interactions
+    - title: Object fit
     - title: Opacity
     - title: Overflow
     - title: Position

site/layouts/shortcodes/example.html

@@ -17,6 +17,7 @@
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $input := .Inner -}}
+{{- $content := .Inner -}}
 
 <div class="bd-example-snippet bd-code-snippet">
   {{- if eq $show_preview true -}}
@@ -40,7 +41,8 @@
       </div>
     {{- end -}}
 
-    {{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
+    {{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
+    {{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?/>` `<img src="..." class="$1" alt="...">` $content -}}
     {{- $content = replaceRE ` (class=" *?")` "" $content -}}
     {{- highlight (trim $content "\n") $lang "" -}}
   {{- end -}}

site/layouts/shortcodes/placeholder.html

@@ -4,11 +4,12 @@
   `args` are all optional and can be one of the following:
     * title: Used in the SVG `title` tag - default: "Placeholder"
     * text: The text to show in the image - default: "width x height"
-    * class: Class to add to the `svg` - default: "bd-placeholder-img"
+    * class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
     * color: The text color (foreground) - default: "#dee2e6"
     * background: The background color - default: "#868e96"
     * width: default: "100%"
     * height: default: "180px"
+    * markup: If it should render `svg` or `img` tags - default: "svg"
 */ -}}
 
 {{- $grays := $.Site.Data.grays -}}
@@ -26,8 +27,19 @@
 {{- $show_title := not (eq $title "false") -}}
 {{- $show_text := not (eq $text "false") -}}
 
-<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
-  {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
-  <rect width="100%" height="100%" fill="{{ $background }}"/>
-  {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
-</svg>
+{{- $markup := .Get "markup" | default "svg" -}}
+
+
+{{- if eq $markup "img" -}}
+  <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg style='font-size: 1.125rem; font-family:system-ui,-apple-system,%22Segoe UI%22,Roboto,%22Helvetica Neue%22,%22Noto Sans%22,%22Liberation Sans%22,Arial,sans-serif,%22Apple Color Emoji%22,%22Segoe UI Emoji%22,%22Segoe UI Symbol%22,%22Noto Color Emoji%22; -webkit-user-select: none; -moz-user-select: none; user-select: none; text-anchor: middle;' width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E
+      {{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
+      %3Crect width='100%25' height='100%25' fill='%23dee2e6'%3E%3C/rect%3E
+      {{- if $show_text }}%3Ctext x='50%25' y='50%25' fill='%23868e96' dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
+    %3C/svg%3E" />
+{{- else -}}
+  <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
+    {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
+    <rect width="100%" height="100%" fill="{{ $background }}"/>
+    {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
+  </svg>
+{{- end -}}