Proposal to a better understanding

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

Hide file tree

Showing 2 changed files with 18 additions and 54 deletions.
diff --git a/site/content/docs/5.1/components/orange-footer.md b/site/content/docs/5.1/components/orange-footer.md
@@ -16,55 +16,7 @@ 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.
 
-The "Mailing list" and "Follow us" bars require some extra CSS. (See [complements]({{< docsref "/components/orange-footer#orange-footer-examples-complement" >}}) below).
+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.
 
-Furthermore, the padding applied here is not that responsive.
+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.
 {{< /callout >}}
-
-## Orange footer examples complement
-
-The examples use homemade dark versions of several components as they will be implemented with [#917]({{< param repo >}}/issues/917).
-
-However, here are some clues to get over it, by adding some css to your project. You can have a live preview on this [CodePen](https://codepen.io/louismaximepiton/pen/jOLYgxW?editors=1100).
-
-### Mailing list
-
-In order to be branded on this sub-component, adding `.custom-form` on the `form` tag and removing `border-white` from the `button` tag will do it.
-
-```scss
-.custom-form {
-  button {
-    border-color: $white;
-
-    &:hover,
-    &:focus,
-    &:focus-visible {
-      border-color: $white;
-    }
-
-    &:active {
-      border-color: $brand-orange;
-    }
-  }
-}
-```
-
-### Follow us
-
-In order to be branded on this sub-component, adding `.custom-social` on the `ul` tag and removing `text-white` from the social `button`s tag will do it.
-
-```scss
-.custom-social {
-  a {
-    color: $white;
-    background-color: $black;
-    border-color: $white;
-
-    &:active {
-      color: $black;
-      background-color: $white;
-      border-color: $white;
-    }
-  }
-}
-```
diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html
@@ -6,6 +6,18 @@
 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>
@@ -34,7 +46,7 @@ <h1 class="visually-hidden">Footers Boosted example</h1>
     <div class="w-100 px-2 px-md-4 py-4">
       <div class="pb-2">
         <h6>Sign up to our mailing list</h6>
-        <form class="row g-3">
+        <form class="row g-3 example-footer-custom-form">
           <div class="col-auto">
             <label for="inputEmail1" class="visually-hidden">Email</label>
             <!-- Dark homemade input version -->
@@ -55,7 +67,7 @@ <h6>Sign up to our mailing list</h6>
     <!-- Follow us bar -->
     <span class="visually-hidden">Follow us bar</span>
     <div class="w-100 px-2 px-md-4 py-4">
-      <ul class="nav flex-row align-items-center gap-2">
+      <ul class="nav flex-row align-items-center gap-2 example-footer-custom-social">
         <li class="text-white fw-bold col-12 col-md-auto me-2 mb-2 mb-md-0">Follow us</li>
         <!-- Dark homemade button version -->
         <li><a href="#" class="btn btn-icon btn-social btn-twitter text-white"><span class="visually-hidden">Twitter</span></a></li>
@@ -238,7 +250,7 @@ <h6 class="navbar-nav border-0" id="headingFourSmall1">
     <div class="w-100 px-2 px-md-4 py-4 border-bottom border-1 border-dark">
       <div class="pb-2">
         <h6>Sign up to our mailing list</h6>
-        <form class="row g-3">
+        <form class="row g-3 example-footer-custom-form">
           <div class="col-auto">
             <label for="inputEmail" class="visually-hidden">Email</label>
             <!-- Dark homemade input version -->
@@ -255,7 +267,7 @@ <h6>Sign up to our mailing list</h6>
     <!-- Follow us bar -->
     <span class="visually-hidden">Follow us bar</span>
     <div class="w-100 px-2 px-md-4 py-4 border-bottom border-1 border-dark">
-      <ul class="nav flex-row align-items-center gap-2">
+      <ul class="nav flex-row align-items-center gap-2 example-footer-custom-social">
         <li class="text-white fw-bold col-12 col-md-auto me-2 mb-2 mb-md-0">Follow us</li>
         <!-- Dark homemade button version -->
         <li><a href="#" class="btn btn-icon btn-social btn-twitter text-white"><span class="visually-hidden">Twitter</span></a></li>