Dark mode: Footer (#2356)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Nov 7, 2023 · bc73b51 · bc73b51
1 parent 36ffc98
commit bc73b51
Show file tree

Hide file tree

Showing 9 changed files with 775 additions and 63 deletions.
diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -1,28 +1,35 @@
 .footer {
-  > * {
-    // scss-docs-start footer-part-css-vars
-    --#{$prefix}footer-gap: 0;
-    --#{$prefix}footer-padding-top: 0;
-    --#{$prefix}footer-padding-bottom: 0;
-    --#{$prefix}footer-title-margin-bottom: 0;
-    --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
-    --#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
-    --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
-    --#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};
-    // scss-docs-end footer-part-css-vars
-    --#{$prefix}navbar-nav-font-size: #{$footer-font-size-sm};
-    --#{$prefix}navbar-nav-line-height: #{$footer-line-height-sm};
-    --#{$prefix}navbar-nav-letter-spacing: #{$footer-letter-spacing};
+  // scss-docs-start footer-part-css-vars
+  --#{$prefix}footer-gap: 0;
+  --#{$prefix}footer-padding-top: 0;
+  --#{$prefix}footer-padding-bottom: 0;
+  --#{$prefix}footer-color: #{$footer-color};
+  --#{$prefix}footer-title-margin-bottom: 0;
+  --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
+  --#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
+  --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
+  --#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};
+  // scss-docs-end footer-part-css-vars
+  --#{$prefix}navbar-padding-y: 0;
+  --#{$prefix}navbar-nav-link-padding-y: 0;
+  --#{$prefix}navbar-nav-link-padding-x: 0;
+  --#{$prefix}navbar-nav-font-size: #{$footer-font-size-sm};
+  --#{$prefix}navbar-nav-line-height: #{$footer-line-height-sm};
+  --#{$prefix}navbar-nav-letter-spacing: #{$footer-letter-spacing};
+
+  display: block;
+  color: var(--#{$prefix}footer-color);
+  box-shadow: none;
+
+  > [class*="container"] {
+    display: block;
+  }
 
+  > * {
     padding-top: var(--#{$prefix}footer-padding-top);
     padding-bottom: var(--#{$prefix}footer-padding-bottom);
-    color: var(--#{$prefix}body-color);
 
     .navbar-nav {
-      --#{$prefix}nav-link-padding-x: 0;
-      --#{$prefix}nav-link-padding-y: 0;
-      --#{$prefix}nav-link-font-weight: #{$footer-nav-link-font-weight};
-
       flex-wrap: wrap;
       gap: var(--#{$prefix}footer-gap);
 
@@ -68,6 +75,7 @@
 
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
   }
 
   .footer-nav {

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2363,16 +2363,19 @@ $quantity-selector-input-sm-max-width:    1.875rem !default;
 
 //// Footer
 // scss-docs-start footer
+$footer-color:                            var(--#{$prefix}body-color) !default;
 $footer-font-size-sm:                     $font-size-sm !default;
 $footer-line-height-sm:                   $line-height-sm !default;
 $footer-font-size-md:                     $font-size-base !default;
 $footer-line-height-md:                   $line-height-base !default;
 $footer-title-font-weight:                $font-weight-bold !default;
 $footer-letter-spacing:                   $letter-spacing-base !default;
 $footer-accordion-line-height:            $spacer * 1.45 !default;
-$footer-accordion-active-color:           $brand-orange !default;
+$footer-accordion-active-color:           var(--#{$prefix}link-hover-color) !default;
 $footer-accordion-btn-hover-bg:           null !default;
-$footer-nav-link-font-weight:             $font-weight-bold !default;
+// fusv-disable
+$footer-nav-link-font-weight:             $font-weight-bold !default; // Deprecated in v5.3.3
+// fusv-enable
 
 $footer-title-content-padding-top:        $spacer * 1.25 !default;
 $footer-title-content-padding-bottom:     $spacer * 1.45 !default;

diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
@@ -357,7 +357,7 @@ You can add a search input into your Global header.
 
       <!-- Navbar with action icons -->
       <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
-        <input class="form-control bg-transparent" type="search" placeholder="Search" aria-label="Search">
+        <input class="form-control" type="search" placeholder="Search" aria-label="Search">
       </form>
       <div id="global-header-5.2" class="navbar-collapse collapse d-sm-flex global-header-5">
         <ul class="navbar-nav flex-row">

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
@@ -349,7 +349,7 @@ <h2 class="h1 mb-2 mb-md-3 text-center">Your feedback is valued</h2>
   </div>
 </main>
 
-<footer class="footer bg-dark ">
+<footer class="footer navbar" data-bs-theme="dark">
   <h2 class="visually-hidden">Sitemap & information</h2>
   <div class="container-xxl footer-terms">
     <ul class="navbar-nav gap-md-3">

diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
@@ -213,7 +213,7 @@ <h1 class="display-1">Become a reseller</h1>
     </div>
   </div>
 </main>
-<footer class="footer bg-dark ">
+<footer class="footer navbar" data-bs-theme="dark">
   <h2 class="visually-hidden">Sitemap and information</h2>
   <div class="container-xxl footer-terms">
     <ul class="navbar-nav gap-md-3">

diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
@@ -2,7 +2,7 @@
 {{- $category_slug := index $url (sub (len $url) 3) -}}
 {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-<footer class="footer bg-dark bd-footer">
+<footer class="footer navbar bd-footer" data-bs-theme="dark">
   <h2 class="visually-hidden">Boosted sitemap & information</h2>
   <div class="container-xxl footer-nav">
     <nav class="accordion" id="sitemapAccordion" aria-label="Boosted sitemap footer">

diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
@@ -22,15 +22,15 @@
 {{- $id := .Get "id" -}}
 {{- $input := .Inner -}}
 
-<footer class="footer bg-dark">
+<footer class="footer navbar" data-bs-theme="dark">
   <h2 class="visually-hidden">Sitemap & information</h2>
 {{- if $title_content }}
   <div class="container-xxl footer-title-content">
     <h3 class="footer-heading">Sign up to our mailing list</h3>
     <div class="row">
       <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
         <label for="inputEmail{{ $id }}" class="visually-hidden">Email</label>
-        <input type="email" class="form-control text-bg-dark border-dark" id="inputEmail{{ $id }}" placeholder="Enter your email">
+        <input type="email" class="form-control" id="inputEmail{{ $id }}" placeholder="Enter your email">
         <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
       </form>
     </div>

diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
@@ -89,7 +89,7 @@ <h1 class="title">Title</h1>
 {{- end }}
 {{- if eq $mode "search" }}
     <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
-      <input class="form-control bg-transparent" type="search" placeholder="Search" aria-label="Search">
+      <input class="form-control" type="search" placeholder="Search" aria-label="Search">
     </form>
 {{- end }}
     <div id="{{ $id }}.2" class="navbar-collapse collapse d-sm-flex{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">