Merge pull request #2374 from Safelite/CASH-404-desktop-update

CASH-404 desktop updates

src/digital-components/dropdown-question/dropdown-question.vue

@@ -142,6 +142,9 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
+        @include media-breakpoint-up(md) {
+            min-height: 3.5rem;
+        }
         &:focus,
         &:focus-visible {
             box-shadow: 0 0 0 2.5px $blue;

src/experiment-components/service-package-radio.vue

@@ -169,10 +169,10 @@ export default {
             display: flex;
             flex-direction: column;
             &:first-child {
-                margin: 1rem 0.5rem 0 0;
+                margin: 1rem 1rem 0 0;
             }
             &:last-child {
-                margin: 1rem 0 0 0.5rem;
+                margin: 1rem 0 0 1rem;
             }
         }
 

src/fmg-components/funnel-sub-header/funnel-sub-header.vue

@@ -89,6 +89,7 @@ p.small {
 }
 .sub-text {
     margin: 0;
+    @include responsive-heading-md(0.875rem, 1rem);
 }
 
 .justify-content-start {

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -148,6 +148,9 @@ export default {
         margin: 0 auto;
         transition: all 150ms linear;
         background: none;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
 
         &.btn {
             &.btn-secondary {

src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

@@ -164,6 +164,9 @@ export default {
         margin: 0 auto 1.5rem auto;
         transition: all 150ms linear;
         background: none;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
 
         &:hover,
         &:active,
@@ -241,7 +244,10 @@ export default {
             button.btn.skip-button {
                 padding: 0;
                 order: 2;
-                font-size: 1rem;
+                font-size: 0.875rem;
+                @include media-breakpoint-up(md) {
+                    font-size: 1rem;
+                }
             }
             .modal-disclaimer {
                 font-size: 0.75rem;

src/layouts/quote/quote.vue

@@ -57,7 +57,7 @@
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="small mt-6 d-flex justify-content-center"
+                        class="mt-6 d-flex justify-content-center"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"
@@ -533,7 +533,7 @@ export default {
     methods: {
         getColCount() {
             if (this.packageNumber > 2) {
-                return "col-xl-8";
+                return "col-xl-10";
             } else {
                 return "col-xl-6";
             }
@@ -775,7 +775,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;
 
@@ -793,4 +793,7 @@ export default {
 .text-block {
     display: block;
 }
+:deep(.promo-modal-question a) {
+    @include responsive-heading-md(0.875rem, 1rem);
+}
 </style>

src/layouts/schedule/schedule.vue

@@ -744,6 +744,9 @@ export default {
         &:focus {
             outline: 1px solid $blue;
         }
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
     }
 }
 .funnel-sub-header {

src/layouts/service-location/shop-question/shop-question.vue

@@ -271,6 +271,10 @@ export default {
     margin-top: 1rem;
     text-align: center;
 
+    a {
+        @include responsive-heading-md(0.875rem, 1rem);
+    }
+
     .button-question {
         .question-text {
             margin-top: 0.5rem;

src/styles/common-typography-styles.scss

@@ -8,6 +8,7 @@ body {
 
 //Headings
 //add helper fw-bold to any element to get bold style (500)
+
 h1,
 .h1 {
     line-height: 1.325;
@@ -36,6 +37,7 @@ h5,
 .h5 {
     line-height: 1.325;
     font-weight: 400;
+    @include responsive-heading-md(1.25rem, 1.625rem);
 }
 
 h6,

src/styles/mixins/customMixins.scss

@@ -8,3 +8,12 @@
 @mixin box-shadow-hover($color) {
     box-shadow: 0 0 0 4px $color;
 }
+
+//Define heading sizes for medium breakpoints
+@mixin responsive-heading-md($font-size, $md-font-size) {
+    font-size: $font-size;
+
+    @include media-breakpoint-up(md) {
+        font-size: $md-font-size;
+    }
+}

src/styles/ux-variables.scss

@@ -141,7 +141,7 @@ $h1-font-size: $font-size-base * 3;
 $h2-font-size: $font-size-base * 2.625;
 $h3-font-size: $font-size-base * 2;
 $h4-font-size: $font-size-base * 1.625;
-$h5-font-size: $font-size-base * 1.25;
+//$h5-font-size: $font-size-base * 1.25;// Font size set in customMixins.scss
 $h6-font-size: $font-size-base * 0.875;
 
 //Border Radius

src/ux-components/list-button/list-button.vue

@@ -5,7 +5,7 @@
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
-            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
             <span class="m-0" :class="textPosition">
                 {{ buttonLabel }}
             </span>

src/ux-components/text-link/text-link.vue

@@ -80,10 +80,14 @@ a {
     }
     &.navigation-link,
     &.new-window-link {
+        font-size: 0.875rem;
         color: $black;
         line-height: 26px;
         white-space: nowrap;
         align-items: center;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
     }
     &.new-window-link {
         margin-bottom: 1.5rem;