mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-13 17:14:04 +02:00
add new RefTable for utilities
This commit is contained in:
Mark Otto
@@ -80,7 +80,7 @@ const simplifiedMarkup = markup
|
||||
showMarkup && (
|
||||
<>
|
||||
{showPreview && (
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button
|
||||
|
||||
163
site/src/components/shortcodes/RefTable.astro
Normal file
163
site/src/components/shortcodes/RefTable.astro
Normal file
@@ -0,0 +1,163 @@
|
||||
---
|
||||
import { Prism } from '@astrojs/prism'
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Array of reference items with class names and code snippets, or section headings
|
||||
*/
|
||||
data: Array<{
|
||||
type?: 'item' | 'section';
|
||||
class?: string;
|
||||
code?: string;
|
||||
language?: string; // Language for syntax highlighting (css, scss, js, etc.)
|
||||
description?: string;
|
||||
title?: string; // Used for section headings
|
||||
}>;
|
||||
/**
|
||||
* The CSS class to apply to the table.
|
||||
* @default "table"
|
||||
*/
|
||||
class?: string;
|
||||
/**
|
||||
* Column headers for the table
|
||||
* @default ["Class", "Styles"]
|
||||
*/
|
||||
headers?: [string, string];
|
||||
}
|
||||
|
||||
const {
|
||||
data,
|
||||
class: tableClass = "table",
|
||||
headers = ["Class", "Styles"]
|
||||
} = Astro.props;
|
||||
|
||||
// Helper function to process class names with placeholder syntax
|
||||
function processClassName(className: string) {
|
||||
return className.replace(/\{([^}]+)\}/g, '<em>{$1}</em>');
|
||||
}
|
||||
---
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class={tableClass}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{headers[0]}</th>
|
||||
<th>{headers[1]}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item) => {
|
||||
if (item.type === 'section') {
|
||||
return (
|
||||
<tr class="section-header">
|
||||
<td colspan="2">
|
||||
{item.title}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td>
|
||||
<code set:html={processClassName(item.class || '')}></code>
|
||||
{item.description && <div class="text-muted small mt-1">{item.description}</div>}
|
||||
</td>
|
||||
<td>
|
||||
<div class="highlight">
|
||||
<Prism code={item.code || ''} lang={item.language || 'css'} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.table-responsive {
|
||||
max-height: 440px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
min-width: 200px;
|
||||
color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
tr:has(+ .section-header) td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.section-header td {
|
||||
padding-block-start: 1rem;
|
||||
color: var(--bs-emphasis-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.highlight :global(pre) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- ## Multi-line Code Example
|
||||
|
||||
Here's how you can use multi-line code blocks with syntax highlighting:
|
||||
|
||||
<RefTable
|
||||
headers={["Class", "CSS Rules"]}
|
||||
data={[
|
||||
{
|
||||
class: '.custom-border',
|
||||
code: `border: 2px solid var(--bs-primary);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);`,
|
||||
description: 'Custom border with shadow'
|
||||
},
|
||||
{
|
||||
class: '.focus-border',
|
||||
code: `border: 1px solid var(--bs-border-color);
|
||||
transition: border-color 0.15s ease-in-out,
|
||||
box-shadow 0.15s ease-in-out;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--bs-primary);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
|
||||
}`,
|
||||
language: 'scss',
|
||||
description: 'Focus state with smooth transitions'
|
||||
},
|
||||
{
|
||||
class: '.toggle-border()',
|
||||
code: `function toggleBorder(element) {
|
||||
element.classList.toggle('border');
|
||||
element.classList.toggle('border-primary');
|
||||
}`,
|
||||
language: 'javascript',
|
||||
description: 'JavaScript helper function'
|
||||
}
|
||||
]}
|
||||
/> -->
|
||||
@@ -5,17 +5,32 @@ toc: true
|
||||
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
|
||||
---
|
||||
|
||||
import RefTable from '@components/shortcodes/RefTable.astro'
|
||||
|
||||
## Reference
|
||||
|
||||
<BsTable class="table reference-table">
|
||||
| Class | Styles |
|
||||
| --- | --- |
|
||||
| `.ratio-auto` | `aspect-ratio: auto;` |
|
||||
| `.ratio-1x1` | `aspect-ratio: 1 / 1;` |
|
||||
| `.ratio-4x3` | `aspect-ratio: 4 / 3;` |
|
||||
| `.ratio-16x9` | `aspect-ratio: 16 / 9;` |
|
||||
| `.ratio-21x9` | `aspect-ratio: 21 / 9;` |
|
||||
</BsTable>
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.ratio-auto',
|
||||
code: 'aspect-ratio: auto;'
|
||||
},
|
||||
{
|
||||
class: '.ratio-1x1',
|
||||
code: 'aspect-ratio: 1 / 1;'
|
||||
},
|
||||
{
|
||||
class: '.ratio-4x3',
|
||||
code: 'aspect-ratio: 4 / 3;'
|
||||
},
|
||||
{
|
||||
class: '.ratio-16x9',
|
||||
code: 'aspect-ratio: 16 / 9;'
|
||||
},
|
||||
{
|
||||
class: '.ratio-21x9',
|
||||
code: 'aspect-ratio: 21 / 9;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -6,35 +6,100 @@ mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
|
||||
---
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
import RefTable from '@components/shortcodes/RefTable.astro'
|
||||
|
||||
## Reference
|
||||
|
||||
<BsTable class="table reference-table">
|
||||
| Class | Styles |
|
||||
| --- | --- |
|
||||
| `.bg-primary` | `background-color: var(--bs-primary);` |
|
||||
| `.bg-subtle-primary` | `background-color: var(--bs-subtle-primary);` |
|
||||
| `.bg-accent` | `background-color: var(--bs-accent);` |
|
||||
| `.bg-subtle-accent` | `background-color: var(--bs-subtle-accent);` |
|
||||
| `.bg-secondary` | `background-color: var(--bs-secondary);` |
|
||||
| `.bg-subtle-secondary` | `background-color: var(--bs-subtle-secondary);` |
|
||||
| `.bg-success` | `background-color: var(--bs-success);` |
|
||||
| `.bg-subtle-success` | `background-color: var(--bs-subtle-success);` |
|
||||
| `.bg-danger` | `background-color: var(--bs-danger);` |
|
||||
| `.bg-subtle-danger` | `background-color: var(--bs-subtle-danger);` |
|
||||
| `.bg-warning` | `background-color: var(--bs-warning);` |
|
||||
| `.bg-subtle-warning` | `background-color: var(--bs-subtle-warning);` |
|
||||
| `.bg-info` | `background-color: var(--bs-info);` |
|
||||
| `.bg-subtle-info` | `background-color: var(--bs-subtle-info);` |
|
||||
| `.bg` | `background-color: var(--bs-bg);` |
|
||||
| `.bg-1` | `background-color: var(--bs-bg-1);` |
|
||||
| `.bg-2` | `background-color: var(--bs-bg-2);` |
|
||||
| `.bg-3` | `background-color: var(--bs-bg-3);` |
|
||||
| `.bg-white` | `background-color: var(--bs-white);` |
|
||||
| `.bg-black` | `background-color: var(--bs-black);` |
|
||||
| `.bg-inherit` | `background-color: inherit;` |
|
||||
| `.bg-transparent` | `background-color: transparent;` |
|
||||
</BsTable>
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.bg-primary',
|
||||
code: 'background-color: var(--bs-primary);'
|
||||
},
|
||||
{
|
||||
class: '.bg-subtle-primary',
|
||||
code: 'background-color: var(--bs-subtle-primary);'
|
||||
},
|
||||
{
|
||||
class: '.bg-accent',
|
||||
code: 'background-color: var(--bs-accent);'
|
||||
},
|
||||
{
|
||||
class: '.bg-subtle-accent',
|
||||
code: 'background-color: var(--bs-subtle-accent);'
|
||||
},
|
||||
{
|
||||
class: '.bg-secondary',
|
||||
code: 'background-color: var(--bs-secondary);'
|
||||
},
|
||||
{
|
||||
class: '.bg-subtle-secondary',
|
||||
code: 'background-color: var(--bs-subtle-secondary);'
|
||||
},
|
||||
{
|
||||
class: '.bg-success',
|
||||
code: 'background-color: var(--bs-success);'
|
||||
},
|
||||
{
|
||||
class: '.bg-subtle-success',
|
||||
code: 'background-color: var(--bs-subtle-success);'
|
||||
},
|
||||
{
|
||||
class: '.bg-danger',
|
||||
code: 'background-color: var(--bs-danger);'
|
||||
},
|
||||
{
|
||||
class: '.bg-subtle-danger',
|
||||
code: 'background-color: var(--bs-subtle-danger);'
|
||||
},
|
||||
{
|
||||
class: '.bg-warning',
|
||||
code: 'background-color: var(--bs-warning);'
|
||||
},
|
||||
{
|
||||
class: '.bg-subtle-warning',
|
||||
code: 'background-color: var(--bs-subtle-warning);'
|
||||
},
|
||||
{
|
||||
class: '.bg-info',
|
||||
code: 'background-color: var(--bs-info);'
|
||||
},
|
||||
{
|
||||
class: '.bg-subtle-info',
|
||||
code: 'background-color: var(--bs-subtle-info);'
|
||||
},
|
||||
{
|
||||
class: '.bg',
|
||||
code: 'background-color: var(--bs-bg);'
|
||||
},
|
||||
{
|
||||
class: '.bg-1',
|
||||
code: 'background-color: var(--bs-bg-1);'
|
||||
},
|
||||
{
|
||||
class: '.bg-2',
|
||||
code: 'background-color: var(--bs-bg-2);'
|
||||
},
|
||||
{
|
||||
class: '.bg-3',
|
||||
code: 'background-color: var(--bs-bg-3);'
|
||||
},
|
||||
{
|
||||
class: '.bg-white',
|
||||
code: 'background-color: var(--bs-white);'
|
||||
},
|
||||
{
|
||||
class: '.bg-black',
|
||||
code: 'background-color: var(--bs-black);'
|
||||
},
|
||||
{
|
||||
class: '.bg-inherit',
|
||||
code: 'background-color: inherit;'
|
||||
},
|
||||
{
|
||||
class: '.bg-transparent',
|
||||
code: 'background-color: transparent;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Background color
|
||||
|
||||
@@ -168,7 +233,7 @@ RGB colors are generated from a separate Sass map:
|
||||
|
||||
{/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
|
||||
|
||||
Background color opacities build on that with their own map that’s consumed by the utilities API:
|
||||
Background color opacities build on that with their own map that's consumed by the utilities API:
|
||||
|
||||
{/* <ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" /> */}
|
||||
|
||||
@@ -180,7 +245,7 @@ Color mode background colors are also available as a Sass map:
|
||||
|
||||
### Sass mixins
|
||||
|
||||
**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you’d like to create your own gradients.
|
||||
**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
|
||||
|
||||
<ScssDocs name="gradient-bg-mixin" file="scss/mixins/_gradients.scss" />
|
||||
|
||||
|
||||
@@ -6,21 +6,48 @@ mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
|
||||
---
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
import RefTable from '@components/shortcodes/RefTable.astro'
|
||||
|
||||
## Reference
|
||||
|
||||
<BsTable class="table reference-table">
|
||||
| Class | Styles |
|
||||
| --- | --- |
|
||||
| `.rounded` | `border-radius: var(--bs-border-radius);` |
|
||||
| `.rounded-top` | `border-top-left-radius: var(--bs-border-radius);`<br/>`border-top-right-radius: var(--bs-border-radius);` |
|
||||
| `.rounded-end` | `border-bottom-right-radius: var(--bs-border-radius);`<br/>`border-top-right-radius: var(--bs-border-radius);` |
|
||||
| `.rounded-bottom` | `border-bottom-left-radius: var(--bs-border-radius);`<br/>`border-bottom-right-radius: var(--bs-border-radius);` |
|
||||
| `.rounded-start` | `border-top-left-radius: var(--bs-border-radius);`<br/>`border-bottom-left-radius: var(--bs-border-radius);` |
|
||||
| `.rounded-0` | `border-radius: 0;` |
|
||||
| `.rounded-1` | `border-radius: var(--bs-border-radius-sm);` |
|
||||
| `.rounded-2` | `border-radius: var(--bs-border-radius);` |
|
||||
</BsTable>
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.rounded',
|
||||
code: 'border-radius: var(--bs-border-radius);'
|
||||
},
|
||||
{
|
||||
class: '.rounded-top',
|
||||
code: `border-top-left-radius: var(--bs-border-radius);
|
||||
border-top-right-radius: var(--bs-border-radius);`
|
||||
},
|
||||
{
|
||||
class: '.rounded-end',
|
||||
code: `border-bottom-right-radius: var(--bs-border-radius);
|
||||
border-top-right-radius: var(--bs-border-radius);`
|
||||
},
|
||||
{
|
||||
class: '.rounded-bottom',
|
||||
code: `border-bottom-left-radius: var(--bs-border-radius);
|
||||
border-bottom-right-radius: var(--bs-border-radius);`
|
||||
},
|
||||
{
|
||||
class: '.rounded-start',
|
||||
code: `border-top-left-radius: var(--bs-border-radius);
|
||||
border-bottom-left-radius: var(--bs-border-radius);`
|
||||
},
|
||||
{
|
||||
class: '.rounded-0',
|
||||
code: 'border-radius: 0;'
|
||||
},
|
||||
{
|
||||
class: '.rounded-1',
|
||||
code: 'border-radius: var(--bs-border-radius-sm);'
|
||||
},
|
||||
{
|
||||
class: '.rounded-2',
|
||||
code: 'border-radius: var(--bs-border-radius);'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Radius
|
||||
|
||||
|
||||
@@ -6,38 +6,96 @@ mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border
|
||||
---
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
import RefTable from '@components/shortcodes/RefTable.astro'
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.border',
|
||||
code: 'border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-t',
|
||||
code: 'border-block-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-e',
|
||||
code: 'border-inline-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-b',
|
||||
code: 'border-block-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-s',
|
||||
code: 'border-inline-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-y',
|
||||
code: 'border-block: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-x',
|
||||
code: 'border-inline: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-color',
|
||||
code: 'border-color: var(--bs-border-color);'
|
||||
},
|
||||
{
|
||||
class: '.border-width',
|
||||
code: 'border-width: var(--bs-border-width);'
|
||||
},
|
||||
{
|
||||
class: '.dividers-x',
|
||||
code: `.dividers-x > :not(:first-child) {
|
||||
border-inline-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
||||
}`
|
||||
},
|
||||
{
|
||||
class: '.dividers-y',
|
||||
code: `.dividers-y > :not(:first-child) {
|
||||
border-block-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
||||
}`
|
||||
}
|
||||
]} />
|
||||
|
||||
## Border
|
||||
|
||||
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
|
||||
Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
|
||||
|
||||
### Additive
|
||||
|
||||
Add borders to custom elements:
|
||||
Add borders to custom elements. `.border` adds a border to all sides of an element while the other utilities add a border to a specific side.
|
||||
|
||||
<Example class="bd-example-border-utils" code={`<span class="border"></span>
|
||||
<span class="border-top"></span>
|
||||
<span class="border-end"></span>
|
||||
<span class="border-bottom"></span>
|
||||
<span class="border-start"></span>`} />
|
||||
<Example class="bd-example-border-utils" code={`<span class="border">All</span>
|
||||
<span class="border-t">Top</span>
|
||||
<span class="border-e">End</span>
|
||||
<span class="border-b">Bottom</span>
|
||||
<span class="border-s">Start</span>`} />
|
||||
|
||||
You can also use different border width sizes on all sides, or one at a time.
|
||||
|
||||
<Example class="bd-example-border-utils" code={`<span class="border-3">All</span>
|
||||
<span class="border-t-3">Top</span>
|
||||
<span class="border-e-3">End</span>
|
||||
<span class="border-b-3">Bottom</span>
|
||||
<span class="border-s-3">Start</span>`} />
|
||||
|
||||
### Subtractive
|
||||
|
||||
Or remove borders:
|
||||
You can also remove borders from all or specific sides.
|
||||
|
||||
<Example class="bd-example-border-utils" code={`<span class="border border-0"></span>
|
||||
<span class="border border-top-0"></span>
|
||||
<span class="border border-end-0"></span>
|
||||
<span class="border border-bottom-0"></span>
|
||||
<span class="border border-start-0"></span>`} />
|
||||
<Example class="bd-example-border-utils" code={`<span class="border-0">All</span>
|
||||
<span class="border border-t-0">Top</span>
|
||||
<span class="border border-e-0">End</span>
|
||||
<span class="border border-b-0">Bottom</span>
|
||||
<span class="border border-s-0">Start</span>`} />
|
||||
|
||||
## Color
|
||||
|
||||
<Callout>
|
||||
Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don’t yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6.
|
||||
</Callout>
|
||||
|
||||
Change the border color using utilities built on our theme colors.
|
||||
Change the border color using utilities built on our theme colors. Theme colors are adaptive to color mode via the `light-dark()` CSS function.
|
||||
|
||||
<Example class="bd-example-border-utils" code={[
|
||||
...getData('theme-colors').map((themeColor) => `<span class="border border-${themeColor.name}"></span>
|
||||
@@ -53,11 +111,11 @@ Or modify the default `border-color` of a component:
|
||||
<input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
|
||||
</div>
|
||||
|
||||
<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
|
||||
<div class="h4 pb-2 mb-4 text-danger border-b border-danger">
|
||||
Dangerous heading
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
|
||||
<div class="p-3 bg-info bg-10 border border-info border-s-0 rounded-end">
|
||||
Changing border color and width
|
||||
</div>`} />
|
||||
|
||||
@@ -78,7 +136,7 @@ Consider our default `.border-success` utility.
|
||||
}
|
||||
```
|
||||
|
||||
We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.
|
||||
We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -90,63 +148,56 @@ To change that opacity, override `--bs-border-opacity` via custom styles or inli
|
||||
Or, choose from any of the `.border-opacity` utilities:
|
||||
|
||||
<Example code={`<div class="border border-success p-2 mb-2">This is default success border</div>
|
||||
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
|
||||
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
|
||||
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
|
||||
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>`} />
|
||||
<div class="border border-success border-90 p-2 mb-2">This is 90% opacity success border</div>
|
||||
<div class="border border-success border-70 p-2 mb-2">This is 70% opacity success border</div>
|
||||
<div class="border border-success border-60 p-2 mb-2">This is 60% opacity success border</div>
|
||||
<div class="border border-success border-80 p-2 mb-2">This is 80% opacity success border</div>
|
||||
<div class="border border-success border-40 p-2 mb-2">This is 40% opacity success border</div>
|
||||
<div class="border border-success border-50 p-2 mb-2">This is 50% opacity success border</div>
|
||||
<div class="border border-success border-30 p-2 mb-2">This is 30% opacity success border</div>
|
||||
<div class="border border-success border-20 p-2 mb-2">This is 20% opacity success border</div>
|
||||
<div class="border border-success border-10 p-2">This is 10% opacity success border</div>`} />
|
||||
|
||||
## Width
|
||||
|
||||
<Example class="bd-example-border-utils" code={`<span class="border border-1"></span>
|
||||
<span class="border border-2"></span>
|
||||
<span class="border border-3"></span>
|
||||
<span class="border border-4"></span>
|
||||
<span class="border border-5"></span>`} />
|
||||
<Example class="bd-example-border-utils" code={`<span class="border"></span>
|
||||
<span class="border-1"></span>
|
||||
<span class="border-2"></span>
|
||||
<span class="border-3"></span>
|
||||
<span class="border-4"></span>
|
||||
<span class="border-5"></span>`} />
|
||||
|
||||
## Radius
|
||||
## Between
|
||||
|
||||
Add classes to an element to easily round its corners.
|
||||
Use the `.dividers-x` and `.dividers-y` utilities to add borders between items. You can also mix and match color width utilities here.
|
||||
|
||||
<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded" title="Example rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" />`} />
|
||||
<Example code={`<div class="d-flex dividers-x">
|
||||
<div class="p-3">First item</div>
|
||||
<div class="p-3">Second item</div>
|
||||
<div class="p-3">Third item</div>
|
||||
</div>`} />
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
|
||||
|
||||
<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-circle" title="Completely round image" />
|
||||
<Placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" />`} />
|
||||
|
||||
<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" />
|
||||
<Placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" />
|
||||
<Placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" />
|
||||
<Placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" />`} />
|
||||
<Example code={`<div class="d-flex flex-column dividers-y ">
|
||||
<div class="p-3">First item</div>
|
||||
<div class="p-3">Second item</div>
|
||||
<div class="p-3">Third item</div>
|
||||
</div>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
<ScssDocs name="root-border-var" file="scss/_root.scss" />
|
||||
{/* <ScssDocs name="root-border-var" file="scss/_root.scss" /> */}
|
||||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="border-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="border-variables" file="scss/_variables.scss" /> */}
|
||||
|
||||
Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
|
||||
|
||||
<ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" />
|
||||
{/* <ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" />
|
||||
|
||||
<ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" />
|
||||
<ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
|
||||
|
||||
### Sass maps
|
||||
|
||||
@@ -160,4 +211,4 @@ Color mode adaptive border colors are also available as a Sass map:
|
||||
|
||||
Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
|
||||
|
||||
<ScssDocs name="utils-borders" file="scss/_utilities.scss" />
|
||||
{/* <ScssDocs name="utils-borders" file="scss/_utilities.scss" /> */}
|
||||
|
||||
@@ -6,26 +6,64 @@ mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/color
|
||||
---
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
import RefTable from '@components/shortcodes/RefTable.astro'
|
||||
|
||||
## Reference
|
||||
|
||||
<BsTable class="table reference-table">
|
||||
| Class | Styles |
|
||||
| --- | --- |
|
||||
| `.color-primary` | `color: var(--bs-primary);` |
|
||||
| `.color-secondary` | `color: var(--bs-secondary);` |
|
||||
| `.color-success` | `color: var(--bs-success);` |
|
||||
| `.color-danger` | `color: var(--bs-danger);` |
|
||||
| `.color-warning` | `color: var(--bs-warning);` |
|
||||
| `.color-info` | `color: var(--bs-info);` |
|
||||
| `.color-fg` | `color: var(--bs-fg);` |
|
||||
| `.color-fg-1` | `color: var(--bs-fg-1);` |
|
||||
| `.color-fg-2` | `color: var(--bs-fg-2);` |
|
||||
| `.color-fg-3` | `color: var(--bs-fg-3);` |
|
||||
| `.color-white` | `color: var(--bs-white);` |
|
||||
| `.color-black` | `color: var(--bs-black);` |
|
||||
| `.color-inherit` | `color: inherit;` |
|
||||
</BsTable>
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.color-primary',
|
||||
code: 'color: var(--bs-primary);'
|
||||
},
|
||||
{
|
||||
class: '.color-secondary',
|
||||
code: 'color: var(--bs-secondary);'
|
||||
},
|
||||
{
|
||||
class: '.color-success',
|
||||
code: 'color: var(--bs-success);'
|
||||
},
|
||||
{
|
||||
class: '.color-danger',
|
||||
code: 'color: var(--bs-danger);'
|
||||
},
|
||||
{
|
||||
class: '.color-warning',
|
||||
code: 'color: var(--bs-warning);'
|
||||
},
|
||||
{
|
||||
class: '.color-info',
|
||||
code: 'color: var(--bs-info);'
|
||||
},
|
||||
{
|
||||
class: '.color-fg',
|
||||
code: 'color: var(--bs-fg);'
|
||||
},
|
||||
{
|
||||
class: '.color-fg-1',
|
||||
code: 'color: var(--bs-fg-1);'
|
||||
},
|
||||
{
|
||||
class: '.color-fg-2',
|
||||
code: 'color: var(--bs-fg-2);'
|
||||
},
|
||||
{
|
||||
class: '.color-fg-3',
|
||||
code: 'color: var(--bs-fg-3);'
|
||||
},
|
||||
{
|
||||
class: '.color-white',
|
||||
code: 'color: var(--bs-white);'
|
||||
},
|
||||
{
|
||||
class: '.color-black',
|
||||
code: 'color: var(--bs-black);'
|
||||
},
|
||||
{
|
||||
class: '.color-inherit',
|
||||
code: 'color: inherit;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Colors
|
||||
|
||||
@@ -103,7 +141,7 @@ As mentioned above, this works by combining the power of multiple utilities and
|
||||
|
||||
## Specificity
|
||||
|
||||
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a `<div>` or more semantic element with the desired class.
|
||||
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class.
|
||||
|
||||
## CSS
|
||||
|
||||
@@ -141,7 +179,7 @@ RGB colors are generated from a separate Sass map:
|
||||
|
||||
{/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
|
||||
|
||||
Color opacities build on that with their own map that’s consumed by the utilities API:
|
||||
Color opacities build on that with their own map that's consumed by the utilities API:
|
||||
|
||||
{/* <ScssDocs name="utilities-text-colors" file="scss/_maps.scss" /> */}
|
||||
|
||||
|
||||
@@ -5,6 +5,55 @@ toc: true
|
||||
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/display
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.d-{breakpoint-}none',
|
||||
code: 'display: none;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}flow-root',
|
||||
code: 'display: flow-root;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}inline',
|
||||
code: 'display: inline;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}inline-block',
|
||||
code: 'display: inline-block;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}grid',
|
||||
code: 'display: grid;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}inline-grid',
|
||||
code: 'display: inline-grid;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}table',
|
||||
code: 'display: table;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}table-cell',
|
||||
code: 'display: table-cell;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}table-row',
|
||||
code: 'display: table-row;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}flex',
|
||||
code: 'display: flex;'
|
||||
},
|
||||
{
|
||||
class: '.d-{breakpoint-}inline-flex',
|
||||
code: 'display: inline-flex;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## How it works
|
||||
|
||||
Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need.
|
||||
@@ -42,8 +91,8 @@ The media queries affect screen widths with the given breakpoint *or larger*. Fo
|
||||
We've removed the clearfix helper class in v6 as it's outdated and no longer needed. Instead, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix hack.
|
||||
|
||||
<Example code={`<div class="d-flow-root">
|
||||
<div class="float-end px-3 py-2 border rounded-3">Floated element</div>
|
||||
</div>`} />
|
||||
<div class="float-end px-3 py-2 border rounded-3">Floated element</div>
|
||||
</div>`} />
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@@ -9,6 +9,187 @@ csstricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
||||
import { getData } from '@libs/data'
|
||||
import { getSequence } from '@libs/utils'
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Direction'
|
||||
},
|
||||
{
|
||||
class: '.flex-{breakpoint-}row',
|
||||
code: 'flex-direction: row;'
|
||||
},
|
||||
{
|
||||
class: '.flex-{breakpoint-}row-reverse',
|
||||
code: 'flex-direction: row-reverse;'
|
||||
},
|
||||
{
|
||||
class: '.flex-{breakpoint-}column',
|
||||
code: 'flex-direction: column;'
|
||||
},
|
||||
{
|
||||
class: '.flex-{breakpoint-}column-reverse',
|
||||
code: 'flex-direction: column-reverse;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Justify content'
|
||||
},
|
||||
{
|
||||
class: '.justify-content-{breakpoint-}start',
|
||||
code: 'justify-content: flex-start;'
|
||||
},
|
||||
{
|
||||
class: '.justify-content-{breakpoint-}end',
|
||||
code: 'justify-content: flex-end;'
|
||||
},
|
||||
{
|
||||
class: '.justify-content-{breakpoint-}center',
|
||||
code: 'justify-content: center;'
|
||||
},
|
||||
{
|
||||
class: '.justify-content-{breakpoint-}between',
|
||||
code: 'justify-content: space-between;'
|
||||
},
|
||||
{
|
||||
class: '.justify-content-{breakpoint-}around',
|
||||
code: 'justify-content: space-around;'
|
||||
},
|
||||
{
|
||||
class: '.justify-content-{breakpoint-}evenly',
|
||||
code: 'justify-content: space-evenly;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Align items'
|
||||
},
|
||||
{
|
||||
class: '.align-items-{breakpoint-}start',
|
||||
code: 'align-items: flex-start;'
|
||||
},
|
||||
{
|
||||
class: '.align-items-{breakpoint-}end',
|
||||
code: 'align-items: flex-end;'
|
||||
},
|
||||
{
|
||||
class: '.align-items-{breakpoint-}center',
|
||||
code: 'align-items: center;'
|
||||
},
|
||||
{
|
||||
class: '.align-items-{breakpoint-}baseline',
|
||||
code: 'align-items: baseline;'
|
||||
},
|
||||
{
|
||||
class: '.align-items-{breakpoint-}stretch',
|
||||
code: 'align-items: stretch;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Align self'
|
||||
},
|
||||
{
|
||||
class: '.align-self-{breakpoint-}start',
|
||||
code: 'align-self: flex-start;'
|
||||
},
|
||||
{
|
||||
class: '.align-self-{breakpoint-}end',
|
||||
code: 'align-self: flex-end;'
|
||||
},
|
||||
{
|
||||
class: '.align-self-{breakpoint-}center',
|
||||
code: 'align-self: center;'
|
||||
},
|
||||
{
|
||||
class: '.align-self-{breakpoint-}baseline',
|
||||
code: 'align-self: baseline;'
|
||||
},
|
||||
{
|
||||
class: '.align-self-{breakpoint-}stretch',
|
||||
code: 'align-self: stretch;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Align content'
|
||||
},
|
||||
{
|
||||
class: '.align-content-{breakpoint-}start',
|
||||
code: 'align-content: flex-start;'
|
||||
},
|
||||
{
|
||||
class: '.align-content-{breakpoint-}end',
|
||||
code: 'align-content: flex-end;'
|
||||
},
|
||||
{
|
||||
class: '.align-content-{breakpoint-}center',
|
||||
code: 'align-content: center;'
|
||||
},
|
||||
{
|
||||
class: '.align-content-{breakpoint-}between',
|
||||
code: 'align-content: space-between;'
|
||||
},
|
||||
{
|
||||
class: '.align-content-{breakpoint-}around',
|
||||
code: 'align-content: space-around;'
|
||||
},
|
||||
{
|
||||
class: '.align-content-{breakpoint-}stretch',
|
||||
code: 'align-content: stretch;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Grow, shrink, and wrap'
|
||||
},
|
||||
{
|
||||
class: '.flex-fill',
|
||||
code: 'flex: 1 1 auto;'
|
||||
},
|
||||
{
|
||||
class: '.flex-grow-{breakpoint-}0',
|
||||
code: 'flex-grow: 0;'
|
||||
},
|
||||
{
|
||||
class: '.flex-grow-{breakpoint-}1',
|
||||
code: 'flex-grow: 1;'
|
||||
},
|
||||
{
|
||||
class: '.flex-shrink-{breakpoint-}0',
|
||||
code: 'flex-shrink: 0;'
|
||||
},
|
||||
{
|
||||
class: '.flex-shrink-{breakpoint-}1',
|
||||
code: 'flex-shrink: 1;'
|
||||
},
|
||||
{
|
||||
class: '.flex-nowrap',
|
||||
code: 'flex-wrap: nowrap;'
|
||||
},
|
||||
{
|
||||
class: '.flex-wrap',
|
||||
code: 'flex-wrap: wrap;'
|
||||
},
|
||||
{
|
||||
class: '.flex-wrap-reverse',
|
||||
code: 'flex-wrap: wrap-reverse;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Order'
|
||||
},
|
||||
{
|
||||
class: '.order-{breakpoint-}{number}',
|
||||
code: 'order: {number};'
|
||||
},
|
||||
{
|
||||
class: '.order-{breakpoint-}first',
|
||||
code: 'order: -1;'
|
||||
},
|
||||
{
|
||||
class: '.order-{breakpoint-}last',
|
||||
code: 'order: 100;'
|
||||
}
|
||||
]} />
|
||||
|
||||
<Callout type="info" title="Flexbox">
|
||||
**Need some quick flexbox layouts?** Consider using [our Stacks helpers]([[docsref:/helpers/stacks]]) that combine common flexbox properties for quick layouts.
|
||||
</Callout>
|
||||
@@ -21,19 +202,6 @@ Apply `display` utilities to create a flexbox container and transform **direct c
|
||||
|
||||
<Example class="bd-example-flex" code={`<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>`} />
|
||||
|
||||
Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.d{breakpoint.abbr}-flex</code></li>
|
||||
<li><code>.d{breakpoint.abbr}-inline-flex</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Direction
|
||||
|
||||
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
|
||||
@@ -64,21 +232,6 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
|
||||
<div class="p-2">Flex item 3</div>
|
||||
</div>`} />
|
||||
|
||||
Responsive variations also exist for `flex-direction`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.flex{breakpoint.abbr}-row</code></li>
|
||||
<li><code>.flex{breakpoint.abbr}-row-reverse</code></li>
|
||||
<li><code>.flex{breakpoint.abbr}-column</code></li>
|
||||
<li><code>.flex{breakpoint.abbr}-column-reverse</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Justify content
|
||||
|
||||
Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
|
||||
@@ -125,23 +278,6 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
|
||||
<div class="d-flex justify-content-evenly">...</div>
|
||||
```
|
||||
|
||||
Responsive variations also exist for `justify-content`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.justify-content{breakpoint.abbr}-start</code></li>
|
||||
<li><code>.justify-content{breakpoint.abbr}-end</code></li>
|
||||
<li><code>.justify-content{breakpoint.abbr}-center</code></li>
|
||||
<li><code>.justify-content{breakpoint.abbr}-between</code></li>
|
||||
<li><code>.justify-content{breakpoint.abbr}-around</code></li>
|
||||
<li><code>.justify-content{breakpoint.abbr}-evenly</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Align items
|
||||
|
||||
Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
||||
@@ -182,22 +318,6 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
|
||||
<div class="d-flex align-items-stretch">...</div>
|
||||
```
|
||||
|
||||
Responsive variations also exist for `align-items`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.align-items{breakpoint.abbr}-start</code></li>
|
||||
<li><code>.align-items{breakpoint.abbr}-end</code></li>
|
||||
<li><code>.align-items{breakpoint.abbr}-center</code></li>
|
||||
<li><code>.align-items{breakpoint.abbr}-baseline</code></li>
|
||||
<li><code>.align-items{breakpoint.abbr}-stretch</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Align self
|
||||
|
||||
Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
||||
@@ -238,22 +358,6 @@ Use `align-self` utilities on flexbox items to individually change their alignme
|
||||
<div class="align-self-stretch">Aligned flex item</div>
|
||||
```
|
||||
|
||||
Responsive variations also exist for `align-self`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.align-self{breakpoint.abbr}-start</code></li>
|
||||
<li><code>.align-self{breakpoint.abbr}-end</code></li>
|
||||
<li><code>.align-self{breakpoint.abbr}-center</code></li>
|
||||
<li><code>.align-self{breakpoint.abbr}-baseline</code></li>
|
||||
<li><code>.align-self{breakpoint.abbr}-stretch</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Fill
|
||||
|
||||
Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
|
||||
@@ -264,16 +368,6 @@ Use the `.flex-fill` class on a series of sibling elements to force them into wi
|
||||
<div class="p-2 flex-fill">Flex item</div>
|
||||
</div>`} />
|
||||
|
||||
Responsive variations also exist for `flex-fill`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<li><code>.flex{breakpoint.abbr}-fill</code></li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Grow and shrink
|
||||
|
||||
Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
|
||||
@@ -291,19 +385,6 @@ Use `.flex-shrink-*` utilities to toggle a flex item’s ability to shrink if ne
|
||||
<div class="p-2 flex-shrink-1">Flex item</div>
|
||||
</div>`} />
|
||||
|
||||
Responsive variations also exist for `flex-grow` and `flex-shrink`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-0</code></li>
|
||||
<li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-1</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Auto margins
|
||||
|
||||
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
|
||||
@@ -412,20 +493,6 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
|
||||
</div>
|
||||
```
|
||||
|
||||
Responsive variations also exist for `flex-wrap`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.flex{breakpoint.abbr}-nowrap</code></li>
|
||||
<li><code>.flex{breakpoint.abbr}-wrap</code></li>
|
||||
<li><code>.flex{breakpoint.abbr}-wrap-reverse</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Order
|
||||
|
||||
Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
|
||||
@@ -436,16 +503,6 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
|
||||
<div class="order-1 p-2">Third flex item</div>
|
||||
</div>`} />
|
||||
|
||||
Responsive variations also exist for `order`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => getSequence(0, 5).map((value) => {
|
||||
return (
|
||||
<li><code>.order{breakpoint.abbr}-{value}</code></li>
|
||||
)
|
||||
}))}
|
||||
</ul>
|
||||
|
||||
Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
|
||||
|
||||
<ul>
|
||||
@@ -608,23 +665,6 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
|
||||
<div class="d-flex align-content-stretch flex-wrap">...</div>
|
||||
```
|
||||
|
||||
Responsive variations also exist for `align-content`.
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.align-content{breakpoint.abbr}-start</code></li>
|
||||
<li><code>.align-content{breakpoint.abbr}-end</code></li>
|
||||
<li><code>.align-content{breakpoint.abbr}-center</code></li>
|
||||
<li><code>.align-content{breakpoint.abbr}-between</code></li>
|
||||
<li><code>.align-content{breakpoint.abbr}-around</code></li>
|
||||
<li><code>.align-content{breakpoint.abbr}-stretch</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## Media object
|
||||
|
||||
Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
|
||||
|
||||
@@ -6,6 +6,23 @@ toc: true
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.float-{breakpoint-}start',
|
||||
code: 'float: left;'
|
||||
},
|
||||
{
|
||||
class: '.float-{breakpoint-}end',
|
||||
code: 'float: right;'
|
||||
},
|
||||
{
|
||||
class: '.float-{breakpoint-}none',
|
||||
code: 'float: none;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Overview
|
||||
|
||||
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
|
||||
@@ -26,20 +43,6 @@ Responsive variations also exist for each `float` value.
|
||||
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
|
||||
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>`} />
|
||||
|
||||
Here are all the support classes:
|
||||
|
||||
<ul>
|
||||
{getData('breakpoints').map((breakpoint) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<li><code>.float{breakpoint.abbr}-start</code></li>
|
||||
<li><code>.float{breakpoint.abbr}-end</code></li>
|
||||
<li><code>.float{breakpoint.abbr}-none</code></li>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
## CSS
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
@@ -4,6 +4,39 @@ description: Utility classes that change how users interact with contents of a w
|
||||
toc: false
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Text selection'
|
||||
},
|
||||
{
|
||||
class: '.user-select-all',
|
||||
code: 'user-select: all;'
|
||||
},
|
||||
{
|
||||
class: '.user-select-auto',
|
||||
code: 'user-select: auto;'
|
||||
},
|
||||
{
|
||||
class: '.user-select-none',
|
||||
code: 'user-select: none;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Pointer events'
|
||||
},
|
||||
{
|
||||
class: '.pe-none',
|
||||
code: 'pointer-events: none;'
|
||||
},
|
||||
{
|
||||
class: '.pe-auto',
|
||||
code: 'pointer-events: auto;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Text selection
|
||||
|
||||
Change the way in which the content is selected when the user interacts with it.
|
||||
|
||||
@@ -8,6 +8,48 @@ added:
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Link opacity'
|
||||
},
|
||||
{
|
||||
class: '.link-opacity-10{-hover}',
|
||||
code: 'opacity: 0.1;'
|
||||
},
|
||||
{
|
||||
class: '.link-opacity-25{-hover}',
|
||||
code: 'opacity: 0.25;'
|
||||
},
|
||||
{
|
||||
class: '.link-opacity-50{-hover}',
|
||||
code: 'opacity: 0.5;'
|
||||
},
|
||||
{
|
||||
class: '.link-opacity-75{-hover}',
|
||||
code: 'opacity: 0.75;'
|
||||
},
|
||||
{
|
||||
class: '.link-opacity-100{-hover}',
|
||||
code: 'opacity: 1;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Link underlines'
|
||||
},
|
||||
{
|
||||
class: '.link-underline-{color}',
|
||||
code: 'text-decoration-color: {color};'
|
||||
},
|
||||
{
|
||||
class: '.link-offset-{number}',
|
||||
code: 'text-underline-offset: {number};'
|
||||
}
|
||||
]} />
|
||||
|
||||
|
||||
## Link opacity
|
||||
|
||||
Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color’s opacity can lead to links with [*insufficient* contrast]([[docsref:getting-started/accessibility/#color-contrast]]).
|
||||
@@ -67,8 +109,7 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under
|
||||
[Colored link helpers]([[docsref:/helpers/colored-links/]]) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
|
||||
|
||||
<Example code={[
|
||||
...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">${themeColor.title} link</a></p>`),
|
||||
`<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>`
|
||||
...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">${themeColor.title} link</a></p>`)
|
||||
]} />
|
||||
|
||||
<Callout name="warning-color-assistive-technologies" />
|
||||
|
||||
@@ -6,6 +6,31 @@ added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.object-fit-{breakpoint-}contain',
|
||||
code: 'object-fit: contain;'
|
||||
},
|
||||
{
|
||||
class: '.object-fit-{breakpoint-}cover',
|
||||
code: 'object-fit: cover;'
|
||||
},
|
||||
{
|
||||
class: '.object-fit-{breakpoint-}fill',
|
||||
code: 'object-fit: fill;'
|
||||
},
|
||||
{
|
||||
class: '.object-fit-{breakpoint-}scale',
|
||||
code: 'object-fit: scale;'
|
||||
},
|
||||
{
|
||||
class: '.object-fit-{breakpoint-}none',
|
||||
code: 'object-fit: none;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## 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 parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
|
||||
|
||||
@@ -5,6 +5,31 @@ added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.opacity-0',
|
||||
code: 'opacity: 0;'
|
||||
},
|
||||
{
|
||||
class: '.opacity-25',
|
||||
code: 'opacity: 0.25;'
|
||||
},
|
||||
{
|
||||
class: '.opacity-50',
|
||||
code: 'opacity: 0.5;'
|
||||
},
|
||||
{
|
||||
class: '.opacity-75',
|
||||
code: 'opacity: 0.75;'
|
||||
},
|
||||
{
|
||||
class: '.opacity-100',
|
||||
code: 'opacity: 1;'
|
||||
}
|
||||
]} />
|
||||
|
||||
The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
|
||||
|
||||
Set the `opacity` of an element using `.opacity-{value}` utilities.
|
||||
|
||||
@@ -4,6 +4,55 @@ description: Use these shorthand utilities for quickly configuring how content o
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.overflow-auto',
|
||||
code: 'overflow: auto;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-hidden',
|
||||
code: 'overflow: hidden;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-visible',
|
||||
code: 'overflow: visible;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-scroll',
|
||||
code: 'overflow: scroll;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-x-auto',
|
||||
code: 'overflow-x: auto;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-x-hidden',
|
||||
code: 'overflow-x: hidden;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-x-visible',
|
||||
code: 'overflow-x: visible;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-y-auto',
|
||||
code: 'overflow-y: auto;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-y-hidden',
|
||||
code: 'overflow-y: hidden;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-y-visible',
|
||||
code: 'overflow-y: visible;'
|
||||
},
|
||||
{
|
||||
class: '.overflow-y-scroll',
|
||||
code: 'overflow-y: scroll;'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Overflow
|
||||
|
||||
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
|
||||
|
||||
@@ -4,6 +4,47 @@ description: Use these shorthand utilities for quickly configuring the position
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.position-static',
|
||||
code: 'position: static;'
|
||||
},
|
||||
{
|
||||
class: '.position-relative',
|
||||
code: 'position: relative;'
|
||||
},
|
||||
{
|
||||
class: '.position-absolute',
|
||||
code: 'position: absolute;'
|
||||
},
|
||||
{
|
||||
class: '.position-fixed',
|
||||
code: 'position: fixed;'
|
||||
},
|
||||
{
|
||||
class: '.position-sticky',
|
||||
code: 'position: sticky;'
|
||||
},
|
||||
{
|
||||
class: '.top-{value}',
|
||||
code: 'top: {value};'
|
||||
},
|
||||
{
|
||||
class: '.start-{value}',
|
||||
code: 'left: {value};'
|
||||
},
|
||||
{
|
||||
class: '.end-{value}',
|
||||
code: 'right: {value};'
|
||||
},
|
||||
{
|
||||
class: '.bottom-{value}',
|
||||
code: 'bottom: {value};'
|
||||
}
|
||||
]} />
|
||||
|
||||
## Position values
|
||||
|
||||
Quick positioning classes are available, though they are not responsive.
|
||||
|
||||
@@ -4,19 +4,48 @@ description: Add or remove shadows to elements with box-shadow utilities.
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.shadow-none',
|
||||
code: 'box-shadow: none;'
|
||||
},
|
||||
{
|
||||
class: '.shadow-sm',
|
||||
code: `box-shadow: var(--bs-box-shadow-sm); /* 0 .125rem .25rem rgb(0 0 0 / .075) */`
|
||||
},
|
||||
{
|
||||
class: '.shadow',
|
||||
code: `box-shadow: var(--bs-box-shadow); /* 0 .5rem 1rem rgb(0 0 0 / 15%) */`
|
||||
},
|
||||
{
|
||||
class: '.shadow-lg',
|
||||
code: `box-shadow: var(--bs-box-shadow-lg); /* 0 1rem 3rem rgb(0 0 0 / .175) */`
|
||||
},
|
||||
]} />
|
||||
|
||||
## Examples
|
||||
|
||||
While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
|
||||
|
||||
<Example class="overflow-hidden" code={`<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
|
||||
<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
|
||||
<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
|
||||
<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>`} />
|
||||
<Example class="overflow-hidden" code={`<div class="shadow-none p-3 mb-5 bg-2 rounded">No shadow</div>
|
||||
<div class="shadow-sm p-3 mb-5 bg-2 rounded">Small shadow</div>
|
||||
<div class="shadow p-3 mb-5 bg-2 rounded">Regular shadow</div>
|
||||
<div class="shadow-lg p-3 mb-5 bg-2 rounded">Larger shadow</div>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### CSS variables
|
||||
|
||||
Shadow utilities are defined first in `:root` CSS variables.
|
||||
|
||||
<ScssDocs name="root-shadow-vars" file="scss/_root.scss" />
|
||||
|
||||
### Sass variables
|
||||
|
||||
Sass then consumes these variables to be used by our utility API.
|
||||
|
||||
<ScssDocs name="box-shadow-variables" file="scss/_variables.scss" />
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
@@ -4,6 +4,127 @@ description: Easily make an element as wide or as tall with our width and height
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Width'
|
||||
},
|
||||
{
|
||||
class: '.w-25',
|
||||
code: 'width: 25%;'
|
||||
},
|
||||
{
|
||||
class: '.w-50',
|
||||
code: 'width: 50%;'
|
||||
},
|
||||
{
|
||||
class: '.w-75',
|
||||
code: 'width: 75%;'
|
||||
},
|
||||
{
|
||||
class: '.w-100',
|
||||
code: 'width: 100%;'
|
||||
},
|
||||
{
|
||||
class: '.w-auto',
|
||||
code: 'width: auto;'
|
||||
},
|
||||
{
|
||||
class: '.w-min',
|
||||
code: 'width: min-content;'
|
||||
},
|
||||
{
|
||||
class: '.w-max',
|
||||
code: 'width: max-content;'
|
||||
},
|
||||
{
|
||||
class: '.w-fit',
|
||||
code: 'width: fit-content;'
|
||||
},
|
||||
{
|
||||
class: '.mw-100',
|
||||
code: 'max-width: 100%;'
|
||||
},
|
||||
{
|
||||
class: '.min-w-0',
|
||||
code: 'min-width: 0;'
|
||||
},
|
||||
{
|
||||
class: '.min-w-100',
|
||||
code: 'min-width: 100%;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Height'
|
||||
},
|
||||
{
|
||||
class: '.h-25',
|
||||
code: 'height: 25%;'
|
||||
},
|
||||
{
|
||||
class: '.h-50',
|
||||
code: 'height: 50%;'
|
||||
},
|
||||
{
|
||||
class: '.h-75',
|
||||
code: 'height: 75%;'
|
||||
},
|
||||
{
|
||||
class: '.h-100',
|
||||
code: 'height: 100%;'
|
||||
},
|
||||
{
|
||||
class: '.h-auto',
|
||||
code: 'height: auto;'
|
||||
},
|
||||
{
|
||||
class: '.h-min',
|
||||
code: 'height: min-content;'
|
||||
},
|
||||
{
|
||||
class: '.h-max',
|
||||
code: 'height: max-content;'
|
||||
},
|
||||
{
|
||||
class: '.h-fit',
|
||||
code: 'height: fit-content;'
|
||||
},
|
||||
{
|
||||
class: '.mh-100',
|
||||
code: 'max-height: 100%;'
|
||||
},
|
||||
{
|
||||
class: '.min-h-0',
|
||||
code: 'min-height: 0;'
|
||||
},
|
||||
{
|
||||
class: '.min-h-100',
|
||||
code: 'min-height: 100%;'
|
||||
},
|
||||
{
|
||||
type: 'section',
|
||||
title: 'Viewport'
|
||||
},
|
||||
{
|
||||
class: '.vw-{100',
|
||||
code: 'width: 100vw;'
|
||||
},
|
||||
{
|
||||
class: '.vh-{100',
|
||||
code: 'height: 100vh;'
|
||||
},
|
||||
{
|
||||
class: '.min-vw-{100',
|
||||
code: 'min-width: 100vw;'
|
||||
},
|
||||
{
|
||||
class: '.min-vh-{100',
|
||||
code: 'min-height: 100vh;'
|
||||
},
|
||||
]} />
|
||||
|
||||
## Relative to the parent
|
||||
|
||||
Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
|
||||
|
||||
@@ -4,6 +4,144 @@ description: Documentation and examples for common text utilities to control ali
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.text-{breakpoint-}start',
|
||||
code: 'text-align: start;'
|
||||
},
|
||||
{
|
||||
class: '.text-{breakpoint-}end',
|
||||
code: 'text-align: end;'
|
||||
},
|
||||
|
||||
{
|
||||
class: '.text-{breakpoint-}center',
|
||||
code: 'text-align: center;'
|
||||
},
|
||||
{
|
||||
class: '.text-wrap',
|
||||
code: 'white-space: normal;'
|
||||
},
|
||||
{
|
||||
class: '.text-nowrap',
|
||||
code: 'white-space: nowrap;'
|
||||
},
|
||||
{
|
||||
class: '.text-break',
|
||||
code: 'word-wrap: break-word;'
|
||||
},
|
||||
{
|
||||
class: '.text-lowercase',
|
||||
code: 'text-transform: lowercase;'
|
||||
},
|
||||
{
|
||||
class: '.text-uppercase',
|
||||
code: 'text-transform: uppercase;'
|
||||
},
|
||||
{
|
||||
class: '.text-capitalize',
|
||||
code: 'text-transform: capitalize;'
|
||||
},
|
||||
{
|
||||
class: '.text-decoration-underline',
|
||||
code: 'text-decoration: underline;'
|
||||
},
|
||||
{
|
||||
class: '.text-decoration-line-through',
|
||||
code: 'text-decoration: line-through;'
|
||||
},
|
||||
{
|
||||
class: '.text-decoration-none',
|
||||
code: 'text-decoration: none;'
|
||||
},
|
||||
{
|
||||
class: '.text-reset',
|
||||
code: 'color: inherit;'
|
||||
},
|
||||
{
|
||||
class: '.fs-{breakpoint-}1',
|
||||
code: 'font-size: ####'
|
||||
},
|
||||
{
|
||||
class: '.fs-{breakpoint-}2',
|
||||
code: 'font-size: ####'
|
||||
},
|
||||
{
|
||||
class: '.fs-{breakpoint-}3',
|
||||
code: 'font-size: ####'
|
||||
},
|
||||
{
|
||||
class: '.fs-{breakpoint-}4',
|
||||
code: 'font-size: ####'
|
||||
},
|
||||
{
|
||||
class: '.fs-{breakpoint-}5',
|
||||
code: 'font-size: ####'
|
||||
},
|
||||
{
|
||||
class: '.fs-{breakpoint-}6',
|
||||
code: 'font-size: ####'
|
||||
},
|
||||
{
|
||||
class: '.fw-{breakpoint}-bold',
|
||||
code: 'font-weight: bold;'
|
||||
},
|
||||
{
|
||||
class: '.fw-{breakpoint}-bolder',
|
||||
code: 'font-weight: bolder;'
|
||||
},
|
||||
{
|
||||
class: '.fw-{breakpoint}-semibold',
|
||||
code: 'font-weight: 600;'
|
||||
},
|
||||
{
|
||||
class: '.fw-{breakpoint}-medium',
|
||||
code: 'font-weight: 500;'
|
||||
},
|
||||
{
|
||||
class: '.fw-{breakpoint}-normal',
|
||||
code: 'font-weight: normal;'
|
||||
},
|
||||
{
|
||||
class: '.fw-{breakpoint}-light',
|
||||
code: 'font-weight: light;'
|
||||
},
|
||||
{
|
||||
class: '.fw-{breakpoint}-lighter',
|
||||
code: 'font-weight: lighter;'
|
||||
},
|
||||
{
|
||||
class: '.fst-{breakpoint}-italic',
|
||||
code: 'font-style: italic;'
|
||||
},
|
||||
{
|
||||
class: '.fst-{breakpoint}-normal',
|
||||
code: 'font-style: normal;'
|
||||
},
|
||||
{
|
||||
class: '.lh-{breakpoint}-1',
|
||||
code: 'line-height: 1;'
|
||||
},
|
||||
{
|
||||
class: '.lh-{breakpoint}-sm',
|
||||
code: 'line-height: 1.25;'
|
||||
},
|
||||
{
|
||||
class: '.lh-{breakpoint}-base',
|
||||
code: 'line-height: 1.5;'
|
||||
},
|
||||
{
|
||||
class: '.lh-{breakpoint}-lg',
|
||||
code: 'line-height: 2;'
|
||||
},
|
||||
{
|
||||
class: '.font-monospace',
|
||||
code: 'font-family: var(--bs-font-monospace);'
|
||||
},
|
||||
]} />
|
||||
|
||||
## Text alignment
|
||||
|
||||
Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
|
||||
|
||||
@@ -3,6 +3,35 @@ title: Vertical alignment
|
||||
description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.align-baseline',
|
||||
code: 'vertical-align: baseline;'
|
||||
},
|
||||
{
|
||||
class: '.align-top',
|
||||
code: 'vertical-align: top;'
|
||||
},
|
||||
{
|
||||
class: '.align-middle',
|
||||
code: 'vertical-align: middle;'
|
||||
},
|
||||
{
|
||||
class: '.align-bottom',
|
||||
code: 'vertical-align: bottom;'
|
||||
},
|
||||
{
|
||||
class: '.align-text-top',
|
||||
code: 'vertical-align: text-top;'
|
||||
},
|
||||
{
|
||||
class: '.align-text-bottom',
|
||||
code: 'vertical-align: text-bottom;'
|
||||
}
|
||||
]} />
|
||||
|
||||
Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
|
||||
|
||||
Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
|
||||
|
||||
@@ -3,6 +3,19 @@ title: Visibility
|
||||
description: Control the visibility of elements, without modifying their display, with visibility utilities.
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.visible',
|
||||
code: 'visibility: visible;'
|
||||
},
|
||||
{
|
||||
class: '.invisible',
|
||||
code: 'visibility: hidden;'
|
||||
},
|
||||
]} />
|
||||
|
||||
Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page.
|
||||
|
||||
<Callout type="warning">
|
||||
@@ -19,10 +32,10 @@ Apply `.visible` or `.invisible` as needed.
|
||||
```scss
|
||||
// Class
|
||||
.visible {
|
||||
visibility: visible !important;
|
||||
visibility: visible;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -6,6 +6,31 @@ added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## Reference
|
||||
|
||||
<RefTable data={[
|
||||
{
|
||||
class: '.z-n1',
|
||||
code: 'z-index: -1;'
|
||||
},
|
||||
{
|
||||
class: '.z-0',
|
||||
code: 'z-index: 0;'
|
||||
},
|
||||
{
|
||||
class: '.z-1',
|
||||
code: 'z-index: 1;'
|
||||
},
|
||||
{
|
||||
class: '.z-2',
|
||||
code: 'z-index: 2;'
|
||||
},
|
||||
{
|
||||
class: '.z-3',
|
||||
code: 'z-index: 3;'
|
||||
},
|
||||
]} />
|
||||
|
||||
## Example
|
||||
|
||||
Use `z-index` utilities to stack elements on top of one another. Requires a `position` value other than `static`, which can be set with custom styles or using our [position utilities]([[docsref:/utilities/position/]]).
|
||||
|
||||
1
site/src/types/auto-import.d.ts
vendored
1
site/src/types/auto-import.d.ts
vendored
@@ -17,6 +17,7 @@ export declare global {
|
||||
export const JsDismiss: typeof import('@shortcodes/JsDismiss.astro').default
|
||||
export const JsDocs: typeof import('@shortcodes/JsDocs.astro').default
|
||||
export const Placeholder: typeof import('@shortcodes/Placeholder.astro').default
|
||||
export const RefTable: typeof import('@shortcodes/RefTable.astro').default
|
||||
export const ScssDocs: typeof import('@shortcodes/ScssDocs.astro').default
|
||||
export const Table: typeof import('@shortcodes/Table.astro').default
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user