@acorex/styles 4.0.24 → 5.0.4

package/scss/components/calendar.scss

@@ -1,120 +0,0 @@
-.ax-calendar {
-    @extend .ax-bg-white,
-        .ax-text-black,
-        .ax-border,
-        .ax-border-color,
-        .ax-border-solid,
-        .ax-border-opacity-50,
-        .ax-bg-white,
-        .ax-rounded,
-        .ax-shadow-md;
-    width: fit-content;
-    header {
-        @extend .ax-flex, .ax-justify-between, .ax-border-b, .ax-border-color, .ax-border-solid, .ax-py-1\.5, .ax-mx-2;
-    }
-    footer {
-        @extend .ax-flex, .ax-justify-between, .ax-border-t, .ax-border-color, .ax-border-solid, .ax-py-1\.5, .ax-mx-2;
-    }
-    > .ax-calendar-body {
-        @extend .ax-flex, .ax-flex-col, .ax-items-center, .ax-px-2\.5, .ax-py-1\.5;
-    }
-    .ax-calendar-time-picker {
-        @extend .ax-flex, .ax-justify-center, .ax-items-center, .ax-pb-2;
-        > div {
-            @extend .ax-border, .ax-border-color, .ax-border-solid, .ax-rounded, .ax-overflow-hidden;
-            span {
-                width: 10px;
-            }
-            input {
-                @extend .ax-text-center, .ax-text-black, .ax-font-light;
-                border: none;
-                width: calc(var(--ax-base-size) * 5);
-                height: calc(var(--ax-base-size) * 5);
-            }
-        }
-    }
-    .ax-calendar-row {
-        @extend .ax-flex, .ax-mb-0\.5;
-        > span {
-            @extend .ax-relative, .ax-rounded, .ax-font-light;
-            width: calc(var(--ax-base-size) * 5);
-            height: calc(var(--ax-base-size) * 5);
-            line-height: calc(var(--ax-base-size) * 5);
-            &:not(.ax-thead, .ax-state-active, .ax-state-disabled) {
-                &:hover {
-                    @extend .ax-bg-gray-100, .ax-cursor-pointer;
-                }
-            }
-            &.ax-state-active {
-                @extend .ax-bg-primary, .ax-text-primary-fore;
-            }
-            &.ax-state-holiday {
-                @extend .ax-text-danger;
-            }
-            &.ax-state-eventday {
-                &::after {
-                    @extend .ax-absolute;
-                    content: "•";
-                    bottom: 0;
-                    left: 0;
-                    right: 0;
-                    margin: auto;
-                    height: calc((var(--ax-base-size) * 2) + (var(--ax-base-size) / 2));
-                }
-                &.ax-state-eventday-primary {
-                    &::after {
-                        @extend .ax-text-primary;
-                    }
-                }
-                &.ax-state-eventday-secondary {
-                    &::after {
-                        @extend .ax-text-secondary;
-                    }
-                }
-                &.ax-state-eventday-success {
-                    &::after {
-                        @extend .ax-text-success;
-                    }
-                }
-                &.ax-state-eventday-danger {
-                    &::after {
-                        @extend .ax-text-danger;
-                    }
-                }
-                &.ax-state-eventday-warning {
-                    &::after {
-                        @extend .ax-text-warning;
-                    }
-                }
-                &.ax-state-eventday-info {
-                    &::after {
-                        @extend .ax-text-info;
-                    }
-                }
-            }
-            &.ax-state-disabled {
-                @extend .ax-opacity-50, .ax-cursor-not-allowed;
-            }
-        }
-    }
-    .ax-calendar-navbar {
-        .ax-thead {
-            @extend .ax-font-medium;
-        }
-    }
-    .ax-calendar-body {
-        @extend .ax-w-full, .ax-text-center;
-        .ax-months,
-        .ax-years {
-            @extend .ax-flex, .ax-flex-wrap, .ax-max-h-60, .ax-overflow-auto;
-            > div {
-                min-width: calc(var(--ax-base-size) * 2);
-                min-height: calc(var(--ax-base-size) * 2);
-                @extend .ax-text-center, .ax-mb-1, .ax-rounded;
-                &:hover {
-                    @extend .ax-bg-gray-100, .ax-cursor-pointer;
-                }
-            }
-        }
-    }
-}

package/scss/components/carousel.scss

@@ -1,67 +0,0 @@
-.ax-carousel {
-    text-align: center;
-    overflow: hidden;
-    width: 100%;
-    display: block;
-    position: relative;
-
-
-    .ax-carousel-list-container {
-        .ax-carousel-list {
-            .ax-carousel-item {}
-        }
-    }
-
-    .ax-carousel-arrows {
-        @extend .ax-flex,
-        .ax-absolute,
-        .ax-justify-between,
-        .ax-justify-items-center,
-        .ax-cursor-pointer,
-        .ax-bg-transparent,
-        .ax-text-white,
-        .ax-invisible;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-
-        button {
-            @extend .ax-border-none,
-            .ax-cursor-pointer,
-            .ax-bg-transparent,
-            .ax-text-white,
-            .ax-visible;
-
-            .ax-ic {
-                font-size: 2.5rem
-            }
-        }
-    }
-
-    .ax-carousel-pager {
-        @extend .ax-flex,
-        .ax-py-2,
-        .ax-justify-center;
-
-        button {
-            @extend .ax-p-1,
-            .ax-mx-1,
-            .ax-cursor-pointer,
-            .ax-border-none,
-            .ax-rounded-full,
-            .ax-bg-gray-300;
-            width: calc(var(--ax-base-size) * 1.5);
-            height: calc(var(--ax-base-size) * 1.5);
-
-            &:hover {
-                @extend .ax-bg-primary-600;
-            }
-
-            &.ax-state-active {
-                @extend .ax-bg-primary-400;
-            }
-        }
-
-    }
-}

package/scss/components/checkbox.scss

@@ -1,36 +0,0 @@
-.ax-checkbox-label {
-    @extend .ax-text-base, .ax-font-medium;
-    span {
-        vertical-align: middle;
-        @extend .ax-px-1\.5;
-    }
-    .ax-checkbox {
-        vertical-align: middle;
-        @extend .ax-w-4,
-            .ax-h-4,
-            .ax-border,
-            .ax-border-solid,
-            .ax-border-color,
-            .ax-rounded-sm,
-            .ax-bg-white,
-            .ax-text-primary,
-            .ax-shadow-sm,
-            .ax-m-0,
-            .ax-outline-none;
-        &:checked {
-            @extend .ax-border-color-primary;
-            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");
-            border-color: transparent;
-            background-color: currentColor;
-            background-size: 100% 100%;
-            background-position: center;
-            background-repeat: no-repeat;
-        }
-        &:focus {
-            @extend .ax-ring-1, .ax-ring-color-primary, .ax-ring-offset-2;
-        }
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        -o-appearance: none;
-    }
-}

package/scss/components/datapager.scss

@@ -1,80 +0,0 @@
-.ax-datapager {
-    @extend .ax-flex,
-    .ax-flex-row,
-    .ax-items-center,
-    .ax-px-1,
-    .ax-py-1,
-    .ax-text-black,
-    .ax-border,
-    .ax-border-color,
-    .ax-border-solid,
-    .ax-border-opacity-50,
-    .ax-bg-light-50,
-    .ax-rounded,
-    .ax-shadow-md,
-    .ax-max-w-full;
-
-    .ax-button-group {
-        @extend .ax-border-none;
-
-        .ax-button {
-            @extend .ax-border-none,
-            .ax-rounded,
-            .ax-mr-1;
-        }
-    }
-
-    .ax-wrapper {
-        @extend .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 {
-            @extend .ax-flex-initial;
-        }
-
-        .ax-datapager-info {
-            @extend .ax-flex,
-            .ax-justify-end,
-            .ax-flex-1,
-            .ax-order-last,
-            .ax-px-2\.5;
-        }
-
-        .ax-button {
-            &.ax-state-disabled {
-                @extend .ax-border-none;
-            }
-        }
-
-        .ax-datapager-nav-buttons {
-            .ax-button {
-                @extend .ax-p-1;
-            }
-        }
-
-    }
-
-    .ax-datapager-input-selector {
-        @extend .ax-px-1;
-        --ax-base-ratio: 4;
-
-        .ax-input {
-            width: calc(var(--ax-base-size) * var(--ax-base-ratio)*1.5);
-            text-align: center;
-        }
-    }
-
-    &.ax-md {
-        .ax-button {
-            @extend .ax-md;
-        }
-
-        .ax-input {
-            @extend .ax-md;
-        }
-    }
-}

package/scss/components/datepicker.scss

@@ -1,8 +0,0 @@
-.ax-datepicker-body {
-    .ax-calendar {
-        margin: auto;
-        box-shadow: none;
-        width: 100%;
-        border: none !important;
-    }
-}

package/scss/components/dialog.scss

@@ -1,61 +0,0 @@
-@import "../../variables/bases/accessiblity";
-
-.ax-dialog {
-    max-width: 512px;
-    @extend .ax-relative,
-        .ax-bg-white,
-        .ax-shadow-md,
-        .ax-border,
-        .ax-border-color,
-        .ax-border-solid,
-        .ax-rounded,
-        .ax-outline-none;
-
-    &:focus {
-        @extend .ax-ring-2, .ax-ring-color-primary, .ax-ring-opacity-100, .ax-border-color-transparent;
-    }
-
-    @include media-sm {
-        width: 98vw;
-    }
-
-    @include media-md {
-        width: 35vw;
-    }
-
-    @include media-lg {
-        width: 25vw;
-    }
-
-    .ax-dialog-header {
-        @extend .ax-flex, .ax-items-start, .ax-justify-between;
-    }
-
-    .ax-icon {
-        @extend .ax-w-12, .ax-h-12, .ax-flex, .ax-justify-center, .ax-items-center, .ax-text-xl, .ax-rounded-full;
-    }
-
-    &.ax-success {
-        .ax-icon {
-            @extend .ax-text-success, .ax-bg-success-100;
-        }
-    }
-
-    &.ax-danger {
-        .ax-icon {
-            @extend .ax-text-danger, .ax-bg-danger-100;
-        }
-    }
-
-    &.ax-warning {
-        .ax-icon {
-            @extend .ax-text-warning, .ax-bg-warning-100;
-        }
-    }
-
-    &.ax-info {
-        .ax-icon {
-            @extend .ax-text-info, .ax-bg-info-100;
-        }
-    }
-}

package/scss/components/drawer.scss

@@ -1,78 +0,0 @@
-.ax-drawer-container {
-    @extend .ax-flex,
-    .ax-relative,
-    .ax-w-full,
-    .ax-h-full,
-    .ax-overflow-hidden;
-
-    .ax-drawer-backdrop
-    {
-        @extend .ax-absolute,.ax-w-full,.ax-h-full;
-        z-index: 9998;
-        top: 0;
-        right:0;
-        top: 0;
-        bottom: 0;
-        background-color: rgba($color: #000000, $alpha: 0.3)
-    }
-
-    .ax-drawer {
-        @extend .ax-h-full;
-      
-        &.ax-animated{
-            transition: all 500ms;
-        }
-
-        &.ax-drawer-overlay {
-            @extend .ax-absolute;
-            z-index: 9999;
-        }
-
-        &.ax-drawer-start {
-            &.ax-hide {
-                position: absolute;
-                left: -9999px;
-            }
-
-            &.ax-collapsed {
-                margin-inline-start: calc(-1 * var(--attr-width));
-            }
-
-            &.ax-expanded {
-                margin-inline-start: 0;
-            }
-        }
-
-        &.ax-drawer-end {
-            &.ax-hide {
-                position: absolute;
-                right: -9999px;
-            }
-
-            &.ax-drawer-overlay {
-                &.ax-collapsed {
-                    right: calc(-1 * var(--attr-width));
-                }
-
-                &.ax-expanded {
-                    right: calc(-1 * var(--attr-diff));
-                }
-            }
-
-            &.ax-drawer-push {
-                &.ax-collapsed {
-                    margin-inline-end: calc(-1 * var(--attr-width));
-                }
-
-                &.ax-expanded {
-                    margin-inline-end: 0;
-                }
-            }
-        }
-    }
-
-    .ax-drawer-content {
-        @extend .ax-flex-1;
-        width: var(--attr-content-width);
-    }
-}

package/scss/components/dropdown.scss

@@ -1,35 +0,0 @@
-.ax-dropdown {
-    display: contents;
-    .ax-dropdown-content {
-        @extend .ax-text-sm, .ax-flex-1;
-    }
-}
-
-.ax-overlay-pane {
-    &.ax-dropdown-list {
-        @extend .ax-border, .ax-border-color, .ax-border-solid;
-
-        .ax-data-list-items-container {
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .ax-dropdown-item {
-            @include components-sizing(
-                var(--ax-base-size) calc(var(--ax-base-size) * 1.5),
-                var(--ax-font-size-text-base),
-                var(--ax-line-height-text-base),
-                0
-            );
-            @extend .ax-cursor-pointer;
-
-            &.ax-divide {
-                @extend .ax-border-t, .ax-border-color, .ax-border-solid;
-            }
-
-            &:hover {
-                @extend .ax-bg-light-200;
-            }
-        }
-    }
-}

package/scss/components/editor-container.scss

@@ -1,105 +0,0 @@
-@import "../../variables/components/editor-container";
-.ax-editor-container {
-    height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-
-    @extend .ax-flex,
-        .ax-rounded,
-        .ax-bg-white,
-        .ax-overflow-hidden,
-        .ax-shadow-sm,
-        .ax-px-3,
-        .ax-border,
-        .ax-border-solid,
-        .ax-border-color;
-    .ax-input {
-        @extend .ax-text-base, .ax-flex-1;
-        height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        background: transparent;
-        border: none !important;
-        &:focus {
-            box-shadow: none;
-        }
-    }
-    .ax-button {
-        .ax-ic {
-            @extend .ax-text-sm;
-        }
-    }
-
-    &:focus-within {
-        @extend .ax-ring-2, .ax-ring-color-primary, .ax-ring-opacity-100, .ax-border-color-transparent;
-    }
-
-    .ax-suffix,
-    .ax-prefix {
-        * {
-            min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
-            @extend .ax-h-full, .ax-flex, .ax-justify-center, .ax-items-center, .ax-rounded-none;
-        }
-    }
-    * {
-        border-radius: 0 !important;
-    }
-}
-// .ax-editor-container {
-//     @extend .ax-flex,
-//         .ax-flex-1,
-//         .ax-block,
-//         .ax-w-full,
-//         .ax-rounded,
-//         .ax-py-2,
-//         .ax-shadow-sm,
-//         .ax-px-3,
-//         .ax-border,
-//         .ax-border-solid,
-//         .ax-border-color,
-//         .ax-bg-white,
-//         .ax-overflow-hidden;
-//     font-size: var(--ax-font-size-text-sm);
-//     .ax-button {
-//         padding: 0;
-//     }
-
-//     &:focus-within {
-//         @extend .ax-ring-2, .ax-ring-color-primary, .ax-ring-opacity-100, .ax-border-color-transparent;
-//     }
-
-//     &.ax-state-error {
-//         @extend .ax-ring-2, .ax-ring-color-danger, .ax-ring-opacity-100, .ax-border-color-transparent;
-//     }
-
-//     &.ax-state-success {
-//         @extend .ax-ring-2, .ax-ring-color-success, .ax-ring-opacity-100, .ax-border-color-transparent;
-//     }
-
-//     * {
-//         border: none !important;
-//         box-shadow: none !important;
-//     }
-//     .ax-button {
-//         width: 1.1rem;
-//         height: 1.1rem;
-//         @extend .ax-border-none;
-//         .ax-ic {
-//             @extend .ax-text-sm;
-//         }
-//     }
-//     .ax-input {
-//         @extend .ax-flex-1;
-//         &:hover {
-//             @extend .ax-ring-0;
-//         }
-//         &:focus {
-//             @extend .ax-ring-0;
-//         }
-//     }
-
-//     > div {
-//         @extend .ax-flex-1;
-//     }
-// }
-// .ax-aligned-row {
-//     @extend .ax-flex, .ax-items-end;
-//     @include media-sm {
-//     }
-// }

package/scss/components/input.scss

@@ -1,47 +0,0 @@
-@import "../../variables/bases/typography";
-@import "../../variables/bases/accessiblity";
-
-.ax-input-wrapper {
-}
-.ax-input {
-    @extend .ax-outline-none, .ax-text-base, .ax-p-0;
-    line-height: 20px;
-    // @extend .ax-flex-1, .ax-block, .ax-w-full, .ax-rounded, .ax-py-2, .ax-px-4, .ax-text-sm;
-
-    // outline: transparent;
-    // font-family: inherit;
-    // font-weight: inherit;
-    // @extend .ax-rounded,
-    //     .ax-border,
-    //     .ax-border-color,
-    //     .ax-border-solid,
-    //     .ax-bg-white,
-    //     .ax-text-black,
-    //     .ax-shadow,
-    //     .ax-placeholder-placeholder,
-    //     .ax-overflow-hidden;
-    // @include components-sizing(
-    //     var(--ax-base-size) var(--ax-base-size),
-    //     var(--ax-font-size-text-base),
-    //     var(--ax-line-height-text-base),
-    //     var(--ax-border-rounded)
-    // );
-    &:focus {
-        @extend .ax-ring-2, .ax-ring-color-primary, .ax-ring-opacity-100, .ax-border-color-transparent;
-    }
-    // &:hover {
-    //     @extend .ax-ring-2, .ax-ring-color-primary, .ax-ring-opacity-100, .ax-border-color-transparent;
-    // }
-    &.ax-state-disabled {
-        @extend .ax-bg-disabled, .ax-text-disabled-fore, .ax-cursor-not-allowed, .ax-border-color-disabled;
-        &:hover {
-            @extend .ax-border-color-disabled;
-        }
-    }
-}
-// .ax-suffix,
-// .ax-prefix {
-//     width: 1.1rem;
-//     height: 1.1rem;
-//     @extend .ax-text-gray-500;
-// }

package/scss/components/label.scss

@@ -1,6 +0,0 @@
-.ax-label {
-    @extend .ax-block, .ax-text-base, .ax-font-medium, .ax-mb-2;
-    &.ax-state-error {
-        @extend .ax-text-danger;
-    }
-}

package/scss/components/list.scss

@@ -1,55 +0,0 @@
-.ax-list {
-    display: block;
-}
-
-.ax-list-container {
-    .ax-list-items-container {
-        @extend .ax-py-2, .ax-rounded, .ax-shadow, .ax-overflow-y-auto, .ax-h-full;
-
-        &.ax-vertical {
-            @extend .ax-grid, .ax-grid-cols-1;
-
-            &.ax-divide {
-                @extend .ax-divide-y, .ax-divide-x-0, .ax-divide-color, .ax-divide-opacity-30, .ax-divide-solid;
-            }
-        }
-
-        &.ax-default {
-            @extend .ax-cursor-pointer;
-
-            .ax-list-item {
-                @extend .ax-p-3, .ax-text-sm;
-                &:focus,
-                &:focus-visible {
-                    @extend .ax-outline-none;
-                }
-                &:hover {
-                    &:not(.ax-state-selected) {
-                        @extend .ax-bg-primary-50, .ax-text-primary;
-                    }
-                }
-
-                &.ax-state-selected {
-                    @extend .ax-bg-primary-100, .ax-text-primary;
-                }
-
-                &:focus,
-                &.ax-state-focus {
-                    &:not(.ax-state-selected) {
-                        @extend .ax-outline-none, .ax-bg-primary-50, .ax-text-primary;
-                    }
-                }
-            }
-        }
-    }
-
-    .ax-list-loading-container {
-        @extend .ax-flex, .ax-justify-center, .ax-p-2;
-    }
-}
-
-.cdk-overlay-container {
-    .ax-list-items-container {
-        max-height: 25vh;
-    }
-}