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

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

Browse source 
Defect/csr 918
This commit is contained in:
katieoh-safelite 2022-11-04 14:30:25 -04:00 committed by GitHub
commit 2041b3f17d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 46 additions and 57 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>

2
src/common-components/base-input-button/base-input-button.vue
View file

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

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

@ -1,15 +1,33 @@
html {
.has-error {
// START HOVER
&.list-button-horizontal,
&.list-button,
&.list-card,
&.list-button-horizontal {
&.list-card {
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;

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-hover($color) {
box-shadow: 0 0 0 4px $color;
}

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

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

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',
{ 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;
}

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;

4
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">
@ -64,7 +64,7 @@ export default {
}
&:hover {
.form-check-input {
.form-check-input:not(:checked) {
box-shadow: 0 0 0 4px $blue-300;
}
}