@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

package/src/components/bs5/footer/footer.scss

@@ -1,14 +1,132 @@
 // ----------------------------------------------------------------------------------------------------------------------
 // Footer Area
-
-@import "./colours";
-@import "./measurements";
-@import "./footer_formio";
+// ----------------------------------------------------------------------------------------------------------------------
 
 .qld-footer {
-  padding-block: var(--#{$prefix}footer-padding-y);
+  // ------------------------------------------------------------------------------------------------------------------
+  //  1. Palette colours
+  // ------------------------------------------------------------------------------------------------------------------
+  // Default palette
+  --#{$prefix}footer-color-crest-fill: var(
+    --#{$prefix}color-default-color-light-crest-fill
+  );
+  --#{$prefix}footer-color-border: var(
+    --#{$prefix}color-default-color-light-border-default
+  );
+  --#{$prefix}footer-color-border-alt: var(
+    --#{$prefix}color-default-color-light-border-alt
+  );
+  --#{$prefix}footer-color-title: var(--#{$prefix}light-text-heading);
+  --#{$prefix}footer-color-designAccent: var(
+    --#{$prefix}color-default-color-light-accent-design-accent
+  );
+  --#{$prefix}footer-color-text: var(
+    --#{$prefix}color-default-color-light-text-default
+  );
+  --#{$prefix}footer-color-text__muted: var(
+    --#{$prefix}color-default-color-light-text-lighter
+  );
+  --#{$prefix}footer-color-link: var(
+    --#{$prefix}color-default-color-light-link-default
+  );
+  --#{$prefix}footer-color-focus: var(
+    --#{$prefix}color-default-color-light-focus-default
+  );
+  --#{$prefix}footer-color-background: var(
+    --#{$prefix}color-default-color-light-background-default
+  );
+  --#{$prefix}footer-color-alt-button: var(
+    --#{$prefix}core-default-color-brand-secondary-darkgreen
+  );
+  --#{$prefix}footer-color-alt-button__hover: var(
+    --#{$prefix}core-default-color-brand-primary-light-green
+  );
+
+  // ------------------------------------------------------------------------------------------------------------------
+  // 2. Colours
+  // ------------------------------------------------------------------------------------------------------------------
+  --#{$prefix}footer-column-border-color: var(--#{$prefix}footer-color-border);
+  @include media-breakpoint-down(lg) {
+    --#{$prefix}footer-column-border-color: transparent;
+  }
+
+  // ------------------------------------------------------------------------------------------------------------------
+  // Dark palette & Forgov
+  // ------------------------------------------------------------------------------------------------------------------
+  &.dark,
+  &.dark-alt {
+    --#{$prefix}footer-color-crest-fill: var(
+      --#{$prefix}color-default-color-dark-crest-fill
+    );
+    --#{$prefix}footer-color-text: var(
+      --#{$prefix}color-default-color-dark-text-default
+    );
+    --#{$prefix}footer-color-border: var(
+      --#{$prefix}color-default-color-dark-border-default
+    );
+    --#{$prefix}footer-color-border-alt: var(
+      --#{$prefix}color-default-color-dark-border-alt
+    );
+    --#{$prefix}footer-color-title: var(
+      --#{$prefix}color-default-color-dark-text-heading
+    );
+    --#{$prefix}footer-color-designAccent: var(
+      --#{$prefix}color-default-color-dark-accent-design-accent
+    );
+    --#{$prefix}footer-color-alt-button: var(
+      --#{$prefix}color-default-color-dark-action-secondary
+    );
+    --#{$prefix}footer-color-alt-button__hover: var(
+      --#{$prefix}color-default-color-dark-action-secondary-hover
+    );
+    --#{$prefix}footer-color-link: var(
+      --#{$prefix}color-default-color-dark-link-default
+    );
+    --#{$prefix}footer-color-focus: var(
+      --#{$prefix}color-default-color-dark-underline-default
+    );
+  }
+  &.dark-alt {
+    --#{$prefix}footer-color-background: var(
+      --#{$prefix}color-default-color-dark-background-alt
+    );
+    --#{$prefix}footer-color-background: var(
+      --#{$prefix}color-default-color-dark-background-alt
+    );
+  }
+  &.dark {
+    --#{$prefix}footer-color-background: var(
+      --#{$prefix}color-default-color-dark-background-default
+    );
+    --#{$prefix}footer-color-background: var(
+      --#{$prefix}color-default-color-dark-background-default
+    );
+  }
+
+  // Measurements
+  // -text
+  --#{$prefix}footer-font-size: 0.875rem;
+  --#{$prefix}footer-title-font-size: 1.25rem;
+
+  // -spacing
+  --#{$prefix}footer-gap: 0.75rem;
+  --#{$prefix}footer-column-spacing: 2rem;
+  --#{$prefix}footer-spacing: 1rem;
+  --#{$prefix}footer-padding-y: 4rem;
+
+  // -boarders
+  --#{$prefix}footer-top-border-width: 0.25rem;
+  --#{$prefix}footer-special-border-default-width: 0.13rem;
+  --#{$prefix}footer-special-border-thin-width: 0.06rem;
+
+  // Icons and Crest
+  --#{$prefix}footer-crest-max-width: 15.72rem;
+
+  @include media-breakpoint-up(lg) {
+    padding-block: var(--#{$prefix}footer-padding-y);
+  }
   border-top: solid;
-  border-top-width: calc(var(--#{$prefix}footer-special-border-width) + 1px);
+  border-top-width: var(--#{$prefix}footer-top-border-width);
   border-top-color: var(--#{$prefix}footer-color-designAccent);
   background: var(--#{$prefix}footer-color-background);
   color: var(--#{$prefix}footer-color-text);
@@ -16,11 +134,14 @@
 
   a:not(.btn),
   a.nav-link {
-    --qld-link-color-rgb: var(--#{$prefix}footer-color-link);
+    --qld-link-color: var(--#{$prefix}footer-color-link);
     text-decoration: underline;
     text-decoration-color: var(--#{$prefix}footer-color-link);
     text-decoration-thickness: var(--#{$prefix}link-underline-thickness);
-    text-underline-offset: var(--#{$prefix}link-underline-offset);
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+    color: var(--qld-link-color);
+    padding-left: 0;
 
     &:hover {
       text-decoration-thickness: var(
@@ -36,88 +157,88 @@
     }
   }
 
-  .footer-site-name {
-    font-size: var(--#{$prefix}footer-title-font-size);
-    line-height: 1.5;
-    font-weight: 600;
-    margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2);
-    display: block;
-    color: var(--#{$prefix}footer-color-title);
-  }
-
   .footer-column {
     position: relative;
-    margin-block-end: var(--#{$prefix}footer-spacing);
-    margin-inline-end: 0;
-  }
 
-  @include media-breakpoint-down(lg) {
-    .footer-column {
-      margin-block-start: calc(var(--#{$prefix}footer-spacing) * 2);
+    // Medium and below
+    padding-block-start: 1.5rem;
+    padding-block-end: 1.5rem;
+
+    border-top: var(--#{$prefix}footer-special-border-thin-width) solid
+      var(--#{$prefix}footer-color-border);
+
+    // Large and above
+    @include media-breakpoint-up(lg) {
+      padding-block-start: 0;
+      padding-block-end: 0;
+
+      border-top: none;
     }
   }
 
   .border-column {
-    height: 100%;
+    // height: 100%;
     position: relative;
 
-    &:before {
+    &:after {
       position: absolute;
       content: "";
-      width: calc(var(--#{$prefix}footer-special-border-width) - 1px);
+      width: var(--#{$prefix}footer-special-border-default-width);
       background: var(--#{$prefix}footer-column-border-color);
       top: 0;
       bottom: 0;
-      inset-inline-start: calc(var(--#{$prefix}footer-spacing) * -2);
+      right: calc(var(--qld-gutter-x) * 0.5);
     }
   }
 
-  .footer-heading {
-    color: var(--#{$prefix}footer-color-title);
-    font-size: var(--#{$prefix}footer-title-font-size);
-    margin-block-end: var(--#{$prefix}footer-spacing);
-    line-height: 1.5;
-    font-weight: 600;
+  .footer {
+    &-site-name,
+    &-heading {
+      color: var(--#{$prefix}footer-color-title);
+      font-size: var(--#{$prefix}footer-title-font-size);
+      line-height: 1.2;
+      font-weight: 600;
+    }
+    &-site-name {
+      margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2);
+    }
+    &-heading {
+      margin-block-end: var(--#{$prefix}footer-spacing);
+    }
   }
 
   .footer-contact-item {
+    margin-block-end: 0.75rem;
     display: flex;
     align-items: center;
-    margin-block-end: calc(var(--#{$prefix}footer-spacing) * 1.25);
+    gap: 0.5rem;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
 
     .qld-icon {
       --#{$prefix}icon-color: var(--#{$prefix}brand-accent);
+      --qld-brand-accent: var(--#{$prefix}footer-color-alt-button);
       display: block;
-      width: var(--#{$prefix}footer-social-icon-size-width);
-      min-width: var(--#{$prefix}footer-social-icon-size-width);
-      margin-inline-end: calc(var(--#{$prefix}footer-spacing) * 0.5);
       background-color: var(--#{$prefix}icon-color);
-      --qld-brand-accent: var(--#{$prefix}footer-color-alt-button);
 
       &:hover {
         --qld-brand-accent: var(--#{$prefix}footer-color-alt-button__hover);
       }
     }
-
-    b {
-      margin-inline-end: calc(var(--#{$prefix}footer-spacing) * 0.5);
-    }
   }
 
+  //Crest Logo
   .footer-crest {
     display: block;
     width: 100%;
-    max-width: var(--#{$prefix}footer-crest-max-width);
-    margin-block-start: var(--#{$prefix}footer-spacing);
-    margin-block-end: var(--#{$prefix}footer-spacing);
-
-    @include media-breakpoint-up(md) {
-      margin-block-start: calc(var(--#{$prefix}footer-spacing) * 1.5);
-      margin-block-end: calc(var(--#{$prefix}footer-spacing) * 1.5);
-    }
+    max-width: 14.5rem;
+    margin-block-start: calc(var(--#{$prefix}footer-spacing) * 1.5);
+    margin-block-end: calc(var(--#{$prefix}footer-spacing) * 1.5);
 
-    svg {
-      width: 100%;
+    @include media-breakpoint-up(lg) {
+      max-width: var(--#{$prefix}footer-crest-max-width);
     }
   }
 
@@ -125,37 +246,67 @@
     --#{$prefix}nav-link-color: var(--#{$prefix}footer-color-link);
 
     &.footer-link-list {
-      a.nav-link {
-        font-weight: 400;
-        margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.7);
-        padding: 0;
+      display: grid;
+      gap: 0.75rem;
 
-        &:first-child {
-          margin-block-start: calc(var(--#{$prefix}footer-spacing) * 0.5);
+      // Social media / follow us links
+      &--social {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        margin-inline-start: 1rem;
+
+        @include media-breakpoint-up(lg) {
+          margin-inline-start: 0;
+          flex-direction: column;
+          gap: 0.75rem;
         }
 
-        &:focus-visible {
-          box-shadow: 0 0 0 3px var(--#{$prefix}footer-color-border);
+        li {
+          white-space: nowrap;
         }
 
-        span {
-          display: block;
+        a.nav-link {
+          display: flex;
+          padding-inline: 0 !important;
+          margin-block-end: 0 !important;
+
+          .nav-link-label {
+            display: none;
+
+            @include media-breakpoint-up(lg) {
+              display: block;
+            }
+          }
+
+          .qld-icon {
+            // max-height: unset;
+            margin-block-end: 0;
+
+            @include media-breakpoint-up(lg) {
+              margin-inline-end: 1rem;
+              max-height: var(--#{$prefix}footer-social-icon-size-height);
+            }
+          }
+
+          &:hover {
+            --component-icon-color: var(--#{$prefix}footer-color-crest-fill);
+          }
         }
       }
 
-      &--social .nav-link {
-        display: flex;
-        margin-block-end: calc(var(--#{$prefix}footer-spacing) * 1.2);
+      a.nav-link {
+        font-weight: 400;
+        line-height: 1.25rem;
+        padding-block-start: 0;
+        padding-block-end: 0;
 
-        svg {
-          fill: var(--#{$prefix}footer-color-crest-fill);
-          width: var(--#{$prefix}footer-social-icon-size-width);
-          max-height: var(--#{$prefix}footer-social-icon-size-height);
-          margin-inline-end: calc(var(--#{$prefix}footer-spacing) * 0.75);
+        &:focus-visible {
+          box-shadow: 0 0 0 3px var(--#{$prefix}footer-color-border);
         }
 
-        &:hover {
-          --component-icon-color: var(--#{$prefix}footer-color-crest-fill);
+        span {
+          display: block;
         }
       }
     }
@@ -177,251 +328,90 @@
     }
   }
 
-  .footer-contact {
+  .contact-btn {
+    align-items: flex-start;
+    justify-content: flex-end;
+
     .btn {
-      min-width: 200px;
-      margin-block-start: var(--#{$prefix}footer-spacing);
+      min-width: 10rem;
+      width: fit-content;
     }
   }
 
-  .container > .row > div {
-    padding-inline: var(--#{$prefix}footer-column-spacing);
-  }
-
   .btn-global-secondary {
     white-space: normal;
   }
 
+  // ------------------------------------------------------------------------------------------------------------------
+  // Responsive
   @include media-breakpoint-down(lg) {
-    --#{$prefix}last-para-margin: 24px;
-    --qld-footer-padding-y: 0;
-
     padding-top: calc(var(--#{$prefix}footer-gap) * 2);
 
     .footer-site-name {
       margin-block-end: calc(var(--#{$prefix}footer-gap) * 2);
     }
 
+    .border-column {
+      &:after {
+        content: none;
+      }
+    }
+
     .container {
       > .row {
-        margin-inline: calc(var(--#{$prefix}footer-gap) * -1);
-        --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2);
-
-        & > * {
-          padding-inline: 0;
-        }
-
-        > .col-md-12 {
-          --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2);
-          border-top: calc(var(--#{$prefix}footer-special-border-width) - 2px)
-            solid var(--#{$prefix}footer-color-border);
-
-          padding-inline: 0;
-          margin-inline-start: var(--qld-gutter-x);
-          width: calc(100% - calc(var(--qld-gutter-x) * 2));
-
-          .border-column {
-            &:before {
-              content: "";
-              content: none;
-              background: none;
-            }
-
-            height: auto;
-          }
-
-          .footer-column {
-            margin-block: calc(var(--#{$prefix}footer-gap) * 2);
-            margin-inline-end: 0;
-          }
-        }
-
-        > .col-md-12:first-of-type {
-          border-top: none;
-        }
-
         > .title {
-          border-bottom: calc(
-              var(--#{$prefix}footer-special-border-width) - 2px
-            )
-            solid var(--#{$prefix}footer-color-border);
-          padding-inline: var(--qld-gutter-x);
+          border-bottom: var(--#{$prefix}footer-special-border-thin-width) solid
+            var(--#{$prefix}footer-color-border-alt);
         }
 
+        // Crest "column"
         > .crest {
-          border-top: calc(var(--#{$prefix}footer-special-border-width) - 2px)
-            solid var(--#{$prefix}footer-color-border);
-          padding-inline: var(--qld-gutter-x);
-          margin-inline: 0;
-          width: 100%;
+          border-top: var(--#{$prefix}footer-special-border-thin-width) solid
+            var(--#{$prefix}footer-color-border-alt);
 
           .footer-column {
-            margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2);
+            border-top: none;
           }
         }
-
-        p:last-child {
-          margin-block-end: 0;
-        }
       }
     }
 
-    .btn-outline-secondary {
-      width: 100%;
-      min-width: auto !important;
-    }
-
     .footer-link-list {
-      display: block;
-      column-count: 3;
-
-      a.nav-link,
-      a.nav-link:first-child {
-        margin: 0 !important;
-        margin-block-end: calc(
-          var(--#{$prefix}footer-font-size) * 0.5
-        ) !important;
-      }
+      grid-template-columns: repeat(3, 1fr);
     }
-  }
 
-  @include media-breakpoint-down(md) {
-    .container {
-      > .row {
-        > .col-md-12 {
-          margin-inline-start: var(--#{$prefix}footer-spacing);
-          width: calc(100% - calc(var(--#{$prefix}footer-spacing) * 2));
-        }
-
-        > .title,
-        > .crest {
-          padding-inline: var(--qld-footer-spacing);
-          margin-inline: 0;
-          width: 100%;
+    .footer-column {
+      // Specific to Social Links column
+      &:has(.footer-link-list--social) {
+        display: flex;
+        flex-direction: row !important;
+        align-items: center;
 
-          .footer-column {
-            margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2.5);
-          }
+        .footer-heading {
+          margin-block-end: 0;
+          line-height: 2rem;
         }
-
-        p:last-child {
-          margin-block-end: var(--#{$prefix}last-para-margin);
+        .footer-content,
+        a.nav-link {
+          line-height: 2rem;
         }
       }
     }
+  }
 
+  @include media-breakpoint-down(md) {
     .footer-link-list {
-      column-count: 2;
-      width: 100%;
+      grid-template-columns: repeat(2, 1fr);
     }
 
     .footer-site-name,
     .footer-heading {
       font-size: calc(var(--#{$prefix}footer-title-font-size) - 0.25rem);
+      line-height: 1.25rem;
     }
-  }
-}
-
-/* Feedback form */
-#qg-feedback-toggle {
-  --qld-dark-alt-border: var(--#{$prefix}formIO-input-border);
-  color: var(--#{$prefix}formIO-formio-colour);
-  width: 100%;
-
-  #btn-footer-feedback {
-    color: var(--#{$prefix}footer-color-text);
-    border: var(--#{$prefix}footer-special-border-width) solid
-      var(--#{$prefix}footer-color-alt-button);
-    width: 100%;
-    font-weight: normal;
-    margin-block-start: var(--#{$prefix}footer-spacing);
-
-    &:active {
-      color: var(--#{$prefix}formIO-formio-colour);
-    }
-  }
 
-  #btn-footer-feedback:not(.collapsed) {
-    font-weight: var(--#{$prefix}formIO-feeback-font-weight);
-    border-color: var(--#{$prefix}formIO-bg-colour);
-    border-radius: var(--#{$prefix}footer-border-radius);
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-    outline: none !important;
-    width: 100%;
-    text-align: start;
-    background-color: var(--#{$prefix}formIO-bg-colour);
-    color: var(--#{$prefix}light-text-heading);
-    font-weight: 700;
-  }
-
-  .btn.qg-feedback-toggle {
-    font-weight: bold;
-  }
-
-  &:has(#feedbackFormIO .formio-component-html1) {
-    #btn-footer-feedback {
-      display: none;
-      visibility: hidden;
-    }
-
-    #qg-footer-feedback {
-      padding-block-start: calc(var(--#{$prefix}footer-spacing) - 4px);
-      border-start-start-radius: var(--#{$prefix}footer-border-radius);
-      border-start-end-radius: var(--#{$prefix}footer-border-radius);
-    }
-  }
-}
-
-#qg-footer-feedback {
-  --qld-footer-bootstrap-default-padding: 1.5rem;
-
-  background-color: var(--#{$prefix}formIO-bg-colour);
-
-  a {
-    color: var(--#{$prefix}formIO-link-colour);
-    text-decoration-color: var(--#{$prefix}formIO-link-colour);
-
-    &:hover {
-      text-decoration-thickness: var(
-        --#{$prefix}link-underline-thickness-hover
-      ) !important;
-    }
-
-    &:hover,
-    &:visited {
-      color: var(--#{$prefix}formIO-link-colour);
-    }
-  }
-
-  border-radius: var(--#{$prefix}footer-border-radius);
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-  padding-inline: var(--#{$prefix}footer-bootstrap-default-padding);
-  padding-block-end: var(--#{$prefix}footer-bootstrap-default-padding);
-
-  .qg-footer-feedback-footer {
-    border-block-start: var(--#{$prefix}footer-border-width) solid
-      var(--#{$prefix}formIO-hr-colour);
-    padding-block-start: calc(var(--#{$prefix}footer-spacing) + 4px);
-
-    a.qg-footer-feedback__close {
-      border: var(--#{$prefix}footer-special-border-width) solid
-        var(--#{$prefix}formIO-btn-close-colour);
-      width: 100%;
-      display: block;
-      border-radius: var(--#{$prefix}footer-border-radius);
-      padding: 9px 24px;
-      text-align: center;
-      text-decoration: none;
-
-      &:hover {
-        border-color: var(--#{$prefix}formIO-btn-close-colour__hover);
-        text-decoration: underline;
-        text-decoration-thickness: var(
-          --#{$prefix}footer-font-underline-boarder
-        );
-      }
+    .footer-column:has(.footer-link-list--social) .footer-heading {
+      line-height: 1.5rem;
     }
   }
 }