CSR-918 Edit hover styling

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/router/index.js

@@ -289,6 +289,11 @@ function navigateToUrl(url, optionalQuery = {}) {
         externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
     }
 
+    externalUrl.searchParams.append(
+        "experiments",
+        "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true"
+    );
+
     window.location.assign(externalUrl);
 }
 

src/styles/common-error-styles.scss

@@ -37,11 +37,14 @@ html {
         }
         &.list-button-horizontal {
             color: $red;
-            label {
+            // label {
-                border: 1px solid $red;
+            //     border: 1px solid $red;
-                &:hover {
+            //     &:hover {
-                    box-shadow: 0px 0px 0px 4px $red-200;
+            //         @include box-shadow-lg-hover($red-200);
-                }
+            //     }
+            // }
+            &:hover {
+                @include box-shadow-lg-hover($red-200);
             }
             input[type="checkbox"]:focus + label,
             input[type="radio"]:focus + label {

src/styles/mixins/customMixins.scss

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

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

@@ -0,0 +1,7 @@
+.base-input-button {
+    &:hover {
+        cursor: pointer;
+        @include box-shadow-lg-hover($blue-300);
+        border: 1px solid transparent;
+    }
+}

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',
             { 'radio-fancy': isCashOrInsurance },
         ]"
         v-model="selectedValue">
@@ -86,18 +86,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">