339 lines
9.2 KiB
Vue
339 lines
9.2 KiB
Vue
<template>
|
|
<baseInputButton
|
|
v-bind="$props"
|
|
:buttonWrapperClasses="[
|
|
'list-group list-button-horizontal d-flex flex-column w-100 base-input-button',
|
|
{ strong: isStrongStyling },
|
|
]"
|
|
v-model="selectedValue">
|
|
<div
|
|
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center py-3 px-1">
|
|
<span class="m-0" :class="textPosition">
|
|
{{ buttonLabel }}
|
|
</span>
|
|
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
|
|
{{ buttonLabelSubCopy }}
|
|
</span>
|
|
<span v-if="screenReaderOnlyText" class="sr-only">
|
|
{{ screenReaderOnlyText }}
|
|
</span>
|
|
</div>
|
|
</baseInputButton>
|
|
</template>
|
|
|
|
<script>
|
|
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
|
|
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
|
|
|
export default {
|
|
name: "listButtonHorizontal",
|
|
mixins: [inputButtonWrapperMixin],
|
|
computed: {
|
|
isStrongStyling() {
|
|
return (
|
|
this.additionalButtonData?.additionalButtonStyling === "listButtonHorizontalStrong"
|
|
);
|
|
},
|
|
},
|
|
components: {
|
|
baseInputButton,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list-button-horizontal {
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
position: absolute;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
|
|
.list-button-horizontal-content {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus-visible + .list-button-horizontal-content {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:focus + .list-button-horizontal-content {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
z-index: 3;
|
|
}
|
|
|
|
&:checked + .list-button-horizontal-content {
|
|
background: $blue-100;
|
|
box-shadow: 0 0 0 1px $blue;
|
|
outline: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:checked:focus + .list-button-horizontal-content {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
}
|
|
|
|
&:checked + .list-button-horizontal-content p:first-child {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.list-button-horizontal-content {
|
|
outline: none;
|
|
position: relative;
|
|
transition: all 150ms linear;
|
|
border: 1px solid $gray-500;
|
|
border-radius: 0;
|
|
width: 100%;
|
|
color: $gray-600;
|
|
|
|
span {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
// Cash/Insurance option radio button styling
|
|
&.strong {
|
|
.list-button-horizontal-content {
|
|
border: 1px solid $blue-700;
|
|
z-index: 2;
|
|
color: $blue;
|
|
height: 100%;
|
|
|
|
span {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.list-button-horizontal-content:hover {
|
|
background-color: transparent;
|
|
color: $blue;
|
|
box-shadow: none;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
position: absolute;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
|
|
&:focus-visible + .list-button-horizontal-content {
|
|
border-radius: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:focus + .list-button-horizontal-content {
|
|
z-index: 3;
|
|
}
|
|
|
|
&:checked + .list-button-horizontal-content {
|
|
outline: none;
|
|
box-shadow: none;
|
|
color: $white;
|
|
background: linear-gradient(84.45deg, #125b7e 0%, #3b8fb8 100%);
|
|
border-radius: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:checked:focus + .list-button-horizontal-content {
|
|
box-shadow:
|
|
0 0 0 3px,
|
|
0 0 0 5.5px $blue-700;
|
|
}
|
|
|
|
&:checked + .list-button-horizontal-content p:first-child {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
&.list-button-horizontal {
|
|
height: 100%;
|
|
label {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.col,
|
|
.list-group {
|
|
border-radius: 0;
|
|
|
|
&:first-of-type {
|
|
.list-button-horizontal {
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-left-radius: 0.5rem;
|
|
|
|
.list-button-horizontal-content {
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-left-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
.list-button-horizontal {
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
|
|
.list-button-horizontal-content {
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Cash/insurance styling
|
|
&:first-of-type {
|
|
.list-button-horizontal.strong {
|
|
input[type="radio"] {
|
|
&:checked + .list-button-horizontal-content {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
&:checked:focus + .list-button-horizontal-content {
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
.list-button-horizontal.strong {
|
|
input[type="radio"] {
|
|
&:checked + .list-button-horizontal-content {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
&:checked:focus + .list-button-horizontal-content {
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-left-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Special styles when there are multiple list-button-horizontal buttons
|
|
// (number of chips, pay w/cash/insurance)
|
|
.windshield-chip-count-question {
|
|
fieldset {
|
|
.d-flex {
|
|
.col {
|
|
&:first-child {
|
|
label {
|
|
&.list-group.list-button-horizontal {
|
|
z-index: 2;
|
|
&:hover {
|
|
background-color: $white;
|
|
border-top-left-radius: 0.5rem;
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
.d-flex {
|
|
.col {
|
|
label {
|
|
&.list-group.list-button-horizontal {
|
|
&:hover {
|
|
background-color: $white;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
.d-flex {
|
|
.col {
|
|
&:last-child {
|
|
label {
|
|
&.list-group.list-button-horizontal {
|
|
z-index: 2;
|
|
&:hover {
|
|
background-color: $white;
|
|
border-top-right-radius: 0.5rem;
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//NOT Windshiled Chip Count
|
|
fieldset {
|
|
.d-flex {
|
|
.col {
|
|
&:first-child {
|
|
label {
|
|
&.list-group.list-button-horizontal {
|
|
z-index: 6;
|
|
&:hover {
|
|
background-color: $white;
|
|
border-top-left-radius: 0.5rem;
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
.d-flex {
|
|
.col {
|
|
label {
|
|
&.list-group.list-button-horizontal {
|
|
&:hover {
|
|
background-color: $white;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
.d-flex {
|
|
.col {
|
|
&:last-child {
|
|
label {
|
|
&.list-group.list-button-horizontal {
|
|
z-index: 6;
|
|
&:hover {
|
|
background-color: $white;
|
|
border-top-right-radius: 0.5rem;
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|