@acorex/styles 7.0.5 → 7.0.7

package/src/components/_dialog.scss

@@ -1,83 +0,0 @@
-// @layer components {
-//     .ax-dialog {
-//         @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-neutral-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
-//         width: 25vw;
-//         background-color: #fff;
-//         @include control-states("surface");
-//         // @include screen("mobile"){
-//         //     width: calc(var(--ax-overlay-full-width) * 1vw);
-//         // }
-//         // @include screen("tablet"){
-//         //     width: 60vw;
-//         // }
-//         // @include screen("laptop"){
-//         //     width: 25vw;
-//         // }
-//         // @include screen("extraSmall"){
-//         //     width: 95vw;
-//         // }
-
-//         @include media('phone'){
-//             width: 98vw;
-//         }
-//         @include media('tablet'){
-//             width: 75vw;
-//         }
-//         @include media('desktop'){
-//             width: 30vw;
-//         }
-//         @include media('desktop-large'){
-//             width: 33vw;
-//         }
-       
-//         .ax-dialog-icon-side {
-//             @apply ax-flex ax-justify-center ax-col-span-2;
-//             .ax-dialog-icon {
-//                 min-width: 3rem;
-//                 @apply ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-cursor-move ax-text-2xl;
-//             }
-//         }
-//         .ax-dialog-content-side {
-//             @apply ax-col-span-9;
-//             .ax-dialog-title {
-//                 @apply ax-text-lg ax-font-bold ax-text-neutral-700 dark:ax-text-neutral-100;
-//             }
-//             .ax-dialog-content {
-//                 @apply ax-text-sm ax-my-1.5 ax-text-neutral-500 dark:ax-text-neutral-200;
-//             }
-//         }
-//         .ax-dialog-dismiss-icon {
-//             @apply ax-col-span-1;
-//             @apply ax-cursor-pointer ax-text-neutral-400 ax--mt-2.5;
-//         }
-//         .ax-footer {
-//             @apply ax-flex ax-gap-2 ax-col-span-12  ax-justify-end;
-//         }
-//         &.ax-primary-default {
-//             .ax-dialog-icon {
-//                 @apply ax-text-primary-500 ax-bg-primary-50 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-//             }
-//         }
-//         &.ax-success-default {
-//             .ax-dialog-icon {
-//                 @apply ax-text-success-500 ax-bg-success-50 dark:ax-bg-success-500 dark:ax-text-success-fore;
-//             }
-//         }
-//         &.ax-danger-default {
-//             .ax-dialog-icon {
-//                 @apply ax-text-danger-500 ax-bg-danger-50 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
-//             }
-//         }
-//         &.ax-warning-default {
-//             .ax-dialog-icon {
-//                 @apply ax-text-warning-500 ax-bg-warning-50 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
-//             }
-//         }
-//         &.ax-primary-default {
-//             .ax-dialog-icon {
-//                 @apply ax-text-primary-500 ax-bg-primary-50 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-//             }
-//         }
-//     }
-    
-// }

package/src/components/_drawer.scss

@@ -1,113 +0,0 @@
-// @layer components {
-//     .ax-drawer-container {
-//         @apply ax-flex ax-relative ax-w-full ax-h-full ax-overflow-hidden;
-
-//         &.ax-fixed {
-//             @apply ax-hidden ax-top-0 ax-right-0 ax-left-0 ax-bottom-0 ax-z-[1000];
-
-//             &.ax-visible {
-//                 @apply ax-flex;
-//             }
-//         }
-
-//         .ax-backdrop {
-//             @apply ax-bg-black/30 ax-absolute ax-w-full ax-h-full ax-z-[1] ax-top-0 ax-bottom-0 ax-transition-all;
-//         }
-
-//         ax-drawer {
-//             @apply ax-flex ax-flex-col ax-max-w-[95%] ax-h-full ax-animate-duration-300 ax-transition-all #{!important};
-//             .ax-header,
-//             .ax-footer {
-//                 @apply ax-p-3 ax-border-neutral-300 dark:ax-border-neutral-700 ;
-//             }
-//             .ax-footer
-//             {
-//                 @apply ax-border-t;
-//             }
-//             .ax-header
-//             {
-//                 @apply ax-border-b;
-//             }
-//             &.ax-preload {
-//                 @apply ax-animate-duration-[0ms] ax-transition-none #{!important};
-//             }
-
-
-//             &>.ax-content
-//             {
-//                 @apply ax-overflow-auto ax-bg-white ax-flex-1 ax-h-full ax-text-neutral-500;
-//                 @include control-states("surface");
-
-//             }
-
-//             &.ax-drawer-overlay {
-//                 @apply ax-absolute;
-
-//                 &.ax-expanded {
-//                     @apply ax-z-[2];
-//                 }
-
-//                 &.ax-collapsed {
-//                     @apply ax-z-[0];
-//                 }
-
-//                 &.ax-drawer-start {
-
-//                     &.ax-expanded {
-//                         @apply  ax-start-0;
-//                     }
-
-//                     &.ax-collapsed {
-//                         inset-inline-start: calc(-1 * var(--ax-el-width));
-//                     }
-
-//                 }
-
-//                 &.ax-drawer-end {
-
-//                     &.ax-expanded {
-//                         @apply  ax-end-0;
-//                     }
-
-//                     &.ax-collapsed {
-//                         inset-inline-end: calc(-1 * var(--ax-el-width));
-//                     }
-//                 }
-//             }
-
-//             &.ax-drawer-push {
-//                 @apply ax-flex-initial;
-
-//                 &.ax-drawer-start {
-//                     @apply ax-order-first;
-
-//                     &.ax-expanded {
-//                         margin-inline-start: 0%
-//                     }
-
-//                     &.ax-collapsed {
-//                         margin-inline-start: calc(-1 * var(--ax-el-width));
-//                     }
-
-//                 }
-
-//                 &.ax-drawer-end {
-//                     @apply ax-order-last;
-
-//                     &.ax-expanded {
-//                         margin-inline-end: 0%;
-//                     }
-
-//                     &.ax-collapsed {
-//                         margin-inline-end: calc(-1 * var(--ax-el-width));
-//                     }
-//                 }
-//             }
-
-//         }
-
-//         &>.ax-content {
-//             @apply ax-flex-1 ax-h-full ax-overflow-auto;
-//         }
-//     }
-// }

package/src/components/_dropdown.scss

@@ -1,162 +0,0 @@
-// @layer components {
-//     ax-drop-down,
-//     .ax-drop-down {
-//         @apply ax-contents;
-//         .ax-dropdown-content {
-//             @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto ax-items-center;
-//             &.ax-state-disabled {
-//                 @include control-states("editor-disabled");
-//             }
-//         }
-//     }
-
-//     .ax-overlay-pane {
-//         @apply ax-bg-white ax-border ax-rounded ax-border-neutral-200 ax-shadow-lg;
-//         @include control-states("surface");
-//         .ax-header,
-//         .ax-footer {
-//             @apply ax-bg-white ax-p-3 ax-border-neutral-300 dark:ax-border-neutral-700;
-//             @include control-states("editor");
-//         }
-//         .ax-footer {
-//             @apply ax-border-t;
-//         }
-//         .ax-header {
-//             @apply ax-border-b;
-//         }
-//         @include screen(mobile) {
-//             @apply ax-rounded-b-none;
-//         }
-
-//         &.ax-overlay-center {
-//             @apply ax-h-fit;
-//             max-height: 90vh;
-//             width: 80vw;
-//         }
-
-//         &.ax-overlay-actionsheet {
-//             @apply ax-w-full ax-h-auto ax-bg-white;
-//             @include control-states("surface");
-//             max-height: 85vh;
-//             &.ax-full {
-//                 max-height: 95vh;
-//                 height: 95vh;
-//             }
-//         }
-
-//         &.ax-overlay-full {
-//             @apply ax-w-screen ax-h-screen;
-//         }
-
-//         &.ax-dropdown-list {
-//             @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
-
-//             .ax-button-item {
-//                 height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-//                 line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
-//                 @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-py-2 ax-text-sm ax-text-neutral-600 ax-cursor-pointer ax-select-none;
-
-//                 &.ax-divide {
-//                     @apply ax-border-t ax-border ax-border-solid;
-//                 }
-
-//                 &.ax-state-disabled {
-//                     @apply ax-cursor-not-allowed ax-opacity-60;
-//                 }
-
-//                 .ax-prefix {
-//                     @apply ax-flex ax-flex-row ax-pe-2;
-//                 }
-
-//                 .ax-suffix {
-//                     @apply ax-flex ax-flex-row ax-ps-2;
-//                 }
-
-//                 &.ax-primary-default {
-//                     @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
-
-//                     &:hover,
-//                     &:focus {
-//                         @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-primary-500 dark:ax-text-primary-100;
-//                     }
-
-//                     &:active {
-//                         @apply ax-bg-primary-100 ax-text-primary-700 dark:ax-bg-primary-600 dark:ax-text-primary-100;
-//                     }
-
-//                     &.ax-state-selected {
-//                         @apply ax-bg-primary-200 dark:ax-bg-primary-600 dark:ax-text-primary-100;
-//                     }
-//                 }
-
-//                 &.ax-secondary-default {
-//                     @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
-
-//                     &:hover,
-//                     &:focus {
-//                         @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-secondary-500 dark:ax-text-secondary-100;
-//                     }
-
-//                     &:active {
-//                         @apply ax-bg-secondary-100 ax-text-secondary-700 dark:ax-bg-secondary-600 dark:ax-text-secondary-100;
-//                     }
-
-//                     &.ax-state-selected {
-//                         @apply ax-bg-secondary-200 dark:ax-bg-secondary-600 dark:ax-text-secondary-100;
-//                     }
-//                 }
-
-//                 &.ax-warning-default {
-//                     @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
-
-//                     &:hover,
-//                     &:focus {
-//                         @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-warning-500 dark:ax-text-warning-100;
-//                     }
-
-//                     &:active {
-//                         @apply ax-bg-warning-100 ax-text-warning-700 dark:ax-bg-warning-600 dark:ax-text-warning-100;
-//                     }
-
-//                     &.ax-state-selected {
-//                         @apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
-//                     }
-//                 }
-
-//                 &.ax-danger-default {
-//                     @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
-
-//                     &:hover,
-//                     &:focus {
-//                         @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-danger-500 dark:ax-text-danger-100;
-//                     }
-
-//                     &:active {
-//                         @apply ax-bg-danger-100 ax-text-danger-700 dark:ax-bg-danger-600 dark:ax-text-danger-100;
-//                     }
-
-//                     &.ax-state-selected {
-//                         @apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
-//                     }
-//                 }
-
-//                 &.ax-success-default {
-//                     @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
-
-//                     &:hover,
-//                     &:focus {
-//                         @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-success-500 dark:ax-text-success-100;
-//                     }
-
-//                     &:active {
-//                         @apply ax-bg-success-100 ax-text-success-700 dark:ax-bg-success-600 dark:ax-text-success-100;
-//                     }
-
-//                     &.ax-state-selected {
-//                         @apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }

package/src/components/_fieldset.scss

@@ -1,3 +0,0 @@
-@layer components {
-    
-}

package/src/components/_form.scss

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

package/src/components/_image.scss

@@ -1,24 +0,0 @@
-ax-image {
-    @apply ax-block ax-relative ax-transition-all ax-overflow-hidden;
-
-    &:not(.ax-state-empty, .ax-state-loading) {
-        &:hover {
-            ax-overlay[data-overlay-mode="hover"] {
-                @apply ax-flex ax-animate-fadeIn ax-animate-faster;
-            }
-        }
-    }
-    img {
-        @apply ax-w-full ax-h-full;
-    }
-    ax-overlay {
-        @apply ax-absolute ax-w-full ax-bg-black/50 ax-h-full ax-top-0 ax-flex ax-items-center ax-justify-center;
-    }
-    ax-overlay[data-overlay-mode="hover"] {
-        @apply ax-hidden;
-    }
-    ax-loading {
-        @apply  ax-w-full ax-h-full ax-bg-neutral-200 dark:ax-bg-white/10 ax-flex ax-items-center ax-justify-center;
-    }
-
-}

package/src/components/_input.scss

@@ -1,14 +0,0 @@
-@layer components {
-    .ax-input,
-    .ax-textarea {
-        @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 ax-rounded-default;
-        }
-        &.ax-state-disabled {
-            @include control-states("editor-disabled");
-        }
-    }
-   
-}

package/src/components/_label.scss

@@ -1,7 +0,0 @@
-@layer components {
-    .ax-label {
-        label {
-            @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-neutral-700 dark:ax-text-neutral-100;
-        }
-    }
-}

package/src/components/_loading.scss

@@ -1,3 +0,0 @@
-@layer components {
- 
-}

package/src/components/_menu copy.scss

@@ -1,96 +0,0 @@
-ax-menu {
-    @apply ax-text-sm  ax-transition-all ax-select-none;
-    & > ul {
-        @apply ax-flex ax-gap-2;
-        .ax-menu-item {
-            @apply ax-flex ax-items-center ax-text-sm ax-justify-between ax-cursor-pointer ax-flex-1;
-        }
-        li {
-            @apply ax-relative ax-flex ax-items-center;
-
-            .ax-menu-item-prefix,
-            .ax-menu-item-suffix {
-                @apply ax-flex ax-items-center ax-gap-2;
-                ax-icon {
-                    @apply ax-transition-all ax-text-xl;
-                }
-            }
-            .ax-menu-item-prefix {
-            }
-            .ax-menu-item-suffix {
-                ax-icon {
-                    @apply ax-block ax--rotate-180;
-                    &.ax-menu-active-icon {
-                        @apply ax--rotate-90;
-                    }
-                }
-            }
-            &.ax-state-disabled {
-                @apply ax-cursor-not-allowed;
-                .ax-menu-item-prefix,
-                .ax-menu-item-suffix {
-                    @apply ax-opacity-40;
-                }
-            }
-        }
-        &.ax-horizontal {
-            > li {
-                padding-inline-end: 0.5rem;
-                &:hover {
-                    @apply ax-text-neutral-600;
-                }
-            }
-        }
-        &.ax-vertical {
-            @apply ax-flex-col ax-p-2;
-            li {
-                &.ax-divider {
-                    &::before {
-                        content: "";
-                        @apply -ax-bottom-1 ax-start-0 ax-absolute ax-w-full ax-h-[1px] ax-bg-neutral-200 dark:ax-bg-white/20;
-                    }
-                }
-            }
-            & > li {
-                @apply ax-flex ax-px-4 ax-py-1 ax-items-center ax-rounded-default ax-text-sm ax-justify-between ax-cursor-pointer;
-            }
-        }
-        &.ax-side-menu {
-            @apply ax-flex-col;
-
-            li {
-                @apply ax-flex-col ax-mb-1 ax-rounded-default;
-                .ax-menu-item {
-                    @apply ax-p-2;
-                }
-                &:not(.ax-state-disabled) {
-                    > .ax-menu-item {
-                        &:hover {
-                            @apply ax-bg-neutral-100 dark:ax-bg-white/20 ax-rounded-default;
-                        }
-                    }
-                }
-
-                ul {
-                    @apply ax-mt-1 ax-mx-4;
-                }
-            }
-        }
-    }
-
-    .ax-submenu-ul {
-        @apply ax-bg-white ax-border ax-border-neutral-200 dark:ax-border-neutral-500 ax-sm ax-rounded-default ax-py-2;
-        @include control-states("surface");
-        li {
-            @apply ax-py-3 ax-px-4 ax-cursor-pointer ax-flex ax-items-center ax-justify-between;
-            .ax-menu-item-suffix {
-                @apply ax-ms-3;
-            }
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-neutral-200 dark:ax-bg-white/[0.16];
-                }
-            }
-        }
-    }
-}

package/src/components/_menu.scss

@@ -1,117 +0,0 @@
-// ax-menu {
-//     ul {
-//         &.ax-rtl {
-//             li {
-//                 ax-icon {
-//                     &.ax-icon-chevron {
-//                         @apply ax-block ax-rotate-0;
-//                     }
-//                 }
-//             }
-//         }
-//         li {
-//             @apply ax-cursor-pointer ax-text-neutral-500 dark:ax-text-neutral-50 ax-rounded-default;
-//             &:not(.ax-state-disabled) {
-//                 &:hover {
-//                     @apply ax-text-neutral-800 dark:ax-text-neutral-200;
-//                 }
-//             }
-
-//             .ax-menu-item {
-//                 @apply ax-flex ax-justify-between ax-items-center ax-w-full ax-gap-1;
-//             }
-//             .ax-menu-item-prefix,
-//             .ax-menu-item-suffix {
-//                 @apply ax-flex ax-items-center ax-gap-2 ax-h-6;
-//                 ax-icon {
-//                     @apply ax-transition-all ax-text-xl;
-//                 }
-//             }
-//             .ax-menu-item-prefix {
-//             }
-//             .ax-menu-item-suffix {
-//                 ax-icon {
-//                     @apply ax-block ax-rotate-180;
-//                     &.ax-menu-active-icon {
-//                         @apply -ax-rotate-90;
-//                     }
-//                 }
-//             }
-//             &.ax-state-disabled {
-//                 @apply ax-cursor-not-allowed;
-//                 .ax-menu-item-prefix,
-//                 .ax-menu-item-suffix {
-//                     @apply ax-opacity-40;
-//                 }
-//             }
-//         }
-//     }
-//     > ul {
-//         &.ax-rtl {
-//             .ax-menu-item-suffix {
-//                 ax-icon {
-//                     @apply ax-block ax-rotate-180;
-//                     &.ax-menu-active-icon {
-//                         @apply ax-rotate-90;
-//                     }
-//                 }
-//             }
-//         }
-//         &.ax-horizontal {
-//             @apply ax-flex ax-items-center ax-gap-4;
-//             li {
-//                 &.ax-divider {
-//                     @apply ax-w-[1px] ax-h-4;
-//                 }
-//             }
-//             > li {
-//                 @apply ax-cursor-pointer;
-//                 .ax-menu-item {
-//                     @apply ax-flex ax-items-start ax-justify-between;
-//                 }
-//             }
-//         }
-//         &.ax-vertical {
-//             @apply ax-w-full;
-//             &:not(&.ax-submenu-ul) {
-//                 @apply ax-space-y-4;
-//             }
-//             li {
-//                 &.ax-divider {
-//                     @apply ax-h-[1px] ax-my-2;
-//                 }
-//             }
-//             &.ax-submenu-ul {
-//                 @apply ax-p-2 ax-bg-white ax-border ax-border-neutral-200 ax-rounded-default ax-shadow;
-//                 @include control-states("surface");
-
-//                 li {
-//                     &:not(.ax-state-disabled, .ax-divider) {
-//                         @apply ax-py-1 ax-ps-4 ax-pe-2;
-//                         &:hover {
-//                             @apply ax-bg-neutral-200 dark:ax-bg-white/10 dark:ax-text-neutral-50;
-//                         }
-//                     }
-//                     &.ax-divider {
-//                         @apply ax-h-[1px] ax-my-2;
-//                     }
-//                 }
-//             }
-//         }
-//         &.ax-side-menu {
-//             @apply ax-space-y-4;
-//             li {
-//                 &.ax-divider {
-//                     @apply ax-h-[1px] ax-my-2;
-//                 }
-//                 ul {
-//                     @apply ax-ps-4 ax-space-y-4 ax-mt-4;
-//                 }
-//             }
-//         }
-//     }
-
-//     .ax-divider {
-//         @apply ax-bg-neutral-200 ax-p-0 ax-cursor-auto dark:ax-bg-white/20;
-//     }
-// }

package/src/components/_numberbox.scss

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