#580 - footer accordion updates

GSA-TTS · Feb 21, 2023 · f61d9ff · f61d9ff
1 parent 395e48d
commit f61d9ff
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/assets/styles/theme/_uswds-theme-usagov.scss b/assets/styles/theme/_uswds-theme-usagov.scss
@@ -123,6 +123,23 @@ $AZ-button-disabled: #859cba;
   .usa-list--unstyled > li {
     @include u-margin-bottom(1);
   }
+
+  &__primary-content {
+    @include at-media(mobile-lg) {
+      @include u-border-top(1px, "solid", "base-light");
+    }
+
+    @include at-media(tablet) {
+      border: 0;
+    }
+  }
+}
+
+.usa-footer--big .usa-footer__primary-content--collapsible .usa-list--unstyled {
+  @include at-media-max("tablet") {
+    @include u-padding-x(2);
+    @include u-padding-y(2);
+  }
 }
 
 .usa-button-group__item,

diff --git a/components/BetaUsaGovFooterNav.vue b/components/BetaUsaGovFooterNav.vue
@@ -3,7 +3,9 @@
     <div
       :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
       class="tablet:grid-col-6 desktop:grid-col-3">
-      <section class="usa-footer__primary-content usa-footer__primary-content--collapsible usa-accordion">
+      <section
+        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        class="usa-footer__primary-content">
         <!-- footer nav column 1-->
         <h2 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
           <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column1Title") }}</span>
@@ -35,7 +37,9 @@
     <div
       :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
       class="tablet:grid-col-6 desktop:grid-col-3">
-      <section class="usa-footer__primary-content usa-footer__primary-content--collapsible usa-accordion">
+      <section
+        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        class="usa-footer__primary-content">
         <!-- footer nav column 1-->
         <h2 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
           <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column2Title") }}</span>
@@ -67,7 +71,9 @@
     <div
       :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
       class="tablet:grid-col-6 desktop:grid-col-3">
-      <section class="usa-footer__primary-content usa-footer__primary-content--collapsible usa-accordion">
+      <section
+        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        class="usa-footer__primary-content">
         <!-- footer nav column 1-->
         <h2 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
           <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column3Title") }}</span>
@@ -99,7 +105,9 @@
     <div
       :class="match_isNarrowPlus ? '' : 'footer-nav-accordion-wrap'"
       class="tablet:grid-col-6 desktop:grid-col-3">
-      <section class="usa-footer__primary-content usa-footer__primary-content--collapsible usa-accordion">
+      <section
+        :class="match_isNarrowPlus ? '' : 'usa-footer__primary-content--collapsible usa-accordion'"
+        class="usa-footer__primary-content">
         <!-- footer nav column 1-->
         <h2 :class="match_isNarrowPlus ? 'usa-gov-footer__primary-link' : 'usa-accordion__heading'">
           <span v-if="match_isNarrowPlus">{{ $t("beta.footer.column4Title") }}</span>