From 98c722a5973659e4634a706cf063096feb99594a Mon Sep 17 00:00:00 2001 From: Randi Mays Date: Mon, 9 Sep 2024 15:13:39 -0500 Subject: [PATCH] VACMS-18765 Cross-repository style cleanup --- package.json | 3 +- src/site/assets/sass/style.scss | 173 +++++++++++++++++- .../facility_social_links.drupal.liquid | 2 +- .../facilities/vba_social_links.drupal.liquid | 2 +- src/site/layouts/event_listing.drupal.liquid | 2 +- .../health_care_region_page.drupal.liquid | 2 +- .../health_services_listing.drupal.liquid | 4 +- src/site/layouts/home.html | 7 +- .../press_releases_listing.drupal.liquid | 2 +- src/site/layouts/story_listing.drupal.liquid | 2 +- ...ist_of_link_teasers_facility.drupal.liquid | 72 ++++---- .../paragraphs/staff_profile.drupal.liquid | 6 +- src/site/paragraphs/wysiwyg.drupal.liquid | 2 +- 13 files changed, 224 insertions(+), 55 deletions(-) diff --git a/package.json b/package.json index a94223adda..60d0f50c1f 100644 --- 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" } -} +} \ No newline at end of file diff --git a/src/site/assets/sass/style.scss b/src/site/assets/sass/style.scss index 10c9cf3e33..8ae9cb266f 100644 --- 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,170 @@ } } -// END: Styles for mobile app promo banner \ No newline at end of file +// 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; + } +} + +// 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 \ No newline at end of file diff --git a/src/site/facilities/facility_social_links.drupal.liquid b/src/site/facilities/facility_social_links.drupal.liquid index 3ed9d972e1..bbdbf6aec5 100644 --- a/src/site/facilities/facility_social_links.drupal.liquid +++ b/src/site/facilities/facility_social_links.drupal.liquid @@ -1,6 +1,6 @@

Get updates from {{ regionNickname }}

-
+
{% if fieldGovdeliveryIdEmerg != empty or if fieldGovdeliveryIdNews != empty %}
diff --git a/src/site/facilities/vba_social_links.drupal.liquid b/src/site/facilities/vba_social_links.drupal.liquid index cf218a7848..380332099e 100644 --- a/src/site/facilities/vba_social_links.drupal.liquid +++ b/src/site/facilities/vba_social_links.drupal.liquid @@ -1,6 +1,6 @@

Get updates from {{ regionNickname }}

-
+
{% if fieldGovdeliveryIdEmerg != empty or fieldNews != empty %}
{% if fieldNews != empty %} diff --git a/src/site/layouts/event_listing.drupal.liquid b/src/site/layouts/event_listing.drupal.liquid index a8ffc68d8d..3295f27d51 100644 --- a/src/site/layouts/event_listing.drupal.liquid +++ b/src/site/layouts/event_listing.drupal.liquid @@ -17,7 +17,7 @@

{{ title }}

{% if fieldIntroText %} -

+

{{ fieldIntroText }}

{% endif %} diff --git a/src/site/layouts/health_care_region_page.drupal.liquid b/src/site/layouts/health_care_region_page.drupal.liquid index 3d8daa5819..a3be5f11d8 100644 --- a/src/site/layouts/health_care_region_page.drupal.liquid +++ b/src/site/layouts/health_care_region_page.drupal.liquid @@ -17,7 +17,7 @@
- +
{% if fieldIntroText %} -

+

{{ fieldIntroText }}

{% endif %} @@ -31,7 +31,7 @@ {% if fieldFeaturedContentHealthser %} -