jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-918 Edit hover styling

Browse source
This commit is contained in:
Katie 2022-11-03 09:33:37 -04:00
parent 99fa571ae3
commit af80ae6f22
9 changed files with 29 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -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>

5
src/router/index.js
View file

@ -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);
}

13
src/styles/common-error-styles.scss
View file

@ -37,11 +37,14 @@ html {
}
&.list-button-horizontal {
color: $red;
label {
border: 1px solid $red;
&:hover {
box-shadow: 0px 0px 0px 4px $red-200;
}
// label {
// border: 1px solid $red;
// &:hover {
// @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 {

4
src/styles/mixins/customMixins.scss
View file

@ -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;
}

7
src/styles/shared-input-button-styles.scss Normal file
View file

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

14
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -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;
}

12
src/ux-components/list-button/list-button.vue
View file

@ -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>

13
src/ux-components/list-card/list-card.vue
View file

@ -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;

2
src/ux-components/radio/radio.vue
View file

@ -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">