From 2e73d1a51495a39dfbd995ad9d7f04a31afea3a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 10 Oct 2023 08:58:14 +0200 Subject: [PATCH] Dark mode: Add spinner (#2290) --- scss/_spinners.scss | 1 + scss/_variables.scss | 1 + site/content/docs/5.3/components/spinners.md | 24 +--- site/content/docs/5.3/dark-mode.md | 117 +++++++++++++++++++ 4 files changed, 125 insertions(+), 18 deletions(-) diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 3784d8fe70..d4b4641b5c 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -7,6 +7,7 @@ display: inline-block; width: var(--#{$prefix}spinner-width); height: var(--#{$prefix}spinner-height); + color: #{$spinner-color}; // Boosted mod vertical-align: var(--#{$prefix}spinner-vertical-align); // stylelint-disable-next-line property-disallowed-list border-radius: 50%; diff --git a/scss/_variables.scss b/scss/_variables.scss index 35c32a14f5..2a0ea5e6ba 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2092,6 +2092,7 @@ $carousel-transition: transform $carousel-transition-duration $tr // Spinners // scss-docs-start spinner-variables +$spinner-color: var(--#{$prefix}body-color) !default; // Boosted mod $spinner-width: $spacer * 2 !default; $spinner-height: $spinner-width !default; $spinner-vertical-align: -.125em !default; diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md index f7689a5613..53b57d1294 100644 --- a/site/content/docs/5.3/components/spinners.md +++ b/site/content/docs/5.3/components/spinners.md @@ -43,13 +43,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
Loading...
-{{< /example >}} - -{{< example class="bg-dark" >}} -
- Loading... -
-
+
Loading...
{{< /example >}} @@ -78,13 +72,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
Loading...
-{{< /example >}} - -{{< example class="bg-dark" >}} -
- Loading... -
-
+
Loading...
{{< /example >}} @@ -172,22 +160,22 @@ Use spinners within buttons to indicate an action is currently processing or tak {{< example >}} {{< /example >}} {{< example >}} {{< /example >}} diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index fbe0365b5c..095d3ff909 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -526,6 +526,123 @@ sitemap_exclude: true
+### Spinners + +

No theme

+ +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ +

Dark theme on container

+ +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ +

Light theme on container

+ +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ +

Dark theme on component

+ +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ +

Light theme on component

+ +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ ### Stepped process

No theme