mirror of
https://github.com/twbs/bootstrap.git
synced 2025-04-22 00:32:19 +02:00
Give helpers folder an index.scss, migrate ratio helper to aspect-ratio utility
This commit is contained in:
Mark Otto
parent
6ec2a9c5f4
commit
4977970844
@ -1,12 +0,0 @@
|
||||
@import "helpers/clearfix";
|
||||
@import "helpers/color-bg";
|
||||
@import "helpers/colored-links";
|
||||
@import "helpers/focus-ring";
|
||||
@import "helpers/icon-link";
|
||||
@import "helpers/ratio";
|
||||
@import "helpers/position";
|
||||
@import "helpers/stacks";
|
||||
@import "helpers/visually-hidden";
|
||||
@import "helpers/stretched-link";
|
||||
@import "helpers/text-truncation";
|
||||
@import "helpers/vr";
|
||||
@ -18,6 +18,13 @@ $utilities: map.merge(
|
||||
values: baseline top middle bottom text-bottom text-top
|
||||
),
|
||||
// scss-docs-end utils-vertical-align
|
||||
// scss-docs-start utils-aspect-ratio
|
||||
"aspect-ratio": (
|
||||
property: aspect-ratio,
|
||||
class: ratio,
|
||||
values: $aspect-ratios
|
||||
),
|
||||
// scss-docs-end utils-aspect-ratio
|
||||
// scss-docs-start utils-float
|
||||
"float": (
|
||||
responsive: true,
|
||||
|
||||
@ -296,16 +296,15 @@ $transition-collapse: height .35s ease !default;
|
||||
$transition-collapse-width: width .35s ease !default;
|
||||
// scss-docs-end collapse-transition
|
||||
|
||||
// stylelint-disable function-disallowed-list
|
||||
// scss-docs-start aspect-ratios
|
||||
$aspect-ratios: (
|
||||
"1x1": 100%,
|
||||
"4x3": calc(3 / 4 * 100%),
|
||||
"16x9": calc(9 / 16 * 100%),
|
||||
"21x9": calc(9 / 21 * 100%)
|
||||
"auto": auto,
|
||||
"4x3": 4 / 3,
|
||||
"1x1": 1 / 1,
|
||||
"16x9": 16 / 9,
|
||||
"21x9": 21 / 9
|
||||
) !default;
|
||||
// scss-docs-end aspect-ratios
|
||||
// stylelint-enable function-disallowed-list
|
||||
|
||||
// Typography
|
||||
//
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
// mdo-do: remve for utilities
|
||||
|
||||
// Credit: Nicolas Gallagher and SUIT CSS.
|
||||
|
||||
.ratio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: var(--#{$prefix}aspect-ratio);
|
||||
content: "";
|
||||
}
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $ratio in $aspect-ratios {
|
||||
.ratio-#{$key} {
|
||||
--#{$prefix}aspect-ratio: #{$ratio};
|
||||
}
|
||||
}
|
||||
11
scss/helpers/index.scss
Normal file
11
scss/helpers/index.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "clearfix";
|
||||
@import "color-bg";
|
||||
@import "colored-links";
|
||||
@import "focus-ring";
|
||||
@import "icon-link";
|
||||
@import "position";
|
||||
@import "stacks";
|
||||
@import "visually-hidden";
|
||||
@import "stretched-link";
|
||||
@import "text-truncation";
|
||||
@import "vr";
|
||||
@ -107,7 +107,6 @@
|
||||
- title: Focus ring
|
||||
- title: Icon link
|
||||
- title: Position
|
||||
- title: Ratio
|
||||
- title: Stacks
|
||||
- title: Stretched link
|
||||
- title: Text truncation
|
||||
@ -119,6 +118,7 @@
|
||||
icon_color: red
|
||||
pages:
|
||||
- title: API
|
||||
- title: Aspect ratio
|
||||
- title: Background
|
||||
- title: Borders
|
||||
- title: Colors
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
title: Ratios
|
||||
description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
|
||||
toc: true
|
||||
---
|
||||
|
||||
## About
|
||||
|
||||
Use the ratio helper to manage the aspect ratios of external content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied from the parent `.ratio` class directly to the child.
|
||||
|
||||
Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
|
||||
|
||||
<Callout>
|
||||
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]([[docsref:/content/reboot]]).
|
||||
</Callout>
|
||||
|
||||
## Example
|
||||
|
||||
Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector `.ratio > *`.
|
||||
|
||||
<Example code={`<div class="ratio ratio-16x9">
|
||||
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
|
||||
</div>`} />
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
|
||||
|
||||
<Example class="bd-example-ratios" code={`<div class="ratio ratio-1x1">
|
||||
<div>1x1</div>
|
||||
</div>
|
||||
<div class="ratio ratio-4x3">
|
||||
<div>4x3</div>
|
||||
</div>
|
||||
<div class="ratio ratio-16x9">
|
||||
<div>16x9</div>
|
||||
</div>
|
||||
<div class="ratio ratio-21x9">
|
||||
<div>21x9</div>
|
||||
</div>`} />
|
||||
|
||||
## Custom ratios
|
||||
|
||||
Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
|
||||
|
||||
For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`.
|
||||
|
||||
<Example class="bd-example-ratios" code={`<div class="ratio" style="--bs-aspect-ratio: 50%;">
|
||||
<div>2x1</div>
|
||||
</div>`} />
|
||||
|
||||
This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.
|
||||
|
||||
```scss
|
||||
.ratio-4x3 {
|
||||
@include media-breakpoint-up(md) {
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<Example class="bd-example-ratios bd-example-ratios-breakpoint" code={`<div class="ratio ratio-4x3">
|
||||
<div>4x3, then 2x1</div>
|
||||
</div>`} />
|
||||
|
||||
|
||||
## Sass maps
|
||||
|
||||
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
|
||||
|
||||
<ScssDocs name="aspect-ratios" file="scss/_variables.scss" />
|
||||
47
site/src/content/docs/utilities/aspect-ratio.mdx
Normal file
47
site/src/content/docs/utilities/aspect-ratio.mdx
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Aspect Ratio
|
||||
description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
|
||||
toc: true
|
||||
---
|
||||
|
||||
Use the ratio utility to manage the aspect ratios of content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Customize the available aspect ratios with the Sass variable or the utility API.
|
||||
|
||||
<Callout>
|
||||
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]([[docsref:/content/reboot]]).
|
||||
</Callout>
|
||||
|
||||
## Example
|
||||
|
||||
Add your ratio utility to the element you want to modify, like an `<iframe>`. Ratio utilities also pair well with any width utilities, as shown below.
|
||||
|
||||
<Example code={`<iframe class="w-100 ratio-16x9" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>`} />
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
|
||||
|
||||
<Example class="bd-example-ratios" code={`<div class="ratio-auto">
|
||||
<div>Auto</div>
|
||||
</div>
|
||||
<div class="w-25 ratio-1x1">
|
||||
<div>1x1</div>
|
||||
</div>
|
||||
<div class="w-50 ratio-4x3">
|
||||
<div>4x3</div>
|
||||
</div>
|
||||
<div class="w-75 ratio-16x9">
|
||||
<div>16x9</div>
|
||||
</div>
|
||||
<div class="w-100 ratio-21x9">
|
||||
<div>21x9</div>
|
||||
</div>`} />
|
||||
|
||||
## Custom ratios
|
||||
|
||||
mdo-do: do we bring these back?
|
||||
|
||||
## Sass map
|
||||
|
||||
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
|
||||
|
||||
<ScssDocs name="aspect-ratios" file="scss/_variables.scss" />
|
||||
@ -183,29 +183,17 @@
|
||||
|
||||
// Ratio helpers
|
||||
.bd-example-ratios {
|
||||
.ratio {
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
[class*="ratio"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--bs-secondary-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bd-example-ratios-breakpoint {
|
||||
.ratio-4x3 {
|
||||
width: 16rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-offcanvas {
|
||||
.offcanvas {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user