@acorex/styles 6.1.12 → 6.5.0

package/src/components/_list.scss

@@ -1,83 +0,0 @@
-@layer components {
-    .ax-list {
-        @apply ax-h-full ax-flex ax-flex-col ax-overflow-hidden md:ax-max-h-80;
-        .ax-header,
-        .ax-footer {
-            @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
-            @include control-states("editor");
-        }
-        .ax-footer {
-            @apply ax-border-t;
-        }
-        .ax-content {
-            @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
-
-            &.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-group {
-                        & > span {
-                            @apply ax-font-bold ax-flex ax-items-center ax-px-3 ax-text-sm ax-text-light-900;
-                            height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-                        }
-
-                        & > ul {
-                            @apply ax-px-3;
-                        }
-                    }
-
-                    .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 ax-text-light-700 dark:ax-text-light-100;
-
-                        &:focus,
-                        &:focus-visible {
-                            @apply ax-outline-none;
-                        }
-
-                        &.ax-state-selected {
-                            @apply ax-bg-light-200 ax-text-light-900 ax-font-medium;
-                        }
-
-                        &:not(.ax-check-box) {
-                            &.ax-state-selected {
-                                @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-                            }
-                        }
-
-                        &.ax-state-disabled {
-                            @apply ax-cursor-not-allowed ax-opacity-70;
-                        }
-
-                        &:focus,
-                        &:hover,
-                        &.ax-state-focus {
-                            &:not(.ax-state-selected) {
-                                @apply ax-outline-none ax-bg-light-100 dark:ax-bg-white/[0.16] dark:ax-text-white;
-                            }
-                        }
-                    }
-                }
-
-                .ax-list-loading-container {
-                    @apply ax-flex ax-justify-center ax-p-2;
-                }
-            }
-        }
-
-        .ax-footer {
-        }
-    }
-}
-

package/src/components/_loading.scss

@@ -1,52 +0,0 @@
-@layer components {
-    .ax-loading-host {
-        .ax-loading {
-            position: relative;
-            background: rgba(var(--ax-color-white) 2);
-            width: 4rem;
-            height: 4rem;
-
-            &::before,
-            &::after {
-                content: "";
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                transform: translate(-50%, -50%) scale(0);
-            }
-
-            &::before {
-                @apply ax-bg-primary-500;
-                animation: pulse2 2s ease-in-out infinite;
-            }
-
-            &::after {
-                @apply ax-bg-primary-500;
-                animation: pulse2 2s 1s ease-in-out infinite;
-            }
-            @keyframes pulse2 {
-                0%,
-                100% {
-                    transform: translate(-50%, -50%) scale(0);
-                    opacity: 1;
-                }
-
-                50% {
-                    transform: translate(-50%, -50%) scale(1);
-                    opacity: 0;
-                }
-            }
-        }
-    }
-
-    .ax-loading-overlay {
-        background: rgba(var(--ax-color-white) 2);
-    }
-
-    .ax-loading-spinner {
-        @apply ax-flex;
-    }
-}

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-light-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-light-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-light-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-light-200 dark:ax-border-dark-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-light-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-ic-chevron {
-                        @apply ax-block ax-rotate-0;
-                    }
-                }
-            }
-        }
-        li {
-            @apply ax-cursor-pointer ax-text-light-500 dark:ax-text-light-50 ax-rounded-default;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-text-light-800 dark:ax-text-light-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-light-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-light-200 dark:ax-bg-white/10 dark:ax-text-light-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-light-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;
-            }
-        }
-    }
-}

package/src/components/_popup.scss

@@ -1,105 +0,0 @@
-@layer components {
-
-    .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 ax-mx-auto;
-        @include control-states("surface");
-        ax-header,
-        ax-footer {
-            @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
-            @include control-states("editor");
-        }
-
-        &:focus
-        {
-            @apply ax-ring-1 ax-ring-primary-500 ax-outline-none;
-        }
-
-        ax-footer
-        {
-            @apply ax-border-t;
-        }
-        .ax-popup-main-container {
-            @apply ax-overflow-auto ax-flex-1;
-        }
-        .ax-popup-footer-container {
-        }
-        &.ax-popup-full {
-            @apply ax-w-screen;
-            height: calc(100 * var(--ax-vh));
-            max-height: calc(100 * var(--ax-vh));
-        }
-
-        &.ax-fit {
-            width: fit-content;
-        }
-
-        @media all and (min-width: 1280px) {
-            &.ax-popup-sm {
-                width: 420px !important;
-            }
-
-            &.ax-popup-md {
-                width: 680px !important;
-            }
-
-            &.ax-popup-lg {
-                width: 1024px !important;
-            }
-        }
-
-        @media all and (min-width: 1024px) and (max-width: 1279px) {
-            &.ax-popup-sm {
-                width: 100vw;
-                max-height: calc(100 * var(--ax-vh));
-                .ax-popup-main {
-                    @apply ax-h-screen;
-                }
-            }
-
-            &.ax-popup-md {
-                width: 500px !important;
-            }
-
-            &.ax-popup-lg {
-                width: 900px !important;
-            }
-        }
-
-        @media all and (min-width: 768px) and (max-width: 1023px) {
-            &.ax-popup-md {
-                width: 500px !important;
-            }
-            &.ax-popup-lg {
-                width: 700px !important;
-            }
-        }
-
-        @media all and (min-width: 425px) and (max-width: 767px) {
-            &.ax-popup-sm {
-                width: 100vw;
-                height: calc(100 * var(--ax-vh));
-                max-height: calc(100 * var(--ax-vh));
-                .ax-popup-main {
-                    @apply ax-h-screen;
-                }
-            }
-
-            &.ax-popup-md,
-            &.ax-popup-lg {
-                width: 460px !important;
-            }
-        }
-
-        @media all and (min-width: 0px) and (max-width: 424px) {
-            &.ax-popup-md,
-            &.ax-popup-lg {
-                width: calc(var(--ax-overlay-full-width) * 1vw);
-                height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
-                max-height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
-                .ax-popup-main {
-                    @apply ax-h-screen;
-                }
-            }
-        }
-    }
-}

package/src/components/_progress.scss

@@ -1,60 +0,0 @@
-@layer components {
-    .ax-progress-bar {
-        @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
-        .ax-prefix{
-            @apply ax-pe-2;
-        }
-        .ax-suffix{
-            @apply ax-ps-2;
-        }
-        .ax-progress-bar-container {
-            @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 dark:ax-bg-white/10 ax-flex ax-rounded-full;
-            .ax-progress-bar-rise {
-                max-width: 100%;
-                transition: width 1s;
-                @apply ax-bg-primary-500 ax-h-full ax-absolute ax-start-0 ax-rounded-full;
-            }
-        }
-
-        &.ax-primary-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-primary-500 dark:ax-bg-primary-800;
-            }
-        }
-        &.ax-secondary-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-secondary-500 dark:ax-bg-secondary-800;
-            }
-        }
-        &.ax-success-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-success-500 dark:ax-bg-success-800;
-            }
-        }
-        &.ax-warning-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-warning-500 dark:ax-bg-warning-800;
-            }
-        }
-        &.ax-danger-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-danger-500 dark:ax-bg-danger-800;
-            }
-        }
-        &.ax-info-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-info-500 dark:ax-bg-info-800;
-            }
-        }
-        &.ax-light-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-light-300 dark:ax-border-light-500;
-            }
-        }
-        &.ax-dark-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-dark-500 dark:ax-bg-dark-200;
-            }
-        }
-    }
-}

package/src/components/_radio.scss

@@ -1,32 +0,0 @@
-@layer components {
-   .ax-radio {
-        @apply ax-text-sm ax-font-medium ax-text-light-700;
-      
-        .ax-radio {
-            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
-            @include control-states('editor');
-
-            &:checked {
-                @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
-                background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-            }
-            &: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 {
-                @apply ax-mb-0;
-            }
-        }
-    }
-}