$mark-bg: var(--yellow-100) !default;
// scss-docs-end type-variables
-
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-// scss-docs-start input-btn-variables
-$input-btn-padding-y: .375rem !default;
-$input-btn-padding-x: .75rem !default;
-$input-btn-font-family: null !default;
-$input-btn-font-size: $font-size-base !default;
-$input-btn-line-height: $line-height-base !default;
-
-$input-btn-padding-y-sm: .25rem !default;
-$input-btn-padding-x-sm: .5rem !default;
-$input-btn-font-size-sm: $font-size-sm !default;
-
-$input-btn-padding-y-lg: .5rem !default;
-$input-btn-padding-x-lg: 1rem !default;
-$input-btn-font-size-lg: $font-size-lg !default;
-
-$input-btn-border-width: var(--border-width) !default;
-// scss-docs-end input-btn-variables
-
-
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
> [class*="btn-"] {
position: relative;
flex: 1 1 auto;
+
+ &:hover {
+ z-index: 1;
+ }
}
- // Bring the hover, focused, and "active" buttons to the front to overlay
- // the borders properly
> .btn-check:has(input:checked),
- > .btn-check:has(input:focus),
- > [class*="btn-"]:hover,
- > [class*="btn-"]:focus,
> [class*="btn-"]:active,
> [class*="btn-"].active {
- z-index: 1;
+ z-index: 2;
+ }
+
+ > .btn-check:has(input:focus),
+ > [class*="btn-"]:focus {
+ z-index: 3;
}
}
// scss-docs-start btn-variables
$btn-color: var(--fg-body) !default;
-$btn-padding-y: $input-btn-padding-y !default;
-$btn-padding-x: $input-btn-padding-x !default;
-$btn-font-family: $input-btn-font-family !default;
-$btn-font-size: $input-btn-font-size !default;
-$btn-line-height: $input-btn-line-height !default;
+$btn-padding-y: .375rem !default;
+$btn-padding-x: .75rem !default;
+$btn-font-size: var(--font-size-base) !default;
+$btn-line-height: var(--line-height-base) !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-xs: .125rem !default;
$btn-font-size-xs: var(--font-size-xs) !default;
$btn-line-height-xs: 1.125rem !default;
-$btn-padding-y-sm: $input-btn-padding-y-sm !default;
-$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-padding-y-sm: .25rem !default;
+$btn-padding-x-sm: .5rem !default;
$btn-font-size-sm: var(--font-size-sm) !default;
$btn-line-height-sm: 1.125rem !default;
-$btn-padding-y-lg: $input-btn-padding-y-lg !default;
-$btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-font-size-lg: 16px !default;
+$btn-padding-y-lg: .5rem !default;
+$btn-padding-x-lg: 1rem !default;
+$btn-font-size-lg: var(--font-size-md) !default;
$btn-line-height-lg: 1.25rem !default;
// Intentionally left for folks who want it
// $btn-font-size-xl: var(--font-size-lg) !default;
// $btn-line-height-xl: 1.5rem !default;
-$btn-border-width: $input-btn-border-width !default;
+$btn-border-width: var(--border-width) !default;
-$btn-font-weight: $font-weight-normal !default;
+$btn-font-weight: var(--font-weight-normal) !default;
$btn-disabled-opacity: .65 !default;
$btn-link-color: var(--link-color) !default;
--btn-min-height: 2.25rem;
--btn-padding-x: #{$btn-padding-x};
--btn-padding-y: #{$btn-padding-y};
- --btn-font-family: #{$btn-font-family};
+ // --btn-font-family: #{$btn-font-family};
--btn-font-size: #{$btn-font-size};
--btn-font-weight: #{$btn-font-weight};
--btn-line-height: #{$btn-line-height};
justify-content: center;
min-height: var(--btn-min-height);
padding: var(--btn-padding-y) var(--btn-padding-x);
- font-family: var(--btn-font-family);
+ // font-family: var(--btn-font-family);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
line-height: var(--btn-line-height);
--btn-bg: transparent;
--btn-border-color: transparent;
--btn-hover-color: #{$btn-link-hover-color};
+ --btn-hover-bg: transparent;
--btn-hover-border-color: transparent;
--btn-active-color: #{$btn-link-hover-color};
+ --btn-active-bg: transparent;
--btn-active-border-color: transparent;
--btn-disabled-color: #{$btn-link-disabled-color};
--btn-disabled-border-color: transparent;
+ color: var(--theme-text, var(--btn-color));
text-decoration: var(--link-decoration);
@if $enable-gradients {
}
&:focus-visible {
- color: var(--btn-color);
+ color: var(--theme-text, var(--btn-color));
}
&:hover {
- color: var(--btn-hover-color);
+ color: var(--theme-text-emphasis, var(--btn-hover-color));
}
// No need for an active state here
// Links
a {
- color: var(--link-color);
+ color: var(--theme-text, var(--link-color));
text-decoration: var(--link-decoration);
text-underline-offset: $link-underline-offset;
&:hover {
// --link-color: var(--link-hover-color);
// --link-decoration: var(--link-hover-decoration, var(--link-decoration));
- color: var(--link-hover-color);
+ color: var(--theme-text-emphasis, var(--link-hover-color));
text-decoration: var(--link-hover-decoration, var(--link-decoration));
}
}
+++ /dev/null
-@use "../config" as *;
-@use "../colors" as *;
-@use "../theme" as *;
-@use "../variables" as *;
-
-@layer helpers {
- @each $color, $value in $new-theme-colors {
- .link-#{$color} {
- --link-color: var(--#{$color}-text);
- // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
-
- @if $link-shade-percentage != 0 {
- &:hover,
- &:focus {
- --link-color: var(--#{$color}-text-emphasis);
- --link-hover-color: var(--#{$color}-text-emphasis);
- // $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(--link-opacity));
- // text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
- }
- }
- }
- }
-
- // One-off special link helper as a bridge until v6
- .link-body-emphasis {
- color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity));
- text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity));
-
- @if $link-shade-percentage != 0 {
- &:hover,
- &:focus {
- color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity, .75));
- text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity, .75));
- }
- }
- }
-}
@forward "color-bg";
-@forward "colored-links";
@forward "focus-ring";
@forward "icon-link";
@forward "position";
icon_color: orange
pages:
- title: Color & background
- - title: Colored links
- title: Focus ring
- title: Icon link
- title: Position
import Example from '@components/shortcodes/Example.astro'
const themeColors = getData('theme-colors')
-const styles = ['solid', 'styled', 'outline', 'subtle', 'text']
+const styles = ['styled', 'solid', 'outline', 'subtle', 'text']
const sizes = [
{ value: 'xs', label: 'Extra small' },
{ value: 'sm', label: 'Small' },
</symbol>
</svg>
-<div class="bg-1 p-3 rounded-3 mb-3">
+<div class="bg-1 p-3 rounded-3">
<div class="d-flex flex-wrap gap-3">
- <div class="vstack gap-1 flex-grow-0">
+ <div class="vstack gap-1">
<label class="form-label fw-semibold mb-0">Color</label>
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 d-inline-flex align-items-center justify-content-between"
+ class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
id="btn-color-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
data-color="primary"
>
Primary
+ <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+ <use href="#chevron-expand" />
+ </svg>
</button>
<ul class="dropdown-menu" aria-labelledby="btn-color-dropdown">
{themeColors.map((themeColor) => (
</div>
</div>
- <div class="vstack gap-1 flex-grow-0">
+ <div class="vstack gap-1">
<label class="form-label fw-semibold mb-0">Style</label>
<div class="btn-group text-capitalize" role="group" aria-label="Button style">
{styles.map((style) => (
type="radio"
name="btn-style"
value={style}
- checked={style === 'solid'}
+ checked={style === 'styled'}
data-style={style}
/>
{style || 'default'}
</div>
</div>
- <div class="vstack gap-1 flex-grow-0">
+ <div class="vstack gap-1">
<label class="form-label fw-semibold mb-0">Size</label>
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 d-inline-flex align-items-center justify-content-between"
+ class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
id="btn-size-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
data-size=""
>
Medium
+ <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+ <use href="#chevron-expand" />
+ </svg>
</button>
<ul class="dropdown-menu" aria-labelledby="btn-size-dropdown">
{sizes.map((size) => (
The `.btn` class is intended to be a starting point for your own custom button styles, while our provided button variants used in conjunction with our button variants, or to serve as a basis for your own custom styles.
-<Callout type="warning">
-When using `.btn` without a modifier, be sure to add some explicit `:focus-visible` styles.
-</Callout>
-
## Playground
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. Combined with our utilities, you have a very powerful set of defaults to choose from.
## Variants
-Compare all variants at once:
+Compare all button variants and styles at once:
-<Example class="bd-example-buttons" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn-solid theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-<button type="button" class="btn-outline theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-<button type="button" class="btn-subtle theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-<button type="button" class="btn-text theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-`), `
-<button type="button" class="btn btn-link">Link</button>`]} />
+<Example class="bd-example-buttons justify-items-start" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn-solid theme-${themeColor.name}">${themeColor.title}</button>
+<button type="button" class="btn-outline theme-${themeColor.name}">${themeColor.title}</button>
+<button type="button" class="btn-subtle theme-${themeColor.name}">${themeColor.title}</button>
+<button type="button" class="btn-text theme-${themeColor.name}">${themeColor.title}</button>`)]} />
<Details name="warning-color-assistive-technologies" />
+## Link buttons
+
+Use the `.btn-link` class to create a button that looks like a link.
+
+<Example code={`<button type="button" class="btn btn-link">Link</button>`} />
+
+Link buttons can also be styled with the theme colors.
+
+<Example code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-link theme-${themeColor.name}">${themeColor.title}</button>`)]} />
+
## Styled buttons
Add visual depth to solid buttons with gradients and shadows using the `.btn-styled` modifier class. This provides a more three-dimensional appearance that can be customized further with CSS variables.
| `--bs-btn-active-shadow` | Pressed/active state shadow |
</BsTable>
-## Disable text wrapping
-
-If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
-
## Button tags
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
## Disabled state
-Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering, and some additional styling to indicate the disabled state.
+Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none`, preventing hover and active states from triggering, and some additional styling to indicate the disabled state.
<Example code={`<button type="button" class="btn-solid theme-primary" disabled>Primary button</button>
<button type="button" class="btn-solid theme-secondary" disabled>Button</button>
<button type="button" class="btn-outline theme-primary" disabled>Primary button</button>
<button type="button" class="btn-outline theme-secondary" disabled>Button</button>`} />
-### Disabled links
-
-Disabled buttons using the `<a>` element behave a bit different, and if you need to keep the `href` attribute, you may need additional HTML to fully disable the link functionality. Use the `.disabled` class instead of the attribute on `<a>` elements to make them visually appear disabled.
+Disabled buttons using the `<a>` element behave a bit different. Use the `.disabled` class instead of the attribute on `<a>` elements to make them visually appear disabled. If you need to keep the `href` attribute, you may need additional HTML to fully disable the link functionality.
<Example code={`<a class="btn-solid theme-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn-solid theme-secondary disabled" role="button" aria-disabled="true">Link</a>`} />
toc: true
---
+import { getData } from '@libs/data'
+
## Approach
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
<Example code={`<a href="#">This is an example link</a>`} />
-As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
+Use [`.link-{%}`]([[docsref:/utilities/link/#link-opacity]]) utilities to change the link color opacity.
+
+<Example code={`<a href="#" class="link-50">This is an example link</a>`} />
+
+Use the theme utility classes to change the link color.
-<Example code={`<a href="#" style="--bs-link-opacity: .5">This is an example link</a>`} />
+<Example code={[...getData('theme-colors').map((themeColor) => `<a href="#" class="theme-${themeColor.name}">${themeColor.title} link</a>`)]} />
Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
`$input-btn-*` variables are shared global variables between our [buttons]([[docsref:/components/buttons]]) and our form components. You’ll find these frequently reassigned as values to other component-specific variables.
-<ScssDocs name="input-btn-variables" file="scss/_variables.scss" />
+<ScssDocs name="input-btn-variables" file="scss/forms/_form-variables.scss" />
+++ /dev/null
----
-title: Colored links
-description: Colored links with hover states
-toc: true
----
-
-import { getData } from '@libs/data'
-
-## Link colors
-
-You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]([[docsref:/utilities/colors]]), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
-
-<Callout>
-**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It’s treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it’s a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
-</Callout>
-
-<Example code={[
- ...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name}">${themeColor.title} link</a></p>`),
- `<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>`
-]} />
-
-<Details name="warning-color-assistive-technologies" />
-
-## Link utilities
-
-Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]).
-
-<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>`
-]} />
This approach allows us to also easily support translucency with our `.fg-{opacity}` utilities as we can use `color-mix()` with the CSS variable to generate the appropriate color. See the [opacity section](#opacity) for more details.
-If you want to colorize links, you can use the [`.link-*` helper classes]([[docsref:/helpers/colored-links]]) which have `:hover` and `:focus` states.
+If you want to colorize links, you can use the [`.link-{color}` utilities]([[docsref:/utilities/link]]) which have `:hover` and `:focus` states.
<Example code={[
...getData('theme-colors').map((themeColor) => `<p class="fg-${themeColor.name}">.fg-${themeColor.name}</p>
## Colored links
-[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.
+Links can be colored using the theme color utilities.
<Example code={[
- ...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} underline-offset-2 underline-20 underline-100-hover">${themeColor.title} link</a></p>`)
+ ...getData('theme-colors').map((themeColor) => `<p><a href="#" class="theme-${themeColor.name} underline-offset-2 underline-20 underline-100-hover">${themeColor.title} link</a></p>`)
]} />
<Details name="warning-color-assistive-technologies" />
projects / thirdparty / bootstrap.git / commitdiff
