@acorex/styles 6.1.12 → 7.0.0

package/src/components/_calendar.scss

@@ -1,182 +1,182 @@
-@layer components {
-    .ax-calendar {
-        @apply ax-w-80 ax-block ax-border ax-border-solid ax-border-light-300 ax-rounded ax-bg-white ax-select-none dark:ax-bg-white/[0.03] dark:ax-border-transparent;
-        @include responsive('phone') {
-            @apply ax-w-full;
-        }
-        @include responsive('tablet') {
-            @apply ax-w-full;
-        }
-        @include responsive('desktop'){
-           @apply ax-w-80;
-        }
-        @include responsive('desktop-large'){
-            @apply ax-w-80;
-        }
-
-        .ax-calendar-header {
-            i {
-                @apply ax-font-medium ax-text-xl;
-            }
-        }
+// @layer components {
+//     .ax-calendar {
+//         @apply ax-w-80 ax-block ax-border ax-border-solid ax-border-neutral-300 ax-rounded ax-bg-white ax-select-none dark:ax-bg-white/[0.03] dark:ax-border-transparent;
+//         @include media('phone') {
+//             @apply ax-w-full;
+//         }
+//         @include media('tablet') {
+//             @apply ax-w-full;
+//         }
+//         @include media('desktop'){
+//            @apply ax-w-80;
+//         }
+//         @include media('desktop-large'){
+//             @apply ax-w-80;
+//         }
+
+//         .ax-calendar-header {
+//             i {
+//                 @apply ax-font-medium ax-text-xl;
+//             }
+//         }
 
        
-        &.ax-state-disabled {
-            .ax-calendar-slots {
-                @apply ax-opacity-50 ax-cursor-default;
-            }
-        }
-
-        .ax-calendar-header {
-            @apply ax-flex ax-justify-between ax-py-1 ax-px-2 ax-border-b ax-border-light-300 ax-border-solid dark:ax-border-transparent;
-            .ax-calendar-header-buttons {
-                @apply ax-flex;
-            }
-        }
-
-        .ax-calendar-body {
-            @apply ax-m-2;
-
-            .ax-calendar-slots {
-                @apply ax-grid;
-
-                & > div {
-                    @apply ax-text-sm ax-text-black dark:ax-text-light-200 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 dark:ax-bg-white/[0.07];
-                    }
-                    &:focus {
-                        @apply ax-ring-2 ax-ring-primary-500 ax-outline-none;
-                    }
-
-                    &.ax-state-disabled {
-                        @apply ax-text-light-300 ax-cursor-not-allowed;
-                        &:hover {
-                            @apply ax-bg-transparent ax-text-light-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-500;
-                        &:hover {
-                            @apply ax-text-black dark:ax-text-light-100;
-                        }
-                    }
-
-                    &.ax-state-today {
-                        @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-                        &:hover {
-                            @apply ax-text-primary-500 dark:ax-text-primary-fore;
-                        }
-                    }
-
-                    &.ax-state-other {
-                        @apply ax-opacity-50;
-                    }
-
-                    &.ax-state-selected {
-                        @apply ax-bg-primary-500 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-500;
-                            content: "";
-                        }
-
-                        &.ax-state-event-primary {
-                            &::after {
-                                @apply ax-bg-primary-500;
-                            }
-                        }
-
-                        &.ax-state-event-secondary {
-                            &::after {
-                                @apply ax-bg-secondary-500;
-                            }
-                        }
-
-                        &.ax-state-event-success {
-                            &::after {
-                                @apply ax-bg-success-500;
-                            }
-                        }
-
-                        &.ax-state-event-warning {
-                            &::after {
-                                @apply ax-bg-warning-500;
-                            }
-                        }
-
-                        &.ax-state-event-danger {
-                            &::after {
-                                @apply ax-bg-danger-500;
-                            }
-                        }
-
-                        &.ax-state-event-info {
-                            &::after {
-                                @apply ax-bg-info-500;
-                            }
-                        }
-                    }
-                }
-
-                &.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 dark:ax-text-light-200 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-border-t ax-border-black/[0.12] dark:ax-border-white/[0.12];
-        }
-    }
-    .ax-calendar-picker {
-        @apply ax-flex ax-w-full;
-        ax-picker {
-            @apply ax-flex-1;
-        }
-    }
-    .ax-overlay-pane {
-        ax-calendar {
-            @apply ax-border-none;
-        }
-    }
-}
+//         &.ax-state-disabled {
+//             .ax-calendar-slots {
+//                 @apply ax-opacity-50 ax-cursor-default;
+//             }
+//         }
+
+//         .ax-calendar-header {
+//             @apply ax-flex ax-justify-between ax-py-1 ax-px-2 ax-border-b ax-border-neutral-300 ax-border-solid dark:ax-border-transparent;
+//             .ax-calendar-header-buttons {
+//                 @apply ax-flex;
+//             }
+//         }
+
+//         .ax-calendar-body {
+//             @apply ax-m-2;
+
+//             .ax-calendar-slots {
+//                 @apply ax-grid;
+
+//                 & > div {
+//                     @apply ax-text-sm ax-text-black dark:ax-text-neutral-200 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-neutral-100 dark:ax-bg-white/[0.07];
+//                     }
+//                     &:focus {
+//                         @apply ax-ring-2 ax-ring-primary-500 ax-outline-none;
+//                     }
+
+//                     &.ax-state-disabled {
+//                         @apply ax-text-neutral-300 ax-cursor-not-allowed;
+//                         &:hover {
+//                             @apply ax-bg-transparent ax-text-neutral-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-500;
+//                         &:hover {
+//                             @apply ax-text-black dark:ax-text-neutral-100;
+//                         }
+//                     }
+
+//                     &.ax-state-today {
+//                         @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
+//                         &:hover {
+//                             @apply ax-text-primary-500 dark:ax-text-primary-fore;
+//                         }
+//                     }
+
+//                     &.ax-state-other {
+//                         @apply ax-opacity-50;
+//                     }
+
+//                     &.ax-state-selected {
+//                         @apply ax-bg-primary-500 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-neutral-500;
+//                             content: "";
+//                         }
+
+//                         &.ax-state-event-primary {
+//                             &::after {
+//                                 @apply ax-bg-primary-500;
+//                             }
+//                         }
+
+//                         &.ax-state-event-secondary {
+//                             &::after {
+//                                 @apply ax-bg-secondary-500;
+//                             }
+//                         }
+
+//                         &.ax-state-event-success {
+//                             &::after {
+//                                 @apply ax-bg-success-500;
+//                             }
+//                         }
+
+//                         &.ax-state-event-warning {
+//                             &::after {
+//                                 @apply ax-bg-warning-500;
+//                             }
+//                         }
+
+//                         &.ax-state-event-danger {
+//                             &::after {
+//                                 @apply ax-bg-danger-500;
+//                             }
+//                         }
+
+//                         &.ax-state-event-info {
+//                             &::after {
+//                                 @apply ax-bg-primary-500;
+//                             }
+//                         }
+//                     }
+//                 }
+
+//                 &.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 dark:ax-text-neutral-200 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-border-t ax-border-black/[0.12] dark:ax-border-white/[0.12];
+//         }
+//     }
+//     .ax-calendar-picker {
+//         @apply ax-flex ax-w-full;
+//         ax-picker {
+//             @apply ax-flex-1;
+//         }
+//     }
+//     .ax-overlay-pane {
+//         ax-calendar {
+//             @apply ax-border-none;
+//         }
+//     }
+// }

package/src/components/_carousel.scss

@@ -1,44 +1,44 @@
-@layer components {
-    .ax-carousel {
-        @apply ax-text-center ax-overflow-hidden ax-w-full ax-block ax-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 ax-left-0 ax-right-0 ax-top-0 ax-bottom-0;
-            button {
-                @apply ax-border-none ax-cursor-pointer ax-bg-transparent ax-text-white ax-visible;
-                .ax-ic {
-                    @apply ax-text-4xl;
-                    text-shadow: 0px 0px 2px #000000;
-                }
-            }
-            .ax-vertical-arrow {
-                @apply ax-absolute ax-left-1/2 ax-block;
-                transform: translate(-50%, -50%);
-                &.ax-top-arrow {
-                    @apply ax-top-5;
-                    .ax-ic {
-                        @apply ax-block ax-rotate-90;
-                    }
-                }
-                &.ax-bottom-arrow {
-                    @apply -ax-bottom-5;
-                    transform: translate(-50%, -50%);
-                    .ax-ic {
-                        @apply ax-block -ax-rotate-90;
-                    }
-                }
-            }
-        }
-        .ax-carousel-pager {
-            @apply ax-flex ax-my-3 ax-justify-center;
-            button {
-                @apply ax-p-1 ax-mx-1 ax-cursor-pointer ax-border-none ax-rounded-full ax-bg-light-300;
-                &:hover {
-                    @apply ax-bg-primary-500;
-                }
-                &.ax-state-active {
-                    @apply ax-bg-primary-500;
-                }
-            }
-        }
-    }
-}
+// @layer components {
+//     .ax-carousel {
+//         @apply ax-text-center ax-overflow-hidden ax-w-full ax-block ax-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 ax-left-0 ax-right-0 ax-top-0 ax-bottom-0;
+//             button {
+//                 @apply ax-border-none ax-cursor-pointer ax-bg-transparent ax-text-white ax-visible;
+//                 .ax-icon{
+//                     @apply ax-text-4xl;
+//                     text-shadow: 0px 0px 2px #000000;
+//                 }
+//             }
+//             .ax-vertical-arrow {
+//                 @apply ax-absolute ax-left-1/2 ax-block;
+//                 transform: translate(-50%, -50%);
+//                 &.ax-top-arrow {
+//                     @apply ax-top-5;
+//                     .ax-icon{
+//                         @apply ax-block ax-rotate-90;
+//                     }
+//                 }
+//                 &.ax-bottom-arrow {
+//                     @apply -ax-bottom-5;
+//                     transform: translate(-50%, -50%);
+//                     .ax-icon{
+//                         @apply ax-block -ax-rotate-90;
+//                     }
+//                 }
+//             }
+//         }
+//         .ax-carousel-pager {
+//             @apply ax-flex ax-my-3 ax-justify-center;
+//             button {
+//                 @apply ax-p-1 ax-mx-1 ax-cursor-pointer ax-border-none ax-rounded-full ax-bg-neutral-300;
+//                 &:hover {
+//                     @apply ax-bg-primary-500;
+//                 }
+//                 &.ax-state-active {
+//                     @apply ax-bg-primary-500;
+//                 }
+//             }
+//         }
+//     }
+// }

package/src/components/_checkbox.scss

@@ -1,58 +1,58 @@
-@layer components {
-    .ax-check-box {
-        .ax-state-error {
-            @apply ax-text-danger-500;
-
-            input[type="checkbox"] {
-                @apply ax-border-danger-500;
-            }
-        }
-        .ax-state-success {
-            @apply ax-text-success-600;
-
-            input[type="checkbox"] {
-                @apply ax-border-success-600;
-            }
-        }
-
-        .ax-wrapper {
-            &.ax-state-disabled {
-                @apply ax-cursor-not-allowed ax-opacity-80;
-
-                input[type="checkbox"] {
-                    @apply ax-cursor-not-allowed;
-                }
-            }
-        }
-
-        input[type="checkbox"] {
-            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
-            @include control-states("editor");
-
-            &:checked,
-            &:indeterminate {
-                @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
-            }
-
-            &: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-500 ax-ring-offset-2;
-            }
-
-            &.ax-state-disabled {
-                @apply ax-opacity-70;
-            }
-
-            &.ax-state-disabled {
-                @apply ax-opacity-60;
-            }
-        }
-    }
-}
+// @layer components {
+//     .ax-check-box {
+//         .ax-state-error {
+//             @apply ax-text-danger-500;
+
+//             input[type="checkbox"] {
+//                 @apply ax-border-danger-500;
+//             }
+//         }
+//         .ax-state-success {
+//             @apply ax-text-success-600;
+
+//             input[type="checkbox"] {
+//                 @apply ax-border-success-600;
+//             }
+//         }
+
+//         .ax-wrapper {
+//             &.ax-state-disabled {
+//                 @apply ax-cursor-not-allowed ax-opacity-80;
+
+//                 input[type="checkbox"] {
+//                     @apply ax-cursor-not-allowed;
+//                 }
+//             }
+//         }
+
+//         input[type="checkbox"] {
+//             @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-neutral-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
+//             @include control-states("editor");
+
+//             &:checked,
+//             &:indeterminate {
+//                 @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
+//             }
+
+//             &: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-500 ax-ring-offset-2;
+//             }
+
+//             &.ax-state-disabled {
+//                 @apply ax-opacity-70;
+//             }
+
+//             &.ax-state-disabled {
+//                 @apply ax-opacity-60;
+//             }
+//         }
+//     }
+// }