@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-carousel/dropi-carousel.css

@@ -1,103 +1,148 @@
-:host { display: block; width: 100%; }
-*, *::before, *::after { box-sizing: border-box; }
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
 
-.carousel {
+.dropi-carousel-container {
   display: flex;
   flex-direction: column;
-  gap: var(--Size-2, 8px);
+  position: relative;
   width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0 var(--Size-4);
 }
 
-/* Stage */
-.carousel__stage {
+.dropi-carousel-content {
+  display: flex;
+  align-items: center;
   position: relative;
+  padding: 1rem 0;
   width: 100%;
-  aspect-ratio: 16/9;
+}
+
+.dropi-carousel-items-content {
   overflow: hidden;
-  border-radius: var(--Border-2, 8px);
-  background: var(--Gray-Gray-100, #eceef4);
+  flex: 1;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
 }
 
-.carousel__slide {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  pointer-events: none;
+.dropi-carousel-items-container {
+  display: flex;
+  padding-bottom: var(--Size-3);
+  will-change: transform;
 }
-.carousel__slide--active {
-  opacity: 1;
-  pointer-events: all;
+
+.dropi-carousel-item {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+  box-sizing: border-box;
 }
 
-.carousel__img {
+.dropi-carousel-item > * {
   width: 100%;
-  height: 100%;
+  box-sizing: border-box;
+  display: block;
 }
 
-/* Navigation arrows */
-.carousel__nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: rgba(0, 0, 0, 0.4);
-  border: none;
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
+.dropi-carousel-nav {
   display: flex;
-  align-items: center;
+  width: 40px;
+  height: 40px;
   justify-content: center;
+  align-items: center;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: all 0.2s;
+  flex-shrink: 0;
   z-index: 1;
+  border-radius: var(--Border-5);
+  background: var(--Neutral-White, #fff);
+  box-shadow: var(--Shadow-medium);
+  border: none;
+  appearance: none;
+  padding: 0;
+}
+
+.dropi-carousel-nav:hover {
+  background: var(--Gray-Gray-50);
+}
+
+.dropi-carousel-nav:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
 }
-.carousel__nav:hover { background: rgba(0,0,0,0.65); }
-.carousel__nav--prev { left: var(--Size-2, 8px); }
-.carousel__nav--next { right: var(--Size-2, 8px); }
 
-/* Dots */
-.carousel__dots {
+.dropi-carousel-prev {
+  margin-right: 1rem;
+}
+
+.dropi-carousel-next {
+  margin-left: 1rem;
+}
+
+.dropi-carousel-indicators {
   display: flex;
   justify-content: center;
-  gap: var(--Size-1, 4px);
+  gap: 0.5rem;
+  list-style: none;
+  padding: 1rem 0 0 0;
+  margin: 0;
+}
+
+.dropi-carousel-indicators li {
+  cursor: pointer;
 }
 
-.carousel__dot {
-  width: 8px;
-  height: 8px;
+.dropi-carousel-indicators li button {
+  width: 1rem;
+  height: 1rem;
   border-radius: 50%;
-  border: none;
-  background: var(--Gray-Gray-300, #a0a9c0);
+  border: 1px solid var(--Gray-Gray-100, #eceef4);
+  background: var(--Neutral-White, #fff);
   cursor: pointer;
+  transition: all 0.2s;
   padding: 0;
-  transition: background 0.2s, transform 0.2s;
 }
-.carousel__dot--active {
-  background: var(--Primary-Primary-500, #f49a3d);
-  transform: scale(1.3);
+
+.dropi-carousel-indicators li.active button {
+  background: var(--Primary-Primary-500);
+  border-color: var(--Primary-Primary-500);
 }
 
-/* Thumbnails */
-.carousel__thumbs {
-  display: flex;
-  gap: var(--Size-2, 8px);
-  overflow-x: auto;
-  padding-bottom: 2px;
-}
-.carousel__thumbs::-webkit-scrollbar { height: 4px; }
-.carousel__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-200, #c3c9d9); border-radius: 2px; }
-
-.carousel__thumb {
-  width: 56px;
-  height: 56px;
-  object-fit: cover;
-  border-radius: var(--Border-1, 4px);
-  cursor: pointer;
-  flex-shrink: 0;
-  opacity: 0.5;
-  border: 2px solid transparent;
-  transition: opacity 0.15s, border-color 0.15s;
+.dropi-carousel-indicators li:hover button {
+  background: var(--Gray-Gray-200);
+}
+
+/* Vertical Orientation */
+.vertical .dropi-carousel-content {
+  flex-direction: column;
+}
+
+.vertical .dropi-carousel-items-container {
+  flex-direction: column;
+}
+
+.vertical .dropi-carousel-prev {
+  margin: 0 0 1rem 0;
+}
+
+.vertical .dropi-carousel-next {
+  margin: 1rem 0 0 0;
+}
+
+/* Responsive fixes */
+@media (max-width: 768px) {
+  .dropi-carousel-container {
+    padding: 0;
+  }
+  .dropi-carousel-item {
+    padding: 0 0.25rem;
+  }
 }
-.carousel__thumb:hover { opacity: 0.8; }
-.carousel__thumb--active { opacity: 1; border-color: var(--Primary-Primary-500, #f49a3d); }