@acorex/styles 5.0.4 → 5.0.8

package/src/components/_calendar.scss

@@ -1,97 +1,159 @@
-@import "../variables/mixins";
-@layer components {
-    .ax-calendar {
-        @apply ax-border ax-border-solid ax-border-default ax-rounded;
-        .ax-calendar-header {
-            @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-default ax-border-solid;
-            .ax-nav-button {
-                @apply ax-col-span-8 ax-justify-start;
-            }
-            .ax-prev-button,
-            .ax-next-button {
-                @apply ax-col-span-2 ax-justify-center ax-ms-1;
-            }
-        }
-        .ax-calendar-body {
-            @apply ax-m-2;
-            .ax-month-items,
-            .ax-day-items {
-                @apply ax-grid ax-grid-cols-7;
-            }
-            .ax-month-items {
-                .ax-month-item {
-                    @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
-                }
-            }
-            .ax-day-items {
-                .ax-day-item {
-                    @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded;
-                    &::before {
-                        content: '';
-                        padding-top: 100%;
-                        float: left;
-                    }
-                    &::after {
-                        content: '';
-                        display: block;
-                        clear: both;
-                    }
-                    &:hover {
-                        @apply ax-bg-gray-100;
-                    }
-                    &.ax-state-holiday {
-                        @apply ax-text-danger;
-                        &:hover {
-                            @apply ax-text-black;
-                        }
-                    }
-                    &.ax-state-today {
-                        @apply ax-bg-success ax-text-success-fore;
-                    }
-                    &.ax-state-selected {
-                        @apply ax-bg-primary ax-text-primary-fore;
-                    }
-                    &.ax-state-event {
-                        &::after {
-                            @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
-                            content: ''
-                        }
-                        &.ax-state-event-primary {
-                            &::after {
-                                @apply ax-bg-primary;
-                            }
-                        }
-                        &.ax-state-event-secondary {
-                            &::after {
-                                @apply ax-bg-secondary;
-                            }
-                        }
-                        &.ax-state-event-success {
-                            &::after {
-                                @apply ax-bg-success;
-                            }
-                        }
-                        &.ax-state-event-warning {
-                            &::after {
-                                @apply ax-bg-warning;
-                            }
-                        }
-                        &.ax-state-event-danger {
-                            &::after {
-                                @apply ax-bg-danger;
-                            }
-                        }
-                        &.ax-state-event-info {
-                            &::after {
-                                @apply ax-bg-info;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .ax-calendar-footer {
-            @apply ax-p-2 ax-bg-light-100;
-        }
-    }
+@import "../variables/mixins";
+
+@layer components {
+    ax-calendar {
+        @apply ax-block ax-border ax-border-solid ax-border-default ax-rounded ax-bg-white ax-select-none;
+
+        &.ax-state-disabled
+        {
+            .ax-calendar-slots
+            {
+                @apply ax-opacity-50 ax-cursor-default;
+            }
+        }
+
+        .ax-calendar-header {
+            @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-default ax-border-solid;
+
+            .ax-nav-button {
+                @apply ax-col-span-8 ax-justify-start;
+            }
+
+            .ax-prev-button,
+            .ax-next-button {
+                @apply ax-col-span-2 ax-justify-center ax-ms-1;
+            }
+        }
+
+        .ax-calendar-body {
+            @apply ax-m-2;
+
+            .ax-calendar-slots {
+                @apply ax-grid;
+
+                &>div {
+                    @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded;
+
+                    &::before {
+                        content: '';
+                        padding-top: 100%;
+                        float: left;
+                    }
+
+                    &::after {
+                        content: '';
+                        display: block;
+                        clear: both;
+                    }
+
+                    &:hover {
+                        @apply ax-bg-light-100;
+                    }
+
+                    &.ax-state-disabled {
+                        @apply ax-text-gray-300 ax-cursor-default;
+                        &:hover {
+                            @apply ax-bg-transparent ax-text-gray-300;
+                        }
+                        // &::after {
+                        //     @apply ax-text-sm ax-cursor-not-allowed ax-text-danger-600;
+                        //     position: absolute;
+                        //     content: "\03a7";
+                        //     margin: auto;
+                        // }
+                    }
+
+                    &.ax-state-holiday {
+                        @apply ax-text-danger;
+                        &:hover {
+                            @apply ax-text-black;
+                        }
+                    }
+
+                    &.ax-state-today {
+                        @apply ax-bg-opacity-50 ax-bg-primary-50 ax-text-primary;
+                        &:hover {
+                            @apply ax-text-primary;
+                        }
+                    }
+
+                    &.ax-state-other {
+                        @apply ax-opacity-50;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-primary ax-text-primary-fore ax-opacity-100;
+
+                        &:hover {
+                            @apply ax-text-primary-fore;
+                        }
+                    }
+
+                    &.ax-state-event {
+                        &::after {
+                            @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
+                            content: ''
+                        }
+
+                        &.ax-state-event-primary {
+                            &::after {
+                                @apply ax-bg-primary;
+                            }
+                        }
+
+                        &.ax-state-event-secondary {
+                            &::after {
+                                @apply ax-bg-secondary;
+                            }
+                        }
+
+                        &.ax-state-event-success {
+                            &::after {
+                                @apply ax-bg-success;
+                            }
+                        }
+
+                        &.ax-state-event-warning {
+                            &::after {
+                                @apply ax-bg-warning;
+                            }
+                        }
+
+                        &.ax-state-event-danger {
+                            &::after {
+                                @apply ax-bg-danger;
+                            }
+                        }
+
+                        &.ax-state-event-info {
+                            &::after {
+                                @apply ax-bg-info;
+                            }
+                        }
+                    }
+                }
+
+                &.ax-calendar-slots-day {
+                    @apply ax-grid-cols-7;
+                }
+
+                &.ax-calendar-slots-year,
+                &.ax-calendar-slots-month {
+                    @apply ax-grid-cols-4;
+                }
+            }
+
+            .ax-calendar-week {
+                @apply ax-grid ax-grid-cols-7 ax-my-2;
+
+                &>div {
+                    @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
+                }
+            }
+        }
+
+        .ax-calendar-footer {
+            @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100;
+        }
+    }
 }

package/src/components/_carousel.scss

@@ -1,61 +1,36 @@
-@layer components {
-    .ax-carousel {
-        text-align: center;
-        overflow: hidden;
-        width: 100%;
-        display: block;
-        position: relative;
-
-        .ax-carousel-arrows {
-            @apply 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 {
-                @apply ax-border-none
-                ax-cursor-pointer
-                ax-bg-transparent
-                ax-text-white
-                ax-visible;
-
-                .ax-ic {
-                    font-size: 2.5rem;
-                }
-            }
-        }
-
-        .ax-carousel-pager {
-            @apply ax-flex
-            ax-py-2
-            ax-justify-center;
-
-            button {
-                @apply 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 {
-                    @apply ax-bg-primary-600;
-                }
-
-                &.ax-state-active {
-                    @apply ax-bg-primary-400;
-                }
-            }
-        }
-    }
-}
+@layer components {
+    .ax-carousel {
+        text-align: center;
+        overflow: hidden;
+        width: 100%;
+        display: block;
+        position: relative;
+        .ax-carousel-arrows {
+            @apply 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 {
+                @apply ax-border-none ax-cursor-pointer ax-bg-transparent ax-text-white ax-visible;
+                .ax-ic {
+                    font-size: 2.5rem;
+                }
+            }
+        }
+        .ax-carousel-pager {
+            @apply ax-flex ax-py-2 ax-justify-center;
+            button {
+                @apply ax-p-1 ax-mx-1 ax-cursor-pointer ax-border-none ax-rounded-full ax-bg-light-300;
+                width: calc(var(--ax-base-size) * 1.5);
+                height: calc(var(--ax-base-size) * 1.5);
+                &:hover {
+                    @apply ax-bg-primary-600;
+                }
+                &.ax-state-active {
+                    @apply ax-bg-primary-400;
+                }
+            }
+        }
+    }
+}

package/src/components/_checkbox.scss

@@ -1,25 +1,25 @@
-@import "../variables/mixins";
-@layer components {
-    .ax-checkbox-container {
-        @apply ax-text-sm ax-font-medium ax-text-gray-700;
-        @include respond(mobile) {
-            @apply ax-text-base;
-        }
-        .ax-checkbox {
-            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-default ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
-            &:checked,
-            &:indeterminate {
-                @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
-            }
-            &:checked {
-                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");
-            }
-            &:indeterminate {
-                background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
-            }
-            &:focus {
-                @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
-            }
-        }
-    }
+@import "../variables/mixins";
+@layer components {
+    .ax-checkbox-container {
+        @apply ax-text-sm ax-font-medium ax-text-light-700;
+        @include respond(mobile) {
+            @apply ax-text-base;
+        }
+        .ax-checkbox {
+            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-default ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
+            &:checked,
+            &:indeterminate {
+                @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
+            }
+            &:checked {
+                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");
+            }
+            &:indeterminate {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
+            }
+            &:focus {
+                @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
+            }
+        }
+    }
 }

package/src/components/_datapager.scss

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

package/src/components/_datepicker.scss

@@ -1,5 +1,5 @@
-@layer components {
-    .ax-datepicker-body {
-        @apply ax-m-auto ax-shadow-sm ax-w-full ax-rounded ax-border ax-border-default ax-border-none;
-    }
+@layer components {
+    .ax-datepicker-body {
+        @apply ax-m-auto ax-shadow-sm ax-w-full ax-rounded ax-border ax-border-default ax-border-none;
+    }
 }

package/src/components/_dialog.scss

@@ -1,62 +1,62 @@
-@import "../variables/mixins";
-@layer components {
-    .ax-dialog {
-        max-width: 512px;
-        width: 25vw;
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-default ax-rounded-lg ax-outline-none ax-overflow-hidden;
-        @include respond(mobile) {
-            width: 98vw;
-        }
-        @include respond(tablet) {
-            width: 35vw;
-        }
-        .ax-dialog-icon-side {
-            @apply ax-flex ax-justify-center ax-col-span-2;
-            .ax-dialog-icon {
-                min-width: 3rem;
-                @apply ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-cursor-move;
-            }
-        }
-        .ax-dialog-content-side {
-            @apply ax-col-span-9;
-            .ax-dialog-title {
-                @apply ax-text-lg ax-font-bold ax-text-gray-700;
-            }
-            .ax-dialog-content {
-                @apply ax-text-sm ax-my-1.5 ax-text-gray-500;
-            }
-        }
-        .ax-dialog-dismiss-icon {
-            @apply ax-col-span-1;
-            @apply ax-cursor-pointer ax-text-gray-400 ax--mt-2.5;
-        }
-        .ax-dialog-footer {
-            @apply ax-col-span-12 ax-flex ax-justify-end;
-        }
-        &.ax-success {
-            .ax-dialog-icon {
-                @apply ax-text-success ax-bg-success-100;
-            }
-        }
-        &.ax-danger {
-            .ax-dialog-icon {
-                @apply ax-text-danger ax-bg-danger-100;
-            }
-        }
-        &.ax-warning {
-            .ax-dialog-icon {
-                @apply ax-text-warning ax-bg-warning-100;
-            }
-        }
-        &.ax-info {
-            .ax-dialog-icon {
-                @apply ax-text-info ax-bg-info-100;
-            }
-        }
-        &.ax-primary {
-            .ax-dialog-icon {
-                @apply ax-text-primary ax-bg-primary-100;
-            }
-        }
-    }
+@import "../variables/mixins";
+@layer components {
+    .ax-dialog {
+        max-width: 512px;
+        width: 25vw;
+        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-default ax-rounded-lg ax-outline-none ax-overflow-hidden;
+        @include respond(mobile) {
+            width: 98vw;
+        }
+        @include respond(tablet) {
+            width: 35vw;
+        }
+        .ax-dialog-icon-side {
+            @apply ax-flex ax-justify-center ax-col-span-2;
+            .ax-dialog-icon {
+                min-width: 3rem;
+                @apply ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-cursor-move;
+            }
+        }
+        .ax-dialog-content-side {
+            @apply ax-col-span-9;
+            .ax-dialog-title {
+                @apply ax-text-lg ax-font-bold ax-text-light-700;
+            }
+            .ax-dialog-content {
+                @apply ax-text-sm ax-my-1.5 ax-text-light-500;
+            }
+        }
+        .ax-dialog-dismiss-icon {
+            @apply ax-col-span-1;
+            @apply ax-cursor-pointer ax-text-light-400 ax--mt-2.5;
+        }
+        .ax-dialog-footer {
+            @apply ax-col-span-12 ax-flex ax-justify-end;
+        }
+        &.ax-success {
+            .ax-dialog-icon {
+                @apply ax-text-success ax-bg-success-100;
+            }
+        }
+        &.ax-danger {
+            .ax-dialog-icon {
+                @apply ax-text-danger ax-bg-danger-100;
+            }
+        }
+        &.ax-warning {
+            .ax-dialog-icon {
+                @apply ax-text-warning ax-bg-warning-100;
+            }
+        }
+        &.ax-info {
+            .ax-dialog-icon {
+                @apply ax-text-info ax-bg-info-100;
+            }
+        }
+        &.ax-primary {
+            .ax-dialog-icon {
+                @apply ax-text-primary ax-bg-primary-100;
+            }
+        }
+    }
 }