Update styles/layout for service-location parity

- Updated subheader on service-location
- Update list-button styles so that inshop/mobile buttons match heritage

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

@@ -329,7 +329,7 @@ export default {
     }
 
     .question-text {
-        margin-bottom: 1rem;
+        margin-bottom: .625rem;
         font-size: 1rem;
         line-height: 1.625rem;
 

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -1,24 +1,23 @@
 <template>
-  <transition
+    <transition
-      name="fade"
+        name="fade"
-      mode="out-in">
+        mode="out-in">
-      <div
+        <div
-        v-if="isDisplayed"
+            v-if="isDisplayed"
-        class="appointment-type-question"
+            class="appointment-type-question"
-        aria-live="polite">
+            aria-live="polite">
-          <buttonQuestion
+            <buttonQuestion
-              ref="buttonQuestion"
+                ref="buttonQuestion"
-              v-model="selectedValues"
+                v-model="selectedValues"
-              customButtonQuestionId="appointmentTypeQuestion"
+                customButtonQuestionId="appointmentTypeQuestion"
-              :questionText="questionText"
+                :questionText="questionText"
-              :answers="answersToDisplay"
+                :answers="answersToDisplay"
-              :groupName="groupName"
+                :groupName="groupName"
-              buttonTypeString="listCard"
+                :suppressError="suppressError"
-              :suppressError="suppressError"
+                :validationRules="validationRules"
-              :validationRules="validationRules"
+                isRequired />
-              isRequired />
+        </div>
-      </div>
+    </transition>
-  </transition>
 </template>
 
 <script>
@@ -126,10 +125,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.button-question) {
+:deep(.question-text) {
-  .list-card img {
+    font-weight: 600;
-    height: auto;
-    width: 3.417rem;
-  }
 }
 </style>

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

@@ -12,8 +12,8 @@
                 <div class="service-location-container iss-heritage-content-container-width">
                     <siteSubHeader
                         cmsWidgetName="SiteSubHeaderWidget"
-                        class="mt-4" />
+                        class="subheader" />
-                    <serviceZipModalQuestion
+                    <!-- <serviceZipModalQuestion
                         ref="serviceZipCodeQuestion"
                         v-model="serviceZipCodeQuestion"
                         modalWidgetName="ServiceZipModalWidget"
@@ -21,7 +21,7 @@
                         @updatedServiceability="setServiceabilityDetails"
                         @updatedContainsMilitaryBase="
                             setContainsMilitaryBase
-                        " />
+                        " /> -->
                     <alert
                         v-if="displayMilitaryZipAlert"
                         ref="alertMilitaryBaseZip"
@@ -542,7 +542,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 $page-side-padding: 1.5rem;
 
 .iss-heritage-container-width {
@@ -554,6 +554,12 @@ $page-side-padding: 1.5rem;
     }
 }
 
+.service-location-container {
+    .subheader {
+        margin: 1.25rem 0;
+    }
+}
+
 .question-text {
     span {
         line-height: 1.5rem;
@@ -582,24 +588,6 @@ $page-side-padding: 1.5rem;
         padding-left: 0rem !important;
     }
 }
-.appointment-type-question {
-    .row {
-        margin-top: 0;
-        .col-12 {
-            margin: 0 0 .5rem 0;
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-    }
-    .question-text {
-        margin: 0;
-        span {
-            padding: 1rem 0;
-            text-align: center;
-        }
-    }
-}
 .service-location-button-question {
     .question-text {
         margin-top: 1.5rem;

src/styles/shared-input-button-styles.scss

@@ -1,15 +1,5 @@
 .base-input-button {
-    &:not(.has-error):hover {
+    &:not(:disabled):hover {
         cursor: pointer;
-
-        &.list-button,
-        &.list-button-horizontal,
-        &.list-card {
-            &:not(.selected) {
-                position: relative;
-                z-index: 5;
-                @include box-shadow-hover($blue-300);
-            }
-        }
     }
 }

src/styles/ux-variables.scss

@@ -153,6 +153,7 @@ $font-weight-bolder: bolder;
 $border-radius: 0.25rem;
 $border-radius-sm: 0.2rem;
 $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
+$border-radius-xl: 1.375rem;
 $border-radius-pill: 50rem;
 
 //Progress Bar Styling

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

@@ -2,7 +2,7 @@
   <baseInputButton
       v-bind="$props"
       v-model="selectedValue"
-      buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
+      buttonWrapperClasses="list-group base-input-button list-button d-flex flex-column w-100">
       <div
           :aria-label="buttonLabel"
           class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@@ -72,24 +72,20 @@ export default {
 }
 .list-button {
   outline: none;
+  border-radius: $border-radius-xl;
   input[type="radio"],
   input[type="checkbox"] {
       position: static; //override bootstrap
 
-      &:focus-visible + .list-button-content {
+      &:focus-within + .list-button-content {
-          box-shadow: 0 0 0 2.5px $blue;
+          border: $border-input-focus;
-      }
-      &:focus + .list-button-content {
-          box-shadow: 0 0 0 2.5px $blue;
       }
+
       &:checked + .list-button-content {
           color: $black;
           font-weight: 500;
-          background: $blue-100;
+          background: #e7f1f6;
-          box-shadow: 0 0 0 1px $blue;
+          border-color: #0070d1;
-      }
-      &:checked:focus + .list-button-content {
-          box-shadow: 0 0 0 2.5px $blue;
       }
       &:checked + .list-button-content p,
       &:checked + .list-button-content span {
@@ -106,10 +102,13 @@ export default {
   position: relative;
   background: $white;
   transition: all 150ms linear;
-  border-radius: $border-radius-lg;
+  border-radius: $border-radius-xl;
-  border: 1px solid $gray-500;
+  border: 1px solid $gray-350;
   width: 100%;
   outline: none;
+  box-shadow: $box-shadow-input;
+  height: 2.8125rem;
+  margin-bottom: .625rem;
 
   span {
       &.small {