From 23a02694a1c20c877141172f07c711e433f7cc6f Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 Oct 2023 18:00:12 +0200 Subject: [PATCH] Add color mode on Progress --- scss/_variables.scss | 6 +- site/content/docs/5.3/dark-mode.md | 102 +++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 973ce7d7fc..0bfb57fcf0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1956,13 +1956,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; diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 0faf554a3f..26db16e306 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -2301,3 +2301,105 @@ sitemap_exclude: true + +### Progress + +

No theme

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Dark theme on container

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Light theme on container

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Dark theme on component

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+
+ +

Light theme on component

+ +
+
+
30%
+
+
+
+
+
+
50%
+
+
+
+
+
+
70%
+
+