Merge branch 'develop' into feature/SSR-1371
This commit is contained in:
Sujatha Anishetty
commit
2733e98f94
5 changed files with 326 additions and 292 deletions
|
|
@ -50,7 +50,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
servicePackageRadio,
|
||||
selectedPackageName: packageNames.TIER_ONE
|
||||
selectedPackageName: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -64,10 +64,6 @@ export default {
|
|||
servicePackageAnswers() {
|
||||
if (!this.cmsWidgetName) return [];
|
||||
const cmsAnswersContent = [];
|
||||
cmsAnswersContent.push({
|
||||
Name: 'TierOne',
|
||||
cmsWidgetName: 'EconomyServicePackage'
|
||||
});
|
||||
if (this.shouldDisplayTierTwoPackage) {
|
||||
cmsAnswersContent.push({
|
||||
Name: 'TierTwo',
|
||||
|
|
@ -78,6 +74,10 @@ export default {
|
|||
Name: 'TierThree',
|
||||
cmsWidgetName: 'PremiumServicePackage'
|
||||
});
|
||||
cmsAnswersContent.push({
|
||||
Name: 'TierOne',
|
||||
cmsWidgetName: 'EconomyServicePackage'
|
||||
});
|
||||
// if cms content has not yet loaded, skip
|
||||
if (!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
|
||||
|| this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') === '') {
|
||||
|
|
|
|||
|
|
@ -7,17 +7,20 @@
|
|||
:class="[buttonLabelSubCopy ? 'has-subheader' : '']"
|
||||
for="testradio">
|
||||
<div class="package-specs">
|
||||
<p class="m-0">
|
||||
<span v-html="buttonLabel"></span>
|
||||
<span
|
||||
class="pricing-info"
|
||||
v-html="buttonAuxiliaryCopy"></span>
|
||||
</p>
|
||||
<p
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="sub-label m-0"
|
||||
v-html="buttonLabelSubCopy"></p>
|
||||
<div>
|
||||
<p class="m-0">
|
||||
<span v-html="buttonLabel"></span>
|
||||
<span
|
||||
class="pricing-info"
|
||||
v-html="buttonAuxiliaryCopy"></span>
|
||||
</p>
|
||||
<p
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="sub-label m-0"
|
||||
v-html="buttonLabelSubCopy">
|
||||
</p>
|
||||
</div>
|
||||
<div class="hide-when-closed">
|
||||
<ul>
|
||||
<li
|
||||
v-for="listItem in arrayOfListItemsFromBodyText"
|
||||
|
|
@ -139,9 +142,13 @@ export default {
|
|||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 60px;
|
||||
max-height: 100px;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
&.has-subheader {
|
||||
min-height: 80px;
|
||||
min-height: 86px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -222,19 +229,21 @@ export default {
|
|||
|
||||
.package-footer {
|
||||
color: $red;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: $font-weight-bold; // 600 in fmg
|
||||
margin-top: 0.5rem; // not in fmg
|
||||
}
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 1000px;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
max-height: 0;
|
||||
transition: all 1s ease;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
}
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-weight: $font-weight-bold; // 600 in fmg
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
|
@ -253,16 +262,16 @@ export default {
|
|||
}
|
||||
|
||||
ul {
|
||||
margin: 1rem 0 0 -.6rem;
|
||||
margin: 1rem 0 0 -.6rem; // .9375rem in fmg
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.714;
|
||||
line-height: 1.5rem;
|
||||
|
||||
a {
|
||||
line-height: 1.714;
|
||||
line-height: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -278,6 +287,14 @@ export default {
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-when-closed {
|
||||
display: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1375,90 +1375,83 @@ export const useMainStore = defineStore({
|
|||
|
||||
async loadSession(duplicate) {
|
||||
const { order, issConfig } = this;
|
||||
try {
|
||||
const response = await globalMethods.callHttpClient({
|
||||
method: endpoints.LoadSession.method,
|
||||
endpoint: endpoints.LoadSession.url,
|
||||
payload: {
|
||||
referralNumber: duplicate.referralNumber,
|
||||
referralDate: duplicate.responseDate,
|
||||
parentAccountNumber: issConfig.parentAccountNumber,
|
||||
referralCorrelationId: duplicate.correlationId
|
||||
const response = await globalMethods.callHttpClient({
|
||||
method: endpoints.LoadSession.method,
|
||||
endpoint: endpoints.LoadSession.url,
|
||||
payload: {
|
||||
referralNumber: duplicate.referralNumber,
|
||||
referralDate: duplicate.responseDate,
|
||||
parentAccountNumber: issConfig.parentAccountNumber,
|
||||
referralCorrelationId: duplicate.correlationId
|
||||
}
|
||||
});
|
||||
const { data } = response;
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isPolicyLookupSuccessful) {
|
||||
order.customer.address.streetAddress = data.customer?.address?.streetAddress;
|
||||
order.customer.address.streetAddress2 = data.customer?.address?.streetAddress2;
|
||||
order.customer.address.city = data.customer?.address?.city;
|
||||
order.customer.address.state = data.customer?.address?.state;
|
||||
order.customer.address.zipCode = data.customer?.address?.zipCode;
|
||||
|
||||
order.contactInfo.firstName = data?.customer?.firstName;
|
||||
order.contactInfo.lastName = data?.customer?.lastName;
|
||||
order.contactInfo.emailAddress = data?.customer?.emailAddress;
|
||||
order.contactInfo.homePhone = data?.customer?.homePhone;
|
||||
order.contactInfo.servicephone = data?.customer?.servicePhone;
|
||||
order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
|
||||
order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
|
||||
|
||||
if (data.insuranceCoverage) {
|
||||
order.insuranceCoverage.coverageType = data?.insuranceCoverage?.coverageType;
|
||||
order.insuranceCoverage.coverageStatus = data?.insuranceCoverage?.coverageStatus;
|
||||
order.insuranceCoverage.claimNumber = data?.insuranceCoverage?.claimNumber;
|
||||
} else if (data?.payment?.insuranceCoverage) {
|
||||
if (data?.payment?.insuranceCoverage?.isVerified) {
|
||||
order.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
|
||||
}
|
||||
});
|
||||
const { data } = response;
|
||||
if (!data) {
|
||||
// TODO how should we handle this case?
|
||||
return response;
|
||||
order.insuranceCoverage.claimNumber = data?.payment?.insuranceCoverage?.claimNumber;
|
||||
}
|
||||
|
||||
if (this.isPolicyLookupSuccessful) {
|
||||
order.customer.address.streetAddress = data.customer?.address?.streetAddress;
|
||||
order.customer.address.streetAddress2 = data.customer?.address?.streetAddress2;
|
||||
order.customer.address.city = data.customer?.address?.city;
|
||||
order.customer.address.state = data.customer?.address?.state;
|
||||
order.customer.address.zipCode = data.customer?.address?.zipCode;
|
||||
|
||||
order.contactInfo.firstName = data?.customer?.firstName;
|
||||
order.contactInfo.lastName = data?.customer?.lastName;
|
||||
order.contactInfo.emailAddress = data?.customer?.emailAddress;
|
||||
order.contactInfo.homePhone = data?.customer?.homePhone;
|
||||
order.contactInfo.servicephone = data?.customer?.servicePhone;
|
||||
order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
|
||||
order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
|
||||
|
||||
if (data.insuranceCoverage) {
|
||||
order.insuranceCoverage.coverageType = data?.insuranceCoverage?.coverageType;
|
||||
order.insuranceCoverage.coverageStatus = data?.insuranceCoverage?.coverageStatus;
|
||||
order.insuranceCoverage.claimNumber = data?.insuranceCoverage?.claimNumber;
|
||||
} else if (data?.payment?.insuranceCoverage) {
|
||||
if (data?.payment?.insuranceCoverage?.isVerified) {
|
||||
order.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
|
||||
}
|
||||
order.insuranceCoverage.claimNumber = data?.payment?.insuranceCoverage?.claimNumber;
|
||||
}
|
||||
|
||||
if (order.policy.vehicles.length !== 0 && data.vehicle?.carId) {
|
||||
order.vehicle.registration.licensePlate = data?.vehicle?.licensePlateNumber;
|
||||
if (data.vehicle.vin) {
|
||||
const vehicle = order.policy.vehicles.find((v) => v.vin === data.vehicle.vin);
|
||||
if (vehicle) {
|
||||
const vehicleResponse = await this.lookupVehicleByVin(vehicle.vin);
|
||||
if (vehicleResponse) {
|
||||
this.updateVehicle({
|
||||
...vehicleResponse.data,
|
||||
policyVehicleId: vehicle.id,
|
||||
vin: vehicle.vin
|
||||
});
|
||||
this.updateVehicleCoverage({
|
||||
noCoverage: noCoverageForSelectedVehicle(vehicle),
|
||||
deductible: deductibleForSelectedVehicle(vehicle),
|
||||
repairWaived: repairWaivedForSelectedVehicle(vehicle),
|
||||
endorsements: endorsementsForSelectedVehicle(vehicle)
|
||||
});
|
||||
}
|
||||
if (order.policy.vehicles.length !== 0 && data.vehicle?.carId) {
|
||||
order.vehicle.registration.licensePlate = data?.vehicle?.licensePlateNumber;
|
||||
if (data.vehicle.vin) {
|
||||
const vehicle = order.policy.vehicles.find((v) => v.vin === data.vehicle.vin);
|
||||
if (vehicle) {
|
||||
const vehicleResponse = await this.lookupVehicleByVin(vehicle.vin);
|
||||
if (vehicleResponse) {
|
||||
this.updateVehicle({
|
||||
...vehicleResponse.data,
|
||||
policyVehicleId: vehicle.id,
|
||||
vin: vehicle.vin
|
||||
});
|
||||
this.updateVehicleCoverage({
|
||||
noCoverage: noCoverageForSelectedVehicle(vehicle),
|
||||
deductible: deductibleForSelectedVehicle(vehicle),
|
||||
repairWaived: repairWaivedForSelectedVehicle(vehicle),
|
||||
endorsements: endorsementsForSelectedVehicle(vehicle)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
order.vehicle.year = data.vehicle.year;
|
||||
order.vehicle.make = data.vehicle.make;
|
||||
order.vehicle.model = data.vehicle.model;
|
||||
order.vehicle.style = data.vehicle.style;
|
||||
}
|
||||
}
|
||||
|
||||
order.referralNumber = data?.referralNumber;
|
||||
order.referralDate = data?.referralDate;
|
||||
order.referralCorrelationId = data?.referralCorrelationId;
|
||||
order.referralSequenceNumber = data?.referralSequenceNumber;
|
||||
order.eon = data?.eon;
|
||||
order.loadedFromDupeCheck = true;
|
||||
order.loadedSessionClearedPreviousData = false;
|
||||
return data;
|
||||
} catch (ex) {
|
||||
// TODO how should we handle this case?
|
||||
throw ex;
|
||||
order.vehicle.year = data.vehicle.year;
|
||||
order.vehicle.make = data.vehicle.make;
|
||||
order.vehicle.model = data.vehicle.model;
|
||||
order.vehicle.style = data.vehicle.style;
|
||||
}
|
||||
}
|
||||
|
||||
order.referralNumber = data?.referralNumber;
|
||||
order.referralDate = data?.referralDate;
|
||||
order.referralCorrelationId = data?.referralCorrelationId;
|
||||
order.referralSequenceNumber = data?.referralSequenceNumber;
|
||||
order.eon = data?.eon;
|
||||
order.loadedFromDupeCheck = true;
|
||||
order.loadedSessionClearedPreviousData = false;
|
||||
},
|
||||
updateCreditCardToken(token) {
|
||||
this.order.payment.creditCardToken.subscriptionId = token.subscriptionId;
|
||||
|
|
|
|||
|
|
@ -1107,21 +1107,6 @@ describe('Store', () => {
|
|||
endpoint: endpoints.LoadSession.url
|
||||
}));
|
||||
});
|
||||
it('Returns expected response object', async () => {
|
||||
// Arrange
|
||||
const response = { data: { ReferralNumber: getRandomString(6, 6) } };
|
||||
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
|
||||
const duplicate = {
|
||||
referralNumber: getRandomString(6, 6),
|
||||
referralCorrelationId: getRandomGuid()
|
||||
};
|
||||
|
||||
// Act
|
||||
const result = store.loadSession(duplicate);
|
||||
|
||||
// Asserts
|
||||
await expect(result).resolves.toBe(response.data);
|
||||
});
|
||||
it('sets expected vehicle data', async () => {
|
||||
// Arrange
|
||||
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(fullApiResponse));
|
||||
|
|
|
|||
|
|
@ -1,189 +1,228 @@
|
|||
html {
|
||||
.has-error {
|
||||
// START HOVER
|
||||
&.list-button-horizontal,
|
||||
&.list-button,
|
||||
&.list-button.list-group,
|
||||
&.list-card
|
||||
&.option-label {
|
||||
border: 1px solid $red;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
.has-error {
|
||||
|
||||
.button-content {
|
||||
border: none;
|
||||
}
|
||||
// START HOVER
|
||||
&.list-button-horizontal,
|
||||
&.list-button,
|
||||
&.list-button.list-group,
|
||||
&.list-card &.option-label {
|
||||
border: 1px solid $red;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow-hover($red-200);
|
||||
z-index: 5;
|
||||
}
|
||||
input[type="radio"]:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
}
|
||||
.button-content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.list-card {
|
||||
border: 1px solid $red;
|
||||
}
|
||||
|
||||
&.ui-radio {
|
||||
&:hover {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
@include box-shadow-hover($red-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
}
|
||||
// END HOVER
|
||||
&:hover {
|
||||
@include box-shadow-hover($red-200);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
color: $red;
|
||||
input[type="radio"]:focus+.list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $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 {
|
||||
color: $red;
|
||||
input[type="checkbox"]:focus + label,
|
||||
input[type="radio"]:focus + label {
|
||||
box-shadow: 0 0 1px $red;
|
||||
}
|
||||
}
|
||||
&.list-card {
|
||||
border: 1px solid $red;
|
||||
}
|
||||
|
||||
&.grid-item {
|
||||
input[type="radio"] {
|
||||
+ label {
|
||||
border: 1px solid $red;
|
||||
&:hover {
|
||||
background-color: $blue-100;
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ui-radio,
|
||||
&.ui-checkbox {
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
input[type="radio"] + label:before,
|
||||
input[type="checkbox"] + label:before {
|
||||
border: 1px solid $red;
|
||||
background-color: initial;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:before {
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
&.textbox-question,
|
||||
&.dropdown-question {
|
||||
p {
|
||||
color: $red;
|
||||
}
|
||||
input,
|
||||
input.form-control,
|
||||
select,
|
||||
select.form-select {
|
||||
border: 1px solid $red;
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
&.ui-radio {
|
||||
&:hover {
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
select,
|
||||
select.form-select {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Restore to default style if alert box is present
|
||||
.alertError {
|
||||
.has-error {
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
input:not(:focus) {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px $gray-500;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
input:checked:focus {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
input:checked:not(:focus) {
|
||||
+ label {
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
input:focus {
|
||||
border: 1px solid $gray-500;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
@include box-shadow-hover($red-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-test-error {
|
||||
color: $red;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
}
|
||||
|
||||
.form-test-invalid {
|
||||
&.btn.btn-primary {
|
||||
color: $gray-600;
|
||||
background: $gray-200;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
font-weight: $font-weight-normal;
|
||||
// END HOVER
|
||||
|
||||
&.list-button,
|
||||
&.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 {
|
||||
color: $red;
|
||||
|
||||
input[type="checkbox"]:focus+label,
|
||||
input[type="radio"]:focus+label {
|
||||
box-shadow: 0 0 1px $red;
|
||||
}
|
||||
}
|
||||
|
||||
&.grid-item {
|
||||
input[type="radio"] {
|
||||
+label {
|
||||
border: 1px solid $red;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue-100;
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ui-radio,
|
||||
&.ui-checkbox {
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
input[type="radio"]+label:before,
|
||||
input[type="checkbox"]+label:before {
|
||||
border: 1px solid $red;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label:before {
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.textbox-question,
|
||||
&.dropdown-question {
|
||||
p {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
input,
|
||||
input.form-control,
|
||||
select,
|
||||
select.form-select {
|
||||
border: 1px solid $red;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
select.form-select {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn.btn-primary:hover,
|
||||
&.btn.btn-primary:focus {
|
||||
background: $gray-200;
|
||||
box-shadow: none;
|
||||
|
||||
//Quote page radio button group
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
.has-error {
|
||||
input[type="radio"] {
|
||||
+.package-label {
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn.btn-primary:focus-visible {
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700;
|
||||
|
||||
//Restore to default style if alert box is present
|
||||
.alertError {
|
||||
.has-error {
|
||||
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
|
||||
input:not(:focus) {
|
||||
+label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px $gray-500;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked:focus {
|
||||
+label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked:not(:focus) {
|
||||
+label {
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid $gray-500;
|
||||
|
||||
+label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
|
||||
+label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-test-error {
|
||||
color: $red;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-test-invalid {
|
||||
&.btn.btn-primary {
|
||||
color: $gray-600;
|
||||
background: $gray-200;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
&.btn.btn-primary:hover,
|
||||
&.btn.btn-primary:focus {
|
||||
background: $gray-200;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn.btn-primary:focus-visible {
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue