CSR-1731 make it so cart toggle can be tabbed to.

Prevent items in cart from being tabbed to when cart is collapsed.
This commit is contained in:
Bryan Mauger 2023-11-21 10:57:46 -05:00
parent 1c8dc5becc
commit 9e9254b85d

View file

@ -5,10 +5,10 @@
class="row vin-toggle flex align-items-center pt-4" class="row vin-toggle flex align-items-center pt-4"
:class="[isExpanded ? 'expanded' : '']" :class="[isExpanded ? 'expanded' : '']"
@click="toggleIsExpanded()"> @click="toggleIsExpanded()">
<div class="col d-flex justify-content-between"> <a href="#!" tabindex="0" class="col d-flex justify-content-between py-0">
<span class="label">{{ amountDueText }}</span <span class="label">{{ amountDueText }}</span>
><span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span> <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
</div> </a>
</div> </div>
<div class="price-table"> <div class="price-table">
<div class="service-type"> <div class="service-type">
@ -746,6 +746,7 @@ export default {
color: $gray; color: $gray;
} }
.label { .label {
color: $black;
font-weight: 500; font-weight: 500;
} }
.amount-due { .amount-due {
@ -755,6 +756,7 @@ export default {
max-height: 0; max-height: 0;
transition: all 350ms ease-in; transition: all 350ms ease-in;
overflow: hidden; overflow: hidden;
visibility: hidden;
div { div {
display: flex; display: flex;
@ -858,6 +860,10 @@ export default {
transition: all 150ms ease-in; transition: all 150ms ease-in;
overflow: hidden; overflow: hidden;
padding-top: 1rem; padding-top: 1rem;
visibility: visible;
}
a {
text-decoration: none;
} }
} }
} }