mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Add dark mode support (#35857)
* Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
This commit is contained in:
Mark Otto
@@ -14,11 +14,16 @@ Similar to the contextual text color classes, set the background of an element t
|
||||
{{< colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
|
||||
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
|
||||
{{- end -}}
|
||||
{{< /colors.inline >}}
|
||||
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
|
||||
|
||||
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
|
||||
<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
|
||||
|
||||
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
|
||||
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
|
||||
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
|
||||
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Background gradient
|
||||
|
||||
@@ -42,6 +42,7 @@ Change the border color using utilities built on our theme colors.
|
||||
{{< border.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<span class="border border-{{ .name }}"></span>
|
||||
<span class="border border-{{ .name }}-subtle"></span>
|
||||
{{- end -}}
|
||||
{{< /border.inline >}}
|
||||
<span class="border border-white"></span>
|
||||
|
||||
@@ -14,12 +14,18 @@ Colorize text with color utilities. If you want to colorize links, you can use t
|
||||
{{< colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
|
||||
<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
|
||||
{{- end -}}
|
||||
{{< /colors.inline >}}
|
||||
<p class="text-body">.text-body</p>
|
||||
<p class="text-muted">.text-muted</p>
|
||||
|
||||
<p class="text-body-emphasis">.text-body-emphasis</p>
|
||||
<p class="text-body-secondary">.text-body-secondary</p>
|
||||
<p class="text-body-tertiary">.text-body-tertiary</p>
|
||||
|
||||
<p class="text-white bg-dark">.text-white</p>
|
||||
<p class="text-black-50">.text-black-50</p>
|
||||
<p class="text-black-50 bg-white">.text-black-50</p>
|
||||
<p class="text-white-50 bg-dark">.text-white-50</p>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -27,6 +33,10 @@ Colorize text with color utilities. If you want to colorize links, you can use t
|
||||
**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
@@ -11,16 +11,16 @@ toc: true
|
||||
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
|
||||
</div>
|
||||
<div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
<div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
<div class="overflow-scroll p-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,19 +37,19 @@ Adjust the `overflow` property on the fly with four default values and classes.
|
||||
Adjust the `overflow-x` property to affect the overflow of content horizontally.
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
|
||||
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
|
||||
<div><code>.overflow-x-auto</code> example on an element</div>
|
||||
<div> with set width and height dimensions.</div>
|
||||
</div>
|
||||
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div><code>.overflow-x-hidden</code> example</div>
|
||||
<div>on an element with set width and height dimensions.</div>
|
||||
</div>
|
||||
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div><code>.overflow-x-visible</code> example </div>
|
||||
<div>on an element with set width and height dimensions.</div>
|
||||
</div>
|
||||
<div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div class="overflow-x-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div><code>.overflow-x-scroll</code> example on an element</div>
|
||||
<div> with set width and height dimensions.</div>
|
||||
</div>
|
||||
@@ -67,16 +67,16 @@ Adjust the `overflow-x` property to affect the overflow of content horizontally.
|
||||
Adjust the `overflow-y` property to affect the overflow of content vertically.
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-auto</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-visible</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<div class="overflow-y-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -88,14 +88,14 @@ 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" >}}
|
||||
{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-dark position-relative">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><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>
|
||||
</button>
|
||||
<div class="position-relative py-2 px-4 text-bg-dark border border-dark 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-dark)" xmlns="http://www.w3.org/2000/svg"><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>
|
||||
|
||||
@@ -10,11 +10,11 @@ toc: true
|
||||
|
||||
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 >}}
|
||||
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
|
||||
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
|
||||
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
|
||||
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
|
||||
{{< example class="overflow-hidden" >}}
|
||||
<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 >}}
|
||||
|
||||
## Sass
|
||||
|
||||
@@ -10,12 +10,12 @@ toc: true
|
||||
|
||||
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.
|
||||
|
||||
{{< example >}}
|
||||
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
|
||||
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
|
||||
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
|
||||
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="w-25 p-3">Width 25%</div>
|
||||
<div class="w-50 p-3">Width 50%</div>
|
||||
<div class="w-75 p-3">Width 75%</div>
|
||||
<div class="w-100 p-3">Width 100%</div>
|
||||
<div class="w-auto p-3">Width auto</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
|
||||
@@ -102,12 +102,12 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
|
||||
|
||||
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
|
||||
|
||||
{{< example >}}
|
||||
<div class="grid gap-3" >
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 3</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 4</div>
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -117,12 +117,12 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
|
||||
|
||||
`row-gap` sets the vertical space between children items in the specified container.
|
||||
|
||||
{{< example >}}
|
||||
<div class="grid gap-0 row-gap-3" >
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 3</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 4</div>
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-0 row-gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -130,12 +130,12 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
|
||||
|
||||
`column-gap` sets the horizontal space between children items in the specified container.
|
||||
|
||||
{{< example >}}
|
||||
<div class="grid gap-0 column-gap-3" >
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 3</div>
|
||||
<div class="p-2 bg-light border g-col-6">Grid item 4</div>
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-0 column-gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ Wrap text with a `.text-wrap` class.
|
||||
Prevent text from wrapping with a `.text-nowrap` class.
|
||||
|
||||
{{< example >}}
|
||||
<div class="text-nowrap bg-light border" style="width: 8rem;">
|
||||
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
|
||||
This text should overflow the parent.
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Reference in New Issue
Block a user