@acorex/styles 5.1.2 → 5.1.5

package/src/components/_dropdown.scss

@@ -1,226 +0,0 @@
-@layer components {
-    ax-drop-down,
-    .ax-drop-down {
-        display: contents;
-
-        .ax-dropdown-content {
-            @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto;
-            &.ax-state-disabled {
-                @include control-states("editor-disabled");
-            }
-        }
-    }
-
-    .ax-backdrop-light {
-        @apply cdk-overlay-backdrop ax-bg-white ax-bg-opacity-50;
-    }
-
-    .ax-backdrop-dark {
-        @apply cdk-overlay-backdrop ax-bg-black ax-bg-opacity-50;
-    }
-
-    .ax-overlay-pane {
-        @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
-        @include control-states("surface");
-
-
-        // &:focus,
-        // &:focus-within
-        // {
-        //     @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-50 ax-border-transparent;
-        // }
-
-        &.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-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
-                &:hover {
-                    @apply ax-text-light-500 dark:ax-text-light-100;
-                }
-            }
-        }
-
-        &.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-text-sm ax-text-light-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;
-                    }
-                }
-
-                &.ax-info-default {
-                    @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
-
-                    &:hover,
-                    &:focus {
-                        @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-info-500 dark:ax-text-info-100;
-                    }
-
-                    &:active {
-                        @apply ax-bg-info-100 ax-text-info-700 dark:ax-bg-info-600 dark:ax-text-info-100;
-                    }
-
-                    &.ax-state-selected {
-                        @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;
-
-                    &:hover,
-                    &:focus {
-                        @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400 dark:ax-text-dark-50;
-                    }
-
-                    &:active {
-                        @apply ax-bg-dark-100 ax-text-dark-700 dark:ax-text-dark-100;
-                    }
-
-                    &.ax-state-selected {
-                        @apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
-                    }
-                }
-
-                &.ax-light-default {
-                    @apply ax-bg-transparent ax-text-light-500 ax-border-transparent dark:ax-text-light-200;
-
-                    &:hover,
-                    &:focus {
-                        @apply ax-bg-light-100 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
-                    }
-
-                    &:active {
-                        @apply ax-bg-light-200 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
-                    }
-
-                    &.ax-state-selected {
-                        @apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
-                    }
-                }
-            }
-        }
-    }
-}

package/src/components/_editor-container.scss

@@ -1,139 +0,0 @@
-@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-states("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;
-        }
-
-        .ax-placeholder 
-        {
-            @apply ax-flex ax-mx-2;
-            --tw-placeholder-opacity: 1;
-            color: rgb(var(--ax-color-placeholder) / var(--tw-placeholder-opacity));
-        }
-
-        &:first-child {
-        }
-
-        [class*=" ax-ic-"],
-        [class^="ax-ic-"] {
-            font-size: 1.2rem !important;
-            line-height: 1 !important;
-        }
-
-        .ax-input {
-            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-textarea{
-            width: 1%;
-            text-align: inherit;
-            font: inherit;
-            @apply ax-w-full ax-flex-1 ax-bg-transparent ax-border-none ax-p-2.5 ax-rounded;
-
-            &:focus {
-                box-shadow: none;
-            }
-        }
-        ax-prefix {
-            *,
-            ax-button,
-            ax-addon {
-                @apply ax-rounded-s;
-            }
-        }
-
-        ax-suffix {
-            *,
-            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;
-                }
-            }
-        }
-
-        &.ax-state-disabled {
-            @include control-states("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-button {
-            &.ax-state-disabled {
-                @apply ax-bg-light-100 ax-text-light-fore ax-opacity-100 #{!important};
-            }
-        }
-    }
-   
-}

package/src/components/_fieldset.scss

@@ -1,8 +0,0 @@
-@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

@@ -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/_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-md;
-        }
-        &.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-light-700 dark:ax-text-light-100;
-        }
-    }
-}

package/src/components/_list.scss

@@ -1,80 +0,0 @@
-@layer components {
-    .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-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;
-
-                    &:focus,
-                    &:focus-visible {
-                        @apply ax-outline-none;
-                    }
-
-                    &.ax-state-selected {
-                        @apply ax-bg-light-200 ax-text-light-900 ax-font-medium dark:ax-text-primary-50;
-                    }
-
-                    &:not(.ax-check-box) {
-                        &.ax-state-selected {
-                            @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-white/[0.16];
-                        }
-                    }
-
-                    &.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;
-        }
-    }
-
-    .cdk-overlay-container {
-        .ax-list-items-container {
-            max-height: 25vh;
-
-            &.ax-full {
-                max-height: 75vh;
-                height: fit-content;
-            }
-        }
-    }
-}

package/src/components/_loading.scss

@@ -1,59 +0,0 @@
-@layer components {
-    
-    .ax-loading {
-    }
-
-    .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;
-            }
-        }
-    }
-
-    .ax-loading-overlay {
-        background: rgba(var(--ax-color-white) 2);
-    }
-
-    ax-loading-spinner{
-        @apply ax-flex;
-    }
-
-    @keyframes pulse2 {
-
-        0%,
-        100% {
-            transform: translate(-50%, -50%) scale(0);
-            opacity: 1;
-        }
-
-        50% {
-            transform: translate(-50%, -50%) scale(1);
-            opacity: 0;
-        }
-    }
-}

package/src/components/_menu.scss

@@ -1,50 +0,0 @@
-@layer components {
-    ax-menu,
-    .ax-menu {
-        > ul {
-            @apply ax-flex ax-flex-col ax-text-sm;
-
-            li {
-                @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-mb-2 ax-px-2.5 ax-py-3 ax-rounded-md;
-
-                    &.active {
-                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-                    }
-
-                    &:hover {
-                        @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-                       
-                    }
-                    ax-icon {
-                        @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/_numberbox.scss

@@ -1,17 +0,0 @@
-@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/_picker.scss

@@ -1,11 +0,0 @@
-@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;
-            }
-        }
-    }
-}