@acorex/styles 6.1.12 → 7.0.0

package/src/components/_drawer.scss

@@ -1,113 +1,113 @@
-@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];
+// @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-light-300 dark:ax-border-light-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-light-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;
-        }
-    }
-}
+//             &.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,216 +1,162 @@
-@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-light-200 ax-shadow-lg;
-        @include control-states("surface");
-        .ax-header,
-        .ax-footer {
-            @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-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-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-700 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;
-                    }
-                }
-            }
-        }
-    }
-}
+// @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;
+//                     }
+//                 }
+//             }
+//         }
+//     }
+// }