Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode: Progress bars #2326

Merged
merged 6 commits into from
Oct 31, 2023
Merged

Dark mode: Progress bars #2326

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
25adf10
Add color mode on Progress
louismaximepiton Oct 18, 2023
ec2138f
Add long label examples to dark mode page
julien-deramond Oct 31, 2023
9d26920
Update scss/_variables.scss
julien-deramond Oct 31, 2023
05e5527
Add other examples in dark mode page
julien-deramond Oct 31, 2023
407f56b
Improve examples in dark mode page
julien-deramond Oct 31, 2023
a972159
.
julien-deramond Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1981,13 +1981,13 @@ $alert-dismissible-padding-r: $alert-padding-y * 3 !default; // 3x covers
// scss-docs-start progress-variables
$progress-height: $spacer !default;
$progress-font-size: $font-size-base !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;
$progress-bg: var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $black !default;
$progress-bar-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$black`
$progress-bar-font-weight: $font-weight-bold !default; // Boosted mod
$progress-bar-text-indent: map-get($spacers, 2) !default; // Boosted mod
$progress-bar-bg: $primary !default;
$progress-bar-bg: var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `$primary`
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;

Expand Down
117 changes: 117 additions & 0 deletions site/content/docs/5.3/dark-mode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4366,3 +4366,120 @@ sitemap_exclude: true
<div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
<div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
</div>

### Progress

<h4 class="mt-3">No theme</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3">
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 30%">30%</div>
</div>
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
</div>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 30%">30%</div>
</div>
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
</div>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 30%">30%</div>
</div>
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
</div>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
<div class="progress-bar" style="width: 30%">30%</div>
</div>
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
</div>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
<div class="progress-bar" style="width: 30%">30%</div>
</div>
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
</div>
</div>