@acorex/styles 7.0.5 → 7.0.7

package/src/components/_popup.scss

@@ -1,106 +0,0 @@
-// @layer components {
-
-//     .ax-popup {
-//         @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-neutral-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
-//         @include control-states("surface");
-//         background-color: #fff;
-//         ax-header,
-//         ax-footer {
-//             @apply ax-bg-white ax-p-3 ax-border-neutral-300 dark:ax-border-neutral-700 ax-flex ax-justify-between ax-items-center;
-//             @include control-states("editor");
-//         }
-
-//         &:focus
-//         {
-//             @apply ax-ring-1 ax-ring-primary-500 ax-outline-none;
-//         }
-
-//         ax-footer
-//         {
-//             @apply ax-border-t;
-//         }
-//         .ax-popup-main-container {
-//             @apply ax-overflow-auto ax-flex-1;
-//         }
-//         .ax-popup-footer-container {
-//         }
-//         &.ax-popup-full {
-//             @apply ax-w-screen;
-//             height: calc(100 * var(--ax-vh));
-//             max-height: calc(100 * var(--ax-vh));
-//         }
-
-//         &.ax-fit {
-//             width: fit-content;
-//         }
-
-//         @media all and (min-width: 1280px) {
-//             &.ax-popup-sm {
-//                 width: 420px !important;
-//             }
-
-//             &.ax-popup-md {
-//                 width: 680px !important;
-//             }
-
-//             &.ax-popup-lg {
-//                 width: 1024px !important;
-//             }
-//         }
-
-//         @media all and (min-width: 1024px) and (max-width: 1279px) {
-//             &.ax-popup-sm {
-//                 width: 100vw;
-//                 max-height: calc(100 * var(--ax-vh));
-//                 .ax-popup-main {
-//                     @apply ax-h-screen;
-//                 }
-//             }
-
-//             &.ax-popup-md {
-//                 width: 500px !important;
-//             }
-
-//             &.ax-popup-lg {
-//                 width: 900px !important;
-//             }
-//         }
-
-//         @media all and (min-width: 768px) and (max-width: 1023px) {
-//             &.ax-popup-md {
-//                 width: 500px !important;
-//             }
-//             &.ax-popup-lg {
-//                 width: 700px !important;
-//             }
-//         }
-
-//         @media all and (min-width: 425px) and (max-width: 767px) {
-//             &.ax-popup-sm {
-//                 width: 100vw;
-//                 height: calc(100 * var(--ax-vh));
-//                 max-height: calc(100 * var(--ax-vh));
-//                 .ax-popup-main {
-//                     @apply ax-h-screen;
-//                 }
-//             }
-
-//             &.ax-popup-md,
-//             &.ax-popup-lg {
-//                 width: 460px !important;
-//             }
-//         }
-
-//         @media all and (min-width: 0px) and (max-width: 424px) {
-//             &.ax-popup-md,
-//             &.ax-popup-lg {
-//                 width: calc(var(--ax-overlay-full-width) * 1vw);
-//                 height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
-//                 max-height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
-//                 .ax-popup-main {
-//                     @apply ax-h-screen;
-//                 }
-//             }
-//         }
-//     }
-// }

package/src/components/_progress.scss

@@ -1,60 +0,0 @@
-// @layer components {
-//     .ax-progress-bar {
-//         @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
-//         .ax-prefix{
-//             @apply ax-pe-2;
-//         }
-//         .ax-suffix{
-//             @apply ax-ps-2;
-//         }
-//         .ax-progress-bar-container {
-//             @apply ax-w-full ax-h-2 ax-relative ax-bg-neutral-200 dark:ax-bg-white/10 ax-flex ax-rounded-full;
-//             .ax-progress-bar-rise {
-//                 max-width: 100%;
-//                 transition: width 1s;
-//                 @apply ax-bg-primary-500 ax-h-full ax-absolute ax-start-0 ax-rounded-full;
-//             }
-//         }
-
-//         &.ax-primary-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-primary-500 dark:ax-bg-primary-800;
-//             }
-//         }
-//         &.ax-secondary-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-secondary-500 dark:ax-bg-secondary-800;
-//             }
-//         }
-//         &.ax-success-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-success-500 dark:ax-bg-success-800;
-//             }
-//         }
-//         &.ax-warning-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-warning-500 dark:ax-bg-warning-800;
-//             }
-//         }
-//         &.ax-danger-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-danger-500 dark:ax-bg-danger-800;
-//             }
-//         }
-//         &.ax-primary-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-primary-500 dark:ax-bg-primary-800;
-//             }
-//         }
-//         &.ax-neutral-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-neutral-300 dark:ax-border-neutral-500;
-//             }
-//         }
-//         &.ax-neutral-default {
-//             .ax-progress-bar-rise {
-//                 @apply ax-bg-neutral-500 dark:ax-bg-neutral-200;
-//             }
-//         }
-//     }
-// }

package/src/components/_radio.scss

@@ -1,32 +0,0 @@
-// @layer components {
-//    .ax-radio {
-//         @apply ax-text-sm ax-font-medium ax-text-neutral-700;
-      
-//         .ax-radio {
-//             @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-neutral-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
-//             @include control-states('editor');
-
-//             &:checked {
-//                 @apply ax-border-primary-500 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-500 ax-ring-offset-2;
-//             }
-//             &.ax-state-disabled{
-//                 @apply ax-opacity-70;
-//             }
-//             &.ax-state-disabled{
-//                 @apply ax-opacity-60;
-//             }
-//             &.ax-state-error{
-//                 @apply ax-border-danger-500;
-//             }
-//         }
-//         ax-label {
-//             label {
-//                 @apply ax-mb-0;
-//             }
-//         }
-//     }
-// }

package/src/components/_range-slider.scss

@@ -1,232 +0,0 @@
-@layer components {
-    // .ax-dark {
-    //     .ax-range-slider {
-    //         &.ax-primary-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-primary-800)) 0%,
-    //                     rgb(var(--ax-color-primary-800)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //         &.ax-secondary-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-secondary-800)) 0%,
-    //                     rgb(var(--ax-color-secondary-800)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //         &.ax-success-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-success-800)) 0%,
-    //                     rgb(var(--ax-color-success-800)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //         &.ax-warning-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-warning-800)) 0%,
-    //                     rgb(var(--ax-color-warning-800)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //         &.ax-danger-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-danger-800)) 0%,
-    //                     rgb(var(--ax-color-danger-800)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //         &.ax-primary-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-primary-800)) 0%,
-    //                     rgb(var(--ax-color-primary-800)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //         &.ax-neutral-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-neutral-600)) 0%,
-    //                     rgb(var(--ax-color-neutral-600)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //         &.ax-neutral-default {
-    //             input {
-    //                 background: linear-gradient(
-    //                     to right,
-    //                     rgb(var(--ax-color-neutral-200)) 0%,
-    //                     rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) var(--ax-current-value),
-    //                     rgba(255, 255, 255, 0.1) 100%
-    //                 );
-    //             }
-    //         }
-    //     }
-    // }
-    .ax-range-slider {
-        width: 100%;
-        --ax-current-value: 0%;
-        input {
-            appearance: none;
-            width: 100%;
-            height: 0.5rem;
-            background: rgba(var(--ax-color-ghost), 0.05);
-            transition-property: all;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            transition-duration: 150ms;
-            border-radius: 999rem;
-            &::-webkit-slider-thumb{
-                width: 1.25rem;
-                height: 1.25rem;
-                background: rgb(var(--ax-color-background-default));
-                border: 1px solid;
-                border-color: rgb(var(--ax-color-border-default));
-                cursor: pointer;
-                border-radius: 999rem;
-                appearance: none;
-                -webkit-appearance: none;
-            }
-            &::-moz-range-thumb {
-                width: 1.25rem;
-                height: 1.25rem;
-                background: rgb(var(--ax-color-background-default));
-                border: 1px solid;
-                border-color: rgb(var(--ax-color-border-default));
-                cursor: pointer;
-                border-radius: 999rem;
-            }
-            
-        }
-
-        &.ax-vertical {
-            @apply ax-rotate-90 ax-block;
-            input[type="range"] {
-                -webkit-appearance: slider-vertical;
-            }
-        }
-
-        &.ax-primary-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-primary-500)) 0%,
-                    rgb(var(--ax-color-primary-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-
-        &.ax-secondary-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-secondary-500)) 0%,
-                    rgb(var(--ax-color-secondary-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-
-        &.ax-danger-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-danger-500)) 0%,
-                    rgb(var(--ax-color-danger-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-
-        &.ax-success-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-success-500)) 0%,
-                    rgb(var(--ax-color-success-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-
-        &.ax-warning-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-warning-500)) 0%,
-                    rgb(var(--ax-color-warning-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-
-        &.ax-primary-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-primary-500)) 0%,
-                    rgb(var(--ax-color-primary-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-
-        &.ax-neutral-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-neutral-500)) 0%,
-                    rgb(var(--ax-color-neutral-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-
-        &.ax-neutral-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-neutral-500)) 0%,
-                    rgb(var(--ax-color-neutral-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-neutral-200)) 100%
-                );
-            }
-        }
-    }
-}

package/src/components/_rating.scss

@@ -1,14 +0,0 @@
-@layer components {
-    .ax-rating-start {
-        &:hover {
-            &::before {
-                content: "\e91f" !important; // half filled 
-            }
-        }
-        &.ax-state-selected{
-            &::before {
-                content: "\e91e" !important;
-            }
-        }
-    }
-}

package/src/components/_result.scss

@@ -1,24 +0,0 @@
-@layer components {
-    ax-result,.ax-result {
-        @apply ax-flex ax-flex-col;
-        .ax-result-icon {
-            @apply ax-text-5xl ax-text-center;
-        }
-        .ax-result-title,
-        .ax-result-description {
-            @apply ax-mt-2 ax-text-center;
-        }
-        .ax-result-title {
-            @apply ax-text-base ax-font-semibold ax-text-neutral-700 dark:ax-text-neutral-50;
-        }
-        .ax-result-description {
-            @apply ax-text-sm ax-text-neutral-500 dark:ax-text-neutral-100;
-        }
-        .ax-custom-icon,.ax-custom-image{
-            @apply ax-flex ax-items-center ax-justify-center;
-        }
-        .ax-result-content {
-            @apply ax-mt-4;
-        }
-    }
-}

package/src/components/_selectbox.scss

@@ -1,16 +0,0 @@
-// @layer components {
-//     .ax-select-box {
-//         .ax-select-box-selection {
-//             display: flex;
-//             justify-content: center;
-//             align-items: center;
-//             outline-color: transparent;
-//             padding: 0 0.5rem;
-
-//             .ax-selectbox-input {
-//                 opacity: 0;
-//                 width: 0;
-//             }
-//         }
-//     }
-// }

package/src/components/_selection-list.scss

@@ -1,54 +0,0 @@
-@layer components {
-  .ax-selection-list {
-    @apply ax-flex ax-flex-wrap;
-
-    &.ax-vertical {
-      @apply ax-flex-col;
-
-      .ax-checkbox-container,
-      .ax-radio-container {
-        @apply ax-mb-4;
-      }
-    }
-
-    &.ax-horizontal {
-      @apply ax-flex-row;
-      .ax-checkbox-container,
-      .ax-radio-container {
-        @apply ax-pe-3;
-      }
-    }
-
-    &.ax-state-error {
-      @apply ax-text-danger-500;
-      .ax-checkbox-checkmark {
-        @apply ax-border-danger-500;
-      }
-
-      .ax-radio-checkmark {
-        @apply ax-border-danger-500;
-      }
-    }
-  }
-  .ax-separate-style {
-    .ax-selection-list {
-      &.ax-vertical {
-        & > div {
-          @apply ax-pb-3.5 ax-border-b ax-border-neutral-300 dark:ax-border-white/[0.09] last:ax-border-0;
-        }
-      }
-    }
-  }
-  .ax-card-style {
-    .ax-selection-list {
-      &.ax-vertical,&.ax-horizontal {
-        & > div {
-          @apply ax-p-4 ax-border ax-border-neutral-300 dark:ax-border-white/[0.09] ax-rounded-default ax-shadow-sm;
-          &.ax-state-selected {
-            @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-primary-500; 
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/_skeleton.scss

@@ -1,22 +0,0 @@
-@layer utilities {
-    .ax-skeleton {
-        @apply ax-relative ax-overflow-hidden ax-bg-neutral-200 dark:ax-bg-neutral-700;
-        &.ax-skeleton-animate {
-            &::before {
-                content: "";
-                @apply ax-block ax-absolute ax-top-0 ax-h-full ax-w-52;
-                left: -200px;
-                background: linear-gradient(to right, transparent 0%, rgb(var(--ax-color-neutral-300)) 50%, transparent 100%);
-                animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-            }
-        }
-    }
-    @keyframes load {
-        from {
-            left: -200px;
-        }
-        to {
-            left: 100%;
-        }
-    }
-}