@acorex/styles 5.0.37 → 5.0.41

package/package.json

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

package/src/components/_button.scss

@@ -81,7 +81,7 @@
                     @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
                 }
                 &:active {
-                    @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
+                    @apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
                 }
             }
 

package/src/components/_calendar.scss

@@ -45,6 +45,9 @@
                     &:hover {
                         @apply ax-bg-light-100 dark:ax-bg-white/[0.07];
                     }
+                    &:focus {
+                        @apply ax-ring-2 ax-ring-primary-500 ax-outline-none;
+                    }
 
                     &.ax-state-disabled {
                         @apply ax-text-light-300 ax-cursor-not-allowed;

package/src/components/_checkbox.scss

@@ -3,6 +3,21 @@
     .ax-check-box,
     ax-check-box {
 
+        .ax-state-error {
+            @apply ax-text-danger-500;
+
+            input[type="checkbox"] {
+                @apply ax-border-danger-500;
+            }
+        }
+        .ax-state-success {
+            @apply  ax-text-success-600;
+
+            input[type="checkbox"] {
+                @apply ax-border-success-600;
+            }
+        }
+
 
         .ax-wrapper {
             &.ax-state-disabled {
@@ -42,9 +57,7 @@
             &.ax-state-disabled {
                 @apply ax-opacity-60;
             }
-            &.ax-state-error{
-                @apply ax-border-danger-500;
-            }
+
         }
     }
 }

package/src/components/_dropdown.scss

@@ -1,5 +1,4 @@
 @layer components {
-
     ax-drop-down,
     .ax-drop-down {
         display: contents;
@@ -18,7 +17,7 @@
     }
 
     .ax-overlay-pane {
-        @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
+        @apply ax-bg-white ax-border ax-rounded ax-border-light-200;
         @include control-dark("surface");
 
         &.ax-overlay-center {
@@ -45,7 +44,10 @@
             }
 
             i {
-                @apply ax-text-primary-500 ax-cursor-pointer ax-text-xl;
+                @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
+                &:hover {
+                    @apply ax-text-light-500 dark:ax-text-light-100;
+                }
             }
         }
 
@@ -193,15 +195,15 @@
                 }
 
                 &.ax-light-default {
-                    @apply ax-bg-transparent ax-text-light-500 ax-border-transparent;
+                    @apply ax-bg-transparent ax-text-light-500 ax-border-transparent dark:ax-text-light-200;
 
                     &:hover,
                     &:focus {
-                        @apply ax-bg-light-50 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
+                        @apply ax-bg-light-100 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
                     }
 
                     &:active {
-                        @apply ax-bg-light-100 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
+                        @apply ax-bg-light-200 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
                     }
 
                     &.ax-state-selected {
@@ -211,4 +213,4 @@
             }
         }
     }
-}
+}

package/src/components/_editor-container.scss

@@ -1,58 +1,84 @@
 @layer components {
     .ax-editor-container {
         height: calc(var(--ax-base-size) * var(--ax-base-ratio));
+        line-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");
+
         @screen md {
             @apply ax-text-sm;
         }
+
         &:focus-within {
             @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
         }
+
         &.ax-button-icon {
             @apply ax-px-2;
         }
+
         &:first-child {
         }
+
         [class*=" ax-ic-"],
         [class^="ax-ic-"] {
             font-size: 1.2rem !important;
             line-height: 1 !important;
         }
+
         .ax-input {
-            min-width: 1%;
-            @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5;
+            width: 1%;
+            text-align: inherit;
+            font: inherit;
+            @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5 ax-rounded;
 
             &:focus {
                 box-shadow: none;
             }
         }
+
         ax-prefix {
             *,
-            ax-button {
+            ax-button,
+            ax-addon {
                 @apply ax-rounded-s;
             }
         }
+
         ax-suffix {
             *,
-            ax-button {
+            ax-button,
+            ax-addon {
                 @apply ax-rounded-e;
             }
         }
+
         ax-prefix,
         ax-suffix {
             * {
                 @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
             }
+
+            ax-icon {
+                @apply ax-px-2;
+            }
+
+            ax-addon {
+                @apply ax-bg-light-100 ax-text-light-fore ax-px-4;
+            }
         }
+
         ax-button {
             height: 100% !important;
             @apply ax-rounded-none;
+
             &:focus {
                 @apply ax-ring-0;
             }
+
             &.ax-button-icon {
                 min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
+
                 .ax-ic {
                     @apply ax-text-base;
                 }
@@ -60,22 +86,33 @@
         }
 
         &.ax-state-disabled {
-            background-color: rgb(var(--ax-color-disabled)) !important;
-            color: rgb(var(--ax-color-disabled-fore)) !important;
-            @apply ax-cursor-not-allowed;
-            &:hover {
-                background-color: rgb(var(--ax-color-disabled)) !important;
-            }
+            @include control-dark("editor-disabled");
         }
+
         &.ax-state-error {
             @apply ax-border-danger-500;
+
             .ax-input {
                 @apply ax-placeholder-danger-500;
             }
+
             &:focus-within {
                 @apply ax-ring-0 ax-ring-transparent;
             }
         }
+
+        &.ax-state-success {
+            @apply ax-border-success-600;
+
+            .ax-input {
+                @apply ax-placeholder-success-600;
+            }
+
+            &:focus-within {
+                @apply ax-ring-0 ax-ring-transparent;
+            }
+        }
+
         // &.ax-sm {
         //     height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
         //     .ax-input {

package/src/components/_fieldset.scss

@@ -0,0 +1,8 @@
+@layer components{
+    fieldset{
+        @apply ax-grid ax-col-span-6 ax-grid-cols-6 ax-gap-4 ax-border ax-border-solid ax-border-gray-300 ax-p-3 ax-rounded;
+        legend{
+            @apply ax-text-sm ax-px-1;
+        }
+    }
+}

package/src/components/_form.scss

@@ -2,7 +2,7 @@
     ax-form-field {
         @apply ax-mb-2 ax-relative;
         .ax-error-msg {
-            @apply ax-text-danger-500 ax-text-xs;
+            @apply ax-block ax-text-danger-500 ax-text-xs ax-py-2;
         }
     }
 }

package/src/components/_input.scss

@@ -3,15 +3,10 @@
         @apply ax-outline-none ax-p-0;
         font-size:inherit;
         &:focus {
-            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
+            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-md;
         }
         &.ax-state-disabled {
-            background-color: rgb(var(--ax-color-disabled)) !important;
-            color: rgb(var(--ax-color-disabled-fore)) !important;
-            @apply ax-cursor-not-allowed;
-            &:hover {
-                background-color: rgb(var(--ax-color-disabled)) !important;
-            }
+            @include control-dark("editor-disabled");
         }
     }
 }

package/src/components/_list.scss

@@ -28,9 +28,7 @@
                     }
 
                     &: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;
-                        }
+                        @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-text-primary-500 ax-font-medium dark:ax-text-primary-50;
@@ -39,7 +37,7 @@
                     &:not(.ax-check-box)
                     {
                         &.ax-state-selected {
-                            @apply ax-bg-primary-50;
+                            @apply ax-bg-primary-50 dark:ax-bg-white/[0.16];
                         }
                     }
 
@@ -50,7 +48,7 @@
                     &:focus,
                     &.ax-state-focus {
                         &:not(.ax-state-selected) {
-                            @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500;
+                            @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-white/[0.16] dark:ax-text-white;
                         }
                     }
                 }

package/src/components/_loading.scss

@@ -1,4 +1,5 @@
 @layer components {
+    
     .ax-loading {
     }
 
@@ -38,6 +39,10 @@
         background: rgba(var(--ax-color-white) 2);
     }
 
+    ax-loading-spinner{
+        @apply ax-flex;
+    }
+
     @keyframes pulse2 {
 
         0%,

package/src/components/_numberbox.scss

@@ -0,0 +1,17 @@
+@layer components {
+
+    ax-number-box,
+    .ax-number-box {
+        .ax-number-box-arrows {
+            @apply ax-grid ax-invisible;
+        }
+
+        &:focus,
+        &:focus-within,
+        &:hover {
+            .ax-number-box-arrows {
+                @apply ax-visible;
+            }
+        }
+    }
+}

package/src/components/_popup.scss

@@ -1,7 +1,7 @@
 @layer components {
-
-    ax-page-footer {
-        @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-light-700;
+    ax-page-footer,
+    ax-page-header {
+        @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
 
         ax-prefix {
             @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
@@ -12,37 +12,39 @@
         }
     }
 
-    .ax-popup {
-        @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');
+    ax-page-footer {
+        @apply ax-border-t;
+    }
 
-        header {
-            @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
-        }
+    ax-page-header {
+        @apply ax-border-b;
+    }
 
-        main {
-            @apply ax-flex-1 ax-overflow-auto;
-        }
+    .ax-popup {
+        @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");
 
-        footer {
-            @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-white/[0.2];
+        .ax-popup-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 ax-cursor-move;
 
-            ax-prefix {
-                @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
+            span {
+                @apply ax-font-medium;
             }
 
-            ax-suffix {
-                @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
+            i {
+                @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
+                &:hover {
+                    @apply ax-text-light-500 dark:ax-text-light-100;
+                }
             }
         }
 
-        header,
-        footer {
-            >div {
-                @apply ax-flex ax-items-center;
-            }
+        .ax-popup-main-container {
+            @apply ax-overflow-auto ax-flex-1;
+        }
+        .ax-popup-footer-container{
+            
         }
-
         &.ax-popup-full {
             @apply ax-w-screen ax-h-full ax-max-h-full;
         }
@@ -69,6 +71,9 @@
             &.ax-popup-sm {
                 width: 100vw;
                 max-height: 100vh;
+                .ax-popup-main {
+                    @apply ax-h-screen;
+                }
             }
 
             &.ax-popup-md {
@@ -84,6 +89,9 @@
             &.ax-popup-sm {
                 width: 100vw;
                 max-height: 100vh;
+                .ax-popup-main {
+                    @apply ax-h-screen;
+                }
             }
 
             &.ax-popup-md {
@@ -100,6 +108,9 @@
                 width: 100vw;
                 height: 100vh;
                 max-height: 100vh;
+                .ax-popup-main {
+                    @apply ax-h-screen;
+                }
             }
 
             &.ax-popup-md,
@@ -109,14 +120,16 @@
         }
 
         @media all and (min-width: 0px) and (max-width: 424px) {
-
             &.ax-popup-sm,
             &.ax-popup-md,
             &.ax-popup-lg {
                 width: 100vw;
-                height: 100%;
-                max-height: 100%;
+                height: 100vh;
+                max-height: 100vh;
+                .ax-popup-main {
+                    @apply ax-h-screen;
+                }
             }
         }
     }
-}
+}

package/src/components/_switch copy.scss

@@ -0,0 +1,185 @@
+@layer components {
+    .ax-switch {
+        label {
+            width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
+            height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
+            @apply ax-relative ax-inline-block;
+            input {
+                @apply ax-w-0 ax-h-0 ax-opacity-0;
+            }
+
+            .ax-switch-slider {
+                @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
+                @include control-dark("editor");
+                -webkit-transition: 0.4s;
+                transition: 0.4s;
+                &::before {
+                    @apply ax-absolute ax-bg-white ax-rounded-full;
+                    content: "";
+                    width: 35%;
+                    padding-bottom: 35%;
+                    left: 7%;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    -webkit-transition: 0.4s;
+                    transition: 0.4s;
+                }
+            }
+
+            input:checked + .ax-switch-slider {
+                @apply ax-bg-primary-500;
+            }
+
+            input:focus + .ax-switch-slider {
+                @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
+            }
+
+            input:checked + .ax-switch-slider:before {
+                -webkit-transform: translate(140%, -50%);
+                -ms-transform: translate(140%, -50%);
+                transform: translate(140%, -50%);
+            }
+            
+        }
+        &.ax-success {
+            ax-loading {
+                @apply ax-stroke-success-500;
+            }
+            > input {
+                &:checked {
+                    & + .ax-switch-slider {
+                        background-color: rgb(var(--ax-color-success));
+                    }
+                }
+            }
+            input:focus ~ .ax-switch-slider {
+                @apply ax-ring-success-500;
+            }
+        }
+        &.ax-secondary {
+            ax-loading {
+                @apply ax-stroke-secondary-500;
+            }
+            > input {
+                &:checked {
+                    & + .ax-switch-slider {
+                        background-color: rgb(var(--ax-color-secondary));
+                    }
+                }
+            }
+            input:focus ~ .ax-switch-slider {
+                @apply ax-ring-secondary-500;
+            }
+        }
+        &.ax-danger {
+            ax-loading {
+                @apply ax-stroke-danger-500;
+            }
+            > input {
+                &:checked {
+                    & + .ax-switch-slider {
+                        background-color: rgb(var(--ax-color-danger));
+                    }
+                }
+            }
+            input:focus ~ .ax-switch-slider {
+                @apply ax-ring-danger-500;
+            }
+        }
+        &.ax-warning {
+            ax-loading {
+                @apply ax-stroke-warning-500;
+            }
+            > input {
+                &:checked {
+                    & + .ax-switch-slider {
+                        background-color: rgb(var(--ax-color-warning));
+                    }
+                }
+            }
+            input:focus ~ .ax-switch-slider {
+                @apply ax-ring-warning-500;
+            }
+        }
+        &.ax-info {
+            ax-loading {
+                @apply ax-stroke-info-500;
+            }
+            > input {
+                &:checked {
+                    & + .ax-switch-slider {
+                        background-color: rgb(var(--ax-color-info));
+                    }
+                }
+            }
+            input:focus ~ .ax-switch-slider {
+                @apply ax-ring-info-500;
+            }
+        }
+        &.ax-light {
+            ax-loading {
+                @apply ax-stroke-light-500;
+            }
+            > input {
+                &:checked {
+                    & + .ax-switch-slider {
+                        background-color: rgb(var(--ax-color-light));
+                    }
+                }
+            }
+            input:focus ~ .ax-switch-slider {
+                @apply ax-ring-light-500;
+            }
+        }
+        &.ax-dark {
+            ax-loading {
+                @apply ax-stroke-dark-500;
+            }
+            > input {
+                &:checked {
+                    & + .ax-switch-slider {
+                        background-color: rgb(var(--ax-color-dark));
+                    }
+                }
+            }
+            input:focus ~ .ax-switch-slider {
+                @apply ax-ring-dark-500;
+            }
+        }
+        &.ax-state-loading {
+            label {
+                .ax-switch-slider {
+                    &::before {
+                        background-image: url("../images/fill-loading.svg");
+                        background-color: transparent;
+                        background-size: cover;
+                        @apply ax-absolute;
+                        content: "";
+                        width: 35%;
+                        padding-bottom: 35%;
+                    transform: translate(0, -50%);
+
+                        left: 7%;
+                        top: 18%;
+                        animation: rotation 0.6s infinite linear;
+
+                    }
+                    @keyframes rotation {
+                        from {
+                          transform: rotate(0deg);
+                        }
+                        to {
+                          transform: rotate(359deg);
+                        }
+                      }
+                }
+            }
+        }
+        &.ax-state-disabled {
+            @apply ax-opacity-60;
+        }
+        &.ax-state-readonly {
+            @apply ax-opacity-60;
+        }
+    }
+}