VACMS-18765 Cross-repository style cleanup

department-of-veterans-affairs · Sep 9, 2024 · b8e79f3 · b8e79f3
1 parent 9abb220
commit b8e79f3
Show file tree

Hide file tree

Showing 20 changed files with 523 additions and 322 deletions.
diff --git a/package.json b/package.json
@@ -207,6 +207,7 @@
   },
   "private": true,
   "dependencies": {
+    "@department-of-veterans-affairs/css-library": "^0.9.8",
     "@department-of-veterans-affairs/vagov-platform": "^0.0.1",
     "aws-sdk": "^2.1441.0",
     "blob-polyfill": "^4.0.20200601",
@@ -272,4 +273,4 @@
     "**/ansi-regex": "^4.1.1",
     "**/@babel/core": "^7.23.2"
   }
-}
+}
diff --git a/src/site/assets/sass/style.scss b/src/site/assets/sass/style.scss
@@ -1,6 +1,8 @@
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins";
+
 // Add CSS and imports here.
 .feedback-button {
-  background-color: var(color-primary);
+  background-color: var(--vads-color-primary);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1;
@@ -263,6 +265,7 @@
     }
   }
 }
+
 // fix for sidenav btn
 .va-sidenav-btn-close {
   background-size: 0.625rem 0.625rem;
@@ -282,4 +285,208 @@
   }
 }
 
-// END: Styles for mobile app promo banner  
+// END: Styles for mobile app promo banner
+
+.bio-paragraph-image {
+  border-radius: 50%;
+  position: relative;
+  height: 110px;
+  width: 110px;
+}
+
+.va-facility-page {
+  .va-address-block {
+    margin-left: 0.625rem;
+    border-left: none;
+  }
+}
+
+.media-list-images {
+  @media (min-width: var(--small-screen)) {
+    max-width: 50%;
+  }
+}
+
+.va-c-position-top-right-corner {
+  right: 0;
+  top: 0;
+}
+
+.va-c-margin-top--auto {
+  margin-top: auto;
+}
+
+// Campaign Landing Pages
+.va-c-blue-line {
+  width: 40px;
+}
+
+.va-c-blue-line--large {
+  width: 50px;
+}
+
+.va-u-background--gradient-blue {
+  @include linear-gradient-background(var(--vads-color-primary), var(--vads-color-primary-darker));
+}
+
+.va-c-video {
+  max-width: 560px;
+}
+
+.event-detail-img {
+  width: 100%;
+  height: 28%;
+  object-fit: cover;
+}
+
+// The below styles are still used in home.html, which is the legacy home page
+// so technically these are "unused" but the template still exists so the styles will until it goes away
+.homepage-hub {
+  @include linear-gradient-background(var(--vads-color-primary), var(--vads-color-primary-darker));
+  padding-top: 1.5em;
+
+  @include media(var(--medium-screen)) {
+    padding-top: 3em;
+  }
+}
+
+.homepage-hub-container {
+  max-width: 62.5rem;
+
+  @include media(var(--medium-screen)) {
+    margin: auto;
+    width: 85%;
+  }
+
+  @include media(var(--large-screen)) {
+    margin: auto;
+    width: 64%;
+  }
+}
+
+.homepage-image-wrapper {
+  width: 100%;
+  height: 0;
+  padding-bottom: 65%;
+  /* You define this doing height / width * 100% */
+  position: relative;
+
+  > .lazy {
+    width: 100%;
+    position: absolute;
+  }
+}
+
+.homepage-news-story-title {
+  margin-top: 1em;
+  margin-bottom: 0;
+
+  @include media(var(--medium-screen)) {
+    margin-top: 1.5em;
+    margin-bottom: inherit;
+  }
+}
+
+.homepage-news-story-desc {
+  margin-top: 0.5em;
+  margin-bottom: 0;
+
+  @include media(var(--medium-screen)) {
+    margin-bottom: inherit;
+  }
+}
+
+.homepage-news-story {
+  margin-bottom: 2em;
+
+  @include media(var(--medium-screen)) {
+    margin-bottom: 0em;
+  }
+}
+
+.homepage-button {
+  width: 100%;
+  height: 85px;
+  padding: 0;
+  margin: 0 0 16px;
+  display: inline-block;
+  color: var(--vads-color-white);
+  background-color: var(--vads-color-primary);
+  text-decoration: none;
+  border-radius: 5px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  transition-property: background-color;
+
+  &:hover,
+  &:active {
+    background-color: var(--vads-color-primary-dark);
+    outline-offset: 2px;
+
+    .icon-wrapper {
+      background-color: var(--vads-color-primary-darker);
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:visited {
+    color: var(--vads-color-white);
+    text-decoration: none;
+    outline-offset: 2px;
+  }
+
+  &.vcl {
+    background-color: var(--vads-color-secondary-dark);
+
+    &:hover,
+    &:active {
+      background-color: var(--vads-color-secondary-darkest);
+      outline-offset: 2px;
+
+      .icon-wrapper {
+        background-color: var(--vads-color-secondary-dark);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  .icon-wrapper {
+    width: 55px;
+    height: 100%;
+    float: left;
+    background-color: var(--vads-color-primary-dark);
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    transition-property: background-color;
+
+    &.vcl {
+      content: "";
+      background: url(../img/VCL-icon-white.svg) no-repeat;
+      background-size: 2em auto;
+      background-position: center;
+      background-color: var(--vads-color-secondary-darkest);
+    }
+  }
+
+  .button-inner {
+    margin-left: 55px;
+    height: 100%;
+    padding: 1em;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+// end home.html styles
diff --git a/src/site/facilities/facility_social_links.drupal.liquid b/src/site/facilities/facility_social_links.drupal.liquid
@@ -1,6 +1,6 @@
 <section data-template="facilities/facility_social_links" class="feature vads-u-background-color--gray-lightest vads-u-margin-top--4 small-screen:vads-u-margin-top--6 vads-u-padding-x--3 vads-u-padding-y--2p5">
     <h2 class="vads-u-margin-bottom--2">Get updates from {{ regionNickname }}</h2>
-    <div class="va-c-list-link-teasers usa-grid usa-grid-full">
+    <div class="usa-grid usa-grid-full">
 
         {% if fieldGovdeliveryIdEmerg != empty or if fieldGovdeliveryIdNews != empty %}
             <div class="usa-width-one-half">

diff --git a/src/site/facilities/vba_social_links.drupal.liquid b/src/site/facilities/vba_social_links.drupal.liquid
@@ -1,6 +1,6 @@
 <section data-template="facilities/facility_social_links" class="feature vads-u-background-color--gray-lightest vads-u-margin-top--4 small-screen:vads-u-margin-top--6 vads-u-padding-x--3 vads-u-padding-y--2p5">
   <h2 class="vads-u-margin-bottom--2">Get updates from {{ regionNickname }}</h2>
-  <div class="va-c-list-link-teasers usa-grid usa-grid-full">
+  <div class="usa-grid usa-grid-full">
     {% if fieldGovdeliveryIdEmerg != empty or fieldNews != empty %}
       <div class="usa-width-one-half">
         {% if fieldNews != empty %}

diff --git a/src/site/includes/facilityListing.drupal.liquid b/src/site/includes/facilityListing.drupal.liquid
@@ -43,7 +43,7 @@
          </div>
       {% endif %}
       {% if entity.fieldMentalHealthPhone %}
-        <div class="mental-health-care-phone">
+        <div>
           <strong>Mental health care:</strong> {{ entity.fieldMentalHealthPhone | processPhoneToVaTelephoneOrFallback : '', 'Mental health care' }}
         </div>
       {% endif %}

diff --git a/src/site/layouts/campaign_landing_page.drupal.liquid b/src/site/layouts/campaign_landing_page.drupal.liquid
@@ -6,7 +6,7 @@
 <div id="content" class="interior" data-template="node-campaign_landing_page">
   <main>
     <!-- Hero-->
-    <div class="va-u-background--gradiant-blue">
+    <div class="va-u-background--gradient-blue">
       <div class="vads-l-grid-container vads-u-padding-x--4 large-screen:vads-u-padding-x--0">
         <div class="vads-l-col--12 small-screen:vads-l-col--10 medium-screen:vads-l-col--8 small-desktop-screen:vads-l-col--12">
           <div class="vads-u-display--flex small-desktop-screen:vads-l-row">
@@ -55,7 +55,7 @@
             <div class=" vads-u-margin-top--3 medium-screen:vads-u-margin-top--0">
               {% if fieldClpAudience != empty %}
                 <div class="va-c-white-box vads-u-background-color--white vads-u-padding--2 vads-u-margin-bottom--3 medium-screen:vads-u-margin-bottom--2">
-                  <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin--0">This page is for</p>
+                  <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin--0">This page is for</p>
                   <hr class="va-c-blue-line vads-u-border-color--primary-alt vads-u-margin-y--2" />
                   <ul class="usa-unstyled-list" role="list">
                     {% for clpAudience in fieldClpAudience %}
@@ -93,7 +93,7 @@
       <div class="vads-l-row">
         <div class="vads-l-col--12 medium-screen:vads-l-col--9">
           <!-- Title -->
-          <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">What you can do</p>
+          <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">What you can do</p>
           <h2 class="vads-u-margin--0">{{ fieldClpWhatYouCanDoHeader }}</h2>
           <p class="va-introtext vads-u-margin-top--1 vads-u-margin-bottom--4">{{ fieldClpWhatYouCanDoIntro }}</p>
         </div>
@@ -132,7 +132,7 @@
           <!-- CONTENT -->
           <div class="vads-l-col--12 medium-screen:vads-l-col--8">
             <!-- Title -->
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Video</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Video</p>
             <h2 class="vads-u-margin--0">{{ fieldClpVideoPanelHeader }}</h2>
 
             <!-- Video -->
@@ -187,7 +187,7 @@
       <div class="vads-l-grid-container vads-u-padding-y--3 vads-u-padding-x--4 large-screen:vads-u-padding-x--0">
         <div class="vads-l-row">
           <div class="vads-l-col--12 medium-screen:vads-l-col--9">
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Spotlight</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Spotlight</p>
             <h2 class="vads-u-margin-top--0">{{ fieldClpSpotlightHeader }}</h2>
             <p class="va-introtext vads-u-margin-top--1 vads-u-margin-bottom--4">
               {{ fieldClpSpotlightIntroText }}
@@ -228,7 +228,7 @@
           <!-- CONTENT -->
           <div class="vads-l-col--12 medium-screen:vads-l-col--9">
             <!-- Title -->
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Stories</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Stories</p>
             <h2 class="vads-u-margin-top--0">{{ fieldClpStoriesHeader }}</h2>
             <p class="va-introtext vads-u-margin-top--1 vads-u-margin-bottom--4">{{ fieldClpStoriesIntro }}</p>
 
@@ -280,7 +280,7 @@
         <div class="vads-l-row">
           <div class="vads-l-col--12 medium-screen:vads-l-col--9">
             <!-- Title -->
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Downloadable resources</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Downloadable resources</p>
             <h2 class="vads-u-margin-top--0">{{ fieldClpResourcesHeader }}</h2>
             <p class="va-introtext vads-u-margin-top--1 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--4">{{ fieldClpResourcesIntroText }}</p>
           </div>
@@ -328,7 +328,7 @@
         <div class="vads-l-row">
           <div class="vads-l-col--12 medium-screen:vads-l-col--9">
             <!-- Title -->
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Events</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Events</p>
             <h2 class="vads-u-margin-top--0">{{ fieldClpEventsHeader }}</h2>
           </div>
         </div>
@@ -426,7 +426,7 @@
         <div class="vads-l-row">
           <div class="vads-l-col--12 medium-screen:vads-l-col--8">
             <!-- Title -->
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">FAQ</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">FAQ</p>
 
             {% if fieldClpReusableQA and fieldClpReusableQA.entity.fieldSectionHeader %}
               {% assign sectionHeader = fieldClpReusableQA.entity.fieldSectionHeader %}
@@ -535,7 +535,7 @@
           <!-- CONTENT -->
           <div class="vads-l-col--12 medium-screen:vads-l-col--9">
             <!-- Title -->
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Connect with us</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">Connect with us</p>
             <h2 class="vads-u-margin-top--0">Get updates from {{ fieldRelatedOffice.entity.fieldExternalLink.title }}</h2>
           </div>
         </div>
@@ -623,7 +623,7 @@
         <div class="vads-l-row">
           <div class="vads-l-col--12 medium-screen:vads-l-col--9">
             <!-- Title -->
-            <p class="va-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">VA Benefits</p>
+            <p class="vads-u-text-transform--uppercase vads-u-color--gray-medium vads-u-font-size--sm vads-u-margin-bottom--0">VA Benefits</p>
             <h2 class="vads-u-margin-top--0 vads-u-margin-bottom--3">Learn more about related VA benefits</h2>
           </div>
         </div>

diff --git a/src/site/layouts/event_listing.drupal.liquid b/src/site/layouts/event_listing.drupal.liquid
@@ -17,7 +17,7 @@
 				<h1 id="article-heading">{{ title }}</h1>
 				<div class="va-introtext">
 					{% if fieldIntroText %}
-						<p class="events-show" id="office-events-description">
+						<p id="office-events-description">
 							{{ fieldIntroText }}
 						</p>
 					{% endif %}