Merge pull request #1012 from Safelite/feature/richardson/INSR-7762

policy endorsement updates

src/layouts/policy-endorsements/policy-endorsements.vue

@@ -15,7 +15,7 @@
                     <siteSubHeader
                         ref="siteSubHeader"
                         cmsWidgetName="SiteSubHeaderWidget"
-                        class="mt-4" />
+                        class="site-sub-header-container" />
                     <buttonQuestion
                         v-if="educatorEndorsement"
                         ref="schoolPropertyQuestion"
@@ -192,17 +192,147 @@ export default {
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
+
+        .windshield-chip-count-question {
+            :deep(.col:first-of-type) {
+                .list-button-horizontal {
+                    border-bottom-left-radius: $border-radius-list-button;
+                    border-top-left-radius: $border-radius-list-button;
+
+                    &:hover {
+                        box-shadow: none;
+                    }
+
+                    .list-button-horizontal-content {
+                        border-bottom-left-radius: $border-radius-list-button;
+                        border-top-left-radius: $border-radius-list-button;
+                        border-right-width: 0;
+
+                        span {
+                            font-size: 1rem;
+                            font-weight: 400;
+                            line-height: 1.5rem;
+                            color: #525656;
+                        }
+                    }
+
+                    &.selected {
+                        .list-button-horizontal-content {
+                            span {
+                                color: #000;
+                                font-weight: 600;
+                            }
+                        }
+                    }
+                }
+            }
+
+            :deep(.col:last-of-type) {
+                .list-button-horizontal {
+                    border-bottom-right-radius: $border-radius-list-button;
+                    border-top-right-radius: $border-radius-list-button;
+
+                    &:hover {
+                        box-shadow: none;
+                    }
+
+                    .list-button-horizontal-content {
+                        border-bottom-right-radius: $border-radius-list-button;
+                        border-top-right-radius: $border-radius-list-button;
+
+                        span {
+                            font-size: 1rem;
+                            font-weight: 400;
+                            line-height: 1.5rem;
+                            color: #525656;
+                        }
+                    }
+
+                    &.selected {
+                        .list-button-horizontal-content {
+                            span {
+                                font-weight: 600;
+                                color: #000;
+                            }
+                        }
+                    }
+                }
+            }
+
+            :deep(.list-button-horizontal) {
+                .list-button-horizontal-content {
+                    padding: 0.625rem;
+                    border: 1px solid #b3b4b5;
+                    height: 2.875rem;
+                }
+
+                &.selected {
+                    .list-button-horizontal-content {
+                        border: 1px solid #0070d1;
+                        box-shadow: none;
+                    }
+                }
+
+                input[type="radio"] {
+                    &:focus + .list-button-horizontal-content {
+                        box-shadow: none;
+                        border: 2.5px solid #0070d1;
+                        outline: none;
+                    }
+                }
+
+                &.has-error {
+                    border: none;
+                    .list-button-horizontal-content {
+                        border: 1px solid #db0020;
+                    }
+
+                    input[type="radio"] {
+                        &:focus + .list-button-horizontal-content {
+                            border: 2.5px solid #db0020;
+                        }
+                    }
+                }
+            }
+
+            :deep(fieldset) {
+                box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
+                border-radius: $border-radius-list-button;
+            }
+        }
+
+        :deep(.question-text) {
+            line-height: 1.5rem;
+            margin-bottom: .3125rem;
+            & > span {
+                text-align: left;
+                line-height: 1.5rem;
+                font-weight: 600;
+            }
+        }
     }
 }
 
 :deep(.subheader-primary) {
-    margin-bottom: map-get($spacers, 2);
+    line-height: 1.5rem;
+
+    h5 {
+        line-height: 1.5rem;
+        span {
+            font-size: 1rem;
+            font-weight: 500;
+            line-height: 1.5rem;
+        }
+    }
 }
 
 :deep(.subheader-secondary) {
+    line-height: 1.5rem;
+    margin-top: 0.625rem;
     p {
-        font-size: $h6-font-size;
+        font-size: 1rem;
-        line-height: map-get($spacers, 5);
+        font-weight: 400;
+        line-height: 1.5rem;
     }
 }
 
@@ -213,18 +343,6 @@ export default {
     justify-content: left !important;
     padding-left: 0;
     padding-right: 0;
-    margin-bottom: map-get($spacers, 5);
 }
 
-:deep(.question-text) {
-    & > span {
-        text-align: left;
-        line-height: map-get($spacers, 5);
-    }
-    margin-bottom: map-get($spacers, 2);
-}
-
-:deep(div.question-text.d-flex) {
-    margin-top: map-get($spacers, 4);
-}
 </style>

src/styles/common-styles.scss

@@ -179,6 +179,10 @@ body {
             }
         }
     }
+
+    .site-sub-header-container {
+        margin-top: 1.25rem;
+    }
 }
 
 :root {