From 4cd01966c3b280a207c8dc4e762e23863a3a6187 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Thu, 30 Jan 2025 19:17:02 +0500
Subject: [PATCH] feat: 'Carousel' in process
---
src/components/Carousel/Carousel.stories.ts | 1 +
...owContainer.vue => CarouselButtonContainer.vue} | 14 +++++++-------
2 files changed, 8 insertions(+), 7 deletions(-)
rename src/components/Carousel/{CarouselArrowContainer.vue => CarouselButtonContainer.vue} (82%)
diff --git a/src/components/Carousel/Carousel.stories.ts b/src/components/Carousel/Carousel.stories.ts
index e23bf89..0bd8f47 100644
--- a/src/components/Carousel/Carousel.stories.ts
+++ b/src/components/Carousel/Carousel.stories.ts
@@ -109,5 +109,6 @@ export const Full: Story = {
],
buttonsBelow: true,
+ theme: 'sky',
},
};
diff --git a/src/components/Carousel/CarouselArrowContainer.vue b/src/components/Carousel/CarouselButtonContainer.vue
similarity index 82%
rename from src/components/Carousel/CarouselArrowContainer.vue
rename to src/components/Carousel/CarouselButtonContainer.vue
index 4e15837..4f53d8b 100644
--- a/src/components/Carousel/CarouselArrowContainer.vue
+++ b/src/components/Carousel/CarouselButtonContainer.vue
@@ -3,6 +3,8 @@ defineProps<{
disable?: boolean;
textColor: string;
color: string;
+ width: string;
+ borderRadius: string;
}>();
</script>
@@ -32,12 +34,13 @@ defineProps<{
<style scoped>
.arrowContainer {
position: relative;
- min-width: 50px;
- min-height: 100%;
+ width: v-bind(width);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
+ background-color: v-bind(color);
+ border-radius: v-bind(borderRadius);
}
.icon {
display: flex;
@@ -47,7 +50,6 @@ defineProps<{
color: v-bind(textColor);
}
.arrowContainer:hover > .bg {
- background-color: v-bind(textColor);
opacity: 0.1;
}
.arrowContainer:active > .bg {
@@ -57,11 +59,9 @@ defineProps<{
width: 100%;
height: 100%;
position: absolute;
- padding: 10px;
- z-index: 5;
opacity: 0;
- border-radius: 5px;
- background-color: transparent;
+ border-radius: v-bind(borderRadius);
+ background-color: black;
transition: all 0.2s ease;
}
.disable {
--
GitLab