@acorex/styles 6.1.12 → 7.0.1

package/src/components/_tabs.scss

@@ -1,235 +1,235 @@
-@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;
-        }
-
-        &:not(.ax-look-custom) {
-            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 ax-font-medium ax-select-none;
-                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;
-                    @apply ax-opacity-50 ax-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-overflow-hidden ax-rounded-default;
-                @include control-states("editor");
-
-                ax-tab-item {
-                    @apply ax-bg-white ax-border-e 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 {
-                    }
-
-                    &:last-child {
-                        @apply ax-border-e-0;
-                    }
-
-                    &:hover,
-                    &.ax-state-active {
-                        &:not(.ax-state-disabled) {
-                            border-bottom-color: rgb(var(--ax-color-primary-500)) !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-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
-                            content: "";
-                        }
-                    }
-                    &:hover {
-                        &::after {
-                            @apply ax-absolute ax-top-0 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-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
-                            content: "";
-                        }
-                    }
-                    &:hover {
-                        &::after {
-                            @apply ax-absolute ax-bottom-0 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-h-full;
-
-                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 ax-overflow-hidden;
-                @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-500)) !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-200 ax-text-primary-900 dark:ax-text-light-50;
-                    }
-                }
-            }
-        }
-    }
-}
+// @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;
+//         }
+
+//         &:not(.ax-look-custom) {
+//             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 ax-font-medium ax-select-none;
+//                 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;
+//                     @apply ax-opacity-50 ax-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-neutral-300 ax-shadow-sm ax-overflow-hidden ax-rounded-default;
+//                 @include control-states("editor");
+
+//                 ax-tab-item {
+//                     @apply ax-bg-white ax-border-e ax-border-b-2  ax-border-solid ax-border-neutral-300 dark:ax-text-neutral-200;
+//                     @include control-states("editor");
+
+//                     border-bottom-color: transparent !important;
+
+//                     &:first-child {
+//                     }
+
+//                     &:last-child {
+//                         @apply ax-border-e-0;
+//                     }
+
+//                     &:hover,
+//                     &.ax-state-active {
+//                         &:not(.ax-state-disabled) {
+//                             border-bottom-color: rgb(var(--ax-color-primary-500)) !important;
+//                         }
+//                     }
+//                 }
+//             }
+
+//             &.ax-look-start-line {
+//                 @apply ax-border-t ax-border-solid ax-border-neutral-300 dark:ax-border-neutral-200/10 ax-w-full;
+//                 ax-tab-item {
+//                     &.ax-state-active {
+//                         @apply ax-text-primary-500;
+//                         &::after {
+//                             @apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
+//                             content: "";
+//                         }
+//                     }
+//                     &:hover {
+//                         &::after {
+//                             @apply ax-absolute ax-top-0 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-neutral-300 dark:ax-border-neutral-200/10 ax-w-full;
+//                 ax-tab-item {
+//                     &.ax-state-active {
+//                         @apply ax-text-primary-500;
+//                         &::after {
+//                             @apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
+//                             content: "";
+//                         }
+//                     }
+//                     &:hover {
+//                         &::after {
+//                             @apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
+//                             content: "";
+//                         }
+//                     }
+//                 }
+//             }
+
+//             &.ax-look-pills {
+//                 ax-tab-item {
+//                     @apply ax-text-neutral-fore ax-mr-1 ax-rounded dark:ax-text-neutral-200;
+
+//                     &:hover {
+//                         @apply ax-bg-neutral-300 ax-text-neutral-fore dark:ax-text-neutral-50 dark:ax-bg-neutral-600;
+//                     }
+
+//                     &.ax-state-active {
+//                         @apply ax-bg-neutral-200 ax-text-neutral-fore dark:ax-text-neutral-50 dark:ax-bg-neutral-600;
+//                     }
+//                 }
+//             }
+
+//             &.ax-look-pills-color {
+//                 ax-tab-item {
+//                     @apply ax-text-neutral-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-h-full;
+
+//                 ax-tab-item {
+//                     @apply ax-text-center ax-justify-start ax-py-2;
+//                 }
+//             }
+
+//             &.ax-look-default {
+//                 @apply ax-border ax-border-solid ax-border-neutral-300 ax-shadow-sm ax-rounded ax-overflow-hidden;
+//                 @include control-states("editor");
+
+//                 ax-tab-item {
+//                     @apply ax-bg-white ax-border-s ax-border-solid ax-border-neutral-300 ax-border-b-0  dark:ax-text-neutral-200 ax-mb-1;
+//                     &:last-child {
+//                         @apply ax-mb-0;
+//                     }
+//                     &:hover,
+//                     &.ax-state-active {
+//                         border-inline-start-color: rgb(var(--ax-color-primary-500)) !important;
+//                     }
+//                 }
+//             }
+
+//             &.ax-look-start-line {
+//                 ax-tab-item {
+//                     @apply ax-border-s-2 ax-border-solid ax-border-neutral-300 dark:ax-border-neutral-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-neutral-300 dark:ax-border-neutral-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-neutral-fore ax-mr-1 ax-rounded dark:ax-text-neutral-200 ax-mb-1;
+//                     &:last-child {
+//                         @apply ax-mb-0;
+//                     }
+//                     &:hover {
+//                         @apply ax-bg-neutral-300 ax-text-neutral-fore dark:ax-text-neutral-100;
+//                     }
+
+//                     &.ax-state-active {
+//                         @apply ax-bg-neutral-300 ax-text-neutral-fore dark:ax-text-neutral-50;
+//                     }
+//                 }
+//             }
+
+//             &.ax-look-pills-color {
+//                 ax-tab-item {
+//                     @apply ax-text-neutral-fore ax-mr-1 ax-rounded dark:ax-text-neutral-200 ax-mb-1;
+//                     &:last-child {
+//                         @apply ax-mb-0;
+//                     }
+//                     &:hover {
+//                         @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-neutral-100;
+//                     }
+
+//                     &.ax-state-active {
+//                         @apply ax-bg-primary-200 ax-text-primary-900 dark:ax-text-neutral-50;
+//                     }
+//                 }
+//             }
+//         }
+//     }
+// }

package/src/components/_textarea.scss

@@ -1,35 +1,31 @@
-@layer components {
-    .ax-textarea {
-        min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        @apply ax-relative ax-h-auto 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;
-        @include control-states("editor");
-
-        &:focus-within {
-            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ;
-        }
-        textarea {
-            min-height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-            height: fit-content;
-            line-height:1.7;
-            @apply ax-w-full ax-text-sm ax-p-2.5;
-            @include control-states("editor");
-          
-            &:focus {
-                @apply ax-outline-transparent;
-            }
-        }
-        > .ax-prefix,
-        > .ax-suffix {
-            @apply ax-mb-2 ax-p-1.5;
-            @include control-states("editor");
-            .ax-button {
-                @apply ax-text-sm;
-                --ax-base-size: 5px;
-            }
+ax-textarea {
+    position: relative;
+    width: 100%;
+    height: auto !important;
+    flex-direction: column;
+    background-color: var(--ax-color-surface);
+    border-radius: var(--ax-rounded-border-default);
+    border: 1px solid;
+    border: rgb(var(--ax-color-border-default));
+    overflow: hidden;
+    textarea {
+        height: fit-content;
+        line-height: 1.7;
+        width: 100%;
+        font-size: 0.875rem;
+        padding: 0.625rem;
+        &:focus {
+            outline-color: transparent;
         }
+    }
+    > ax-prefix,
+    > ax-suffix {
+        margin-bottom: 0.5rem;
+        padding: 0.375rem;
+    }
 
-        &.ax-state-disabled {
-            @include control-states("editor-disabled");
-        }
+    &.ax-state-disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
     }
 }

package/src/components/_toast.scss

@@ -1,7 +1,7 @@
 @layer components {
     .ax-toast {
         width: max(20vw, 350px);
-        @include screen("mobile") {
+        @include media("mobile") {
             width: 98vw;
         }
     }

package/src/components/_treeview.scss

@@ -1,54 +0,0 @@
-@layer components {
-    .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 dark:ax-bg-white/30;
-                        }
-                        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 {
-            }
-        }
-    }
-}

package/src/components/_uploader.scss

@@ -1,18 +0,0 @@
-@layer components {
-    ax-uploader {
-        &.ax-look-default {
-            @apply ax-relative ax-w-full ax-rounded-default ax-border-2 ax-border-dashed ax-border-light-200 dark:ax-border-white/30 ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-text-light-400 ax-transition-all ax-bg-center ax-bg-cover;
-            &:hover,
-            &.ax-state-hover {
-                @apply ax-border-primary-500 ax-text-primary-500;
-            }
-            &::before {
-                content: "";
-                @apply ax-pb-[100%];
-            }
-            .upload-icon {
-                @apply ax-text-5xl;
-            }
-        }
-    }
-}