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

UI updates

Browse source
This commit is contained in:
Katie Kroell 2026-01-13 15:27:01 -05:00
parent 488b277e88
commit 3e179e4637
4 changed files with 48 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<buttonQuestion <buttonQuestion
ref="policyVehiclesQuestion" ref="policyVehiclesQuestion"
v-model="selectedVehicleVin" v-model="selectedVehicleVin"
groupName="policyVehiclesQuestionOption" groupName="policyVehiclesQuestionOption"
buttonTypeString="listButton" buttonTypeString="listButton"
isOverflowScrollable isOverflowScrollable
:answers="answers" :answers="answers"
isRequired isRequired
:validationRules="validationRules" /> :validationRules="validationRules" />
</template> </template>
<script> <script>
import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import buttonQuestion from '@/digital-components/button-question/button-question.vue';

2
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -122,7 +122,7 @@ export default {
vehicle: v, vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`, Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin, Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}` SubText: `VIN: ${vinStart}${vinEnd}`
}; };
}) ?? []; }) ?? [];
return mappedData; return mappedData;

41
src/styles/common-validation-styles.scss
View file

@ -29,6 +29,7 @@ html {
&.list-card { &.list-card {
border: 1px solid $red; border: 1px solid $red;
border-radius: 0.5rem;
} }
&.ui-radio { &.ui-radio {
@ -49,8 +50,7 @@ html {
// END HOVER // END HOVER
&.list-button, &.list-button {
&.list-card {
color: $red; color: $red;
input[type="checkbox"]:focus+label, input[type="checkbox"]:focus+label,
@ -67,6 +67,23 @@ html {
} }
} }
&.list-card {
color: $red;
input[type="checkbox"]:focus+label,
input[type="radio"]:focus+label {
box-shadow: 0 0 0 2.5px $red;
}
input[type="checkbox"]:checked+label {
box-shadow: 0 0 0 1px $red;
}
&:hover {
border-radius: 0.5rem;
}
}
&.list-button-horizontal { &.list-button-horizontal {
color: $red; color: $red;
@ -142,6 +159,7 @@ html {
border: 1px solid $success; border: 1px solid $success;
position: relative; position: relative;
z-index: 4; z-index: 4;
border-radius: 60px;
.button-content { .button-content {
border: none; border: none;
@ -159,6 +177,7 @@ html {
&.list-card { &.list-card {
border: 1px solid $success; border: 1px solid $success;
border-radius: 0.5rem;
} }
&.ui-radio { &.ui-radio {
@ -179,7 +198,23 @@ html {
// END HOVER // END HOVER
&.list-button, &.list-button {
color: $success;
input[type="checkbox"]:focus+label,
input[type="radio"]:focus+label {
box-shadow: 0 0 0 2.5px $success;
}
input[type="checkbox"]:checked+label {
box-shadow: 0 0 0 1px $success;
}
&:hover {
border-radius: 60px;
}
}
&.list-card { &.list-card {
color: $success; color: $success;

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

@ -107,6 +107,7 @@ $heritage-checked-border-color: #0070d1;
span { span {
&.small { &.small {
color: $darker-gray; color: $darker-gray;
font-size: 1rem;
} }
} }
} }