Merge pull request #801 from Safelite/defect/CSR-918

Defect/csr 918

src/App.vue

@@ -23,4 +23,5 @@ export default {
 @import "@/styles/common-typography-styles.scss";
 @import "@/styles/common-error-styles.scss";
 @import "@/styles/common-animations.scss";
+@import "@/styles/shared-input-button-styles.scss";
 </style>

src/common-components/base-input-button/base-input-button.vue

@@ -1,6 +1,6 @@
 <template>
     <label
-        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
+        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0, selected: isChecked }]"
         :for="buttonId"
         @focusin="handleFocus"
         @focusout="handleBlur"

src/styles/common-error-styles.scss

@@ -1,15 +1,33 @@
 html {
     .has-error {
+        // START HOVER
+        &.list-button-horizontal,
         &.list-button,
-        &.list-card,
+        &.list-card {
-        &.list-button-horizontal {
             border: 1px solid $red;
+            position: relative;
+            z-index: 4;
 
             .button-content {
                 border: none;
             }
+
+            &:hover {
+                @include box-shadow-hover($red-200);
+                z-index: 5;
+            }
         }
 
+        &.ui-radio {
+            &:hover {
+                input[type="radio"],
+                input[type="checkbox"] {
+                    @include box-shadow-hover($red-200);
+                }
+            }
+        }
+        // END HOVER
+
         &.list-button,
         &.list-card {
             color: $red;
@@ -22,27 +40,11 @@ html {
                 box-shadow: 0 0 0 1px $red;
             }
             &:hover {
-                box-shadow: 0px 0px 0px 4px $red-200;
                 border-radius: 0.5rem;
             }
-            label {
-                border: 1px solid $red;
-                border-radius: 0.5rem;
-            }
-            label:hover {
-                box-shadow: 0px 0px 0px 4px $red-200;
-                border-radius: 10px;
-                border: 1px solid $red;
-            }
         }
         &.list-button-horizontal {
             color: $red;
-            label {
-                border: 1px solid $red;
-                &:hover {
-                    box-shadow: 0px 0px 0px 4px $red-200;
-                }
-            }
             input[type="checkbox"]:focus + label,
             input[type="radio"]:focus + label {
                 box-shadow: 0 0 1px $red;

src/styles/mixins/customMixins.scss

@@ -4,3 +4,7 @@
 @mixin blue-gradient {
     background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
 }
+
+@mixin box-shadow-hover($color) {
+    box-shadow: 0 0 0 4px $color;
+}

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

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

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

@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         :buttonWrapperClasses="[
-            'list-group list-button-horizontal d-flex flex-column w-100',
+            'list-group list-button-horizontal d-flex flex-column w-100 base-input-button',
             { strong: isStrongStyling },
         ]"
         v-model="selectedValue">
@@ -88,18 +88,6 @@ export default {
         width: 100%;
         color: $gray-600;
 
-        &:hover {
-            @include media-breakpoint-up(sm) {
-                box-shadow: 0 0 0 4px $blue-300;
-                cursor: pointer;
-                z-index: 4 !important;
-            }
-        }
-
-        + p {
-            display: none;
-        }
-
         span {
             font-size: 0.875rem;
         }

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

@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
@@ -111,16 +111,6 @@ export default {
                 color: $gray-550;
             }
         }
-
-        &:hover {
-            @include media-breakpoint-up(sm) {
-                box-shadow: 0 0 0 4px $blue-300;
-            }
-            cursor: pointer;
-        }
-        + p {
-            display: none;
-        }
     }
 }
 </style>

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

@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         :buttonWrapperClasses="[
-            'list-card w-100 rounded-3 d-flex align-items-center h-100',
+            'list-card w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
             { horizontal: isWide },
         ]"
         v-model="selectedValue">
@@ -88,13 +88,6 @@ export default {
         max-width: 100%;
     }
 
-    &:hover {
-        @include media-breakpoint-up(sm) {
-            box-shadow: 0px 0px 0px 4px $blue-300;
-            border: 1px solid transparent;
-        }
-    }
-
     input[type="checkbox"],
     input[type="radio"] {
         position: absolute;
@@ -104,10 +97,6 @@ export default {
             display: block;
             position: relative;
 
-            &:hover {
-                cursor: pointer;
-            }
-
             p {
                 color: $gray-600;
                 text-align: center;

src/ux-components/radio/radio.vue

@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="ui-radio form-check"
+        buttonWrapperClasses="ui-radio form-check base-input-button"
         inputClasses="form-check-input"
         v-model="selectedValue">
         <div class="d-flex align-items-start form-check-label">
@@ -64,7 +64,7 @@ export default {
     }
 
     &:hover {
-        .form-check-input {
+        .form-check-input:not(:checked) {
             box-shadow: 0 0 0 4px $blue-300;
         }
     }