mirror of
https://github.com/twbs/bootstrap.git
synced 2025-12-28 05:33:57 +00:00
New .theme-* utilities for consuming the existing .theme styles, replace color-background helpers
This commit is contained in:
Mark Otto
parent
983f589253
commit
791fd8bb24
@ -57,10 +57,10 @@ $progress-bar-transition: width .6s ease !default;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: var(--progress-bar-color);
|
||||
color: var(--theme-contrast, var(--progress-bar-color));
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: var(--progress-bar-bg);
|
||||
background-color: var(--theme-bg, var(--progress-bar-bg));
|
||||
@include transition(var(--progress-bar-transition));
|
||||
}
|
||||
|
||||
|
||||
@ -735,11 +735,6 @@ $utilities: map.merge(
|
||||
class: fg-emphasis,
|
||||
values: theme-color-values("text-emphasis"),
|
||||
),
|
||||
"fg-opacity": (
|
||||
class: fg,
|
||||
property: color,
|
||||
values: theme-opacity-values(--fg)
|
||||
),
|
||||
"fg-contrast": (
|
||||
property: (
|
||||
"--fg": null,
|
||||
@ -748,6 +743,11 @@ $utilities: map.merge(
|
||||
class: fg-contrast,
|
||||
values: theme-color-values("contrast"),
|
||||
),
|
||||
"fg-opacity": (
|
||||
class: fg,
|
||||
property: color,
|
||||
values: theme-opacity-values(--fg)
|
||||
),
|
||||
// scss-docs-end utils-color
|
||||
// scss-docs-start utils-links
|
||||
"link-opacity": (
|
||||
@ -824,6 +824,38 @@ $utilities: map.merge(
|
||||
values: theme-opacity-values(--bg)
|
||||
),
|
||||
// scss-docs-end utils-bg-color
|
||||
// scss-docs-start utils-theme
|
||||
// Theme style utilities - pair with .theme-{color} to apply coordinated bg + text colors
|
||||
"theme-contrast": (
|
||||
property: (
|
||||
"background-color": var(--theme-bg),
|
||||
"color": var(--theme-contrast)
|
||||
),
|
||||
class: theme-contrast,
|
||||
values: (null: null)
|
||||
),
|
||||
"theme-subtle": (
|
||||
property: (
|
||||
"background-color": var(--theme-bg-subtle),
|
||||
"color": var(--theme-text)
|
||||
),
|
||||
class: theme-subtle,
|
||||
values: (null: null)
|
||||
),
|
||||
"theme-muted": (
|
||||
property: (
|
||||
"background-color": var(--theme-bg-muted),
|
||||
"color": var(--theme-text-emphasis)
|
||||
),
|
||||
class: theme-muted,
|
||||
values: (null: null)
|
||||
),
|
||||
"theme-border": (
|
||||
property: border,
|
||||
class: theme-border,
|
||||
values: (null: var(--border-width) solid var(--theme-border))
|
||||
),
|
||||
// scss-docs-end utils-theme
|
||||
"gradient": (
|
||||
property: background-image,
|
||||
class: bg,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
@use "../config" as *;
|
||||
@use "../variables" as *;
|
||||
@use "../colors" as *;
|
||||
@use "../theme" as *;
|
||||
|
||||
@layer helpers {
|
||||
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
||||
@each $color, $value in $new-theme-colors {
|
||||
.text-bg-#{$color} {
|
||||
color: var(--#{$color}-text);
|
||||
--bg: var(--#{$color}-bg-subtle);
|
||||
// color: color-contrast($value);
|
||||
// background-color: RGBA(var(--#{$color}-rgb), var(--bg-opacity, 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,3 @@
|
||||
@forward "color-bg";
|
||||
@forward "focus-ring";
|
||||
@forward "icon-link";
|
||||
@forward "position";
|
||||
|
||||
@ -109,7 +109,6 @@
|
||||
icon: magic
|
||||
icon_color: orange
|
||||
pages:
|
||||
- title: Color & background
|
||||
- title: Focus ring
|
||||
- title: Icon link
|
||||
- title: Position
|
||||
@ -128,6 +127,7 @@
|
||||
pages:
|
||||
- title: Colors
|
||||
- title: Background
|
||||
- title: Theme
|
||||
- group: Layout
|
||||
pages:
|
||||
- title: Aspect ratio
|
||||
|
||||
@ -92,21 +92,21 @@ These work great with custom content as well.
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge text-bg-primary rounded-pill">14</span>
|
||||
<span class="badge theme-primary">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge text-bg-primary rounded-pill">14</span>
|
||||
<span class="badge theme-primary">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge text-bg-primary rounded-pill">14</span>
|
||||
<span class="badge theme-primary">14</span>
|
||||
</li>
|
||||
</ol>`} />
|
||||
|
||||
@ -155,15 +155,15 @@ Add badges to any list group item to show unread counts, activity, and more with
|
||||
<Example code={`<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A list item
|
||||
<span class="badge text-bg-primary rounded-pill">14</span>
|
||||
<span class="badge theme-primary">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A second list item
|
||||
<span class="badge text-bg-primary rounded-pill">2</span>
|
||||
<span class="badge theme-primary">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A third list item
|
||||
<span class="badge text-bg-primary rounded-pill">1</span>
|
||||
<span class="badge theme-primary">1</span>
|
||||
</li>
|
||||
</ul>`} />
|
||||
|
||||
|
||||
@ -90,19 +90,19 @@ Use background utility classes to change the appearance of individual progress b
|
||||
|
||||
<Details name="warning-color-assistive-technologies" />
|
||||
|
||||
If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]([[docsref:/helpers/color-background]]) helper classes.
|
||||
If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast. We recommend using the [theme contrast]([[docsref:/utilities/theme#contrast]]) helper classes.
|
||||
|
||||
<Example code={`<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-success" style="width: 25%">25%</div>
|
||||
<div class="progress-bar theme-success" style="width: 25%">25%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-info" style="width: 50%">50%</div>
|
||||
<div class="progress-bar theme-info" style="width: 50%">50%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
|
||||
<div class="progress-bar theme-warning" style="width: 75%">75%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
|
||||
<div class="progress-bar theme-danger" style="width: 100%">100%</div>
|
||||
</div>`} />
|
||||
|
||||
## Multiple bars
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
---
|
||||
title: Color and background
|
||||
description: Set a background color with contrasting foreground color.
|
||||
toc: true
|
||||
---
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
|
||||
## Overview
|
||||
|
||||
Color and background helpers combine the power of our [`.text-*` utilities]([[docsref:/utilities/colors]]) and [`.bg-*` utilities]([[docsref:/utilities/background]]) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
|
||||
|
||||
<Callout type="warning">
|
||||
**Heads up!** There’s currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.
|
||||
</Callout>
|
||||
|
||||
<Example code={getData('theme-colors').map((themeColor) => `<div class="text-bg-${themeColor.name} p-3">${themeColor.title} with contrasting color</div>`)} />
|
||||
|
||||
<Details name="warning-color-assistive-technologies" />
|
||||
|
||||
## With components
|
||||
|
||||
Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]([[docsref:/components/badge#background-colors]]):
|
||||
|
||||
<Example code={`<span class="badge text-bg-primary">Primary</span>
|
||||
<span class="badge text-bg-info">Info</span>`} />
|
||||
|
||||
Or on [cards]([[docsref:/components/card#background-and-color]]):
|
||||
|
||||
<Example code={`<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
|
||||
</div>
|
||||
</div>`} />
|
||||
@ -50,12 +50,10 @@ By adding a `.bg-gradient` class, a linear gradient is added as background image
|
||||
|
||||
Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`.
|
||||
|
||||
{getData('theme-colors').map((themeColor) => {
|
||||
return (
|
||||
<div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient text-white`}>.bg-{themeColor.name}.bg-gradient</div>
|
||||
)
|
||||
})}
|
||||
<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
|
||||
<Example class="d-flex flex-column gap-2" code={[
|
||||
...getData('theme-colors').map((themeColor) => `<div class="p-3 bg-${themeColor.name} bg-gradient fg-contrast-${themeColor.name}">.bg-${themeColor.name}.bg-gradient</div>`),
|
||||
`<div class="p-3 bg-black bg-gradient fg-contrast">.bg-black.bg-gradient</div>`
|
||||
]} />
|
||||
|
||||
## Opacity
|
||||
|
||||
|
||||
@ -59,6 +59,38 @@ Change the opacity of a text color by using any of the `.fg-<percentage>` utilit
|
||||
<div class="fg-primary fg-20">This is 20% opacity primary text</div>
|
||||
<div class="fg-primary fg-10">This is 10% opacity primary text</div>`} />
|
||||
|
||||
## Contrast colors
|
||||
|
||||
Change the contrast color of a text or link with `.fg-contrast-{color}`. This will set the `--bs-fg` variable to the theme’s `contrast` key color.
|
||||
```css
|
||||
.fg-contrast-primary {
|
||||
--bs-fg: var(--bs-white);
|
||||
color: var(--bs-fg);
|
||||
}
|
||||
```
|
||||
|
||||
<Example class="d-flex flex-column gap-2" code={`<p class="bg-primary fg-contrast-primary">.fg-contrast-primary</p>
|
||||
<p class="bg-accent fg-contrast-accent">.fg-contrast-accent</p>
|
||||
<p class="bg-success fg-contrast-success">.fg-contrast-success</p>
|
||||
<p class="bg-danger fg-contrast-danger">.fg-contrast-danger</p>
|
||||
<p class="bg-warning fg-contrast-warning">.fg-contrast-warning</p>
|
||||
<p class="bg-info fg-contrast-info">.fg-contrast-info</p>
|
||||
<p class="bg-inverse fg-contrast-inverse">.fg-contrast-inverse</p>
|
||||
<p class="bg-secondary fg-contrast-secondary">.fg-contrast-secondary</p>`} />
|
||||
|
||||
These even mix with the opacity utilities.
|
||||
|
||||
<Example class="d-flex flex-column gap-2" code={`<p class="bg-primary fg-contrast-primary fg-100">.fg-contrast-primary fg-100</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-90">.fg-contrast-primary fg-90</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-80">.fg-contrast-primary fg-80</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-70">.fg-contrast-primary fg-70</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-60">.fg-contrast-primary fg-60</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-50">.fg-contrast-primary fg-50</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-40">.fg-contrast-primary fg-40</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-30">.fg-contrast-primary fg-30</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-20">.fg-contrast-primary fg-20</p>
|
||||
<p class="bg-primary fg-contrast-primary fg-10">.fg-contrast-primary fg-10</p>`} />
|
||||
|
||||
## Reset color
|
||||
|
||||
Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
|
||||
|
||||
@ -88,15 +88,15 @@ By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can b
|
||||
Here are some real life examples of these classes:
|
||||
|
||||
<Example class="bd-example-position-examples d-flex justify-content-around align-items-center" code={`<button type="button" class="btn btn-primary position-relative">
|
||||
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
|
||||
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill theme-secondary theme-contrast">+99 <span class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
|
||||
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
<div class="position-relative py-2 px-4 theme-secondary theme-contrast border border-secondary rounded-pill">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-theme-bg)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
|
||||
Alerts <span class="position-absolute top-0 start-100 translate-middle w-1 h-1 border border-bg rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
|
||||
</button>`} />
|
||||
|
||||
You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable.
|
||||
@ -105,9 +105,9 @@ You can use these classes with existing components to create new ones. Remember
|
||||
<div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
|
||||
<div class="progress-bar" style="width: 50%"></div>
|
||||
</div>
|
||||
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
|
||||
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
|
||||
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
|
||||
<button type="button" class="position-absolute top-0 start-0 translate-middle btn-solid btn-sm theme-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
|
||||
<button type="button" class="position-absolute top-0 start-50 translate-middle btn-solid btn-sm theme-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
|
||||
<button type="button" class="position-absolute top-0 start-100 translate-middle btn-solid btn-sm theme-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
|
||||
</div>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
109
site/src/content/docs/utilities/theme.mdx
Normal file
109
site/src/content/docs/utilities/theme.mdx
Normal file
@ -0,0 +1,109 @@
|
||||
---
|
||||
title: Theme
|
||||
description: Combine one of three theme utilities with our theme color classes to set `color` and `background-color` pairings on any element, just like component variants.
|
||||
toc: true
|
||||
utility:
|
||||
- theme-contrast
|
||||
- theme-subtle
|
||||
- theme-muted
|
||||
- theme-border
|
||||
---
|
||||
|
||||
import { getData } from '@libs/data'
|
||||
|
||||
## Overview
|
||||
|
||||
Take any of our theme color classes and add `.theme-contrast`, `.theme-subtle`, or `.theme-muted` to set a predefined `color and `background-color` pairing. Then optionally add `.theme-border` to set a predefined border color. For more information on how theme colors work, see the [Theme documentation]([[docsref:/customize/theme]]) in our Customize section.
|
||||
|
||||
|
||||
### Contrast
|
||||
|
||||
Contrast pairs the `bg` theme token with the `contrast` text color for maximum readability. This is ideal for high-emphasis elements with solid backgrounds.
|
||||
|
||||
<Example class="d-grid gap-2" code={getData('theme-colors').map((themeColor) => `<div class="p-2 theme-${themeColor.name} theme-contrast">.theme-${themeColor.name} .theme-contrast</div>`)} />
|
||||
|
||||
### Subtle
|
||||
|
||||
Subtle pairs the `bg-subtle` theme token with the `text` text color for a lower-contrast, more subtle appearance. This combination will automatically adjust to the current color mode.
|
||||
|
||||
<Example class="d-grid gap-2" code={getData('theme-colors').map((themeColor) => `<div class="p-2 theme-${themeColor.name} theme-subtle">.theme-${themeColor.name} .theme-subtle</div>`)} />
|
||||
|
||||
And with borders:
|
||||
|
||||
<Example class="d-grid gap-2" code={getData('theme-colors').map((themeColor) => `<div class="p-2 theme-${themeColor.name} theme-subtle theme-border">.theme-${themeColor.name} .theme-subtle</div>`)} />
|
||||
|
||||
### Muted
|
||||
|
||||
Muted pairs the `bg-muted` theme token with the `text-emphasis` text color for a lower-contrast, more muted appearance. Like subtle, this combination will automatically adjust to the current color mode.
|
||||
|
||||
<Example class="d-grid gap-2" code={getData('theme-colors').map((themeColor) => `<div class="p-2 theme-${themeColor.name} theme-muted">.theme-${themeColor.name} .theme-muted</div>`)} />
|
||||
|
||||
And with borders:
|
||||
|
||||
<Example class="d-grid gap-2" code={getData('theme-colors').map((themeColor) => `<div class="p-2 theme-${themeColor.name} theme-muted theme-border">.theme-${themeColor.name} .theme-muted</div>`)} />
|
||||
|
||||
## Comparison
|
||||
|
||||
Here's a side-by-side comparison of all three styles for each theme color:
|
||||
|
||||
<Example code={getData('theme-colors').map((themeColor) => `<div class="d-flex gap-2 mb-2">
|
||||
<div class="theme-${themeColor.name} theme-contrast p-3 flex-fill text-center rounded">${themeColor.title} contrast</div>
|
||||
<div class="theme-${themeColor.name} theme-subtle p-3 flex-fill text-center rounded">${themeColor.title} subtle</div>
|
||||
<div class="theme-${themeColor.name} theme-muted p-3 flex-fill text-center rounded">${themeColor.title} muted</div>
|
||||
</div>`)} />
|
||||
|
||||
## With components
|
||||
|
||||
Theme utilities work great with components that support theming. Apply the theme color to a container and use theme style classes on individual elements.
|
||||
|
||||
<Example code={`<div class="theme-primary">
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<span class="badge theme-contrast">Contrast badge</span>
|
||||
<span class="badge theme-subtle">Subtle badge</span>
|
||||
<span class="badge theme-muted">Muted badge</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-danger">
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<span class="badge theme-contrast">Contrast badge</span>
|
||||
<span class="badge theme-subtle">Subtle badge</span>
|
||||
<span class="badge theme-muted">Muted badge</span>
|
||||
</div>
|
||||
</div>`} />
|
||||
|
||||
You can also mix theme colors within the same container by applying different `.theme-{color}` classes to child elements:
|
||||
|
||||
<Example code={`<div class="d-flex gap-2">
|
||||
<div class="theme-success theme-contrast p-3 rounded">Success</div>
|
||||
<div class="theme-warning theme-contrast p-3 rounded">Warning</div>
|
||||
<div class="theme-danger theme-contrast p-3 rounded">Danger</div>
|
||||
</div>`} />
|
||||
|
||||
## CSS
|
||||
|
||||
### Generated CSS
|
||||
|
||||
The theme style classes generate the following CSS:
|
||||
|
||||
```css
|
||||
.theme-contrast {
|
||||
background-color: var(--theme-bg);
|
||||
color: var(--theme-contrast);
|
||||
}
|
||||
|
||||
.theme-subtle {
|
||||
background-color: var(--theme-bg-subtle);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.theme-muted {
|
||||
background-color: var(--theme-bg-muted);
|
||||
color: var(--theme-text-emphasis);
|
||||
}
|
||||
```
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
Theme 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-theme" file="scss/_utilities.scss" />
|
||||
@ -310,13 +310,13 @@
|
||||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
background-color: var(--bs-bg-2);
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--bs-body-color);
|
||||
background-color: var(--bs-fg-2);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user