Merge pull request #248 from Safelite/CSR-341-qa-fixes

CSR-341 fix colors and font sizes per QA.

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

@@ -164,6 +164,9 @@ export default {
     + p {
       display: none;
     }
+    span {
+      font-size: .875rem;
+    }
   }
   &:first-of-type {
     label {

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

@@ -126,7 +126,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .list-group {
   &.list-button {
     input[type="radio"],
@@ -147,9 +147,14 @@ export default {
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
-      &:checked + label p:first-child {
+      &:checked + label p,
+      &:checked + label span {
         font-weight: 500;
       }
+      &:checked + label span:nth-child(2) {
+        font-weight: 400;
+        color: $gray-600;
+      }
     }
   }
   label {
@@ -161,6 +166,13 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
 
+    span {
+      &.small {
+        font-size: .75rem;
+        color: $gray-550;
+      }
+    }
+
     &:hover {
       @include media-breakpoint-up(sm) {
         box-shadow: 0 0 0 4px $blue-300;

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

@@ -177,6 +177,7 @@ export default {
       }
       .sub-copy {
         color: $gray-600;
+        font-weight: 400;
       }
     }
     + label::before {
@@ -247,6 +248,16 @@ export default {
         margin: -0.25rem 0 0 0;
         left: 0.875rem;
       }
+      &:checked + label {
+        p {
+          color: $black;
+          font-weight: 500;
+        }
+        .sub-copy {
+          color: $gray-600;
+          font-weight: 400;
+        }
+      }
       + label {
         min-height: 48px;
         color: $gray-600;
@@ -254,6 +265,7 @@ export default {
           margin-bottom: 0;
         }
         p {
+          color: $gray-600;
           text-align: left;
           &.sub-copy {
             color: $gray-550;