@acorex/styles 5.0.60 → 5.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acorex/styles",
-    "version": "5.0.60",
+    "version": "5.1.2",
     "description": "",
     "main": "index.js",
     "scripts": {

package/src/components/_carousel.scss

@@ -1,36 +1,44 @@
 @layer components {
     .ax-carousel {
-        text-align: center;
-        overflow: hidden;
-        width: 100%;
-        display: block;
-        position: relative;
+        @apply ax-text-center ax-overflow-hidden ax-w-full ax-block ax-relative;
         .ax-carousel-arrows {
-            @apply ax-flex ax-absolute ax-justify-between ax-justify-items-center ax-cursor-pointer ax-bg-transparent ax-text-white ax-invisible;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            @apply ax-flex ax-absolute ax-justify-between ax-justify-items-center ax-cursor-pointer ax-bg-transparent ax-text-white ax-invisible ax-left-0 ax-right-0 ax-top-0 ax-bottom-0;
             button {
                 @apply ax-border-none ax-cursor-pointer ax-bg-transparent ax-text-white ax-visible;
                 .ax-ic {
-                    font-size: 2.5rem;
+                    @apply ax-text-4xl;
                 }
             }
+            .ax-vertical-arrow{
+                @apply ax-absolute ax-left-1/2 ax-block;
+                transform: translate(-50%, -50%);
+                &.ax-top-arrow {
+                    @apply ax-top-5;
+                    .ax-ic {
+                        @apply ax-block ax-rotate-90
+                    }
+                }
+                &.ax-bottom-arrow {
+                    @apply -ax-bottom-5;
+                    transform: translate(-50%, -50%);
+                    .ax-ic {
+                        @apply ax-block -ax-rotate-90
+                    }
+                }
+            }
+          
         }
         .ax-carousel-pager {
-            @apply ax-flex ax-py-2 ax-justify-center;
+            @apply ax-flex ax-my-3 ax-justify-center;
             button {
                 @apply ax-p-1 ax-mx-1 ax-cursor-pointer ax-border-none ax-rounded-full ax-bg-light-300;
-                width: calc(var(--ax-base-size) * 1.5);
-                height: calc(var(--ax-base-size) * 1.5);
                 &:hover {
-                    @apply ax-bg-primary-600;
+                    @apply ax-bg-primary-500;
                 }
                 &.ax-state-active {
-                    @apply ax-bg-primary-400;
+                    @apply ax-bg-primary-500;
                 }
             }
         }
     }
-}
+}

package/src/components/_menu.scss

@@ -1,43 +1,50 @@
 @layer components {
-
     ax-menu,
     .ax-menu {
-        >ul {
-            @apply ax-border ax-border-solid ax-border-light-200 ax-flex ax-flex-col ax-text-sm;
+        > ul {
+            @apply ax-flex ax-flex-col ax-text-sm;
 
             li {
-                @apply ax-cursor-pointer ax-p-1;
+                @apply ax-cursor-pointer;
+
+                &.ax-state-disabled {
+                    @apply ax-cursor-not-allowed ax-opacity-60;
+                }
 
                 a {
-                    @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-p-2  ax-animate-fadeIn ax-animate-faster;
+                    @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-mb-2 ax-px-2.5 ax-py-3 ax-rounded-md;
 
                     &.active {
-                        @apply ax-bg-primary-100 ax-text-primary-500;
-                    }
-
-                    .active-icon {
-                        @apply ax--rotate-90
+                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
                     }
 
                     &:hover {
-                        @apply ax-text-primary-500
+                        @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
+                       
                     }
-
                     ax-icon {
-                        @apply ax--rotate-180
+                        @apply ax-text-xl;
+                    }
+                    .ax-menu-start-side {
+                        @apply ax-flex ax-items-center;
+                        ax-icon {
+                            @apply ax-me-1.5;
+                        }
+                    }
+                    .ax-menu-end-side {
+                        ax-icon {
+                            @apply ax-block ax--rotate-180 ax-transition-all ;
+                            &.active-icon {
+                                @apply ax--rotate-90;
+                            }
+                        }
                     }
                 }
 
                 ul {
                     @apply ax-ps-3;
-
                 }
             }
         }
-
     }
-
-
-
-
-}
+}

package/src/components/_picker.scss

@@ -0,0 +1,11 @@
+@layer components {
+    ax-picker,
+    .ax-picker {
+        .ax-picker-item{
+            @apply ax-p-3 ax-text-sm;
+            &.ax-state-active{
+                @apply ax-text-base ax-text-primary-500;
+            }
+        }
+    }
+}

package/src/components/index.scss

@@ -20,6 +20,7 @@
 @import "./label";
 @import "./list";
 @import "./numberbox";
+@import "./picker";
 @import "./loading";
 @import "./menu";
 @import "./popup";