@acorex/styles 6.1.10 → 6.5.0

package/src/components/_range-slider.scss

@@ -1,210 +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-info-default {
-                input {
-                    background: linear-gradient(
-                        to right,
-                        rgb(var(--ax-color-info-800)) 0%,
-                        rgb(var(--ax-color-info-800)) var(--ax-current-value),
-                        rgba(255, 255, 255, 0.1) var(--ax-current-value),
-                        rgba(255, 255, 255, 0.1) 100%
-                    );
-                }
-            }
-            &.ax-light-default {
-                input {
-                    background: linear-gradient(
-                        to right,
-                        rgb(var(--ax-color-light-600)) 0%,
-                        rgb(var(--ax-color-light-600)) var(--ax-current-value),
-                        rgba(255, 255, 255, 0.1) var(--ax-current-value),
-                        rgba(255, 255, 255, 0.1) 100%
-                    );
-                }
-            }
-            &.ax-dark-default {
-                input {
-                    background: linear-gradient(
-                        to right,
-                        rgb(var(--ax-color-dark-200)) 0%,
-                        rgb(var(--ax-color-dark-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 {
-        @apply ax-w-full;
-        --ax-current-value: 0%;
-        input {
-            @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-200 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-white/10;
-            &::-webkit-slider-thumb {
-                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
-            }
-            &::-moz-range-thumb {
-                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
-            }
-        }
-
-        &.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-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-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-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-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-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-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-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-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-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-200)) 100%
-                );
-            }
-        }
-
-        &.ax-info-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-info-500)) 0%,
-                    rgb(var(--ax-color-info-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-200)) 100%
-                );
-            }
-        }
-
-        &.ax-light-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-light-500)) 0%,
-                    rgb(var(--ax-color-light-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-200)) 100%
-                );
-            }
-        }
-
-        &.ax-dark-default {
-            input {
-                background: linear-gradient(
-                    to right,
-                    rgb(var(--ax-color-dark-500)) 0%,
-                    rgb(var(--ax-color-dark-500)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-200)) var(--ax-current-value),
-                    rgb(var(--ax-color-light-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-light-700 dark:ax-text-light-50;
-        }
-        .ax-result-description {
-            @apply ax-text-sm ax-text-light-500 dark:ax-text-light-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,18 +0,0 @@
-@layer components {
-    .ax-select-box {
-        .ax-select-box-selection {
-            @apply ax-flex ax-justify-center ax-items-center ax-outline-none;
-
-            .ax-badge {
-                @apply dark:ax-bg-white/[0.16] dark:ax-text-light-100;
-            }
-            .ax-dropdown-chips {
-                @apply ax-flex ax-overflow-x-auto;
-            }
-
-            .ax-selectbox-input {
-                @apply ax-opacity-0 ax-w-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-light-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-light-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-light-200 dark:ax-bg-light-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-light-300)) 50%, transparent 100%);
-                animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-            }
-        }
-    }
-    @keyframes load {
-        from {
-            left: -200px;
-        }
-        to {
-            left: 100%;
-        }
-    }
-}

package/src/components/_switch.scss

@@ -1,186 +0,0 @@
-@layer components {
-    .ax-switch {
-        button {
-            @apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 dark:ax-bg-white/20 ax-text-light-fore ax-transition-all;
-            min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
-            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
-            line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
-            &.ax-switch-checked {
-                @apply ax-bg-primary-500;
-                .ax-switch-handle {
-                    @apply ax-right-0.5;
-                    left: initial;
-                }
-                .ax-switch-inner {
-                    @apply ax-text-primary-fore;
-                    margin-inline-end: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
-                    margin-inline-start: var(--ax-base-size);
-                }
-            }
-            .ax-switch-handle {
-                width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
-                height: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
-                @apply ax-bg-white  ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
-                ax-loading {
-                    transform: translateY(-50%);
-                    @apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
-                    svg {
-                        @apply ax-fill-primary-500 ax-stroke-primary-500;
-                    }
-                }
-                &:before {
-                    @apply ax-absolute ax-bg-white ax-transition-all ax-rounded-full;
-                    content: "";
-                }
-            }
-            .ax-switch-inner {
-                @apply ax-block;
-                margin-inline-start: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
-                margin-inline-end: var(--ax-base-size);
-                transition: margin 0.2s;
-            }
-        }
-        &.ax-primary {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-primary-500;
-                    .ax-switch-inner {
-                        @apply ax-text-primary-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-primary-500 ax-stroke-primary-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-secondary {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-secondary-500;
-                    .ax-switch-inner {
-                        @apply ax-text-secondary-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-secondary-500 ax-stroke-secondary-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-success {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-success-500;
-                    .ax-switch-inner {
-                        @apply ax-text-success-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-success-500 ax-stroke-success-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-warning {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-warning-500;
-                    .ax-switch-inner {
-                        @apply ax-text-warning-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-warning-500 ax-stroke-warning-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-danger {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-danger-500;
-                    .ax-switch-inner {
-                        @apply ax-text-danger-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-danger-500 ax-stroke-danger-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-info {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-info-500;
-                    .ax-switch-inner {
-                        @apply ax-text-info-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-info-500 ax-stroke-info-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-dark {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-dark-500;
-                    .ax-switch-inner {
-                        @apply ax-text-dark-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-dark-500 ax-stroke-dark-500;
-                        }
-                    }
-                }
-            }
-        }
-        &.ax-light {
-            button {
-                &.ax-switch-checked {
-                    @apply ax-bg-light-500;
-                    .ax-switch-inner {
-                        @apply ax-text-light-fore;
-                    }
-                }
-                .ax-switch-handle {
-                    ax-loading {
-                        svg {
-                            @apply ax-fill-light-500 ax-stroke-light-500;
-                        }
-                    }
-                }
-            }
-        }
-        .ax-state-disabled {
-                @apply ax-opacity-60 ax-cursor-not-allowed #{!important};
-        }
-        .ax-state-readonly {
-                @apply ax-opacity-75 #{!important};
-        }
-    }
-}

package/src/components/_table.scss

@@ -1,81 +0,0 @@
-@layer components {
-    .ax-table {
-        @apply ax-w-full ax-rounded-default ax-border-collapse ax-border ax-border-light-200 dark:ax-border-white/10 ax-overflow-hidden;
-        td {
-            @apply ax-border-b ax-border-light-200 dark:ax-border-white/10 ax-px-6 ax-py-4 ax-text-sm;
-        }
-        thead {
-            @apply ax-bg-light-100 dark:ax-bg-white/10 ax-shadow-sm ax-border-b ax-border-light-200 dark:ax-border-white/10;
-            th {
-                @apply ax-text-sm ax-font-bold ax-text-start ax-py-4 ax-px-6;
-            }
-           
-        }
-        &.ax-table-alternate {
-            tbody {
-                tr {
-                    &:nth-child(even) {
-                        @apply ax-bg-light-100 dark:ax-bg-dark-400/20;
-                    }
-                }
-            }
-        }
-        &.ax-table-bordered {
-            thead {
-                th {
-                    @apply ax-border-t-0 #{!important};
-                }
-            }
-            tbody {
-                
-                tr {
-                    &:last-child {
-                        td {
-                            @apply ax-border-b-0;
-                        }
-                    }
-                    td {
-                        &:last-child {
-                            @apply ax-border-b-0;
-                        }
-                    }
-                }
-            }
-
-            td,
-            th {
-                @apply ax-border ax-border-light-200 dark:ax-border-white/10;
-                &:first-child {
-                    @apply ax-border-s-0;
-                }
-                &:last-child {
-                    @apply ax-border-e-0;
-                }
-            }
-           
-        }
-        @media screen and (max-width: 601px) {
-            &.ax-table-responsive {
-                @apply ax-break-words ax-block ax-border-0;
-                thead {
-                    @apply ax-absolute -ax-left-full -ax-top-full;
-                }
-
-                td {
-                    @apply ax-block ax-float-left ax-w-full ax-clear-both ax-bg-white ax-px-1.5 ax-py-2.5 ax-box-border last:ax-border-0;
-                    &:before {
-                        content: attr(data-label);
-                        @apply ax-block ax-font-bold;
-                    }
-                }
-                tr {
-                    @apply ax-border ax-border-light-200 dark:ax-border-white/10;
-                }
-                tr,
-                tbody {
-                    @apply ax-block ax-float-left ax-w-full ax-mb-2.5;
-                }
-            }
-        }
-    }
-}