qpp-style 9.36.0 → 9.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qpp-style",
-  "version": "9.36.0",
+  "version": "9.37.0",
   "description": "Shared style guide across the QPP program.",
   "main": "dist/index.js",
   "homepage": "https://cmsgov.github.io/qpp-style",

package/styles/qppds/components/_header.scss

@@ -1,4 +1,5 @@
 @use '../settings/variables' as v;
+@use '../settings/functions' as f;
 
 // this should be a global thing
 [hidden] {
@@ -28,6 +29,14 @@ header {
   }
 }
 
+.header-height {
+  height: 100%;
+
+  @include breakpoint(sm) {
+    height: 200px;
+  }
+}
+
 .header-dropdown--open {
   z-index: v.$zIndexTopNavOpen;
 }
@@ -38,11 +47,11 @@ header {
 // logo
 .header-logo {
   height: 45px;
-  margin-left: 40px;
+  margin-left: f.rem(30px);
   @include breakpoint(sm) {
     float: left;
-    margin-left: 30px;
-    padding: 27px 0;
+    margin-left: f.rem(40px);
+    padding: f.rem(27px) 0;
     height: 103px;
   }
   @include breakpoint(md) {
@@ -52,6 +61,13 @@ header {
     height: 108px;
   }
 }
+.header-logo-search {
+  margin-top: 0;
+
+  @include breakpoint(sm) {
+    margin-top: f.rem(-60px);
+  }
+}
 .qpp-logo {
   height: 100%;
 }
@@ -60,8 +76,8 @@ header {
 .header-help {
   font-size: 0.9rem;
   text-decoration: none;
-  margin: 0 40px 0 0;
-  padding-top: 10px;
+  margin: 0 f.rem(30px) 0 0;
+  padding-top: f.rem(20px);
   width: 30px;
   height: 86px;
   @include breakpoint(sm) {
@@ -79,8 +95,8 @@ header {
   background-color: transparent;
   border: none;
   color: #006771;
-  font-size: 16px;
-  margin-right: 30px;
+  font-size: f.rem(16px);
+  margin-right: f.rem(30px);
   text-transform: uppercase;
 }
 
@@ -90,7 +106,7 @@ header {
   border: none;
   display: block;
   flex: 0 0 100%;
-  padding: 14px 0;
+  padding: f.rem(14px) 0;
   width: 100%;
   &[aria-expanded='true'] {
     color: v.$gray-90;
@@ -103,13 +119,13 @@ header {
     fill: v.$cyan-50;
     height: 18px;
     width: 35px;
-    margin-bottom: -2px;
+    margin-bottom: f.rem(-2px);
   }
 }
 
 .icon {
   display: inline-block;
-  margin-right: 14px;
+  margin-right: f.rem(14px);
 }
 .icon-bar {
   background-color: v.$cyan-50;
@@ -119,7 +135,7 @@ header {
   width: 22px;
 }
 .icon-bar + .icon-bar {
-  margin-top: 5px;
+  margin-top: f.rem(5px);
 }
 .toggle-text {
   display: inline-block;
@@ -131,12 +147,13 @@ header {
   flex: 0 0 100%;
   background-color: $color-teal-dark;
   color: $color-white;
+  margin-right: f.rem(30px);
   @include breakpoint(sm) {
     background-color: transparent;
     color: $color-navy;
     display: block;
     float: right;
-    margin-right: 16px;
+    margin-right: f.rem(40px);
   }
 }
 [class^='header-item-'] {
@@ -200,6 +217,11 @@ header {
   .menu-dropdown-toggle,
   .header-item-login {
     background-color: v.$white;
+
+    a {
+      padding-right: 0
+    }
+
     @media only screen and (max-width: 767px) {
       border-top: 1px solid v.$gray-10;
     }
@@ -247,14 +269,14 @@ header {
 
     .chevron-container {
       margin: 0;
-      margin-right: 10px;
+      margin-right: f.rem(10px);
 
       @include breakpoint(xs) {
         margin-right: 0;
       }
 
       @include breakpoint(sm) {
-        margin-right: 10px;
+        margin-right: f.rem(10px);
       }
     }
 
@@ -275,7 +297,7 @@ header {
         color: $color-gray-dark;
         font-size: 1rem;
         font-weight: 400;
-        margin-top: 5px;
+        margin-top: f.rem(5px);
       }
 
       p {
@@ -290,7 +312,7 @@ header {
       margin-top: 0;
 
       @include breakpoint(xs) {
-        margin-top: 20px;
+        margin-top: f.rem(20px);
       }
 
       @include breakpoint(sm) {
@@ -337,11 +359,11 @@ header {
     }
 
     @include breakpoint(sm) {
-      padding-right: 6px;
+      padding-right: f.rem(6px);
     }
 
     @include breakpoint(md) {
-      padding-right: 9px;
+      padding-right: f.rem(9px);
     }
 
     @include breakpoint(lg) {
@@ -357,7 +379,7 @@ header {
   .nav-description {
     color: v.$gray-70;
     font-weight: $rubik-light;
-    margin-top: 5px;
+    margin-top: f.rem(5px);
 
     @include breakpoint(xs) {
       margin-top: 0;
@@ -393,7 +415,7 @@ header {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-bottom: 10px;
+      margin-bottom: f.rem(10px);
     }
 
     .sublink a {
@@ -431,7 +453,7 @@ header {
 // mobile top nav - mips dropdown
 .navigation-menu.navigation-new-style {
   #nav-section-MIPS {
-    padding: 24px;
+    padding: f.rem(24px);
 
     .nav-column:last-child {
       .submenu-section-mips-mobile:last-child {
@@ -466,11 +488,11 @@ header {
     margin: 0;
 
     .accordion {
-      padding: 12px 5px 12px 30px;
+      padding: f.rem(12px) f.rem(5px) f.rem(12px) f.rem(30px);
       background-color: v.$gray-02;
 
       .accordion-left-title {
-        font-size: 14px;
+        font-size: f.rem(14px);
       }
 
       .chevron-container {
@@ -487,7 +509,7 @@ header {
     .accordion-content {
       .accordion-text {
         padding: 0;
-        margin-bottom: 10px;
+        margin-bottom: f.rem(10px);
 
         a {
           display: inline-block;
@@ -495,7 +517,7 @@ header {
           font-weight: 300;
           line-height: 1.4;
           text-decoration: none;
-          margin-bottom: 10px;
+          margin-bottom: f.rem(10px);
         }
 
         .sublink a {
@@ -547,7 +569,7 @@ header {
 .menu-dropdown-toggle {
   background-color: transparent;
   border: none;
-  padding: 20px 16px;
+  padding: f.rem(20px) f.rem(16px);
   position: relative;
   text-align: left;
   width: 100%;
@@ -572,7 +594,7 @@ header {
   @include breakpoint(md) {
     height: 106px;
     max-width: 132px;
-    padding: 0 10px;
+    padding: 0 f.rem(10px);
     &::after {
       content: '';
       background: $color-gray-very-light;
@@ -586,11 +608,11 @@ header {
   @media (min-width: 1080px) {
     height: 108px;
     max-width: 158px;
-    padding: 0 15px;
+    padding: 0 f.rem(15px);
   }
 }
 .menu-link {
-  padding: 20px 16px;
+  padding: f.rem(20px) f.rem(16px);
   width: 100%;
   display: inline-block;
   text-decoration: none;
@@ -599,11 +621,11 @@ header {
     text-decoration: none;
   }
   @include breakpoint(sm) {
-    margin-top: -2px;
+    margin-top: f.rem(-2px);
     align-items: center;
     display: grid;
     height: 103px;
-    padding: 0 14px;
+    padding: 0 f.rem(14px);
     _:-ms-fullscreen,
     :root & {
       display: flex;
@@ -615,11 +637,11 @@ header {
     align-content: center;
     height: 106px;
     justify-content: center;
-    padding: 0 10px;
+    padding: 0 f.rem(10px);
   }
   @media (min-width: 1080px) {
     max-width: 158px;
-    padding: 0 15px;
+    padding: 0 f.rem(15px);
   }
 }
 .dropdown-title {
@@ -627,14 +649,14 @@ header {
   display: inline-block;
   font-size: 1.25rem;
   line-height: 1.2;
-  margin-bottom: 6px;
-  margin-right: 8px;
+  margin-bottom: f.rem(6px);
+  margin-right: f.rem(8px);
   position: relative;
   &::after {
     content: '\f078';
     display: inline-block;
     font-family: 'FontAwesome';
-    font-size: 10px;
+    font-size: f.rem(10px);
     transform: translateX(0.5rem) translateY(-0.25rem);
     transition: 0.25s;
   }
@@ -642,8 +664,8 @@ header {
     color: $color-navy;
     font-size: 1rem;
     margin: 0;
-    padding-left: 14px;
-    padding-right: 22px;
+    padding-left: f.rem(14px);
+    padding-right: f.rem(22px);
     &::before {
       content: '';
       border-right: 1px solid $color-gray-very-light;
@@ -663,15 +685,15 @@ header {
   }
   @media (min-width: 1080px) {
     font-size: 1.25rem;
-    margin-right: 8px;
+    margin-right: f.rem(8px);
   }
 }
 .nav-title {
   color: $color-white;
   display: inline-block;
   font-size: 1.25rem;
-  margin-bottom: 6px;
-  margin-right: 8px;
+  margin-bottom: f.rem(6px);
+  margin-right: f.rem(8px);
   line-height: 1.2;
   @include breakpoint(sm) {
     color: $color-navy;
@@ -719,12 +741,12 @@ header {
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.4;
-  margin: 0 0 18px;
+  margin: 0 0 f.rem(18px);
   padding: 0;
   text-transform: uppercase;
 }
 .nav-section {
-  padding: 24px;
+  padding: f.rem(24px);
   box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
   & ul {
     list-style: none;
@@ -733,7 +755,7 @@ header {
   }
 
   ul + ul {
-    margin-top: 26px;
+    margin-top: f.rem(26px);
   }
 
   .btn {
@@ -743,7 +765,7 @@ header {
   .sublink::before {
     content: '\2022';
     font-weight: 500;
-    padding: 0 12px;
+    padding: 0 f.rem(12px);
   }
 
   $menu-spacing: 18px;
@@ -780,7 +802,7 @@ header {
       :root & {
         .nav-column {
           flex-basis: calc((100% / 2) - 15px);
-          margin-right: 30px;
+          margin-right: f.rem(30px);
         }
         .nav-column:last-of-type {
           margin-right: 0;
@@ -801,7 +823,7 @@ header {
       :root & {
         .nav-column {
           flex-basis: calc((100% / 3) - 15px);
-          margin-right: 30px;
+          margin-right: f.rem(30px);
         }
         .nav-column:last-of-type {
           margin-right: 0;
@@ -821,7 +843,7 @@ header {
       :root & {
         .nav-column {
           flex-basis: calc((100% / 4) - 15px);
-          margin-right: 30px;
+          margin-right: f.rem(30px);
         }
         .nav-column:last-of-type {
           margin-right: 0;
@@ -848,7 +870,7 @@ header {
     font-weight: 300;
     line-height: 1.4;
     text-decoration: none;
-    margin-bottom: 10px;
+    margin-bottom: f.rem(10px);
 
     &:hover:not(.btn),
     &:focus:not(.btn) {
@@ -872,7 +894,7 @@ header {
   }
 
   @include breakpoint(xs) {
-    margin-top: 26px;
+    margin-top: f.rem(26px);
   }
 }
 

package/styles/qppds/components/_search.scss

@@ -118,7 +118,7 @@
     .qpp-c-search__submit {
       position: relative;
       border-radius: 0 3px 3px 0;
-      margin-left: -1px;
+      margin-left: f.rem(-1px);
       color: v.$blue-60;
 
       &:focus {
@@ -161,3 +161,62 @@
     margin-right: 0;
   }
 }
+
+.qpp-c-search--header-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: f.rem(20px);
+  margin-right: 0;
+
+  .qpp-c-search--header-container__block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 435px;
+    width: 100%;
+    padding: 0 f.rem(30px);
+  }
+
+  .qpp-c-search--header-container__title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 84px;
+    width: 100%;
+    background-color: v.$blue-05;
+    color: v.$black;
+    font-size: v.$font-size-12;
+    line-height: f.rem(14px);
+    margin-bottom: f.rem(10px);
+    padding: f.rem(3px) 0px;
+    border-radius: 1.5px;
+  }
+
+  .survey-link {
+    color: v.$blue-70;
+    font-size: v.$font-size-12;
+  }
+
+  @include m.media-breakpoint(sm) {
+    align-items: flex-end;
+    margin-right: f.rem(40px);
+
+    .qpp-c-search--header-container__block {
+      flex-direction: row;
+      align-items: normal;
+      padding: 0 0;
+    }
+
+    .qpp-c-search--header-container__title {
+      margin-bottom: 0;
+      border-radius: 3px 0px 0px 3px;
+    }
+  }
+
+  @media (min-width: 860px) {
+    .qpp-c-search--header-container__block {
+      max-width: 505px;
+    }
+  }
+}