@acorex/styles 5.1.2 → 5.1.6

package/src/components/_switch.scss

@@ -1,187 +0,0 @@
-@layer components {
-    ax-switch,
-    .ax-switch {
-        button {
-            @apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 ax-text-light-fore ax-transition-all;
-            min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
-            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
-            line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
-            &.ax-switch-checked {
-                @apply ax-bg-primary-500;
-                .ax-switch-handle {
-                    @apply ax-right-0.5;
-                    left: initial;
-                }
-                .ax-switch-inner {
-                    @apply ax-text-primary-fore;
-                    margin-inline-end: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
-                    margin-inline-start: var(--ax-base-size);
-                }
-            }
-            .ax-switch-handle {
-                width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
-                height: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
-                @apply ax-bg-white ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
-                ax-loading {
-                    transform: translateY(-50%);
-                    @apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
-                    svg {
-                        @apply ax-fill-primary-500 ax-stroke-primary-500;
-                    }
-                }
-                &:before {
-                    @apply ax-absolute ax-bg-white ax-transition-all ax-rounded-full;
-                    content: "";
-                }
-            }
-            .ax-switch-inner {
-                @apply ax-block;
-                margin-inline-start: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
-                margin-inline-end: var(--ax-base-size);
-                transition: margin 0.2s;
-            }
-        }
-        &.ax-primary {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-primary-500;
-                    .ax-switch-inner {
-                        @apply ax-text-primary-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-primary-500 ax-stroke-primary-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-secondary {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-secondary-500;
-                    .ax-switch-inner {
-                        @apply ax-text-secondary-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-secondary-500 ax-stroke-secondary-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-success {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-success-500;
-                    .ax-switch-inner {
-                        @apply ax-text-success-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-success-500 ax-stroke-success-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-warning {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-warning-500;
-                    .ax-switch-inner {
-                        @apply ax-text-warning-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-warning-500 ax-stroke-warning-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-danger {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-danger-500;
-                    .ax-switch-inner {
-                        @apply ax-text-danger-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-danger-500 ax-stroke-danger-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-info {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-info-500;
-                    .ax-switch-inner {
-                        @apply ax-text-info-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-info-500 ax-stroke-info-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-dark {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-dark-500;
-                    .ax-switch-inner {
-                        @apply ax-text-dark-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-dark-500 ax-stroke-dark-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-light {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-light-500;
-                    .ax-switch-inner {
-                        @apply ax-text-light-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-light-500 ax-stroke-light-500;
-                        }
-                    }
-                }
-            }
-        }
-        .ax-state-disabled {
-                @apply ax-opacity-60 ax-cursor-not-allowed #{!important};
-        }
-        .ax-state-readonly {
-                @apply ax-opacity-75 #{!important};
-        }
-    }
-}

package/src/components/_table.scss

@@ -1,48 +0,0 @@
-@layer components {
-    .ax-table {
-        @apply  ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-dark-400;
-        td {
-            @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400 ax-px-6 ax-py-4 ax-text-sm;
-        }
-        thead {
-            th {
-                @apply ax-text-sm ax-font-bold ax-text-start ax-py-4 ax-px-6;
-            }
-            tr {
-                @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400;
-            }
-        }
-        &.ax-table-alternate {
-            tbody {
-                tr {
-                    &:nth-child(odd) {
-                        @apply ax-bg-light-100 dark:ax-bg-dark-400/20;
-                    }
-                }
-            }
-        }
-        @media screen and (max-width: 601px) {
-            &.ax-table-responsive {
-                @apply ax-break-words ax-block ax-border-0;
-                thead {
-                    @apply ax-absolute -ax-left-full -ax-top-full;
-                }
-
-                td {
-                    @apply ax-block ax-float-left ax-w-full ax-clear-both ax-bg-white ax-px-1.5 ax-py-2.5 ax-box-border last:ax-border-0;
-                    &:before {
-                        content: attr(data-label);
-                        @apply ax-block ax-font-bold;
-                    }
-                }
-                tr {
-                    @apply ax-border ax-border-light-200 dark:ax-border-dark-400;
-                }
-                tr,
-                tbody {
-                    @apply ax-block ax-float-left ax-w-full ax-mb-2.5;
-                }
-            }
-        }
-    }
-}

package/src/components/_tabs.scss

@@ -1,238 +0,0 @@
-@layer components {
-    ax-tabs {
-        @apply ax-p-0 ax-overflow-y-hidden ax-overflow-x-auto ax-w-max ax-block;
-
-        .ax-items-wrapper {
-            @apply ax-flex;
-
-            ax-tab-item {
-                @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm;
-                min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-                line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
-
-                &.ax-state-disabled {
-                    background-color: rgb(var(--ax-color-disabled)) !important;
-                    color: rgb(var(--ax-color-disabled-fore)) !important;
-                    cursor: not-allowed !important;
-                }
-
-                &.ax-state-active {
-                    @apply ax-text-black;
-                }
-
-                ax-prefix {
-                    @apply ax-flex ax-flex-row ax-pe-2;
-                }
-
-                ax-suffix {
-                    @apply ax-flex ax-flex-row ax-ps-2;
-                }
-            }
-        }
-
-        &.ax-tabs-fit {
-            .ax-items-wrapper ax-tab-item {
-                @apply ax-flex-1;
-            }
-        }
-
-        & > .ax-tab-controll {
-            @apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
-            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-                0 1px 10px 0 rgba(0, 0, 0, 0.12);
-        }
-
-       
-        &.ax-horizontal {
-            &.ax-look-default {
-                @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
-                @include control-states("editor");
-
-                ax-tab-item {
-                    @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
-                    @include control-states("editor");
-
-                    border-bottom-color: transparent !important;
-
-                    &:first-child {
-                        @apply ax-rounded-l;
-                    }
-
-                    &:last-child {
-                        @apply ax-rounded-r ax-border-r-0;
-                    }
-
-                    &:hover,
-                    &.ax-state-active {
-                        border-bottom-color: rgb(var(--ax-color-primary)) !important;
-                    }
-                }
-            }
-
-            &.ax-look-start-line {
-                @apply ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
-                ax-tab-item {
-                    &.ax-state-active {
-                        @apply ax-text-primary-500;
-                        &::after {
-                            @apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
-                            content: "";
-                        }
-                       
-                    }
-                    &:hover {
-                            &::after {
-                                @apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
-                                content: "";
-                            }
-                    }
-                }
-            }
-
-            &.ax-look-end-line {
-                @apply ax-border-b ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
-                ax-tab-item {
-
-                    &.ax-state-active {
-                        @apply ax-text-primary-500;
-                        &::after {
-                            @apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
-                            content: "";
-                        }
-                       
-                    }
-                    &:hover {
-                            &::after {
-                                @apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
-                                content: "";
-                            }
-                    }
-                }
-            }
-
-            &.ax-look-pills {
-                ax-tab-item {
-                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
-
-                    &:hover {
-                        @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
-                    }
-
-                    &.ax-state-active {
-                        @apply ax-bg-light-200 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
-                    }
-                }
-            }
-
-            &.ax-look-pills-color {
-                ax-tab-item {
-                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
-
-                    &:hover {
-                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
-                    }
-
-                    &.ax-state-active {
-                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
-                    }
-                }
-            }
-        }
-
-        &.ax-vertical {
-            .ax-items-wrapper {
-                @apply ax-flex-col;
-
-                ax-tab-item {
-                    @apply ax-text-center ax-justify-start ax-py-2;
-                   
-                }
-            }
-
-            &.ax-look-default {
-                @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
-                @include control-states("editor");
-
-                ax-tab-item {
-                    @apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0  dark:ax-text-light-200 ax-mb-1;
-                    &:last-child {
-                        @apply ax-mb-0;
-                    }
-                    &:hover,
-                    &.ax-state-active {
-                        border-inline-start-color: rgb(var(--ax-color-primary)) !important;
-                    }
-                }
-            }
-
-            &.ax-look-start-line {
-                ax-tab-item {
-                    @apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
-
-                    &.ax-state-active {
-                        @apply ax-border-primary-500 ax-text-primary-500;
-
-                        &:hover {
-                            @apply ax-border-primary-500;
-                        }
-                    }
-
-                    &:hover {
-                        @apply ax-border-primary-500 ax-text-primary-500;
-                    }
-                }
-            }
-
-            &.ax-look-end-line {
-                ax-tab-item {
-                    @apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
-
-                    &.ax-state-active {
-                         @apply ax-border-primary-500 ax-text-primary-500;
-                        
-                        &:hover {
-                            @apply ax-border-primary-500;
-                        }
-                    }
-
-                    &:hover {
-                        @apply ax-border-primary-500 ax-text-primary-500;
-                    }
-                }
-            }
-
-            &.ax-look-pills {
-                ax-tab-item {
-                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
-                    &:last-child {
-                        @apply ax-mb-0;
-                    }
-                    &:hover {
-                        @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-100;
-                    }
-
-                    &.ax-state-active {
-                        @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
-                    }
-                }
-            }
-
-            &.ax-look-pills-color {
-                ax-tab-item {
-                    @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
-                    &:last-child {
-                        @apply ax-mb-0;
-                    }
-                    &:hover {
-                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-100;
-                    }
-
-                    &.ax-state-active {
-                        @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
-                    }
-                }
-            }
-        }
-
-    }
-}

package/src/components/_textarea.scss

@@ -1,39 +0,0 @@
-@layer components {
-    ax-textarea,
-    .ax-textarea {
-        min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        @apply ax-relative ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
-        &:focus-within {
-            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
-        }
-        textarea {
-            min-height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-            height: fit-content;
-            @apply ax-w-full ax-text-sm ax-p-1.5;
-            @include control-states("editor");
-          
-            &:focus {
-                @apply ax-outline-transparent;
-            }
-        }
-        > ax-prefix,
-        > ax-suffix {
-            @apply ax-mb-2 ax-p-1.5 ax-absolute;
-            @include control-states("editor");
-            ax-button {
-                @apply ax-text-sm;
-                --ax-base-size: 5px;
-            }
-        }
-        > ax-prefix {
-            @apply ax-top-0 ax-end-0;
-        }
-        > ax-suffix {
-            @apply ax-bottom-0 ax-end-0;
-        }
-
-        &.ax-state-disabled {
-            @include control-states("editor-disabled");
-        }
-    }
-}

package/src/components/_toast.scss

@@ -1,82 +0,0 @@
-@layer components {
-    .ax-toast {
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-200 ax-border ax-border-solid ax-rounded-md ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
-        @include control-states('surface');
-        @screen sm {
-            width: 98vw;
-        }
-        @screen md {
-            width: max(20vw, 350px);
-        }
-        .ax-toast-icon-side {
-            @apply ax-col-span-1 ax-h-full;
-        }
-        .ax-toast-content-side {
-            @apply ax-col-span-10;
-            .ax-toast-title {
-                @apply ax-text-sm ax-font-semibold ax-text-light-700 dark:ax-text-light-100;
-            }
-            .ax-toast-content {
-                @apply ax-py-2 ax-text-sm ax-text-light-400 dark:ax-text-light-200;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-col-span-1 ax-cursor-pointer ax-h-full;
-            .ax-ic {
-                @apply ax-text-base;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-text-light-400;
-        }
-        .ax-toast-buttons {
-            @apply ax-col-span-12;
-        }
-        .ax-toast-progress {
-            @apply ax-absolute ax-bottom-0 ax-h-1 ax-w-0;
-            animation-duration: 4s;
-            animation-timing-function: linear;
-            animation-name: progressBar;
-        }
-        @keyframes progressBar {
-            0% {
-                width: 100%;
-            }
-            100% {
-                width: 0%;
-            }
-        }
-        &.ax-success {
-            .ax-toast-icon {
-                @apply ax-text-success-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-success-400;
-            }
-        }
-        &.ax-danger {
-            .ax-toast-icon {
-                @apply ax-text-danger-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-danger-400;
-            }
-        }
-        &.ax-warning {
-            .ax-toast-icon {
-                @apply ax-text-warning-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-warning-400;
-            }
-        }
-        &.ax-info {
-            .ax-toast-icon {
-                @apply ax-text-info-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-info-400;
-            }
-        }
-    }
-}

package/src/components/_tooltip.scss

@@ -1,44 +0,0 @@
-@layer components {
-    .ax-tooltip-container {
-        @apply ax-relative;
-        .ax-tooltip {
-            @apply ax-block ax-p-1 ax-bg-black ax-text-white ax-rounded;
-        }
-        .ax-tooltip-tringle {
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-top: 5px solid #000;
-            position: absolute;
-
-            &.ax-tooltip-tringle-bottom {
-                transform: rotate(180deg);
-                left: 0;
-                right: 0;
-                margin: auto;
-                top: -5px;
-            }
-            &.ax-tooltip-tringle-right {
-                transform: rotate(90deg);
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                left: -7px;
-            }
-            &.ax-tooltip-tringle-top {
-                transform: rotate(0deg);
-                left: 0;
-                right: 0;
-                margin: auto;
-            }
-            &.ax-tooltip-tringle-left {
-                transform: rotate(270deg);
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                right: -7px;
-            }
-        }
-    }
-}

package/src/components/_treeview.scss

@@ -1,55 +0,0 @@
-@layer components {
-    ax-tree-view,
-    .ax-tree-view {
-        > ul {
-            li {
-                @apply ax-text-sm ax-relative;
-                span {
-                    @apply ax-flex ax-items-center ax-my-1;
-                }
-                ul {
-                    @apply ax-ps-8;
-                    li {
-                    }
-                }
-            }
-        }
-        & > ul {
-            &.ax-list-all {
-                li {
-                    ul {
-                        @apply ax-relative;
-
-                        &::before {
-                            content: "";
-                            width: 1px;
-                            @apply ax-absolute ax-bottom-0 ax-bg-light-200 ax-h-full ax-start-2;
-                        }
-                        li {
-                            &::before {
-                                position: absolute;
-                                top: 0;
-                                right: 12px;
-                                bottom: -4px;
-                                margin-left: -1px;
-                                // border-right: 1px solid #d9d9d9;
-                                content: " ";
-                            }
-                            &::after {
-                                position: absolute;
-                                width: 10px;
-                                height: 14px;
-                                // border-bottom: 1px solid #d9d9d9;
-                                content: " ";
-                            }
-                        }
-                    }
-                }
-            }
-            &.ax-list-node {
-            }
-            &.ax-list-none {
-            }
-        }
-    }
-}