@acorex/styles 5.0.1 → 5.0.4

package/src/components/_tabs.scss

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

package/src/components/_toast.scss

@@ -1,94 +1,94 @@
-@import "../variables/mixins";
-
-@layer components {
-    .ax-toast {
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-default ax-border ax-border-solid ax-rounded-lg ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
-        width: max(20vw, 350px);
-        @include respond(mobile) {
-            width: 98vw;
-        }
-
-        @include respond(tablet) {
-            width: 35vw;
-        }
-        .ax-toast-icon-side {
-            @apply ax-col-span-1 ax-h-full;
-        }
-        .ax-toast-content-side {
-            @apply ax-col-span-10;
-            .ax-toast-title {
-                @apply ax-text-sm ax-font-semibold ax-text-gray-700;
-            }
-            .ax-toast-content {
-                @apply ax-py-2 ax-text-sm ax-text-gray-400;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-col-span-1 ax-cursor-pointer ax-h-full;
-            .ax-ic {
-                @apply ax-text-base;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-text-gray-400;
-        }
-        .ax-toast-buttons {
-            @apply ax-col-span-12;
-        }
-        .ax-toast-progress {
-            @apply ax-absolute ax-bottom-0 ax-h-1 ax-w-0;
-            animation-duration: 4s;
-            animation-timing-function: linear;
-            animation-name: progressBar;
-        }
-        @keyframes progressBar {
-            0% {
-                width: 100%;
-            }
-            100% {
-                width: 0%;
-            }
-        }
-
-        &.ax-success {
-            @apply ax-bg-white ax-text-gray-500;
-            .ax-toast-icon {
-                @apply ax-text-success;
-            }
-
-            .ax-toast-progress {
-                @apply ax-bg-success;
-            }
-        }
-
-        &.ax-danger {
-            .ax-toast-icon {
-                @apply ax-text-danger;
-            }
-
-            .ax-toast-progress {
-                @apply ax-bg-danger-400;
-            }
-        }
-
-        &.ax-warning {
-            .ax-toast-icon {
-                @apply ax-text-warning;
-            }
-
-            .ax-toast-progress {
-                @apply ax-bg-warning-400;
-            }
-        }
-
-        &.ax-info {
-            .ax-toast-icon {
-                @apply ax-text-info;
-            }
-
-            .ax-toast-progress {
-                @apply ax-bg-info-400;
-            }
-        }
-    }
+@import "../variables/mixins";
+
+@layer components {
+    .ax-toast {
+        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-default ax-border ax-border-solid ax-rounded-lg ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
+        width: max(20vw, 350px);
+        @include respond(mobile) {
+            width: 98vw;
+        }
+
+        @include respond(tablet) {
+            width: 35vw;
+        }
+        .ax-toast-icon-side {
+            @apply ax-col-span-1 ax-h-full;
+        }
+        .ax-toast-content-side {
+            @apply ax-col-span-10;
+            .ax-toast-title {
+                @apply ax-text-sm ax-font-semibold ax-text-gray-700;
+            }
+            .ax-toast-content {
+                @apply ax-py-2 ax-text-sm ax-text-gray-400;
+            }
+        }
+        .ax-toast-dismiss-icon {
+            @apply ax-col-span-1 ax-cursor-pointer ax-h-full;
+            .ax-ic {
+                @apply ax-text-base;
+            }
+        }
+        .ax-toast-dismiss-icon {
+            @apply ax-text-gray-400;
+        }
+        .ax-toast-buttons {
+            @apply ax-col-span-12;
+        }
+        .ax-toast-progress {
+            @apply ax-absolute ax-bottom-0 ax-h-1 ax-w-0;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+            animation-name: progressBar;
+        }
+        @keyframes progressBar {
+            0% {
+                width: 100%;
+            }
+            100% {
+                width: 0%;
+            }
+        }
+
+        &.ax-success {
+            @apply ax-bg-white ax-text-gray-500;
+            .ax-toast-icon {
+                @apply ax-text-success;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-success;
+            }
+        }
+
+        &.ax-danger {
+            .ax-toast-icon {
+                @apply ax-text-danger;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-danger-400;
+            }
+        }
+
+        &.ax-warning {
+            .ax-toast-icon {
+                @apply ax-text-warning;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-warning-400;
+            }
+        }
+
+        &.ax-info {
+            .ax-toast-icon {
+                @apply ax-text-info;
+            }
+
+            .ax-toast-progress {
+                @apply ax-bg-info-400;
+            }
+        }
+    }
 }

package/src/components/_tooltip.scss

@@ -1,44 +1,44 @@
-@layer components {
-    .ax-tooltip-container {
-        @apply ax-relative;
-        .ax-tooltip {
-            @apply ax-block ax-p-1 ax-bg-black ax-text-white ax-rounded;
-        }
-        .ax-tooltip-tringle {
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-top: 5px solid #000;
-            position: absolute;
-
-            &.ax-tooltip-tringle-bottom {
-                transform: rotate(180deg);
-                left: 0;
-                right: 0;
-                margin: auto;
-                top: -5px;
-            }
-            &.ax-tooltip-tringle-right {
-                transform: rotate(90deg);
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                left: -7px;
-            }
-            &.ax-tooltip-tringle-top {
-                transform: rotate(0deg);
-                left: 0;
-                right: 0;
-                margin: auto;
-            }
-            &.ax-tooltip-tringle-left {
-                transform: rotate(270deg);
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                right: -7px;
-            }
-        }
-    }
-}
+@layer components {
+    .ax-tooltip-container {
+        @apply ax-relative;
+        .ax-tooltip {
+            @apply ax-block ax-p-1 ax-bg-black ax-text-white ax-rounded;
+        }
+        .ax-tooltip-tringle {
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid #000;
+            position: absolute;
+
+            &.ax-tooltip-tringle-bottom {
+                transform: rotate(180deg);
+                left: 0;
+                right: 0;
+                margin: auto;
+                top: -5px;
+            }
+            &.ax-tooltip-tringle-right {
+                transform: rotate(90deg);
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                left: -7px;
+            }
+            &.ax-tooltip-tringle-top {
+                transform: rotate(0deg);
+                left: 0;
+                right: 0;
+                margin: auto;
+            }
+            &.ax-tooltip-tringle-left {
+                transform: rotate(270deg);
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                right: -7px;
+            }
+        }
+    }
+}

package/src/components/index.scss

@@ -1,27 +1,29 @@
-@import "./alert";
-@import "./badge";
-@import "./button";
-@import "./calendar";
-@import "./carousel";
-@import "./checkbox";
-@import "./datapager";
-@import "./datepicker";
-@import "./dialog";
-@import "./drawer";
-@import "./dropdown";
-@import "./editor-container";
-@import "./form";
-@import "./input";
-@import "./label";
-@import "./list";
-@import "./loading";
-@import "./popup";
-@import "./radio";
-@import "./selectbox";
-@import "./selection-list";
-@import "./side-menu";
-@import "./switch";
-@import "./table";
-@import "./tabs";
-@import "./toast";
-@import "./tooltip";
+@import "./alert";
+@import "./badge";
+@import "./button";
+@import "./calendar";
+@import "./carousel";
+@import "./checkbox";
+@import "./datapager";
+@import "./datepicker";
+@import "./dialog";
+@import "./drawer";
+@import "./dropdown";
+@import "./editor-container";
+@import "./form";
+@import "./input";
+@import "./label";
+@import "./list";
+@import "./loading";
+@import "./popup";
+@import "./radio";
+@import "./range-slider";
+@import "./selectbox";
+@import "./selection-list";
+@import "./side-menu";
+@import "./skeleton";
+@import "./switch";
+@import "./table";
+@import "./tabs";
+@import "./toast";
+@import "./tooltip";