Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Mark Otto
|
b78987627a | ||
|
Mark Otto
|
bd6b8c89df | ||
|
Mark Otto
|
98929f897a | ||
|
Mark Otto
|
a9df5dd0e3 | ||
|
Mark Otto
|
5668e10473 | ||
|
Mark Otto
|
bcf9e51c79 |
+10
-45
@@ -76,30 +76,13 @@
|
||||
|
||||
--#{$prefix}body-color: #{$body-color};
|
||||
--#{$prefix}body-bg: #{$body-bg};
|
||||
// --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
|
||||
|
||||
// --#{$prefix}emphasis-color: #{$body-emphasis-color};
|
||||
// // --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
||||
|
||||
// --#{$prefix}secondary-color: #{$body-secondary-color};
|
||||
// // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
||||
// --#{$prefix}secondary-bg: #{$body-secondary-bg};
|
||||
// // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
||||
|
||||
// --#{$prefix}tertiary-color: #{$body-tertiary-color};
|
||||
// // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
||||
// --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
|
||||
// // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
||||
// scss-docs-end root-body-variables
|
||||
|
||||
--#{$prefix}heading-color: #{$headings-color};
|
||||
|
||||
--#{$prefix}link-color: light-dark(var(--#{$prefix}primary-base), var(--#{$prefix}primary-text));
|
||||
// --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
|
||||
--#{$prefix}link-decoration: #{$link-decoration};
|
||||
|
||||
--#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
|
||||
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
||||
|
||||
@if $link-hover-decoration != null {
|
||||
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
|
||||
@@ -112,10 +95,10 @@
|
||||
// --#{$prefix}font-size-base: 1rem;
|
||||
|
||||
// scss-docs-start root-border-var
|
||||
--#{$prefix}border-width: #{$border-width};
|
||||
--#{$prefix}border-style: #{$border-style};
|
||||
--#{$prefix}border-color: #{$border-color};
|
||||
--#{$prefix}border-color-translucent: #{$border-color-translucent};
|
||||
--#{$prefix}border-width: 1px;
|
||||
--#{$prefix}border-style: solid;
|
||||
--#{$prefix}border-color: light-dark(#{$gray-300}, #{$gray-700});
|
||||
--#{$prefix}border-color-translucent: light-dark(rgba($black, .175), rgba($white, .15));
|
||||
|
||||
--#{$prefix}border-radius: .5rem;
|
||||
--#{$prefix}border-radius-sm: .375rem;
|
||||
@@ -125,10 +108,12 @@
|
||||
--#{$prefix}border-radius-pill: 50rem;
|
||||
// scss-docs-end root-border-var
|
||||
|
||||
--#{$prefix}box-shadow: light-dark(0 .5rem 1rem rgb(0 0 0 / 15%), 0 .5rem 1rem rgb(255 0 0 / 50%));
|
||||
--#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%);
|
||||
--#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%);
|
||||
--#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%);
|
||||
// scss-docs-start root-shadow-vars
|
||||
--#{$prefix}box-shadow: 0 .5rem 1rem rgb(0 0 0 / .15);
|
||||
--#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / .075);
|
||||
--#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / .175);
|
||||
--#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / .075);
|
||||
// scss-docs-end root-shadow-vars
|
||||
|
||||
// Focus styles
|
||||
// scss-docs-start root-focus-variables
|
||||
@@ -151,24 +136,6 @@
|
||||
color-scheme: dark;
|
||||
|
||||
// scss-docs-start root-dark-mode-vars
|
||||
// --#{$prefix}body-color: #{$body-color-dark};
|
||||
// --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
|
||||
// --#{$prefix}body-bg: #{$body-bg-dark};
|
||||
// --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
|
||||
|
||||
// --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
|
||||
// --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
|
||||
|
||||
// --#{$prefix}secondary-color: #{$body-secondary-color-dark};
|
||||
// --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
|
||||
// --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
|
||||
// --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
|
||||
|
||||
// --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
|
||||
// --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
|
||||
// --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
|
||||
// --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
||||
|
||||
// @each $color, $value in $theme-colors-text-dark {
|
||||
// --#{$prefix}#{$color}-text-emphasis: #{$value};
|
||||
// }
|
||||
@@ -185,8 +152,6 @@
|
||||
|
||||
// --#{$prefix}link-color: #{$link-color-dark};
|
||||
// --#{$prefix}link-hover-color: #{$link-hover-color-dark};
|
||||
// --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
|
||||
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
|
||||
|
||||
// --#{$prefix}code-color: #{$code-color-dark};
|
||||
// --#{$prefix}highlight-color: #{$mark-color-dark};
|
||||
|
||||
+75
-55
@@ -145,68 +145,87 @@ $utilities: map.merge(
|
||||
),
|
||||
// scss-docs-end utils-position
|
||||
// scss-docs-start utils-borders
|
||||
"border": (
|
||||
// "border": (
|
||||
// // selector: "attr-includes",
|
||||
// class: border,
|
||||
// property: border,
|
||||
// values: (
|
||||
// null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
// // 0: 0,
|
||||
// )
|
||||
// ),
|
||||
"borders": (
|
||||
property: border,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
class: border,
|
||||
values: map.merge($borders, (0: 0))
|
||||
),
|
||||
"border-top": (
|
||||
class: border-top,
|
||||
// "borders": (
|
||||
// class: border,
|
||||
// property: '--#{$prefix}border-width',
|
||||
// values: map.merge($border-widths, (0: 0))
|
||||
// ),
|
||||
"border-t": (
|
||||
class: border-t,
|
||||
property: border-block-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
values: map.merge($borders, (0: 0))
|
||||
),
|
||||
"border-end": (
|
||||
"border-e": (
|
||||
property: border-inline-end,
|
||||
class: border-end,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
class: border-e,
|
||||
values: map.merge($borders, (0: 0))
|
||||
),
|
||||
"border-bottom": (
|
||||
"border-b": (
|
||||
property: border-block-end,
|
||||
class: border-bottom,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
class: border-b,
|
||||
values: map.merge($borders, (0: 0))
|
||||
),
|
||||
"border-start": (
|
||||
"border-s": (
|
||||
property: border-inline-start,
|
||||
class: border-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
class: border-s,
|
||||
values: map.merge($borders, (0: 0))
|
||||
),
|
||||
"border-y": (
|
||||
property: border-block,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
values: map.merge($borders, (0: 0))
|
||||
),
|
||||
"border-x": (
|
||||
property: border-inline,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
values: map.merge($borders, (0: 0))
|
||||
),
|
||||
"border-color": (
|
||||
property: border-color,
|
||||
property: --#{$prefix}border-color,
|
||||
class: border,
|
||||
values: theme-color-values("border")
|
||||
),
|
||||
"border-width": (
|
||||
property: border-width,
|
||||
"dividers-x": (
|
||||
selector: ".dividers-x > :not(:first-child)",
|
||||
property: border-inline-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
)
|
||||
),
|
||||
"dividers-y": (
|
||||
selector: ".dividers-y > :not(:first-child)",
|
||||
property: border-block-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
)
|
||||
),
|
||||
"border-opacity": (
|
||||
class: border,
|
||||
values: $border-widths
|
||||
property: border-color,
|
||||
values: (
|
||||
10: color-mix(in oklch, var(--#{$prefix}border-color) 10%, transparent),
|
||||
20: color-mix(in oklch, var(--#{$prefix}border-color) 20%, transparent),
|
||||
30: color-mix(in oklch, var(--#{$prefix}border-color) 30%, transparent),
|
||||
40: color-mix(in oklch, var(--#{$prefix}border-color) 40%, transparent),
|
||||
50: color-mix(in oklch, var(--#{$prefix}border-color) 50%, transparent),
|
||||
60: color-mix(in oklch, var(--#{$prefix}border-color) 60%, transparent),
|
||||
70: color-mix(in oklch, var(--#{$prefix}border-color) 70%, transparent),
|
||||
80: color-mix(in oklch, var(--#{$prefix}border-color) 80%, transparent),
|
||||
90: color-mix(in oklch, var(--#{$prefix}border-color) 90%, transparent),
|
||||
100: var(--#{$prefix}border-color),
|
||||
)
|
||||
),
|
||||
// "border-opacity": (
|
||||
// css-var: true,
|
||||
@@ -666,16 +685,15 @@ $utilities: map.merge(
|
||||
// scss-docs-end utils-color
|
||||
// scss-docs-start utils-links
|
||||
"link-opacity": (
|
||||
property: --#{$prefix}link-opacity,
|
||||
// css-var: true,
|
||||
property: color,
|
||||
class: link-opacity,
|
||||
state: hover,
|
||||
values: (
|
||||
10: .1,
|
||||
25: .25,
|
||||
50: .5,
|
||||
75: .75,
|
||||
100: 1
|
||||
10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
|
||||
25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
|
||||
50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
|
||||
75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
|
||||
100: var(--#{$prefix}link-color),
|
||||
)
|
||||
),
|
||||
"link-offset": (
|
||||
@@ -694,6 +712,7 @@ $utilities: map.merge(
|
||||
local-vars: (
|
||||
"link-underline-opacity": 1
|
||||
),
|
||||
values: theme-color-values("text"),
|
||||
// values: map.merge(
|
||||
// $utilities-links-underline,
|
||||
// (
|
||||
@@ -703,16 +722,17 @@ $utilities: map.merge(
|
||||
),
|
||||
"link-underline-opacity": (
|
||||
// css-var: true,
|
||||
property: --#{$prefix}link-underline-opacity,
|
||||
// property: --#{$prefix}link-underline-opacity,
|
||||
property: text-decoration-color,
|
||||
class: link-underline-opacity,
|
||||
state: hover,
|
||||
values: (
|
||||
0: 0,
|
||||
10: .1,
|
||||
25: .25,
|
||||
50: .5,
|
||||
75: .75,
|
||||
100: 1
|
||||
0: color-mix(in oklch, var(--#{$prefix}link-color) 0%, transparent),
|
||||
10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
|
||||
25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
|
||||
50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
|
||||
75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
|
||||
100: var(--#{$prefix}link-color),
|
||||
),
|
||||
),
|
||||
// scss-docs-end utils-links
|
||||
|
||||
+14
-5
@@ -241,7 +241,11 @@ $paragraph-margin-bottom: 1rem !default;
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
// scss-docs-start border-variables
|
||||
$border-width: 1px !default;
|
||||
$border-width: var(--#{$prefix}border-width) !default;
|
||||
$border-style: var(--#{$prefix}border-style) !default;
|
||||
$border-color: var(--#{$prefix}border-color) !default;
|
||||
$border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
|
||||
|
||||
$border-widths: (
|
||||
1: 1px,
|
||||
2: 2px,
|
||||
@@ -249,9 +253,15 @@ $border-widths: (
|
||||
4: 4px,
|
||||
5: 5px
|
||||
) !default;
|
||||
$border-style: solid !default;
|
||||
$border-color: light-dark($gray-300, $gray-700) !default;
|
||||
$border-color-translucent: rgba($black, .175) !default;
|
||||
|
||||
$borders: (
|
||||
0: 0,
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
2: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
3: 3px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
4: 4px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
5: 5px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
) !default;
|
||||
// scss-docs-end border-variables
|
||||
|
||||
// scss-docs-start border-radius-variables
|
||||
@@ -503,7 +513,6 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
|
||||
$btn-link-color: var(--#{$prefix}link-color) !default;
|
||||
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
||||
$btn-link-disabled-color: $gray-600 !default;
|
||||
// $btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
@@ -6,17 +6,18 @@
|
||||
@layer helpers {
|
||||
@each $color, $value in $theme-colors {
|
||||
.link-#{$color} {
|
||||
color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
|
||||
--#{$prefix}link-color: var(--#{$prefix}#{$color});
|
||||
// color: var(--#{$prefix}#{$color});
|
||||
text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
|
||||
|
||||
@if $link-shade-percentage != 0 {
|
||||
&:hover,
|
||||
&:focus {
|
||||
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
|
||||
color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
|
||||
text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
|
||||
}
|
||||
}
|
||||
// @if $link-shade-percentage != 0 {
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
|
||||
// color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
|
||||
// text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,16 +6,17 @@
|
||||
|
||||
// Utility generator
|
||||
|
||||
// - Utilities can three different types of selectors:
|
||||
// - Utilities can four different types of selectors:
|
||||
// - class: .class
|
||||
// - attr-starts: [class^="class"]
|
||||
// - attr-includes: [class*="class"]
|
||||
// - any other string: used directly as a custom selector (e.g., "& > :not(:last-child)")
|
||||
// - Utilities can generate a regular CSS property or a CSS custom property
|
||||
// - Utilities can be responsive or not
|
||||
// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
|
||||
|
||||
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
||||
// Determine if we're generating a class, or an attribute selector
|
||||
// Determine if we're generating a class, or an attribute selector, or using a custom selector
|
||||
$selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class");
|
||||
// Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"])
|
||||
$selectorClass: map.get($utility, class);
|
||||
@@ -73,6 +74,9 @@
|
||||
$selector: "[class^=\"#{$selectorClass}\"]";
|
||||
} @else if $selectorType == "attr-includes" {
|
||||
$selector: "[class*=\"#{$selectorClass}\"]";
|
||||
} @else {
|
||||
// Use the selector value directly as a custom selector string
|
||||
$selector: $selectorType;
|
||||
}
|
||||
|
||||
// @debug $utility;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
]}
|
||||
/> -->
|
||||
@@ -4,3 +4,38 @@ description: Track and review changes to the Bootstrap source files, documentati
|
||||
aliases: "/migration/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Bootstrap 6 is a major release that aims to reduce complexity, refine existing components, revamp the utility API, and further embrace newer browser features. To that end, a number of breaking changes have been introduced. This guide will help you understand what's changed and how to migrate your code.
|
||||
|
||||
At a high level, here's what's changed:
|
||||
|
||||
- Browser support has been modernized and will feature rolling updates to embrace newer releases as time passes during the v6 lifecycle. For example, after a few months, we may bump Safari from 15.6 to 16 or higher.
|
||||
- The utility API has been revamped to be more flexible and easier to use.
|
||||
|
||||
### Sass
|
||||
|
||||
Lots of changes to the `scss` directory, how we use Sass, and more.
|
||||
|
||||
- Dropped support for Node Sass, meaning we're now entirely Dart Sass and are using Sass modules across the project.
|
||||
- Because we now use Sass modules, we now colocate variables into their respective stylesheets. For example, all dropdown variables are now in `_dropdown.scss`. This greatly reduces the number of variables that are available globally in `_variables.scss`.
|
||||
- Rearranged `scss/` directory to have several new subfolders.
|
||||
- Removed `_maps.scss` entirely.
|
||||
- Added new `_config.scss` file.
|
||||
|
||||
### Utility API
|
||||
|
||||
- There's a new `selector` property that allows for different types of utilities, as opposed to only "utility classes." Selectors can be `class`, `attr-starts`, or `attr-includes`. We use these in our `background-color` and `color` utilities.
|
||||
- `property` can now be a property or a CSS variable (custom property).
|
||||
- Removed `local-vars` and `css-var` properties.
|
||||
- mdo-do: restore pseudo, local vars?
|
||||
|
||||
### Utilities
|
||||
- Text color utilities have been renamed from `.text-{color}` to `.color-{color}`. This better matches our other utilities where we lead with the CSS property when possible.
|
||||
- Renamed border-top, border-end, border-bottom, and border-start to border-t, border-e, border-b, and border-s.
|
||||
- New attribute utility for borders and border-widths.
|
||||
- Split border-radius utilities into their own docs page.
|
||||
|
||||
## CSS
|
||||
- Replaced box-shadow driven focus styles with `outline`
|
||||
|
||||
@@ -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/]]).
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
@container (max-width: 240px) {
|
||||
#carbonads {
|
||||
padding-left: 15px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
|
||||
@@ -254,12 +254,18 @@
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
[class^="border"] {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
color: var(--bs-fg-3);
|
||||
background-color: var(--bs-bg-1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -275,13 +281,13 @@
|
||||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
background-color: var(--bs-bg-1);
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--bs-body-color);
|
||||
background-color: var(--bs-fg);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
@@ -384,7 +390,7 @@
|
||||
|
||||
.highlight-toolbar {
|
||||
background-color: var(--bd-pre-bg);
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
border-block: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.bd-file-ref {
|
||||
|
||||
@@ -139,9 +139,7 @@
|
||||
// scss-docs-start custom-color-mode
|
||||
[data-bs-theme="blue"] {
|
||||
--bs-body-color: var(--bs-white);
|
||||
// --bs-body-color-rgb: #{to-rgb($white)};
|
||||
--bs-body-bg: var(--bs-blue);
|
||||
// --bs-body-bg-rgb: #{to-rgb($blue)};
|
||||
--bs-tertiary-bg: #{$blue-600};
|
||||
|
||||
.dropdown-menu {
|
||||
@@ -257,9 +255,7 @@
|
||||
// scss-docs-start custom-color-mode
|
||||
[data-bs-theme="blue"] {
|
||||
--bs-body-color: var(--bs-white);
|
||||
// --bs-body-color-rgb: #{to-rgb($white)};
|
||||
--bs-body-bg: var(--bs-blue);
|
||||
// --bs-body-bg-rgb: #{to-rgb($blue)};
|
||||
--bs-tertiary-bg: #{$blue-600};
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
@@ -17,10 +17,6 @@ $bd-callout-variants: info, warning, danger !default;
|
||||
--bd-purple: #{$bd-purple};
|
||||
--bd-violet: #{$bd-violet};
|
||||
--bd-accent: #{$bd-accent};
|
||||
// --bd-violet-rgb: #{to-rgb($bd-violet)};
|
||||
// --bd-accent-rgb: #{to-rgb($bd-accent)};
|
||||
// --bd-pink-rgb: #{to-rgb($pink-500)};
|
||||
// --bd-teal-rgb: #{to-rgb($teal-500)};
|
||||
--bd-violet-bg: var(--bd-violet);
|
||||
--bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
|
||||
--bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
|
||||
@@ -29,14 +25,4 @@ $bd-callout-variants: info, warning, danger !default;
|
||||
--bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
|
||||
--bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
|
||||
}
|
||||
|
||||
// @include color-mode(dark, true) {
|
||||
// --bd-violet: #{mix($bd-violet, $white, 75%)};
|
||||
// --bd-violet-bg: #{$bd-violet};
|
||||
// --bd-toc-color: var(--#{$prefix}emphasis-color);
|
||||
// --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
|
||||
// --bd-callout-link: #{to-rgb($blue-300)};
|
||||
// --bd-callout-code-color: #{$pink-300};
|
||||
// --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
|
||||
// }
|
||||
}
|
||||
|
||||
Vendored
+1
@@ -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