@acorex/styles 4.0.24 → 5.0.4

package/scss/components/loading.scss

@@ -1,47 +0,0 @@
-.ax-loading {
-    position: relative;
-    background: rgba(var(--ax-color-white), .2);
-    width: 4rem;
-    height: 4rem;
-    
-    &::before,
-    &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        transform: translate(-50%, -50%) scale(0);
-    }
-
-    &::before {
-        @extend .ax-bg-primary;
-        animation: pulse2 2s ease-in-out infinite;
-    }
-
-    &::after {
-        @extend .ax-bg-primary;
-        animation: pulse2 2s 1s ease-in-out infinite;
-    }
-}
-
-.ax-loading-overlay
-{
-    background: rgba(var(--ax-color-white), .2);
-}
-
-@keyframes pulse2 {
-
-    0%,
-    100% {
-        transform: translate(-50%, -50%) scale(0);
-        opacity: 1;
-    }
-
-    50% {
-        transform: translate(-50%, -50%) scale(1.0);
-        opacity: 0;
-    }
-}

package/scss/components/popup.scss

@@ -1,103 +0,0 @@
-.ax-popup {
-  max-height: 98vh;
-  min-height: fit-content;
-  @extend .ax-flex,
-    .ax-flex-col,
-    .ax-bg-white,
-    .ax-w-6\\12,
-    .ax-shadow-lg,
-    .ax-border,
-    .ax-border-color,
-    .ax-border-solid,
-    .ax-rounded,
-    .ax-outline-none,
-    .ax-p-0;
-
-  &:focus {
-    @extend .ax-ring-2, .ax-ring-color-primary, .ax-ring-opacity-100, .ax-border-color-transparent;
-  }
-
-  header {
-    @extend .ax-flex, .ax-justify-between, .ax-px-3, .ax-py-2, .ax-border-b, .ax-border-color, .ax-border-solid;
-  }
-
-  main {
-    @extend .ax-flex-1, .ax-overflow-auto;
-  }
-
-  footer {
-    @extend .ax-flex, .ax-justify-between, .ax-px-3, .ax-py-2, .ax-border-t, .ax-border-color, .ax-border-solid;
-  }
-
-  header,
-  footer {
-    > div {
-      @extend .ax-flex, .ax-items-center;
-    }
-  }
-
-  @media all and (min-width: 1280px) {
-    &.ax-sm {
-      width: 420px !important;
-    }
-
-    &.ax-md {
-      width: 680px !important;
-    }
-
-    &.ax-lg {
-      width: 1024px !important;
-    }
-  }
-
-  @media all and (min-width: 1024px) and (max-width: 1279px) {
-    &.ax-sm {
-      width: 100vw;
-      max-height: 100vh;
-    }
-
-    &.ax-md {
-      width: 500px !important;
-    }
-
-    &.ax-lg {
-      width: 900px !important;
-    }
-  }
-
-  @media all and (min-width: 768px) and (max-width: 1023px) {
-    &.ax-sm {
-      width: 100vw;
-      max-height: 100vh;
-    }
-
-    &.ax-md {
-      width: 500px !important;
-    }
-
-    &.ax-lg {
-      width: 700px !important;
-    }
-  }
-
-  @media all and (min-width: 425px) and (max-width: 767px) {
-    &.ax-sm {
-      width: 100vw;
-      max-height: 100vh;
-    }
-
-    &.ax-md,
-    &.ax-lg {
-      width: 460px !important;
-    }
-  }
-
-  @media all and (min-width: 0px) and (max-width: 424px) {
-    &.ax-sm,
-    &.ax-md,
-    &.ax-lg {
-      width: 100vw;
-      max-height: 100vh;
-    }
-  }
-}

package/scss/components/radio.scss

@@ -1,36 +0,0 @@
-.ax-radio-label {
-    @extend .ax-text-base, .ax-font-medium;
-    span {
-        vertical-align: middle;
-        @extend .ax-px-1\.5;
-    }
-    .ax-radio {
-        vertical-align: middle;
-        @extend .ax-w-4,
-            .ax-h-4,
-            .ax-border,
-            .ax-border-solid,
-            .ax-border-color,
-            .ax-rounded-full,
-            .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%3ccircle cx='8' cy='8' r='3'/%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/selectbox.scss

@@ -1,39 +0,0 @@
-.ax-select-box {
-    .ax-select-box-selection {
-        @extend .ax-flex, .ax-justify-center, .ax-items-center, .ax-overflow-x-auto, .ax-outline-none;
-
-        .ax-dropdown-chips {
-            @extend .ax-flex, .ax-overflow-x-auto;
-        }
-
-        .ax-chips {
-            @include components-sizing(
-                var(--ax-space-1) var(--ax-space-2),
-                var(--ax-font-size-text-base),
-                var(--ax-line-height-text-base),
-                var(--ax-border-rounded)
-            );
-            @extend .ax-bg-primary-100, .ax-text-primary, .ax-mr-1;
-            // @extend .ax-flex,
-            //     .ax-bg-light-100,
-            //     .ax-border,
-            //     .ax-border-solid,
-            //     .ax-border-color,
-            //     .ax-py-1,
-            //     .ax-px-2,
-            //     .ax-mr-1,
-            //     .ax-rounded-full,
-            //     .ax-whitespace-nowrap;
-            // .ax-close-icon {
-            //     @extend .ax-ml-2, .ax-cursor-pointer;
-            // }
-            .ax-ic-clear {
-                @extend .ax-cursor-pointer;
-            }
-        }
-
-        .ax-selectbox-input {
-            @extend .ax-opacity-0, .ax-w-0;
-        }
-    }
-}

package/scss/components/selection-list.scss

@@ -1,22 +0,0 @@
-.ax-selection-list {
-  @extend .ax-flex, .ax-flex-wrap;
-
-  &.ax-vertical {
-    @extend .ax-flex-col;
-  }
-
-  &.ax-horizontal {
-    @extend .ax-flex-row;
-  }
-
-  &.ax-state-error {
-    @extend .ax-text-danger;
-    .ax-checkbox-checkmark {
-      @extend .ax-border-color-danger;
-    }
-
-    .ax-radio-checkmark {
-      @extend .ax-border-color-danger;
-    }
-  }
-}

package/scss/components/side-menu.scss

@@ -1,44 +0,0 @@
-.ax-side-menu {
-    @extend .ax-list-none, .ax-p-0, .ax-m-0;
-    .ax-side-menu-item {
-        @extend .ax-flex, .ax-items-center, .ax-p-2, .ax-cursor-pointer;
-        &:hover {
-            @extend .ax-bg-light-100;
-        }
-        &:focus {
-            @extend .ax-outline-none,
-                .ax-ring-2,
-                .ax-ring-color-primary,
-                .ax-ring-opacity-100,
-                .ax-border-color-transparent;
-        }
-        .ax-side-menu-icon {
-            @extend .ax-pr-2, .ax-h-full, .ax-flex, .ax-items-center;
-        }
-        .ax-side-menu-text {
-            @extend .ax-flex-1;
-        }
-        .ax-side-menu-badge {
-        }
-    }
-    &.ax-alternate {
-        .ax-side-menu-item {
-            &:nth-child(odd) {
-                @extend .ax-bg-light-100;
-            }
-            &:hover {
-                @extend .ax-bg-light-300;
-            }
-        }
-    }
-    &.ax-divided {
-        .ax-side-menu-item {
-            &:not(:last-child) {
-                @extend .ax-border-b, .ax-border-color, .ax-border-solid;
-            }
-            &:hover {
-                @extend .ax-bg-light-100;
-            }
-        }
-    }
-}

package/scss/components/switch.scss

@@ -1,178 +0,0 @@
-.ax-switch {
-    position: relative;
-    display: block;
-    width: 46px;
-    height: 25px;
-    margin: 5px;
-
-    >input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-        &:checked {
-            &+.ax-switch-slider {
-                background-color: rgb(var(--ax-color-primary));
-
-                &::before {
-                    -webkit-transform: translateX(21px);
-                    -ms-transform: translateX(21px);
-                    transform: translateX(21px);
-                }
-            }
-        }
-    }
-
-    input:focus~.ax-switch-slider {
-        @extend .ax-ring-2,
-        .ax-ring-color-primary,
-        .ax-ring-opacity-100,
-        .ax-border-color-transparent;
-    }
-
-    &.ax-state-error {
-        .ax-switch-slider {
-            @extend .ax-ring-2,
-            .ax-ring-color-danger,
-            .ax-ring-opacity-100,
-            .ax-border-color-transparent;
-        }
-    }
-
-    &.ax-state-disabled {
-        .ax-switch-slider {
-            background-color: rgb(var(--ax-color-disabled)) !important;
-            @extend .ax-cursor-not-allowed,
-            .ax-border-color-disabled;
-
-            &:after {
-                @extend .ax-border-color-disabled;
-            }
-
-            &:hover {
-                @extend .ax-border-color-disabled;
-            }
-        }
-    }
-
-    &.ax-state-readonly {
-        .ax-switch-slider {
-            opacity: 0.6;
-            @extend .ax-cursor-not-allowed;
-        }
-    }
-
-    .ax-switch-slider {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgb(var(--ax-color-gray-400));
-        -webkit-transition: 0.2s;
-        transition: 0.2s;
-        border-radius: 25px;
-
-        &::before {
-            content: "";
-            position: absolute;
-            height: 21px;
-            width: 21px;
-            left: 2px;
-            bottom: 2px;
-            background-color: white;
-            -webkit-transition: 0.2s;
-            transition: 0.2s;
-            border-radius: 50%;
-        }
-    }
-
-
-
-    &.ax-success {
-        >input {
-            &:checked {
-                &+.ax-switch-slider {
-                    background-color: rgb(var(--ax-color-success));
-                }
-            }
-        }
-        input:focus~.ax-switch-slider {
-            @extend .ax-ring-color-success,
-        }
-    }
-
-    &.ax-secondary {
-        >input {
-            &:checked {
-                &+.ax-switch-slider {
-                    background-color: rgb(var(--ax-color-secondary));
-                }
-            }
-        }
-        input:focus~.ax-switch-slider {
-            @extend .ax-ring-color-secondary,
-        }
-    }
-
-    &.ax-danger {
-        >input {
-            &:checked {
-                &+.ax-switch-slider {
-                    background-color: rgb(var(--ax-color-danger));
-                }
-            }
-        }
-        input:focus~.ax-switch-slider {
-            @extend .ax-ring-color-danger,
-        }
-    }
-    &.ax-warning {
-        >input {
-            &:checked {
-                &+.ax-switch-slider {
-                    background-color: rgb(var(--ax-color-warning));
-                }
-            }
-        }
-        input:focus~.ax-switch-slider {
-            @extend .ax-ring-color-warning,
-        }
-    }
-    &.ax-info {
-        >input {
-            &:checked {
-                &+.ax-switch-slider {
-                    background-color: rgb(var(--ax-color-info));
-                }
-            }
-        }
-        input:focus~.ax-switch-slider {
-            @extend .ax-ring-color-info,
-        }
-    }
-    &.ax-light {
-        >input {
-            &:checked {
-                &+.ax-switch-slider {
-                    background-color: rgb(var(--ax-color-light));
-                }
-            }
-        }
-        input:focus~.ax-switch-slider {
-            @extend .ax-ring-color-light,
-        }
-    }
-    &.ax-dark {
-        >input {
-            &:checked {
-                &+.ax-switch-slider {
-                    background-color: rgb(var(--ax-color-dark));
-                }
-            }
-        }
-        input:focus~.ax-switch-slider {
-            @extend .ax-ring-color-dark,
-        }
-    }
-}

package/scss/components/table.scss

@@ -1,22 +0,0 @@
-.ax-table {
-    @extend .ax-w-full;
-    table {
-        border-collapse: collapse;
-        @extend .ax-w-full;
-    }
-
-    td,
-    th {
-        @extend .ax-p-4, .ax-border, .ax-border-solid, .ax-border-color;
-        text-align: inherit;
-    }
-
-    &.ax-alternative {
-        tr {
-            @extend .ax-bg-white;
-            &:nth-child(even) {
-                @extend .ax-bg-gray-50;
-            }
-        }
-    }
-}

package/scss/components/tabs.scss

@@ -1,115 +0,0 @@
-.ax-tabs {
-    @extend .ax-flex, .ax-p-0, .ax-overflow-hidden;
-    &.ax-tabs-full {
-        .ax-tab-item-container,
-        .ax-tab-item {
-            @extend .ax-flex-1;
-        }
-    }
-
-    &.ax-tabs-min-width {
-        .ax-tab-item {
-            min-width: 250px;
-        }
-    }
-
-    & > .ax-tab-controll {
-        @extend .ax-flex, .ax-items-center, .ax-justify-center, .ax-px-1, .ax-cursor-pointer, .ax-none;
-
-        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-tab-item-container {
-        @extend .ax-flex, .ax-overflow-x-auto;
-        .ax-tab-item {
-            @extend .ax-text-center,
-                .ax-px-5,
-                .ax-cursor-pointer,
-                .ax-whitespace-nowrap,
-                .ax-font-medium,
-                .ax-flex,
-                .ax-items-center,
-                .ax-justify-center;
-            height: calc(var(--ax-base-size) * var(--ax-base-ratio) * 1.2);
-            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 {
-                @extend .ax-text-black;
-            }
-            .ax-ic {
-                @extend .ax-text-2xl;
-            }
-        }
-    }
-
-    &.ax-tabs-default {
-        .ax-tab-item-container {
-            @extend .ax-border, .ax-border-solid, .ax-border-color, .ax-shadow-sm, .ax-rounded;
-            .ax-tab-item {
-                @extend .ax-bg-white, .ax-border-r, .ax-border-b-2, .ax-border-solid, .ax-border-color;
-                border-bottom-color: transparent !important;
-                &:first-child {
-                    @extend .ax-rounded-l;
-                }
-                &:last-child {
-                    @extend .ax-rounded-r, .ax-border-r-0;
-                }
-                &:hover,
-                &.ax-state-active {
-                    @extend .ax-font-medium;
-                    border-bottom-color: rgb(var(--ax-color-primary)) !important;
-                }
-            }
-        }
-    }
-
-    &.ax-tabs-underline {
-        .ax-tab-item {
-            @extend .ax-border-color, .ax-border-b-2, .ax-border-solid;
-
-            &.ax-state-active {
-                @extend .ax-border-color-primary, .ax-text-primary;
-
-                &:hover {
-                    @extend .ax-border-color-primary;
-                }
-            }
-
-            &:hover {
-                @extend .ax-border-color-primary-300, .ax-text-primary;
-            }
-        }
-    }
-
-    &.ax-tabs-pills {
-        .ax-tab-item {
-            @extend .ax-text-light-fore, .ax-mr-1, .ax-rounded;
-
-            &:hover {
-                @extend .ax-bg-light-300, .ax-text-light-fore;
-            }
-
-            &.ax-state-active {
-                @extend .ax-bg-light-300, .ax-text-light-fore;
-            }
-        }
-    }
-
-    &.ax-tabs-pills-color {
-        .ax-tab-item {
-            @extend .ax-text-light-fore, .ax-mr-1, .ax-rounded;
-
-            &:hover {
-                @extend .ax-bg-primary-100, .ax-text-primary;
-            }
-
-            &.ax-state-active {
-                @extend .ax-bg-primary-100, .ax-text-primary;
-            }
-        }
-    }
-}

package/scss/components/text-box.scss

@@ -1,4 +0,0 @@
-.ax-text-box
-{
-   
-}

package/scss/components/toast.scss

@@ -1,82 +0,0 @@
-@import "../../variables/bases/accessiblity";
-
-.ax-toast {
-    width: max(20vw, 350px);
-    @extend .ax-relative,
-        .ax-bg-white,
-        .ax-shadow-md,
-        .ax-border,
-        .ax-border-color,
-        .ax-border-solid,
-        .ax-rounded,
-        .ax-p-3;
-
-    @include media-sm {
-        width: 98vw;
-    }
-
-    @include media-md {
-        width: 35vw;
-    }
-
-    @include media-lg {
-        width: 25vw;
-    }
-
-    .ax-toast-header {
-        @extend .ax-flex, .ax-items-center, .ax-justify-between;
-    }
-
-    &.ax-success {
-        .ax-icon {
-            @extend .ax-text-success;
-        }
-
-        .ax-toast-progress {
-            @extend .ax-bg-success-400;
-        }
-    }
-
-    &.ax-danger {
-        .ax-icon {
-            @extend .ax-text-danger;
-        }
-
-        .ax-toast-progress {
-            @extend .ax-bg-danger-400;
-        }
-    }
-
-    &.ax-warning {
-        .ax-icon {
-            @extend .ax-text-warning;
-        }
-
-        .ax-toast-progress {
-            @extend .ax-bg-warning-400;
-        }
-    }
-
-    &.ax-info {
-        .ax-icon {
-            @extend .ax-text-info;
-        }
-
-        .ax-toast-progress {
-            @extend .ax-bg-info-400;
-        }
-    }
-
-    .ax-toast-progress {
-        @extend .ax-absolute, .ax-w-full, .ax-p-0\.5, .ax-px-0;
-        bottom: 0;
-        left: 0;
-        -webkit-transition: linear width;
-        /* Safari */
-        transition: linear width;
-    }
-
-    .ax-button {
-        min-width: 60px;
-    }
-}