@anker-in/headless-ui 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/style.css

@@ -2020,6 +2020,28 @@ video {
 .animate-\[spin_120s_linear_infinite\] {
   animation: spin 120s linear infinite;
 }
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-1 * var(--track-width, 50%)));
+  }
+}
+.animate-marquee {
+  animation: marquee var(--marquee-duration, 10s) linear infinite;
+}
+@keyframes marquee-reverse {
+  0% {
+    transform: translateX(calc(-1 * var(--track-width, 50%)));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.animate-marquee-reverse {
+  animation: marquee-reverse var(--marquee-duration, 10s) linear infinite;
+}
 @keyframes marquee-x {
   0% {
     transform: translateX(0);
@@ -3331,6 +3353,9 @@ video {
 .pr-2 {
   padding-right: 0.5rem;
 }
+.pr-20 {
+  padding-right: 5rem;
+}
 .pr-6 {
   padding-right: 1.5rem;
 }
@@ -5618,6 +5643,10 @@ video {
     width: 90%;
     height: 90%;
   }
+  .laptop\:size-\[96px\] {
+    width: 96px;
+    height: 96px;
+  }
   .laptop\:h-0 {
     height: 0px;
   }
@@ -5690,8 +5719,8 @@ video {
   .laptop\:h-\[54px\] {
     height: 54px;
   }
-  .laptop\:h-\[80px\] {
-    height: 80px;
+  .laptop\:h-\[72px\] {
+    height: 72px;
   }
   .laptop\:h-\[calc\(220px-72px\)\] {
     height: calc(220px - 72px);
@@ -6158,6 +6187,9 @@ video {
   .laptop\:pr-1 {
     padding-right: 0.25rem;
   }
+  .laptop\:pr-24 {
+    padding-right: 6rem;
+  }
   .laptop\:pt-4 {
     padding-top: 1rem;
   }
@@ -6560,6 +6592,10 @@ video {
     width: 1.5rem;
     height: 1.5rem;
   }
+  .desktop\:size-\[112px\] {
+    width: 112px;
+    height: 112px;
+  }
   .desktop\:size-\[115px\] {
     width: 115px;
     height: 115px;
@@ -6920,6 +6956,10 @@ video {
     padding-left: 1.75rem;
     padding-right: 1.75rem;
   }
+  .desktop\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
   .desktop\:px-\[111px\] {
     padding-left: 111px;
     padding-right: 111px;
@@ -6989,6 +7029,9 @@ video {
   .desktop\:pr-16 {
     padding-right: 4rem;
   }
+  .desktop\:pr-28 {
+    padding-right: 7rem;
+  }
   .desktop\:pt-0 {
     padding-top: 0px;
   }
@@ -7201,6 +7244,10 @@ video {
     width: 108px;
     height: 108px;
   }
+  .lg-desktop\:size-\[128px\] {
+    width: 128px;
+    height: 128px;
+  }
   .lg-desktop\:size-\[144px\] {
     width: 144px;
     height: 144px;
@@ -7808,18 +7855,12 @@ video {
 .\[\&_\.swiper-slide\]\:\!h-auto .swiper-slide {
   height: auto !important;
 }
-.\[\&_\.swiper-slide\]\:\!w-auto .swiper-slide {
-  width: auto !important;
-}
 .\[\&_\.swiper-wrapper\]\:flex .swiper-wrapper {
   display: flex;
 }
 .\[\&_\.swiper-wrapper\]\:items-stretch .swiper-wrapper {
   align-items: stretch;
 }
-.\[\&_\.swiper-wrapper\]\:\!ease-linear .swiper-wrapper {
-  transition-timing-function: linear !important;
-}
 .\[\&_a\]\:text-\[\#1E2024\] a {
   --tw-text-opacity: 1;
   color: rgb(30 32 36 / var(--tw-text-opacity, 1));

package/tailwind.config.js

@@ -24,6 +24,14 @@ module.exports = {
           '0%': { transform: 'translateX(0)' },
           '100%': { transform: 'translateX(-50%)' },
         },
+        marquee: {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(calc(-1 * var(--track-width, 50%)))' },
+        },
+        'marquee-reverse': {
+          '0%': { transform: 'translateX(calc(-1 * var(--track-width, 50%)))' },
+          '100%': { transform: 'translateX(0)' },
+        },
         'marquee-y': {
           from: { transform: 'translateY(0%)' },
           to: { transform: 'translateY(-50%)' },
@@ -50,6 +58,8 @@ module.exports = {
       animation: {
         'marquee-y': 'marquee-y 20s linear infinite',
         'marquee-x': 'marquee-x var(--scroll-duration, 30s) linear infinite',
+        marquee: 'marquee var(--marquee-duration, 10s) linear infinite',
+        'marquee-reverse': 'marquee-reverse var(--marquee-duration, 10s) linear infinite',
         'scroll-text': 'scroll-text 2s ease-in-out infinite',
         'progress-bar': 'progress-bar var(--interval-time) ease-out',
         'fade-in-overlay': 'fade-in-overlay 0.3s cubic-bezier(0.4,0,0.2,1) both',