feat(spinners): Orange branded 🎉

Orange-OpenSource · May 14, 2020 · 45bb26c · 45bb26c
1 parent 8f073ff
commit 45bb26c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
@@ -42,7 +42,8 @@
   width: $spinner-width;
   height: $spinner-height;
   vertical-align: text-bottom;
-  background-color: currentColor;
+  // stylelint-disable-next-line declaration-no-important
+  background-color: currentColor !important; // Boosted mod: ensure .text-* background won't override this
   // stylelint-disable-next-line property-blacklist
   border-radius: 50%;
   opacity: 0;

diff --git a/site/content/docs/4.3/components/spinners.md b/site/content/docs/4.3/components/spinners.md
@@ -26,15 +26,19 @@ Use the border spinners for a lightweight loading indicator.
 
 The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
 
+<!-- Boosted mod -->
 {{< example >}}
-{{< spinner.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<div class="spinner-border text-{{ .name }}" role="status">
+<div class="spinner-border text-primary" role="status">
+  <span class="sr-only">Loading...</span>
+</div>
+<div class="spinner-border text-secondary" role="status">
+  <span class="sr-only">Loading...</span>
+</div>
+<div class="spinner-border text-light" role="status">
   <span class="sr-only">Loading...</span>
 </div>
-{{- end -}}
-{{< /spinner.inline >}}
 {{< /example >}}
+<!-- End mod -->
 
 {{< callout info >}}
 **Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
@@ -52,15 +56,19 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
 
 Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants.
 
+<!-- Boosted mod -->
 {{< example >}}
-{{< spinner.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<div class="spinner-grow text-{{ .name }}" role="status">
+<div class="spinner-grow text-primary" role="status">
+  <span class="sr-only">Loading...</span>
+</div>
+<div class="spinner-grow text-secondary" role="status">
+  <span class="sr-only">Loading...</span>
+</div>
+<div class="spinner-grow text-light" role="status">
   <span class="sr-only">Loading...</span>
 </div>
-{{- end -}}
-{{< /spinner.inline >}}
 {{< /example >}}
+<!-- End mod -->
 
 ## Alignment