@acorex/styles 5.1.1 → 5.1.5

package/src/components/_calendar.scss

@@ -1,166 +0,0 @@
-@layer components {
-    ax-calendar {
-        @apply ax-block ax-border ax-border-solid ax-border-light-300 ax-rounded ax-bg-white ax-select-none dark:ax-bg-white/[0.03] dark:ax-border-transparent;
-
-        &.ax-state-disabled {
-            .ax-calendar-slots {
-                @apply ax-opacity-50 ax-cursor-default;
-            }
-        }
-
-        .ax-calendar-header {
-            @apply ax-flex ax-justify-between ax-py-1 ax-px-2 ax-border-b ax-border-light-300 ax-border-solid dark:ax-border-transparent;
-
-            // .ax-nav-button {
-            //     @apply ax-col-span-8 ax-justify-start;
-            // }
-
-            // .ax-prev-button,
-            // .ax-next-button {
-            //     @apply ax-col-span-2 ax-justify-center ax-ms-1;
-            // }
-        }
-
-        .ax-calendar-body {
-            @apply ax-m-2 ;
-
-            .ax-calendar-slots {
-                @apply ax-grid;
-
-                & > div {
-                    @apply ax-text-sm ax-text-black dark:ax-text-light-200 ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded;
-
-                    &::before {
-                        content: "";
-                        padding-top: 100%;
-                        float: left;
-                    }
-
-                    &::after {
-                        content: "";
-                        display: block;
-                        clear: both;
-                    }
-
-                    &:hover {
-                        @apply ax-bg-light-100 dark:ax-bg-white/[0.07];
-                    }
-                    &:focus {
-                        @apply ax-ring-2 ax-ring-primary-500 ax-outline-none;
-                    }
-
-                    &.ax-state-disabled {
-                        @apply ax-text-light-300 ax-cursor-not-allowed;
-                        &:hover {
-                            @apply ax-bg-transparent ax-text-light-300;
-                        }
-                        // &::after {
-                        //     @apply ax-text-sm ax-cursor-not-allowed ax-text-danger-600;
-                        //     position: absolute;
-                        //     content: "\03a7";
-                        //     margin: auto;
-                        // }
-                    }
-
-                    &.ax-state-holiday {
-                        @apply ax-text-danger-500;
-                        &:hover {
-                            @apply ax-text-black dark:ax-text-light-100;
-                        }
-                    }
-
-                    &.ax-state-today {
-                        @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-                        &:hover {
-                            @apply ax-text-primary-500 dark:ax-text-primary-fore;
-                        }
-                    }
-
-                    &.ax-state-other {
-                        @apply ax-opacity-50;
-                    }
-
-                    &.ax-state-selected {
-                        @apply ax-bg-primary-500 ax-text-primary-fore ax-opacity-100;
-
-                        &:hover {
-                            @apply ax-text-primary-fore;
-                        }
-                    }
-
-                    &.ax-state-event {
-                        &::after {
-                            @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark-500;
-                            content: "";
-                        }
-
-                        &.ax-state-event-primary {
-                            &::after {
-                                @apply ax-bg-primary-500;
-                            }
-                        }
-
-                        &.ax-state-event-secondary {
-                            &::after {
-                                @apply ax-bg-secondary-500;
-                            }
-                        }
-
-                        &.ax-state-event-success {
-                            &::after {
-                                @apply ax-bg-success-500;
-                            }
-                        }
-
-                        &.ax-state-event-warning {
-                            &::after {
-                                @apply ax-bg-warning-500;
-                            }
-                        }
-
-                        &.ax-state-event-danger {
-                            &::after {
-                                @apply ax-bg-danger-500;
-                            }
-                        }
-
-                        &.ax-state-event-info {
-                            &::after {
-                                @apply ax-bg-info-500;
-                            }
-                        }
-                    }
-                }
-
-                &.ax-calendar-slots-day {
-                    @apply ax-grid-cols-7;
-                }
-
-                &.ax-calendar-slots-year,
-                &.ax-calendar-slots-month {
-                    @apply ax-grid-cols-4;
-                }
-            }
-
-            .ax-calendar-week {
-                @apply ax-grid ax-grid-cols-7 ax-my-2;
-
-                & > div {
-                    @apply ax-text-sm ax-text-black dark:ax-text-light-200 ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
-                }
-            }
-        }
-
-        .ax-calendar-footer {
-            @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100 dark:ax-bg-transparent dark:ax-border-transparent;
-        }
-    }
-
-    .ax-overlay-pane
-    {
-        ax-calendar
-        {
-            @apply ax-border-none
-        }
-    }
-}

package/src/components/_carousel.scss

@@ -1,44 +0,0 @@
-@layer components {
-    .ax-carousel {
-        @apply ax-text-center ax-overflow-hidden ax-w-full ax-block ax-relative;
-        .ax-carousel-arrows {
-            @apply ax-flex ax-absolute ax-justify-between ax-justify-items-center ax-cursor-pointer ax-bg-transparent ax-text-white ax-invisible ax-left-0 ax-right-0 ax-top-0 ax-bottom-0;
-            button {
-                @apply ax-border-none ax-cursor-pointer ax-bg-transparent ax-text-white ax-visible;
-                .ax-ic {
-                    @apply ax-text-4xl;
-                }
-            }
-            .ax-vertical-arrow{
-                @apply ax-absolute ax-left-1/2 ax-block;
-                transform: translate(-50%, -50%);
-                &.ax-top-arrow {
-                    @apply ax-top-5;
-                    .ax-ic {
-                        @apply ax-block ax-rotate-90
-                    }
-                }
-                &.ax-bottom-arrow {
-                    @apply -ax-bottom-5;
-                    transform: translate(-50%, -50%);
-                    .ax-ic {
-                        @apply ax-block -ax-rotate-90
-                    }
-                }
-            }
-          
-        }
-        .ax-carousel-pager {
-            @apply ax-flex ax-my-3 ax-justify-center;
-            button {
-                @apply ax-p-1 ax-mx-1 ax-cursor-pointer ax-border-none ax-rounded-full ax-bg-light-300;
-                &:hover {
-                    @apply ax-bg-primary-500;
-                }
-                &.ax-state-active {
-                    @apply ax-bg-primary-500;
-                }
-            }
-        }
-    }
-}

package/src/components/_checkbox.scss

@@ -1,63 +0,0 @@
-@layer components {
-
-    .ax-check-box,
-    ax-check-box {
-
-        .ax-state-error {
-            @apply ax-text-danger-500;
-
-            input[type="checkbox"] {
-                @apply ax-border-danger-500;
-            }
-        }
-        .ax-state-success {
-            @apply  ax-text-success-600;
-
-            input[type="checkbox"] {
-                @apply ax-border-success-600;
-            }
-        }
-
-
-        .ax-wrapper {
-            &.ax-state-disabled {
-                @apply ax-cursor-not-allowed ax-opacity-80;
-
-                input[type="checkbox"] {
-                    @apply ax-cursor-not-allowed;
-                }
-            }
-        }
-
-        input[type="checkbox"] {
-            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
-            @include control-states("editor");
-
-            &:checked,
-            &:indeterminate {
-                @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
-            }
-
-            &:checked {
-                background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-            }
-
-            &:indeterminate {
-                background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
-            }
-
-            &: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;
-            }
-
-        }
-    }
-}

package/src/components/_collapse.scss

@@ -1,52 +0,0 @@
-@layer components {
-    ax-collpase,
-    .ax-collapse {
-        @apply ax-border ax-border-light-200 ax-block ax-text-sm ax-rounded ax-overflow-hidden;
-
-        .ax-collapse-header {
-            @apply ax-cursor-pointer ax-select-none;
-         
-            &.ax-state-collapsed {
-                .ax-collapse-header-container {
-                    @apply ax-border-b-0;
-                    .ax-collapse-arrow {
-                        @apply -ax-rotate-90;
-                    }
-                }
-                .ax-collapse-custom-header-container{
-                    @apply ax-border-b-0;
-                }
-            }
-            .ax-collapse-custom-header-container{
-                @apply ax-bg-light-50 ax-border-b ax-border-light-200;
-            }
-            .ax-collapse-header-container {
-                @apply ax-flex ax-justify-between ax-px-3 ax-py-1.5 ax-bg-light-50 ax-border-b ax-border-light-200;
-                .ax-collapse-arrow {
-                    @apply ax-inline-block ax-text-xl ax-me-2 ax-rotate-90;
-                }
-            }
-        }
-        .ax-collapse-body {
-            @apply ax-p-3;
-        }
-    }
-    .ax-collapse-group {
-        @apply ax-block ax-border ax-border-light-200 ax-rounded ax-overflow-hidden;
-
-        ax-collpase,
-        .ax-collapse {
-            @apply ax-rounded-none ax-border-none;
-            .ax-collapse-header-container {
-                @apply ax-border-t ax-border-light-200;
-            }
-        }
-        ax-collapse {
-            &:first-child {
-                .ax-collapse-header-container {
-                    @apply ax-border-t-0;
-                }
-            }
-        }
-    }
-}

package/src/components/_datapager.scss

@@ -1,40 +0,0 @@
-@layer components {
-    .ax-datapager {
-        @apply ax-flex ax-flex-row ax-items-center ax-px-1 ax-py-1 ax-text-black ax-border ax-border-solid ax-border-light-300 ax-border-opacity-50 ax-bg-light-50 ax-rounded ax-shadow-md ax-max-w-full;
-        .ax-button-group {
-            @apply ax-border-none;
-            ax-button {
-                @apply ax-border-none ax-rounded ax-mr-1;
-            }
-        }
-        .ax-wrapper {
-            @apply ax-flex ax-flex-1 ax-flex-row ax-items-center ax-max-w-full;
-            .ax-datapager-nav-buttons,
-            .ax-datapager-numeric-selector,
-            .ax-datapager-page-sizes {
-                @apply ax-flex-initial;
-            }
-            .ax-datapager-info {
-                @apply ax-flex ax-justify-end ax-flex-1 ax-order-last ax-px-2.5;
-            }
-            ax-button {
-                &.ax-state-disabled {
-                    @apply ax-border-none;
-                }
-            }
-            .ax-datapager-nav-buttons {
-                ax-button {
-                    @apply ax-p-1;
-                }
-            }
-        }
-        .ax-datapager-input-selector {
-            @apply ax-px-1;
-            --ax-base-ratio: 4;
-            .ax-input {
-                width: calc(var(--ax-base-size) * var(--ax-base-ratio) * 1.5);
-                text-align: center;
-            }
-        }
-    }
-}

package/src/components/_datepicker.scss

@@ -1,5 +0,0 @@
-@layer components {
-    .ax-datepicker-body {
-        @apply ax-m-auto ax-shadow-sm ax-w-full ax-rounded ax-border ax-border-light-300 ax-border-none;
-    }
-}

package/src/components/_dialog.scss

@@ -1,63 +0,0 @@
-@layer components {
-    .ax-dialog {
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
-        width: 25vw;
-        @include control-states("surface");
-        @include screen("mobile"){
-            width: calc(var(--ax-overlay-full-width) * 1vw);
-        }
-        @include screen("tablet"){
-            width: 60vw;
-        }
-
-        .ax-dialog-icon-side {
-            @apply ax-flex ax-justify-center ax-col-span-2;
-            .ax-dialog-icon {
-                min-width: 3rem;
-                @apply ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-cursor-move ax-text-2xl;
-            }
-        }
-        .ax-dialog-content-side {
-            @apply ax-col-span-9;
-            .ax-dialog-title {
-                @apply ax-text-lg ax-font-bold ax-text-light-700 dark:ax-text-light-100;
-            }
-            .ax-dialog-content {
-                @apply ax-text-sm ax-my-1.5 ax-text-light-500 dark:ax-text-light-200;
-            }
-        }
-        .ax-dialog-dismiss-icon {
-            @apply ax-col-span-1;
-            @apply ax-cursor-pointer ax-text-light-400 ax--mt-2.5;
-        }
-        .ax-dialog-footer {
-            @apply ax-col-span-12 ax-flex ax-justify-end;
-        }
-        &.ax-primary-default {
-            .ax-dialog-icon {
-                @apply ax-text-primary-500 ax-bg-primary-50;
-            }
-        }
-        &.ax-success-default {
-            .ax-dialog-icon {
-                @apply ax-text-success-500 ax-bg-success-50;
-            }
-        }
-        &.ax-danger-default {
-            .ax-dialog-icon {
-                @apply ax-text-danger-500 ax-bg-danger-50;
-            }
-        }
-        &.ax-warning-default {
-            .ax-dialog-icon {
-                @apply ax-text-warning-500 ax-bg-warning-50;
-            }
-        }
-        &.ax-info-default {
-            .ax-dialog-icon {
-                @apply ax-text-info-500 ax-bg-info-50;
-            }
-        }
-    }
-    
-}

package/src/components/_drawer.scss

@@ -1,126 +0,0 @@
-@layer components {
-    .ax-drawer-container {
-        @apply ax-flex ax-relative ax-w-full ax-h-full ax-overflow-hidden;
-
-        .ax-drawer-backdrop {
-            @apply ax-absolute ax-w-full ax-h-full ax-z-[990] ax-transition-all ax-top-0 ax-bottom-0 ax-bg-black/50;
-          
-        }
-
-        .ax-drawer {
-          
-
-            // &.ax-animated {
-            //     transition: all 500ms;
-            // }
-
-            &.ax-drawer-overlay {
-                @apply ax-absolute ax-z-[999];
-                z-index: 9999;
-            }
-
-            &.ax-drawer-start {
-                @apply ax-h-full;
-                &.ax-hide {
-                    position: absolute;
-                    left: -9999px;
-                }
-
-                &.ax-collapsed {
-                    margin-inline-start: calc(-2 * var(--attr-width));
-                }
-
-                &.ax-expanded {
-                    margin-inline-start: 0;
-                }
-            }
-
-            &.ax-drawer-end {
-                @apply ax-h-full;
-                &.ax-hide {
-                    position: absolute;
-                    right: -9999px;
-                }
-
-                &.ax-drawer-overlay {
-                    &.ax-collapsed {
-                        right: calc(-2 * var(--attr-width));
-                    }
-
-                    &.ax-expanded {
-                        right: calc(-2 * var(--attr-diff));
-                    }
-                }
-
-                &.ax-drawer-push {
-                    &.ax-collapsed {
-                        margin-inline-end: calc(-2 * var(--attr-width));
-                    }
-
-                    &.ax-expanded {
-                        margin-inline-end: 0;
-                    }
-                }
-            }
-            &.ax-drawer-top {
-                @apply ax-w-full;
-                &.ax-hide {
-                    position: absolute;
-                    top: -9999px;
-                }
-
-                &.ax-drawer-overlay {
-                    &.ax-collapsed {
-                        top: calc(-2 * var(--attr-height));
-                    }
-
-                    &.ax-expanded {
-                        top: calc(-2 * var(--attr-diff));
-                    }
-                }
-
-                &.ax-drawer-push {
-                    &.ax-collapsed {
-                        margin-block-start: calc(-2 * var(--attr-height));
-                    }
-
-                    &.ax-expanded {
-                        margin-block-start: 0;
-                    }
-                }
-            }
-            &.ax-drawer-bottom {
-                @apply ax-w-full;
-                &.ax-hide {
-                    position: absolute;
-                    bottom: -9999px;
-                }
-
-                &.ax-drawer-overlay {
-                    &.ax-collapsed {
-                        bottom: calc(-2 * var(--attr-height));
-                    }
-
-                    &.ax-expanded {
-                        bottom: calc(-2 * var(--attr-diff));
-                    }
-                }
-
-                &.ax-drawer-push {
-                    &.ax-collapsed {
-                        margin-block-start: calc(-2 * var(--attr-height));
-                    }
-
-                    &.ax-expanded {
-                        margin-block-start: 0;
-                    }
-                }
-            }
-        }
-
-        .ax-drawer-content {
-            @apply ax-flex-1 ax-overflow-auto;
-            width: var(--attr-content-width);
-        }
-    }
-}