7b546c567c
This commit fixes an UI inconsitency where the arrow did not animate in sync with with the card's expansion panel during the expansion process. The solution implemented involves the use of actual DOM element for the arrow, rather than a pseude-element, allowing for unified animation with the expansion panel. Changes: - Extraction of the expansion arrow into its own Vue component, `CardExpansionArrow`, improving maintainability and separation of concerns. - Transition to using a real DOM element for the expansion arrow, moving away from the `&:before` pseudo-class. This leads to simpler codebase, better separation of concerns and closer alignment with HTML semantics.
33 lines
746 B
Vue
33 lines
746 B
Vue
<template>
|
|
<div class="arrow-container">
|
|
<div class="arrow" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
// Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
$arrow-size: $font-size-absolute-normal;
|
|
|
|
.arrow-container {
|
|
position: relative;
|
|
.arrow {
|
|
position: absolute;
|
|
left: calc(50% - $arrow-size * 1.5);
|
|
top: calc(-0.35 * $arrow-size);
|
|
border: solid $color-primary-darker;
|
|
border-width: 0 $arrow-size $arrow-size 0;
|
|
padding: $arrow-size;
|
|
transform: rotate(-135deg);
|
|
}
|
|
}
|
|
</style>
|