.

Orange-OpenSource · Dec 7, 2021 · 4f47d8f · 4f47d8f
1 parent 9516ff5
commit 4f47d8f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/site/content/docs/5.1/components/orange-footer.md b/site/content/docs/5.1/components/orange-footer.md
@@ -17,6 +17,21 @@ The feature will be delivered with [#892]({{< param repo >}}/issues/892).
 In the meantime, some examples have been developed in the [footers examples section]({{< docsref "/examples/footers" >}}) by using mostly Boosted utilities and our Collapse JavaScript plugin.
 
 Even if the padding applied here is not that responsive and that everything is not perfectly respecting the design guidelines, it will help you while waiting for the component's delivery.
+{{< /callout >}}
+
+{{< callout info >}}
+### Active colors
+
+In order to have correct active colors in "Mailing list" and "Follow us" bars, some extra classes and CSS are required:
+
+```css
+.example-footer-custom-form button:active {
+  border-color: var(--bs-orange) !important;
+}
 
-In order to have correct active colors for the links in "Mailing list" and "Follow us" bars, some extra CSS is required. The latter is located directly in the example within the `<style>` tag and uses `.example-footer-custom-form` and `.example-footer-custom-social` classes.
+.example-footer-custom-social a:active {
+  color: var(--bs-dark) !important;
+  background-color: var(--bs-white) !important;
+  border-color: var(--bs-white) !important;
+}
 {{< /callout >}}
diff --git a/site/content/docs/5.1/examples/footers/footers.css b/site/content/docs/5.1/examples/footers/footers.css
@@ -10,3 +10,13 @@
   vertical-align: -.125em;
   fill: currentColor;
 }
+
+.example-footer-custom-form button:active {
+  border-color: var(--bs-orange) !important;
+}
+
+.example-footer-custom-social a:active {
+  color: var(--bs-dark) !important;
+  background-color: var(--bs-white) !important;
+  border-color: var(--bs-white) !important;
+}
diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html
@@ -6,18 +6,6 @@
 body_class: ""
 ---
 
-<style>
-  .example-footer-custom-form button:active {
-    border-color: var(--bs-orange) !important;
-  }
-
-  .example-footer-custom-social a:active {
-    color: var(--bs-dark) !important;
-    background-color: var(--bs-white) !important;
-    border-color: var(--bs-white) !important;
-  }
-</style>
-
 <main>
   <!-- Boosted mod: page must contain a level-one heading (a11y) -->
   <h1 class="visually-hidden">Footers Boosted example</h1>