feat(css): Add CSS vars for Footer (#1239)

Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Jul 27, 2022 · 4260603 · 4260603
1 parent cf20110
commit 4260603
Show file tree

Hide file tree

Showing 10 changed files with 268 additions and 169 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "33.25 kB"
+      "maxSize": "33.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -1,167 +1,197 @@
-.footer .navbar-nav {
-  --#{$prefix}nav-link-font-weight: #{$font-weight-bold};
-
-  flex-wrap: wrap;
-  font-size: $footer-font-size-sm;
-  line-height: $footer-line-height-sm;
-  letter-spacing: $footer-letter-spacing;
-
-  @include media-breakpoint-up(md) {
-    flex-direction: row;
-  }
-
-  .nav-link {
-    display: flex;
-    align-items: center;
-    padding: 0;
-    outline-offset: map-get($spacers, 1);
+.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};
+
+    padding-top: var(--#{$prefix}footer-padding-top);
+    padding-bottom: var(--#{$prefix}footer-padding-bottom);
+
+    .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);
+
+      .nav-link {
+        outline-offset: 5px;
+
+        &.active::before {
+          content: unset;
+        }
+      }
+    }
 
-    &.active::before {
-      content: unset;
+    .footer-heading {
+      margin-bottom: var(--#{$prefix}footer-title-margin-bottom);
+      font-size: var(--#{$prefix}footer-title-font-size);
+      font-weight: var(--#{$prefix}footer-title-font-weight);
+      line-height: var(--#{$prefix}footer-title-line-height);
+      letter-spacing: var(--#{$prefix}footer-title-letter-spacing);
+      white-space: nowrap;
     }
   }
-}
 
-.footer-heading {
-  font-size: $footer-font-size-md;
-  font-weight: $font-weight-bold;
-  line-height: $footer-line-height-md;
-  letter-spacing: $footer-letter-spacing;
-}
+  .footer-title-content {
+    // scss-docs-start footer-title-css-vars
+    --#{$prefix}footer-padding-top: #{$footer-title-content-padding-top};
+    --#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom};
+    --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
+    // scss-docs-end footer-title-css-vars
+  }
 
-.footer-title-content {
-  padding-top: $footer-title-content-padding-top;
-  padding-bottom: $footer-title-content-padding-bottom;
+  .footer-social {
+    // scss-docs-start footer-social-css-vars
+    --#{$prefix}footer-padding-top: #{$footer-social-padding-top};
+    --#{$prefix}footer-padding-bottom: #{$footer-social-padding-bottom};
+    --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
+    --#{$prefix}footer-title-font-size: #{$footer-font-size-sm};
+    --#{$prefix}footer-title-line-height: #{$footer-line-height-sm};
+    // scss-docs-end footer-social-css-vars
 
-  @include media-breakpoint-up(md) {
-    padding-bottom: $footer-title-content-padding-bottom-md;
+    display: flex;
+    flex-direction: column;
   }
 
-  .footer-heading {
-    margin-bottom: $footer-title-margin-bottom;
-  }
-}
+  .footer-nav {
+    // scss-docs-start footer-nav-css-vars
+    --#{$prefix}footer-gap: #{$footer-gap-xl};
+    // scss-docs-end footer-nav-css-vars
+    --#{$prefix}navbar-nav-padding-top: #{$footer-nav-list-padding-top};
+    --#{$prefix}navbar-nav-padding-x: 0;
+    --#{$prefix}navbar-nav-padding-bottom: #{$footer-nav-list-padding-bottom};
+
+    .accordion {
+      --#{$prefix}accordion-btn-font-size: #{$footer-font-size-sm};
+      --#{$prefix}accordion-btn-line-height: #{$footer-accordion-line-height};
+      --#{$prefix}accordion-btn-letter-spacing: #{$footer-letter-spacing};
+    }
 
-.footer-social {
-  display: flex;
-  flex-direction: column;
-  padding-top: $footer-social-padding-top;
-  padding-bottom: $footer-social-padding-bottom;
+    .footer-column:first-of-type .accordion-header:first-of-type,
+    .accordion .accordion-item {
+      border: 0;
+    }
 
-  @include media-breakpoint-up(md) {
-    flex-direction: row;
-    padding-top: $footer-social-padding-top-md;
+    .accordion-button::after {
+      margin-right: 0;
+    }
   }
 
-  > .footer-heading {
-    margin: $footer-social-title-margin-md;
-    white-space: nowrap;
+  .footer-service {
+    // scss-docs-start footer-service-css-vars
+    --#{$prefix}footer-padding-top: #{subtract($footer-service-padding-y, .0625rem)};
+    --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y};
+    // scss-docs-end footer-service-css-vars
 
-    @include media-breakpoint-down(md) {
-      margin: 0 0 $footer-title-margin-bottom;
-      font-size: $footer-font-size-sm;
-      line-height: $footer-line-height-sm;
+    .nav-link > span {
+      padding-top: $footer-service-link-padding-top; // Shift due to font, stay in Scss because no need of CSS var
     }
   }
-}
 
-.footer-nav {
-  @include media-breakpoint-down(md) {
-    max-width: 100vw;
-    padding: 0;
+  .footer-terms {
+    // scss-docs-start footer-terms-css-vars
+    --#{$prefix}footer-padding-top: #{$footer-terms-padding-top};
+    --#{$prefix}footer-padding-bottom: #{$footer-terms-padding-bottom};
+    --#{$prefix}footer-gap: #{$footer-gap-xl};
+    // scss-docs-end footer-terms-css-vars
+  }
 
-    .row { // Here to replace overflow-x on parent that allow focus on parent.
-      margin-right: 0;
-      margin-left: 0;
+  @include media-breakpoint-up(md) {
+    .navbar-nav {
+      flex-direction: row;
+    }
 
-      > * {
-        padding-right: 0;
-        padding-left: 0;
-      }
+    .footer-title-content {
+      // scss-docs-start footer-title-md-css-vars
+      --#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom-md};
+      // scss-docs-end footer-title-md-css-vars
     }
-  }
 
-  .footer-column:first-of-type .accordion-header:first-of-type,
-  .accordion .accordion-item {
-    border: 0;
-  }
+    .footer-social {
+      // scss-docs-start footer-social-md-css-vars
+      --#{$prefix}footer-padding-top: #{$footer-social-padding-top-md};
+      --#{$prefix}footer-title-margin-bottom: #{$footer-social-title-margin-bottom-md};
+      --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
+      --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
+      // scss-docs-end footer-social-md-css-vars
 
-  .accordion-header {
-    @include media-breakpoint-up(md) {
-      padding: $footer-nav-padding-top 0 $spacer;
-      border: 0;
+      flex-direction: row;
+      align-items: center;
     }
 
-    .accordion-button {
-      font-size: $footer-font-size-sm;
-      line-height: $footer-accordion-line-height;
-      letter-spacing: $footer-letter-spacing;
+    .footer-nav {
+      // scss-docs-start footer-nav-md-css-vars
+      --#{$prefix}footer-gap: #{$footer-gap};
+      --#{$prefix}footer-padding-top: #{$footer-nav-padding-top};
+      --#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-md};
+      --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom-md};
+      // scss-docs-end footer-nav-md-css-vars
+      --#{$prefix}navbar-nav-padding-top: #{$footer-nav-list-padding-top-md};
+      --#{$prefix}navbar-nav-padding-bottom: null;
+      --#{$prefix}navbar-nav-font-size: #{$footer-font-size-md};
+      --#{$prefix}navbar-nav-line-height: #{$footer-line-height-md};
+
+      .accordion {
+        --#{$prefix}accordion-border-width: 0;
+      }
 
-      &::after {
-        margin-right: 0;
+      .collapse {
+        display: flex;
+        padding-left: 0;
       }
 
-      @include media-breakpoint-up(md) {
-        all: unset;
-        pointer-events: none;
+      .accordion-button::after {
+        content: unset;
+      }
 
-        &::after {
-          content: unset;
-        }
+      .navbar-nav {
+        flex-direction: column;
       }
     }
-  }
 
-  .navbar-nav {
-    gap: $footer-gap-xl;
-    padding: $footer-nav-list-padding-top 0 $footer-nav-list-padding-bottom;
-
-    @include media-breakpoint-up(md) {
-      flex-direction: column;
-      gap: $footer-gap;
-      padding-top: $footer-nav-list-padding-top-md;
-      padding-bottom: $footer-nav-list-padding-bottom-md;
-      font-size: $footer-font-size-md;
-      line-height: $footer-line-height-md;
+    .footer-service {
+      // scss-docs-start footer-service-md-css-vars
+      --#{$prefix}footer-padding-top: #{add($footer-service-padding-y-md, .0625rem)};
+      --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y-md};
+      // scss-docs-end footer-service-md-css-vars
     }
 
-    @include media-breakpoint-up(lg) {
-      padding-bottom: $footer-nav-list-padding-bottom-lg;
+    .footer-terms {
+      // scss-docs-start footer-terms-md-css-vars
+      --#{$prefix}footer-padding-top: #{$footer-terms-padding-y-md};
+      --#{$prefix}footer-padding-bottom: #{$footer-terms-padding-y-md};
+      // scss-docs-end footer-terms-md-css-vars
     }
   }
 
-  .accordion-collapse {
-    @include media-breakpoint-up(md) {
-      display: flex;
-      padding-left: 0;
+  @include media-breakpoint-up(lg) {
+    .footer-nav {
+      // scss-docs-start footer-nav-lg-css-vars
+      --#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-lg};
+      // scss-docs-end footer-nav-lg-css-vars
     }
   }
-}
 
-.footer-service {
-  padding-top: subtract($footer-service-padding-y, .0625rem);
-  padding-bottom: $footer-service-padding-y;
-
-  @include media-breakpoint-up(md) {
-    padding-top: add($footer-service-padding-y-md, .0625rem);
-    padding-bottom: $footer-service-padding-y-md;
-  }
-
-  .nav-link > span {
-    padding-top: $footer-service-link-padding-top;
-  }
-}
-
-.footer-terms {
-  padding-top: $footer-terms-padding-top;
-  padding-bottom: $footer-terms-padding-bottom;
-
-  @include media-breakpoint-up(md) {
-    padding-top: $footer-terms-padding-y-md;
-    padding-bottom: $footer-terms-padding-y-md;
-  }
+  @include media-breakpoint-down(md) {
+    .footer-nav {
+      max-width: unset;
+      padding: 0;
 
-  .navbar-nav {
-    gap: $footer-gap-xl;
+      .row {
+        --#{$prefix}gutter-x: 0;
+      }
+    }
   }
 }
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -23,6 +23,7 @@
 
 .nav-link {
   display: flex; // Boosted mod
+  align-items: center; // Boosted mod
   padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
   @include font-size(var(--#{$prefix}nav-link-font-size));
   font-weight: var(--#{$prefix}nav-link-font-weight);

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -21,6 +21,12 @@
   --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-xs}; // Boosted mod
   --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
   --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+  --#{$prefix}navbar-nav-padding-top: 0; // Boosted mod
+  --#{$prefix}navbar-nav-padding-x: 0; // Boosted mod
+  --#{$prefix}navbar-nav-padding-bottom: 0; // Boosted mod
+  --#{$prefix}navbar-nav-font-size: #{$font-size-base}; // Boosted mod
+  --#{$prefix}navbar-nav-line-height: #{$line-height-base}; // Boosted mod
+  --#{$prefix}navbar-nav-letter-spacing: #{$letter-spacing-base}; // Boosted mod
   --#{$prefix}navbar-nav-link-padding-y: #{$navbar-nav-link-padding-y}; // Boosted mod
   --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x-xs}; // Boosted mod
   --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y-xs}; // Boosted mod
@@ -165,8 +171,11 @@
 
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-  padding-left: 0;
+  padding: var(--#{$prefix}navbar-nav-padding-top) var(--#{$prefix}navbar-nav-padding-x) var(--#{$prefix}navbar-nav-padding-bottom); // Boosted mod
   margin-bottom: 0;
+  @include font-size(var(--#{$prefix}navbar-nav-font-size, $font-size-base)); // Boosted mod
+  line-height: var(--#{$prefix}navbar-nav-line-height, $line-height-base); // Boosted mod
+  letter-spacing: var(--#{$prefix}navbar-nav-letter-spacing, $letter-spacing-base); // Boosted mod
   list-style: none;
 
   // Boosted mod: Handle .nav-link and .nav-icon slightly differently than Bs
@@ -186,7 +195,6 @@
   }
 
   .nav-item {
-    font-size: $font-size-base;
     border-top: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
 
     .badge {