@acorex/styles 5.0.34 → 5.0.38

package/package.json

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

package/src/components/_calendar.scss

@@ -152,4 +152,12 @@
             @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100 dark:ax-bg-transparent dark:ax-border-transparent;
         }
     }
+
+    .ax-overlay-pane
+    {
+        ax-calendar
+        {
+            @apply ax-border-none
+        }
+    }
 }

package/src/components/_checkbox.scss

@@ -1,38 +1,50 @@
 @layer components {
-    ax-check-box,
-    .ax-check-box {
-        @apply ax-justify-start ax-w-max ax-flex;
+
+    .ax-check-box,
+    ax-check-box {
+
 
         .ax-wrapper {
             &.ax-state-disabled {
                 @apply ax-cursor-not-allowed ax-opacity-80;
+
                 input[type="checkbox"] {
                     @apply ax-cursor-not-allowed;
                 }
             }
         }
+
         input[type="checkbox"] {
             @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
             @include control-dark("editor");
+
             &:checked,
             &:indeterminate {
                 @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
             }
+
             &:checked {
                 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
             }
+
             &:indeterminate {
                 background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
             }
+
             &:focus {
                 @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
             }
-        }
-        ax-label {
-            @apply ax-items-center ax-mb-0 ax-font-semibold ax-text-sm ax-text-light-700;
-            label {
-                @apply ax-mb-0;
+
+            &.ax-state-disabled {
+                @apply ax-opacity-70;
+            }
+
+            &.ax-state-disabled {
+                @apply ax-opacity-60;
+            }
+            &.ax-state-error{
+                @apply ax-border-danger-500;
             }
         }
     }
-}
+}

package/src/components/_dropdown.scss

@@ -1,4 +1,5 @@
 @layer components {
+
     ax-drop-down,
     .ax-drop-down {
         display: contents;
@@ -20,6 +21,34 @@
         @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
         @include control-dark("surface");
 
+        &.ax-overlay-center {
+            @apply ax-h-fit;
+            max-height: 90vh;
+            width: 80vw;
+        }
+
+        &.ax-overlay-actionsheet {
+            @apply ax-w-full;
+            height: 50vh;
+            max-height: 70vh;
+        }
+
+        &.ax-overlay-full {
+            @apply ax-w-screen ax-h-screen;
+        }
+
+        .ax-overlay-pane-header {
+            @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
+
+            span {
+                @apply ax-font-medium;
+            }
+
+            i {
+                @apply ax-text-primary-500 ax-cursor-pointer ax-text-xl;
+            }
+        }
+
         &.ax-dropdown-list {
             @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
 
@@ -91,7 +120,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-warning-200  dark:ax-bg-warning-600 dark:ax-text-warning-100;
+                        @apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
                     }
                 }
 
@@ -108,7 +137,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-danger-200  dark:ax-bg-danger-600 dark:ax-text-danger-100;
+                        @apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
                     }
                 }
 
@@ -125,7 +154,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-success-200  dark:ax-bg-success-600 dark:ax-text-success-100;
+                        @apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
                     }
                 }
 
@@ -142,16 +171,16 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-info-200  dark:ax-bg-info-600 dark:ax-text-info-100;
+                        @apply ax-bg-info-200 dark:ax-bg-info-600 dark:ax-text-info-100;
                     }
                 }
 
                 &.ax-dark-default {
-                    @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent  dark:ax-text-dark-100;
+                    @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-100;
 
                     &:hover,
                     &:focus {
-                        @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400  dark:ax-text-dark-50;
+                        @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400 dark:ax-text-dark-50;
                     }
 
                     &:active {
@@ -159,7 +188,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-dark-200  dark:ax-bg-dark-400 dark:ax-text-dark-100;
+                        @apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
                     }
                 }
 
@@ -176,10 +205,10 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-light-200  dark:ax-bg-light-600 dark:ax-text-light-100;
+                        @apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
                     }
                 }
             }
         }
     }
-}
+}

package/src/components/_editor-container.scss

@@ -2,7 +2,7 @@
     .ax-editor-container {
         height: calc(var(--ax-base-size) * var(--ax-base-ratio));
         @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
-        @include control-dark('editor');
+        @include control-dark("editor");
         @screen md {
             @apply ax-text-sm;
         }
@@ -20,23 +20,22 @@
             line-height: 1 !important;
         }
         .ax-input {
-            line-height: 4 !important;
             min-width: 1%;
-        foont-size:inherit;
-
             @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5;
-            
+
             &:focus {
                 box-shadow: none;
             }
         }
         ax-prefix {
-            *,ax-button {
+            *,
+            ax-button {
                 @apply ax-rounded-s;
             }
         }
         ax-suffix {
-            *,ax-button {
+            *,
+            ax-button {
                 @apply ax-rounded-e;
             }
         }
@@ -59,7 +58,7 @@
                 }
             }
         }
-        
+
         &.ax-state-disabled {
             background-color: rgb(var(--ax-color-disabled)) !important;
             color: rgb(var(--ax-color-disabled-fore)) !important;

package/src/components/_form.scss

@@ -1,8 +1,8 @@
 @layer components {
-    .ax-form-field {
+    ax-form-field {
         @apply ax-mb-2 ax-relative;
         .ax-error-msg {
-            @apply ax-absolute ax--bottom-5 ax-text-danger-500 ax-text-xs;
+            @apply ax-block ax-text-danger-500 ax-text-xs;
         }
     }
 }

package/src/components/_input.scss

@@ -1,8 +1,7 @@
 @layer components {
     .ax-input {
         @apply ax-outline-none ax-p-0;
-        foont-size:inherit;
-        line-height: 20px;
+        font-size:inherit;
         &:focus {
             @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
         }

package/src/components/_list.scss

@@ -2,32 +2,51 @@
     .ax-list {
         display: block;
     }
+
     .ax-list-container {
         .ax-list-items-container {
             @apply ax-py-1 ax-rounded ax-overflow-y-auto ax-h-full dark:ax-border-transparent;
+
             &.ax-vertical {
                 @apply ax-grid ax-grid-cols-1;
+
                 &.ax-divide {
                     @apply ax-divide-y ax-divide-x-0 ax-divide-light-600 ax-divide-opacity-30 ax-divide-solid;
                 }
             }
+
             &.ax-default {
                 @apply ax-cursor-pointer;
+
                 .ax-list-item {
                     height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
                     @apply ax-text-sm ax-flex ax-items-center ax-px-3;
+
                     &:focus,
                     &:focus-visible {
                         @apply ax-outline-none;
                     }
+
                     &:hover {
                         &:not(.ax-state-selected) {
                             @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
                         }
                     }
                     &.ax-state-selected {
-                        @apply ax-bg-primary-100 ax-text-primary-500 ax-font-medium dark:ax-bg-primary-500 dark:ax-text-primary-50;
+                        @apply ax-text-primary-500 ax-font-medium dark:ax-text-primary-50;
                     }
+                    
+                    &:not(.ax-check-box)
+                    {
+                        &.ax-state-selected {
+                            @apply ax-bg-primary-50;
+                        }
+                    }
+
+                    &.ax-state-disabled {
+                        @apply ax-cursor-not-allowed ax-opacity-70;
+                    }
+
                     &:focus,
                     &.ax-state-focus {
                         &:not(.ax-state-selected) {
@@ -37,13 +56,20 @@
                 }
             }
         }
+
         .ax-list-loading-container {
             @apply ax-flex ax-justify-center ax-p-2;
         }
     }
+
     .cdk-overlay-container {
         .ax-list-items-container {
             max-height: 25vh;
+
+            &.ax-full {
+                max-height: 75vh;
+                height: fit-content;
+            }
         }
     }
 }

package/src/components/_popup.scss

@@ -13,9 +13,7 @@
     }
 
     .ax-popup {
-        max-height: 98vh;
-        min-height: fit-content;
-        @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0;
+        @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit;
         @include control-dark('surface');
 
         header {
@@ -46,7 +44,7 @@
         }
 
         &.ax-popup-full {
-            @apply ax-w-screen ax-h-screen;
+            @apply ax-w-screen ax-h-full ax-max-h-full;
         }
 
         &.ax-fit {
@@ -100,6 +98,7 @@
         @media all and (min-width: 425px) and (max-width: 767px) {
             &.ax-popup-sm {
                 width: 100vw;
+                height: 100vh;
                 max-height: 100vh;
             }
 
@@ -115,7 +114,8 @@
             &.ax-popup-md,
             &.ax-popup-lg {
                 width: 100vw;
-                max-height: 100vh;
+                height: 100%;
+                max-height: 100%;
             }
         }
     }

package/src/components/_radio.scss

@@ -13,6 +13,15 @@
             &:focus {
                 @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
             }
+            &.ax-state-disabled{
+                @apply ax-opacity-70;
+            }
+            &.ax-state-disabled{
+                @apply ax-opacity-60;
+            }
+            &.ax-state-error{
+                @apply ax-border-danger-500;
+            }
         }
         ax-label {
             label {

package/src/components/_selectbox.scss

@@ -1,5 +1,5 @@
 @layer components {
-    .ax-select-box {
+    ax-select-box {
         .ax-select-box-selection {
             @apply ax-flex ax-justify-center ax-items-center ax-outline-none;