Skip to content

Commit 25adf10

Browse files
louismaximepitonjulien-deramond
louismaximepiton
authored and
julien-deramond
committed
Add color mode on Progress
1 parent f54cf0d commit 25adf10

File tree

2 files changed

+105
-3
lines changed

2 files changed

+105
-3
lines changed

‎scss/_variables.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1981,13 +1981,13 @@ $alert-dismissible-padding-r: $alert-padding-y * 3 !default; // 3x covers
19811981
// scss-docs-start progress-variables
19821982
$progress-height: $spacer !default;
19831983
$progress-font-size: $font-size-base !default;
1984-
$progress-bg: var(--#{$prefix}secondary-bg) !default;
1984+
$progress-bg: var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
19851985
$progress-border-radius: var(--#{$prefix}border-radius) !default;
19861986
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1987-
$progress-bar-color: $black !default;
1987+
$progress-bar-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$black`
19881988
$progress-bar-font-weight: $font-weight-bold !default; // Boosted mod
19891989
$progress-bar-text-indent: map-get($spacers, 2) !default; // Boosted mod
1990-
$progress-bar-bg: $primary !default;
1990+
$progress-bar-bg: var(--#{$prefix}link-hover-color) !default; // Boosted mod: instead of `$primary`
19911991
$progress-bar-animation-timing: 1s linear infinite !default;
19921992
$progress-bar-transition: width .6s ease !default;
19931993

‎site/content/docs/5.3/dark-mode.md

+102
Original file line numberDiff line numberDiff line change
@@ -4366,3 +4366,105 @@ sitemap_exclude: true
43664366
<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>
43674367
<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>
43684368
</div>
4369+
4370+
### Progress
4371+
4372+
<h4 class="mt-3">No theme</h4>
4373+
4374+
<div class="d-flex flex-column gap-2 border border-tertiary p-3">
4375+
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
4376+
<div class="progress-bar" style="width: 30%">30%</div>
4377+
</div>
4378+
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
4379+
<div class="progress-bar bg-success" style="width: 40%"></div>
4380+
</div>
4381+
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
4382+
<div class="progress-bar bg-info" style="width: 50%">50%</div>
4383+
</div>
4384+
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
4385+
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
4386+
</div>
4387+
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
4388+
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
4389+
</div>
4390+
</div>
4391+
4392+
<h4 class="mt-3">Dark theme on container</h4>
4393+
4394+
<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
4395+
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
4396+
<div class="progress-bar" style="width: 30%">30%</div>
4397+
</div>
4398+
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
4399+
<div class="progress-bar bg-success" style="width: 40%"></div>
4400+
</div>
4401+
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
4402+
<div class="progress-bar bg-info" style="width: 50%">50%</div>
4403+
</div>
4404+
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
4405+
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
4406+
</div>
4407+
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
4408+
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
4409+
</div>
4410+
</div>
4411+
4412+
<h4 class="mt-3">Light theme on container</h4>
4413+
4414+
<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
4415+
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
4416+
<div class="progress-bar" style="width: 30%">30%</div>
4417+
</div>
4418+
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
4419+
<div class="progress-bar bg-success" style="width: 40%"></div>
4420+
</div>
4421+
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
4422+
<div class="progress-bar bg-info" style="width: 50%">50%</div>
4423+
</div>
4424+
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
4425+
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
4426+
</div>
4427+
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
4428+
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
4429+
</div>
4430+
</div>
4431+
4432+
<h4 class="mt-3">Dark theme on component</h4>
4433+
4434+
<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
4435+
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
4436+
<div class="progress-bar" style="width: 30%">30%</div>
4437+
</div>
4438+
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
4439+
<div class="progress-bar bg-success" style="width: 40%"></div>
4440+
</div>
4441+
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
4442+
<div class="progress-bar bg-info" style="width: 50%">50%</div>
4443+
</div>
4444+
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
4445+
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
4446+
</div>
4447+
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="dark">
4448+
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
4449+
</div>
4450+
</div>
4451+
4452+
<h4 class="mt-3">Light theme on component</h4>
4453+
4454+
<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
4455+
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
4456+
<div class="progress-bar" style="width: 30%">30%</div>
4457+
</div>
4458+
<div class="progress progress-sm" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
4459+
<div class="progress-bar bg-success" style="width: 40%"></div>
4460+
</div>
4461+
<div class="progress progress-xs" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
4462+
<div class="progress-bar bg-info" style="width: 50%">50%</div>
4463+
</div>
4464+
<div class="progress progress-sm" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
4465+
<div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
4466+
</div>
4467+
<div class="progress progress-sm" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-bs-theme="light">
4468+
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%">70%</div>
4469+
</div>
4470+
</div>

0 commit comments

Comments
 (0)