@acorex/styles 4.0.24 → 5.0.4

package/src/components/_calendar.scss

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

package/src/components/_carousel.scss

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

package/src/components/_checkbox.scss

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

package/src/components/_datapager.scss

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

package/src/components/_datepicker.scss

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

package/src/components/_dialog.scss

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

package/src/components/_drawer.scss

@@ -0,0 +1,79 @@
+@layer components {
+    .ax-drawer-container {
+        @apply ax-flex
+        ax-relative
+        ax-w-full
+        ax-h-full
+        ax-overflow-hidden;
+
+        .ax-drawer-backdrop {
+            @apply ax-absolute ax-w-full ax-h-full;
+            z-index: 9998;
+            top: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            background-color: rgba($color: #000000, $alpha: 0.3);
+        }
+
+        .ax-drawer {
+            @apply ax-h-full;
+
+            &.ax-animated {
+                transition: all 500ms;
+            }
+
+            &.ax-drawer-overlay {
+                @apply ax-absolute;
+                z-index: 9999;
+            }
+
+            &.ax-drawer-start {
+                &.ax-hide {
+                    position: absolute;
+                    left: -9999px;
+                }
+
+                &.ax-collapsed {
+                    margin-inline-start: calc(-1 * var(--attr-width));
+                }
+
+                &.ax-expanded {
+                    margin-inline-start: 0;
+                }
+            }
+
+            &.ax-drawer-end {
+                &.ax-hide {
+                    position: absolute;
+                    right: -9999px;
+                }
+
+                &.ax-drawer-overlay {
+                    &.ax-collapsed {
+                        right: calc(-1 * var(--attr-width));
+                    }
+
+                    &.ax-expanded {
+                        right: calc(-1 * var(--attr-diff));
+                    }
+                }
+
+                &.ax-drawer-push {
+                    &.ax-collapsed {
+                        margin-inline-end: calc(-1 * var(--attr-width));
+                    }
+
+                    &.ax-expanded {
+                        margin-inline-end: 0;
+                    }
+                }
+            }
+        }
+
+        .ax-drawer-content {
+            @apply ax-flex-1;
+            width: var(--attr-content-width);
+        }
+    }
+}

package/src/components/_dropdown.scss

@@ -0,0 +1,178 @@
+@layer components {
+    .ax-dropdown {
+        display: contents;
+
+        .ax-dropdown-content {
+            @apply ax-text-sm ax-flex-1 ax-overflow-y-hidden ax-overscroll-x-auto;
+        }
+    }
+
+    .ax-overlay-pane {
+        @apply ax-bg-white;
+        &.ax-dropdown-list {
+            @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
+
+            ax-button-item {
+                --ax-base-ratio : 4;
+                height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+                line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
+                @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm  ax-text-gray-600 ax-cursor-pointer;
+
+                &.ax-divide {
+                    @apply ax-border-t ax-border ax-border-solid;
+                }
+
+                &.ax-state-disabled
+                {
+                    @apply ax-cursor-not-allowed ax-opacity-60;
+                }
+
+                ax-prefix {
+                    @apply ax-flex ax-flex-row ax-pe-2;
+                }
+
+                ax-suffix {
+                    @apply ax-flex ax-flex-row ax-ps-2;
+                }
+
+                &.ax-primary {
+                    @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-primary-50 ax-text-primary-600;
+                    }
+
+                    &:active {
+                        @apply ax-bg-primary-100 ax-text-primary-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-primary-200;
+                    }
+                }
+
+                &.ax-secondary {
+                    @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-secondary-50 ax-text-secondary-600;
+                    }
+
+                    &:active {
+                        @apply ax-bg-secondary-100 ax-text-secondary-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-secondary-200;
+                    }
+                }
+
+                &.ax-warning {
+                    @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-warning-50 ax-text-warning-600;
+                    }
+
+                    &:active {
+                        @apply ax-bg-warning-100 ax-text-warning-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-warning-200;
+                    }
+                }
+
+                &.ax-danger {
+                    @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-danger-50 ax-text-danger-600;
+                    }
+
+                    &:active {
+                        @apply ax-bg-danger-100 ax-text-danger-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-danger-200;
+                    }
+                }
+
+                &.ax-success {
+                    @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-success-50 ax-text-success-600;
+                    }
+
+                    &:active {
+                        @apply ax-bg-success-100 ax-text-success-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-success-200;
+                    }
+                }
+
+                &.ax-info {
+                    @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-info-50 ax-text-info-600;
+                    }
+
+                    &:active {
+                        @apply ax-bg-info-100 ax-text-info-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-info-200;
+                    }
+                }
+
+                &.ax-dark {
+                    @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-dark-50 ax-text-dark-600;
+                    }
+
+                    &:active {
+                        @apply ax-bg-dark-100 ax-text-dark-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-dark-200;
+                    }
+                }
+
+                &.ax-light {
+                    @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
+
+                    &:hover,
+                    &:focus {
+                        @apply ax-bg-light-500 ax-text-light-800;
+                    }
+
+                    &:active {
+                        @apply ax-bg-light-100 ax-text-light-700;
+                    }
+
+                    &.ax-state-selected {
+                        @apply ax-bg-light-600;
+                    }
+                }
+            }
+
+
+        }
+    }
+}

package/src/components/_editor-container.scss

@@ -0,0 +1,70 @@
+@import "../variables/mixins";
+@layer components {
+    .ax-editor-container {
+        height: calc(var(--ax-base-size) * var(--ax-base-ratio));
+        @apply ax-flex ax-rounded ax-bg-white ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
+        &:focus-within {
+            @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
+        }
+        &.ax-button-icon {
+            @apply ax-px-2;
+        }
+        [class*=" ax-ic-"],
+        [class^=ax-ic-] {
+            font-size: 1.2rem !important;
+            line-height: 1 !important;
+        }
+        .ax-input {
+            line-height: 4 !important;
+            min-width: 1%;
+            @apply ax-text-sm ax-flex-1 ax-bg-transparent ax-border-none ax-px-2;
+            @include respond(mobile) {
+                @apply ax-text-base;
+            }
+            &:focus {
+                box-shadow: none;
+            }
+        }
+        ax-button {
+            button {
+                @apply ax-rounded-none;
+                &:focus {
+                    @apply ax-ring-0;
+                }
+                &.ax-button-icon {
+                    min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
+                    .ax-ic {
+                        @apply ax-text-base;
+                    }
+                }
+            }
+        }
+        .ax-suffix,
+        .ax-prefix {
+            * {
+                @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
+            }
+        }
+        &.ax-state-error {
+            @apply ax-border-danger;
+            .ax-input {
+                @apply ax-placeholder-danger;
+            }
+            &:focus-within {
+                @apply ax-ring-0 ax-ring-transparent;
+            }
+        }
+        &.ax-sm {
+            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
+            .ax-input {
+                @apply ax-text-xs;
+            }
+        }
+        &.ax-lg {
+            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
+            .ax-input {
+                @apply ax-text-lg;
+            }
+        }
+    }
+}

package/src/components/_form.scss

@@ -0,0 +1,8 @@
+@layer components {
+    .ax-form-field {
+        @apply ax-mb-2 ax-relative;
+        .ax-error-msg {
+            @apply ax-absolute ax--bottom-5 ax-text-danger ax-text-xs;
+        }
+    }
+}

package/src/components/_input.scss

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

package/src/components/_label.scss

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