@acorex/styles 5.0.4 → 5.0.8

package/src/components/_input.scss

@@ -1,16 +1,17 @@
-@layer components {
-    .ax-input {
-        @apply ax-outline-none ax-text-base ax-p-0;
-        line-height: 20px;
-        &:focus {
-            @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
-        }
-
-        &.ax-state-disabled {
-            @apply ax-bg-gray-400 ax-text-gray-900 ax-cursor-not-allowed ax-border-gray-400;
-            &:hover {
-                @apply ax-border-gray-400;
-            }
-        }
-    }
-}
+@layer components {
+    .ax-input {
+        @apply ax-outline-none ax-text-base ax-p-0;
+        line-height: 20px;
+        &:focus {
+            @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
+        }
+        &.ax-state-disabled {
+            background-color: rgb(var(--ax-color-disabled)) !important;
+            color: rgb(var(--ax-color-disabled-fore)) !important;
+            @apply ax-cursor-not-allowed;
+            &:hover {
+                background-color: rgb(var(--ax-color-disabled)) !important;
+            }
+        }
+    }
+}

package/src/components/_label.scss

@@ -1,5 +1,5 @@
-@layer components {
-    .ax-label {
-        @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-gray-700;
-    }
+@layer components {
+    .ax-label {
+        @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-light-700;
+    }
 }

package/src/components/_list.scss

@@ -1,49 +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;
-        }
-    }
+@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-light-100 ax-text-light-fore;
+                        }
+                    }
+                    &.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

@@ -1,54 +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;
-        }
-    }
+@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

@@ -1,87 +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;
-            }
-        }
-    }
+@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

@@ -1,30 +1,19 @@
-@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;
-            }
-        }
-    }
-}
+@import "../variables/mixins";
+@layer components {
+    .ax-radio-container {
+        @apply ax-text-sm ax-font-medium ax-text-light-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

@@ -1,14 +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;
-            }
-        }
-    }
+@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

@@ -1,15 +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;
-            }
-        }
-    }
-}
+@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

@@ -1,28 +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;
-      }
-    }
-  }
-}
+@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;
+      }
+    }
+  }
+}