mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
prototype: handle data-bs-theme differently
This commit is contained in:
Julien Déramond
parent
ce114117a8
commit
ecab15443f
@ -15,11 +15,11 @@
|
|||||||
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
|
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
|
||||||
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
|
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
|
||||||
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
|
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
|
||||||
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
|
// --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
|
||||||
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
|
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
|
||||||
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
|
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
|
||||||
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
|
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
|
||||||
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
|
// --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
|
||||||
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
|
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
|
||||||
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
|
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
|
||||||
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
|
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
|
||||||
@ -148,11 +148,25 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include color-mode() {
|
||||||
|
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
|
||||||
|
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
|
||||||
|
}
|
||||||
|
|
||||||
@if $enable-dark-mode {
|
@if $enable-dark-mode {
|
||||||
@include color-mode(dark) {
|
@include color-mode(dark) {
|
||||||
.accordion-button::after {
|
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
|
||||||
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
|
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
|
||||||
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
[data-bs-theme="light"] .accordion
|
||||||
|
[data-bs-theme="light"].accordion
|
||||||
|
[data-bs-theme="dark"] .accordion
|
||||||
|
[data-bs-theme="dark"].accordion
|
||||||
|
|
||||||
|
accordion data-bs-theme="dark"
|
||||||
|
<div data-bs-theme="light">
|
||||||
|
accordion
|
||||||
|
*/
|
||||||
|
|||||||
@ -1,5 +1,25 @@
|
|||||||
|
:root,
|
||||||
|
[data-bs-theme] {
|
||||||
|
color: var(--#{$prefix}body-color);
|
||||||
|
background-color: var(--#{$prefix}body-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Note that some of these variables could be extracted into `:root` only selector since they are not modified by other color modes!
|
||||||
|
|
||||||
|
/*
|
||||||
|
:root {
|
||||||
|
// ...
|
||||||
|
--#{$prefix}box-shadow: #{$box-shadow};
|
||||||
|
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
|
||||||
|
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
|
||||||
|
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
|
||||||
|
// ...
|
||||||
|
*/
|
||||||
|
|
||||||
:root,
|
:root,
|
||||||
[data-bs-theme="light"] {
|
[data-bs-theme="light"] {
|
||||||
|
color-scheme: light;
|
||||||
|
|
||||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
|
|||||||
@ -79,8 +79,8 @@ $form-invalid-border-color-dark: $red-300 !default;
|
|||||||
// Accordion
|
// Accordion
|
||||||
//
|
//
|
||||||
|
|
||||||
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
|
$accordion-icon-color-dark: $purple !default;
|
||||||
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
|
$accordion-icon-active-color-dark: $pink !default;
|
||||||
|
|
||||||
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||||
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||||
|
|||||||
@ -1365,8 +1365,8 @@ $card-group-margin: $grid-gutter-width * .5 !default;
|
|||||||
// scss-docs-start accordion-variables
|
// scss-docs-start accordion-variables
|
||||||
$accordion-padding-y: 1rem !default;
|
$accordion-padding-y: 1rem !default;
|
||||||
$accordion-padding-x: 1.25rem !default;
|
$accordion-padding-x: 1.25rem !default;
|
||||||
$accordion-color: var(--#{$prefix}body-color) !default;
|
$accordion-color: null !default;
|
||||||
$accordion-bg: var(--#{$prefix}body-bg) !default;
|
$accordion-bg: null !default;
|
||||||
$accordion-border-width: var(--#{$prefix}border-width) !default;
|
$accordion-border-width: var(--#{$prefix}border-width) !default;
|
||||||
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
||||||
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
||||||
@ -1387,8 +1387,8 @@ $accordion-button-focus-border-color: $input-focus-border-color !default;
|
|||||||
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
||||||
|
|
||||||
$accordion-icon-width: 1.25rem !default;
|
$accordion-icon-width: 1.25rem !default;
|
||||||
$accordion-icon-color: $body-color !default;
|
$accordion-icon-color: $orange !default;
|
||||||
$accordion-icon-active-color: $primary-text-emphasis !default;
|
$accordion-icon-active-color: $red !default;
|
||||||
$accordion-icon-transition: transform .2s ease-in-out !default;
|
$accordion-icon-transition: transform .2s ease-in-out !default;
|
||||||
$accordion-icon-transform: rotate(-180deg) !default;
|
$accordion-icon-transform: rotate(-180deg) !default;
|
||||||
|
|
||||||
|
|||||||
@ -13,8 +13,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
[data-bs-theme="#{$mode}"] {
|
@if $mode == "light" {
|
||||||
@content;
|
:root,
|
||||||
|
[data-bs-theme="#{$mode}"] {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
[data-bs-theme="#{$mode}"] {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
356
site/content/docs/5.3/examples/dark-mode/index.html
Normal file
356
site/content/docs/5.3/examples/dark-mode/index.html
Normal file
@ -0,0 +1,356 @@
|
|||||||
|
---
|
||||||
|
layout: examples
|
||||||
|
title: Dark Mode Testing
|
||||||
|
html_class: "h-100"
|
||||||
|
body_class: "d-flex h-100"
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="p-5">
|
||||||
|
<h1>Default theme of the page</h1>
|
||||||
|
<h2><a href="/">Link title</h2>
|
||||||
|
<p>Lorem ipsum dolor <a href="/">sit amet consectetur adipisicing elit</a>. Voluptatum sed ratione facilis nisi enim omnis sequi nam nemo vero, perferendis repellendus eos molestiae autem ad harum nihil vel facere quod.</p>
|
||||||
|
<div class="p-5" data-bs-theme="light">
|
||||||
|
<h1>Forced Light Theme On Container</h1>
|
||||||
|
<h2><a href="/">Link title</h2>
|
||||||
|
<p>Lorem ipsum dolor <a href="/">sit amet consectetur adipisicing elit</a>. Voluptatum sed ratione facilis nisi enim omnis sequi nam nemo vero, perferendis repellendus eos molestiae autem ad harum nihil vel facere quod.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-5" data-bs-theme="dark">
|
||||||
|
<h1>Forced Dark Theme On Container</h1>
|
||||||
|
<h2><a href="/">Link title</h2>
|
||||||
|
<p>Lorem ipsum dolor <a href="/">sit amet consectetur adipisicing elit</a>. Voluptatum sed ratione facilis nisi enim omnis sequi nam nemo vero, perferendis repellendus eos molestiae autem ad harum nihil vel facere quod.</p>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<h2>Accordions</h2>
|
||||||
|
<h3>Default</h3>
|
||||||
|
<div class="accordion" id="accordionExample">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
|
Accordion Item #1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||||
|
Accordion Item #2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
|
Accordion Item #3
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Light mode On Container</h3>
|
||||||
|
<div data-bs-theme="light">
|
||||||
|
<div class="accordion" id="accordionExample">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
|
Accordion Item #1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||||
|
Accordion Item #2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
|
Accordion Item #3
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Dark mode On Container</h3>
|
||||||
|
<div data-bs-theme="dark">
|
||||||
|
<div class="accordion" id="accordionExample">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
|
Accordion Item #1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||||
|
Accordion Item #2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
|
Accordion Item #3
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Light mode On Accordion</h3>
|
||||||
|
<div>
|
||||||
|
<div class="accordion" id="accordionExample" data-bs-theme="light">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
|
Accordion Item #1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||||
|
Accordion Item #2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
|
Accordion Item #3
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Dark mode On Accordion</h3>
|
||||||
|
<div>
|
||||||
|
<div class="accordion" id="accordionExample" data-bs-theme="dark">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
|
Accordion Item #1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||||
|
Accordion Item #2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
|
Accordion Item #3
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<h2>Buttons</h2>
|
||||||
|
<h3>Default</h3>
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-light">Light</button>
|
||||||
|
<button type="button" class="btn btn-dark">Dark</button>
|
||||||
|
<button type="button" class="btn btn-link">Link</button>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Light mode On Container</h3>
|
||||||
|
<div data-bs-theme="light">
|
||||||
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-light">Light</button>
|
||||||
|
<button type="button" class="btn btn-dark">Dark</button>
|
||||||
|
<button type="button" class="btn btn-link">Link</button>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Dark mode On Container</h3>
|
||||||
|
<div data-bs-theme="dark">
|
||||||
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-light">Light</button>
|
||||||
|
<button type="button" class="btn btn-dark">Dark</button>
|
||||||
|
<button type="button" class="btn btn-link">Link</button>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Light mode On Buttons</h3>
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-primary" data-bs-theme="light">Primary</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-theme="light">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-success" data-bs-theme="light">Success</button>
|
||||||
|
<button type="button" class="btn btn-danger" data-bs-theme="light">Danger</button>
|
||||||
|
<button type="button" class="btn btn-warning" data-bs-theme="light">Warning</button>
|
||||||
|
<button type="button" class="btn btn-info" data-bs-theme="light">Info</button>
|
||||||
|
<button type="button" class="btn btn-light" data-bs-theme="light">Light</button>
|
||||||
|
<button type="button" class="btn btn-dark" data-bs-theme="light">Dark</button>
|
||||||
|
<button type="button" class="btn btn-link" data-bs-theme="light">Link</button>
|
||||||
|
</div>
|
||||||
|
<h3>Forced Dark mode On Buttons</h3>
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-primary" data-bs-theme="dark">Primary</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-theme="dark">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-success" data-bs-theme="dark">Success</button>
|
||||||
|
<button type="button" class="btn btn-danger" data-bs-theme="dark">Danger</button>
|
||||||
|
<button type="button" class="btn btn-warning" data-bs-theme="dark">Warning</button>
|
||||||
|
<button type="button" class="btn btn-info" data-bs-theme="dark">Info</button>
|
||||||
|
<button type="button" class="btn btn-light" data-bs-theme="dark">Light</button>
|
||||||
|
<button type="button" class="btn btn-dark" data-bs-theme="dark">Dark</button>
|
||||||
|
<button type="button" class="btn btn-link" data-bs-theme="dark">Link</button>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<h2>Form validation</h2>
|
||||||
|
<h3>Default</h3>
|
||||||
|
<form class="row g-3">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label for="validationServer01" class="form-label">First name</label>
|
||||||
|
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
|
||||||
|
<div class="valid-feedback">
|
||||||
|
Looks good!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label for="validationServer02" class="form-label">Last name</label>
|
||||||
|
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
|
||||||
|
<div class="valid-feedback">
|
||||||
|
Looks good!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label for="validationServerUsername" class="form-label">Username</label>
|
||||||
|
<div class="input-group has-validation">
|
||||||
|
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||||
|
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
|
||||||
|
<div id="validationServerUsernameFeedback" class="invalid-feedback">
|
||||||
|
Please choose a username.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="validationServer03" class="form-label">City</label>
|
||||||
|
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
|
||||||
|
<div id="validationServer03Feedback" class="invalid-feedback">
|
||||||
|
Please provide a valid city.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label for="validationServer04" class="form-label">State</label>
|
||||||
|
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
|
||||||
|
<option selected disabled value="">Choose...</option>
|
||||||
|
<option>...</option>
|
||||||
|
</select>
|
||||||
|
<div id="validationServer04Feedback" class="invalid-feedback">
|
||||||
|
Please select a valid state.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label for="validationServer05" class="form-label">Zip</label>
|
||||||
|
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
|
||||||
|
<div id="validationServer05Feedback" class="invalid-feedback">
|
||||||
|
Please provide a valid zip.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
|
||||||
|
<label class="form-check-label" for="invalidCheck3">
|
||||||
|
Agree to terms and conditions
|
||||||
|
</label>
|
||||||
|
<div id="invalidCheck3Feedback" class="invalid-feedback">
|
||||||
|
You must agree before submitting.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user