@acorex/styles 4.0.24 → 5.0.4

package/src/components/_list.scss

@@ -0,0 +1,49 @@
+@layer components {
+    .ax-list {
+        display: block;
+    }
+    .ax-list-container {
+        .ax-list-items-container {
+            @apply ax-bg-white ax-py-1 ax-rounded ax-shadow ax-overflow-y-auto ax-h-full ax-border ax-border-solid ax-border-default;
+            &.ax-vertical {
+                @apply ax-grid ax-grid-cols-1;
+                &.ax-divide {
+                    @apply ax-divide-y ax-divide-x-0 ax-divide-light-600 ax-divide-opacity-30 ax-divide-solid;
+                }
+            }
+            &.ax-default {
+                @apply ax-cursor-pointer;
+                .ax-list-item {
+                    height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+                    @apply ax-text-sm ax-flex ax-items-center ax-px-3;
+                    &:focus,
+                    &:focus-visible {
+                        @apply ax-outline-none;
+                    }
+                    &:hover {
+                        &:not(.ax-state-selected) {
+                            @apply ax-bg-primary-50 ax-text-primary;
+                        }
+                    }
+                    &.ax-state-selected {
+                        @apply ax-bg-primary-100 ax-text-primary ax-font-medium;
+                    }
+                    &:focus,
+                    &.ax-state-focus {
+                        &:not(.ax-state-selected) {
+                            @apply ax-outline-none ax-bg-primary-50 ax-text-primary;
+                        }
+                    }
+                }
+            }
+        }
+        .ax-list-loading-container {
+            @apply ax-flex ax-justify-center ax-p-2;
+        }
+    }
+    .cdk-overlay-container {
+        .ax-list-items-container {
+            max-height: 25vh;
+        }
+    }
+}

package/src/components/_loading.scss

@@ -0,0 +1,54 @@
+@layer components {
+    .ax-loading {
+    }
+
+    .ax-loading-host {
+        .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 {
+                @apply ax-bg-primary;
+                animation: pulse2 2s ease-in-out infinite;
+            }
+
+            &::after {
+                @apply 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);
+            opacity: 0;
+        }
+    }
+}

package/src/components/_popup.scss

@@ -0,0 +1,87 @@
+@layer components {
+    .ax-popup {
+        max-height: 98vh;
+        min-height: fit-content;
+        @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-default ax-rounded ax-outline-none ax-p-0;
+        header {
+            @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
+        }
+        main {
+            @apply ax-flex-1 ax-overflow-auto;
+        }
+        footer {
+            @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-default;
+            .ax-prefix {
+                @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
+            }
+            .ax-suffix {
+                @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
+            }
+        }
+        header,
+        footer {
+            >div {
+                @apply ax-flex ax-items-center;
+            }
+        }
+        &.ax-full {
+            @apply ax-w-screen ax-h-screen;
+        }
+        &.ax-fit {
+            width: fit-content;
+        }
+        @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/src/components/_radio.scss

@@ -0,0 +1,30 @@
+@import "../variables/mixins";
+@layer components {
+    .ax-radio-container {
+        @apply ax-text-sm ax-font-medium ax-text-gray-700;
+        @include respond(mobile) {
+            @apply ax-text-base;
+        }
+        .ax-radio {
+            @apply ax-w-4
+                ax-h-4
+                ax-border-solid
+                ax-border
+                ax-border-default
+                ax-rounded-full
+                ax-bg-white
+                ax-text-primary
+                ax-m-0
+                ax-outline-none
+                ax-align-middle
+                ax-appearance-none;
+            &:checked {
+                @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
+                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");
+            }
+            &:focus {
+                @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
+            }
+        }
+    }
+}

package/src/components/_range-slider.scss

@@ -0,0 +1,14 @@
+@layer components {
+    .ax-range-slider {
+        @apply ax-w-full;
+        .ax-range-slider-input {
+            @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all;
+            &::-webkit-slider-thumb {
+                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-default ax-rounded-full ax-cursor-pointer;
+            }
+            &::-moz-range-thumb {
+                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-default ax-rounded-full ax-cursor-pointer;
+            }
+        }
+    }
+}

package/src/components/_selectbox.scss

@@ -0,0 +1,15 @@
+@layer components {
+    .ax-select-box {
+        .ax-select-box-selection {
+            @apply ax-flex ax-justify-center ax-items-center ax-outline-none;
+
+            .ax-dropdown-chips {
+                @apply ax-flex ax-overflow-x-auto;
+            }
+
+            .ax-selectbox-input {
+                @apply ax-opacity-0 ax-w-0;
+            }
+        }
+    }
+}

package/src/components/_selection-list.scss

@@ -0,0 +1,28 @@
+@layer components {
+  .ax-selection-list {
+    @apply ax-flex ax-flex-wrap;
+
+    &.ax-vertical {
+      @apply ax-flex-col;
+    }
+
+    &.ax-horizontal {
+      @apply ax-flex-row;
+      .ax-checkbox-container,
+      .ax-radio-container {
+        @apply ax-pe-3;
+      }
+    }
+
+    &.ax-state-error {
+      @apply ax-text-danger;
+      .ax-checkbox-checkmark {
+        @apply ax-border-danger;
+      }
+
+      .ax-radio-checkmark {
+        @apply ax-border-danger;
+      }
+    }
+  }
+}

package/src/components/_side-menu.scss

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

package/src/components/_skeleton.scss

@@ -0,0 +1,25 @@
+@layer utilities {
+    $base-color: #ddd;
+    $shine-color: #eeeeee;
+    .ax-skeleton {
+        @apply ax-relative ax-overflow-hidden;
+        background-color: $base-color;
+        &.ax-skeleton-animate {
+            &::before {
+                content: "";
+                @apply ax-block ax-absolute ax-top-0 ax-h-full ax-w-52;
+                left: -200px;
+                background: linear-gradient(to right, transparent 0%, $shine-color 50%, transparent 100%);
+                animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+            }
+        }
+    }
+    @keyframes load {
+        from {
+            left: -200px;
+        }
+        to {
+            left: 100%;
+        }
+    }
+}

package/src/components/_switch.scss

@@ -0,0 +1,200 @@
+@layer components {
+    .ax-switch {
+        position: relative;
+        display: block;
+        width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 7px);
+        height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 15px);
+        margin: 5px;
+        >input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+            &:checked {
+                &+.ax-switch-slider {
+                    background-color: rgb(var(--ax-color-primary));
+                    &::before {
+                        -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
+                        -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
+                        transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
+                    }
+                }
+            }
+        }
+        .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: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
+                width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
+                left: 3px;
+                bottom: 3px;
+                background-color: white;
+                -webkit-transition: 0.2s;
+                transition: 0.2s;
+                border-radius: 50%;
+            }
+        }
+        input:focus~.ax-switch-slider {
+            @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
+        }
+        &.ax-sm {
+            width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
+            height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        &::before {
+                            -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
+                            -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
+                            transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
+                        }
+                    }
+                }
+            }
+            .ax-switch-slider {
+                &::before {
+                    height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
+                    width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
+                }
+            }
+        }
+        &.ax-lg {
+            width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 20px);
+            height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px);
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        &::before {
+                            -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
+                            -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
+                            transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
+                        }
+                    }
+                }
+            }
+            .ax-switch-slider {
+                &::before {
+                    height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
+                    width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
+                }
+            }
+        }
+        &.ax-state-error {
+            .ax-switch-slider {
+                @apply ax-ring-2 ax-ring-danger ax-ring-opacity-100 ax-border-transparent;
+            }
+        }
+        &.ax-state-disabled {
+            .ax-switch-slider {
+                background-color: rgb(var(--ax-color-disabled)) !important;
+                @apply ax-cursor-not-allowed ax-border-transparent;
+                &:after {
+                    @apply ax-border-transparent;
+                }
+                &:hover {
+                    @apply ax-border-transparent;
+                }
+            }
+        }
+        &.ax-state-readonly {
+            .ax-switch-slider {
+                opacity: 0.6;
+                @apply ax-cursor-not-allowed;
+            }
+        }
+        &.ax-success {
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        background-color: rgb(var(--ax-color-success));
+                    }
+                }
+            }
+            input:focus~.ax-switch-slider {
+                @apply ax-ring-success;
+            }
+        }
+        &.ax-secondary {
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        background-color: rgb(var(--ax-color-secondary));
+                    }
+                }
+            }
+            input:focus~.ax-switch-slider {
+                @apply ax-ring-secondary;
+            }
+        }
+        &.ax-danger {
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        background-color: rgb(var(--ax-color-danger));
+                    }
+                }
+            }
+            input:focus~.ax-switch-slider {
+                @apply ax-ring-danger;
+            }
+        }
+        &.ax-warning {
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        background-color: rgb(var(--ax-color-warning));
+                    }
+                }
+            }
+            input:focus~.ax-switch-slider {
+                @apply ax-ring-warning;
+            }
+        }
+        &.ax-info {
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        background-color: rgb(var(--ax-color-info));
+                    }
+                }
+            }
+            input:focus~.ax-switch-slider {
+                @apply ax-ring-info;
+            }
+        }
+        &.ax-light {
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        background-color: rgb(var(--ax-color-light));
+                    }
+                }
+            }
+            input:focus~.ax-switch-slider {
+                @apply ax-ring-light;
+            }
+        }
+        &.ax-dark {
+            >input {
+                &:checked {
+                    &+.ax-switch-slider {
+                        background-color: rgb(var(--ax-color-dark));
+                    }
+                }
+            }
+            input:focus~.ax-switch-slider {
+                @apply ax-ring-dark;
+            }
+        }
+    }
+}

package/src/components/_table.scss

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

package/src/components/_tabs.scss

@@ -0,0 +1,117 @@
+@layer components {
+    .ax-tabs {
+        @apply ax-flex ax-p-0 ax-overflow-hidden;
+        &.ax-tabs-full {
+            .ax-tab-item-container,
+            .ax-tab-item {
+                @apply ax-flex-1;
+            }
+        }
+
+        &.ax-tabs-min-width {
+            .ax-tab-item {
+                min-width: 250px;
+            }
+        }
+
+        & > .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-tab-item-container {
+            @apply ax-flex ax-overflow-x-auto;
+            .ax-tab-item {
+                @apply 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 {
+                    @apply ax-text-black;
+                }
+                .ax-ic {
+                    @apply ax-text-2xl;
+                }
+            }
+        }
+
+        &.ax-tabs-default {
+            .ax-tab-item-container {
+                @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
+                .ax-tab-item {
+                    @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border;
+                    border-bottom-color: transparent !important;
+                    &:first-child {
+                        @apply ax-rounded-l;
+                    }
+                    &:last-child {
+                        @apply ax-rounded-r ax-border-r-0;
+                    }
+                    &:hover,
+                    &.ax-state-active {
+                        @apply ax-font-medium;
+                        border-bottom-color: rgb(var(--ax-color-primary)) !important;
+                    }
+                }
+            }
+        }
+
+        &.ax-tabs-underline {
+            .ax-tab-item {
+                @apply ax-border-b-2 ax-border-solid ax-border-default;
+
+                &.ax-state-active {
+                    @apply ax-border-primary ax-text-primary;
+
+                    &:hover {
+                        @apply ax-border-primary;
+                    }
+                }
+
+                &:hover {
+                    @apply ax-border-primary-300 ax-text-primary;
+                }
+            }
+        }
+
+        &.ax-tabs-pills {
+            .ax-tab-item {
+                @apply ax-text-light-fore ax-mr-1 ax-rounded;
+
+                &:hover {
+                    @apply ax-bg-light-300 ax-text-light-fore;
+                }
+
+                &.ax-state-active {
+                    @apply ax-bg-light-300 ax-text-light-fore;
+                }
+            }
+        }
+
+        &.ax-tabs-pills-color {
+            .ax-tab-item {
+                @apply ax-text-light-fore ax-mr-1 ax-rounded;
+
+                &:hover {
+                    @apply ax-bg-primary-100 ax-text-primary;
+                }
+
+                &.ax-state-active {
+                    @apply ax-bg-primary-100 ax-text-primary;
+                }
+            }
+        }
+    }
+}