add custom mhv-desktop-screen display breakpoint

department-of-veterans-affairs · Oct 4, 2024 · 3b78a1c · 3b78a1c
1 parent 334aa38
commit 3b78a1c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/applications/mhv-landing-page/components/MedicalRecordsCard.jsx b/src/applications/mhv-landing-page/components/MedicalRecordsCard.jsx
@@ -32,7 +32,7 @@ const MedicalRecordsCard = ({ href }) => {
               'usa-label',
               'vads-u-background-color--primary',
               'vads-u-display--none',
-              'desktop:vads-u-display--block',
+              'mhv-desktop-screen:vads-u-display--block',
             )}
           >
             Coming soon
@@ -45,7 +45,7 @@ const MedicalRecordsCard = ({ href }) => {
             'usa-label',
             'vads-u-background-color--primary',
             'vads-u-display--inline-block',
-            'desktop:vads-u-display--none',
+            'mhv-desktop-screen:vads-u-display--none',
           )}
         >
           Coming soon

diff --git a/src/applications/mhv-landing-page/components/NavCard.jsx b/src/applications/mhv-landing-page/components/NavCard.jsx
@@ -77,7 +77,7 @@ const NavCard = ({
                 'usa-label',
                 'vads-u-background-color--primary',
                 'vads-u-display--none',
-                'desktop:vads-u-display--block',
+                'mhv-desktop-screen:vads-u-display--block',
               )}
             >
               {tag}
@@ -92,7 +92,7 @@ const NavCard = ({
               'usa-label',
               'vads-u-background-color--primary',
               'vads-u-display--inline-block',
-              'desktop:vads-u-display--none',
+              'mhv-desktop-screen:vads-u-display--none',
             )}
           >
             {tag}

diff --git a/src/applications/mhv-landing-page/sass/mhv-landing-page.scss b/src/applications/mhv-landing-page/sass/mhv-landing-page.scss
@@ -14,6 +14,17 @@ $anchor-font-size: 1.25rem; // == 20px
   }
 }
 
+$mhv-desktop-screen: 1008px;
+
+@media (min-width: $mhv-desktop-screen) {
+  .mhv-desktop-screen\:vads-u-display--block {
+    display: block !important;
+  }
+  .mhv-desktop-screen\:vads-u-display--none {
+    display: none !important;
+  }
+}
+
 .mhv-c-indicator::after {
   background-color: var(--vads-color-secondary);
   content: "";