Merge branch 'develop' into feature/CSR-2130
This commit is contained in:
CarlNation
commit
8b5f837098
11 changed files with 295 additions and 53 deletions
|
|
@ -6,7 +6,7 @@ This public/css folder uses a standalone .scss > .css setup.
|
|||
From a Terminal window, run the Sass Watch command from the public folder only:
|
||||
|
||||
```bash
|
||||
sass --no-source-map --watch scss:css
|
||||
sass --watch scss:css
|
||||
```
|
||||
This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page.
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ const errorMessages = {
|
|||
VIN_FORMAT:
|
||||
"Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
|
||||
OPTION_REQUIRED: "Please select an option",
|
||||
RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
|
||||
VEHICLE_REQUIRED: "Please select a vehicle",
|
||||
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
|
||||
DATE_REQUIRED: "Please select a date",
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ export default {
|
|||
classes = "ui-checkbox d-flex";
|
||||
break;
|
||||
case "servicePackageRadio":
|
||||
classes = "package-main";
|
||||
classes = "package-main d-md-flex justify-content-center";
|
||||
break;
|
||||
}
|
||||
return classes;
|
||||
|
|
@ -226,7 +226,7 @@ export default {
|
|||
if (this.buttonTypeString == "radio") {
|
||||
classes += " radio-button-container";
|
||||
} else if (this.buttonTypeString == "servicePackageRadio") {
|
||||
classes = "package-wrapper";
|
||||
classes = "package-wrapper col-md-4";
|
||||
}
|
||||
|
||||
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
|
||||
|
|
|
|||
|
|
@ -29,11 +29,25 @@ describe("checkbox-question.vue", () => {
|
|||
expect(input.attributes().name).toEqual("Checkbox");
|
||||
});
|
||||
|
||||
it("Should return checkbox id", async () => {
|
||||
it("Should return default id when no custom id is specified", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(checkboxQuestion, {
|
||||
propsData: {},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
// Expect
|
||||
expect(input.attributes().id).not.toBeFalsy();
|
||||
});
|
||||
|
||||
it("Should return custom id when specified", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(checkboxQuestion, {
|
||||
propsData: {
|
||||
buttonID: "Checkbox ID",
|
||||
customInputId: "Checkbox ID",
|
||||
},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,32 +10,67 @@
|
|||
type="checkbox"
|
||||
aria-checked="false"
|
||||
:name="checkboxName"
|
||||
:id="buttonID"
|
||||
:validationRules="validationRules"
|
||||
:id="inputId"
|
||||
:tabindex="tabIndex"
|
||||
:aria-required="isRequired" />
|
||||
<p v-html="checkboxLabelCopy" class="m-0"></p>
|
||||
<textBlock
|
||||
class="m-0"
|
||||
:customText="checkboxLabelCopy"
|
||||
marginTopSizeOverride="0"
|
||||
typeStyle="small"
|
||||
@text-link-clicked="bubbleTextBlockClick" />
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField, validate } from "vee-validate";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
|
||||
export default {
|
||||
name: "checkboxQuestion",
|
||||
computed: {
|
||||
checkboxLabelCopy() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
},
|
||||
value: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const uuid = uuidv4();
|
||||
const inputId = !props.customInputId ? `input-${uuid}` : props.customInputId;
|
||||
|
||||
const fieldOptions = {
|
||||
initialValue: props.modelValue,
|
||||
};
|
||||
|
||||
const {
|
||||
value,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
meta,
|
||||
validate,
|
||||
errors,
|
||||
resetField,
|
||||
} = useField(inputId, props.validationRules, fieldOptions);
|
||||
|
||||
return {
|
||||
value,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
validate,
|
||||
meta,
|
||||
errors,
|
||||
resetField,
|
||||
inputId,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
customInputId: String,
|
||||
validationRules: String,
|
||||
cmsWidgetName: String,
|
||||
checkboxName: String,
|
||||
buttonID: String,
|
||||
|
|
@ -48,6 +83,24 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
bubbleTextBlockClick(event) {
|
||||
this.$emit("textLinkClicked", event);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(newValue, oldValue) {
|
||||
if (this.value !== newValue) {
|
||||
this.value = newValue;
|
||||
}
|
||||
},
|
||||
value(newValue, oldValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textBlock,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -56,6 +109,7 @@ export default {
|
|||
.form-check-input {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
min-width: 1rem; // Prevent squish
|
||||
&:checked {
|
||||
background-size: 125%;
|
||||
border: 1px solid $blue;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div class="cart">
|
||||
<div class="px-0">
|
||||
<!-- set class to 'expaned' on line 7 so cart is open on page load. This may be temporary -->
|
||||
<div
|
||||
class="row vin-toggle flex align-items-center pt-4"
|
||||
:class="[isExpanded ? 'expanded' : '']"
|
||||
:class="[isExpanded ? '' : 'expanded']"
|
||||
@click="toggleIsExpanded()">
|
||||
<a
|
||||
aria-label="expand cart"
|
||||
|
|
@ -666,13 +667,27 @@ export default {
|
|||
recycleFeeCartItemName() {
|
||||
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
||||
},
|
||||
requiresRecycleFeeCartItem() {
|
||||
return !this.isRepair;
|
||||
},
|
||||
recycleFeeCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const recycleFeeLineItem = this.supportingItems.find(
|
||||
let recycleFeeLineItem = this.supportingItems.find(
|
||||
(supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
|
||||
);
|
||||
|
||||
if (!recycleFeeLineItem && this.requiresRecycleFeeCartItem) {
|
||||
recycleFeeLineItem = {
|
||||
partNumber: partTypeStrings.RECYCLE_FEE,
|
||||
partType: partTypeStrings.REPLACE_FEE,
|
||||
laborAmount: 0,
|
||||
kitPrice: 0,
|
||||
sellingPrice: 0,
|
||||
salesTax: 0,
|
||||
};
|
||||
}
|
||||
|
||||
if (recycleFeeLineItem) {
|
||||
cartItem = {
|
||||
name: this.recycleFeeCartItemName,
|
||||
|
|
|
|||
|
|
@ -47,10 +47,29 @@ describe("payment-method.vue", () => {
|
|||
function setupMocks() {
|
||||
store.getters = {
|
||||
damage: {},
|
||||
lineItems: [],
|
||||
lineItems: {
|
||||
glassParts: [],
|
||||
supportingItems: [],
|
||||
vaps: [],
|
||||
promos: [],
|
||||
},
|
||||
order: {
|
||||
payment: {
|
||||
isPia: false,
|
||||
insuranceCoverage: {
|
||||
isVerified: true,
|
||||
},
|
||||
},
|
||||
lineItems: {
|
||||
glassParts: [],
|
||||
supportingItems: [],
|
||||
vaps: [],
|
||||
promos: [],
|
||||
},
|
||||
policy: {
|
||||
currentDeductible: 123,
|
||||
isNoComp: false,
|
||||
isItac: false,
|
||||
},
|
||||
},
|
||||
policy: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal notFullScreen ref="loadingModal" />
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid payment-method">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
<hr class="my-0" />
|
||||
|
||||
<cart
|
||||
ref="cart"
|
||||
:damage="damageInfo"
|
||||
:availableVaps="availableVaps"
|
||||
:allowItemRemoval="true"
|
||||
|
|
@ -45,13 +46,31 @@
|
|||
v-bind:isDismissible="false" />
|
||||
</div>
|
||||
|
||||
<div v-if="hasRecal && !isInsurance" class="questions-about-service my-5">
|
||||
<textBlock
|
||||
cmsWidgetName="QuestionsAboutYourServiceWidget"
|
||||
justifyText="left"
|
||||
class="service-questions" />
|
||||
<textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
|
||||
<hr class="my-5" />
|
||||
<div class="d-flex flex-row checkbox-group">
|
||||
<checkboxQuestion
|
||||
cmsWidgetName="RecalConfirmWidget"
|
||||
class="mb-5"
|
||||
isRequired="true"
|
||||
v-model="isRecalAckOptIn"
|
||||
validationRules="recal-ack-required"
|
||||
@text-link-clicked="openModal('RecalModal')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<paymentMethodQuestion
|
||||
v-if="!isPiaDisabled"
|
||||
v-if="isPiaEnabled && totalAmountDue > 0"
|
||||
v-model="paymentMethodInternalModel"
|
||||
validationRules="option-required" />
|
||||
validationRules="payment-method-required" />
|
||||
|
||||
<alert
|
||||
v-if="!isPiaDisabled"
|
||||
v-if="!isPiaEnabled && totalAmountDue > 0"
|
||||
:isDismissible="false"
|
||||
alertClass="alert-info"
|
||||
cmsWidgetName="NoPiaDisclaimerWidget"
|
||||
|
|
@ -65,6 +84,11 @@
|
|||
buttonSize
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
|
||||
<contentGroupModal
|
||||
ref="RecalModal"
|
||||
cmsWidgetName="RecalModal"
|
||||
class="recal-modal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,13 +106,20 @@ import cart from "@/fmg-components/cart/cart";
|
|||
import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
|
||||
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
||||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
||||
|
||||
// Supporting Items
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import store from "@/store";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import {
|
||||
fetchCmsContentForPage,
|
||||
doesCopyContainRouterLink,
|
||||
getRouterLinkRouteFromCopy,
|
||||
} from "@/helpers/cms-content-helper";
|
||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
import {
|
||||
|
|
@ -115,10 +146,14 @@ import { partTypeStrings } from "@/constants/part-type-strings";
|
|||
import { mapTaxedLineItemsToStoreFormat } from "../../store";
|
||||
import { coverageStatus } from "@/constants/insurance";
|
||||
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "paymentMethod",
|
||||
props: {
|
||||
recyclingModalCmsWidgetName: String,
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
|
@ -309,9 +344,15 @@ export default {
|
|||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||
inactivePromos: this.getInactivePromosFromStore(),
|
||||
isAppleDevice: false,
|
||||
isRecalAckOptIn: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doesCopyContainRouterLink,
|
||||
getRouterLinkRouteFromCopy,
|
||||
navigateWithScenario(scenarioName) {
|
||||
this.$router.navigateWithoutSaving(scenarioName, this.$route);
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
// Service Location
|
||||
const serviceLocation = store.getters.order.serviceLocation;
|
||||
|
|
@ -451,14 +492,12 @@ export default {
|
|||
this.paymentMethod,
|
||||
false
|
||||
);
|
||||
|
||||
// save lineitems as they now have salestax added
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
|
||||
this.lineItems.glassParts,
|
||||
false
|
||||
);
|
||||
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
||||
this.lineItems.supportingItems,
|
||||
|
|
@ -473,7 +512,6 @@ export default {
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.paymentMethod == paymentMethods.LATER) {
|
||||
// this creates the final work order
|
||||
await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
|
||||
|
|
@ -521,8 +559,20 @@ export default {
|
|||
hasSubmittedOrder() {
|
||||
return this.$store.getters.hasSubmittedOrder;
|
||||
},
|
||||
openModal(modalName) {
|
||||
this.$refs[modalName].openModal();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
hasRecal() {
|
||||
const recalLineItem = this.$store.getters.order.lineItems.supportingItems.find(
|
||||
(lineItem) => lineItem.partType == partTypeStrings.RECALIBRATION
|
||||
);
|
||||
if (recalLineItem) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
damageInfo() {
|
||||
return this.$store.getters.damage;
|
||||
},
|
||||
|
|
@ -584,21 +634,21 @@ export default {
|
|||
return null;
|
||||
}
|
||||
},
|
||||
isPiaDisabled() {
|
||||
totalAmountDue() {
|
||||
return baseMixin.methods.getAmountDue(this.lineItems);
|
||||
},
|
||||
isPiaEnabled() {
|
||||
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
|
||||
const piaInsurance = this.getSettingValue(experimentSettings.PIA_INSURANCE);
|
||||
|
||||
var isEnabled = false;
|
||||
if (this.isInsurance) {
|
||||
isEnabled = piaInsurance === "true" && this.currentDeductible > 0;
|
||||
return piaInsurance === "true" && this.currentDeductible > 0;
|
||||
} else {
|
||||
isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
|
||||
return piaExperience === "PIA Optional" || piaExperience === "PIA Required";
|
||||
}
|
||||
|
||||
return !isEnabled;
|
||||
},
|
||||
paymentMethod() {
|
||||
if (this.isPiaDisabled) {
|
||||
if (!this.isPiaEnabled) {
|
||||
return paymentMethods.LATER;
|
||||
}
|
||||
|
||||
|
|
@ -665,11 +715,27 @@ export default {
|
|||
alert,
|
||||
paymentMethodQuestion,
|
||||
reviewDropdown,
|
||||
textBlock,
|
||||
checkboxQuestion,
|
||||
contentGroupModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.checkbox-group {
|
||||
align-items: start;
|
||||
> * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.questions-about-service {
|
||||
.service-questions {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
.cart {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -677,4 +743,22 @@ export default {
|
|||
color: $gray-550;
|
||||
margin: 0;
|
||||
}
|
||||
.payment-method {
|
||||
.recal-modal {
|
||||
:deep(.modal-body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h5 {
|
||||
text-align: center;
|
||||
order: 1;
|
||||
}
|
||||
p {
|
||||
order: 3;
|
||||
}
|
||||
img {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<div class="container-fluid page-container-grouped-styles">
|
||||
<div class="container-fluid page-container-grouped-styles quote">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
|
|
@ -20,7 +20,10 @@
|
|||
cmsWidgetName="CashOrInsuranceQuestionWidget"
|
||||
v-model="isInsuranceSelected"
|
||||
groupName="CashOrInsuranceQuestion" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<servicePackageQuestion
|
||||
ref="servicePackage"
|
||||
cashCmsWidgetName="CashServicePackageQuestionWidget"
|
||||
|
|
@ -34,7 +37,10 @@
|
|||
v-on="{ 'buttonEvent.openModal': openModalAction }"
|
||||
validationRules="option-required"
|
||||
isRequired />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<afterpayModalBanner
|
||||
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
|
||||
cmsWidgetName="AfterpayModalWidget"
|
||||
|
|
@ -43,7 +49,6 @@
|
|||
:lineItems="lineItems" />
|
||||
|
||||
<recalDisclaimer
|
||||
class="my-5"
|
||||
cmsWidgetName="RecalDisclaimerWidget"
|
||||
v-if="isRecalibrationOnOrder"
|
||||
v-on="{ textLinkClicked: openModalAction }"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@
|
|||
]"
|
||||
for="testradio">
|
||||
<div class="package-specs">
|
||||
<div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
|
||||
<div
|
||||
v-if="this.additionalButtonData.servicePackageDiscount"
|
||||
class="row justify-content-between">
|
||||
<div class="col md-6">
|
||||
<p class="m-0">
|
||||
<span v-html="this.buttonLabel"></span>
|
||||
|
|
@ -136,24 +138,20 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.discount-text {
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: #469d2a;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
margin: 1rem 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
position: relative;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
|
|
@ -174,13 +172,21 @@ export default {
|
|||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 60px;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-subheader {
|
||||
min-height: 80px;
|
||||
}
|
||||
&.has-text {
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
border: 1px solid #469d2a !important;
|
||||
border: 1px solid #469d2a;
|
||||
@include media-breakpoint-up(md) {
|
||||
border-radius: 0.5rem;
|
||||
padding-top: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -265,6 +271,9 @@ export default {
|
|||
width: 100%;
|
||||
max-height: 0;
|
||||
transition: all 0.5s ease;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
|
|
@ -337,6 +346,34 @@ export default {
|
|||
|
||||
.hide-when-closed {
|
||||
display: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.discount-text {
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: #469d2a;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
height: 2.875rem;
|
||||
@include media-breakpoint-up(md) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
~ label {
|
||||
.package-label {
|
||||
&:after {
|
||||
top: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,19 @@ body {
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
// Quote page desktop
|
||||
&.quote {
|
||||
.col-md-6,
|
||||
.col-lg-4 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.col-md-6.col-lg-4 {
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 100%;
|
||||
max-width: 910px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//END set max-width on columns
|
||||
}
|
||||
.pointer {
|
||||
|
|
|
|||
Loading…
Reference in a new issue