@acorex/styles 5.1.2 → 5.1.6

package/src/components/_popup.scss

@@ -1,126 +0,0 @@
-@layer components {
-    ax-page-footer,
-    ax-page-header {
-        @apply ax-flex ax-items-center ax-justify-between ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
-
-        ax-prefix {
-            @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
-        }
-
-        ax-suffix {
-            @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
-        }
-    }
-
-    ax-page-footer {
-        @apply ax-border-t;
-    }
-
-    ax-page-header {
-        @apply ax-border-b;
-    }
-
-    .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-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
-        @include control-states("surface");
-
-        .ax-popup-header {
-            @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center ax-cursor-move;
-
-            span {
-                @apply ax-font-medium;
-            }
-
-            i {
-                @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
-                &:hover {
-                    @apply ax-text-light-500 dark:ax-text-light-100;
-                }
-            }
-        }
-
-        .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,62 +0,0 @@
-@layer components {
-    ax-progress-bar,
-    .ax-progress-bar {
-        @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
-        @include control-states("editor");
-        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-light-200 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;
-            }
-        }
-        &.ax-secondary-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-secondary-500;
-            }
-        }
-        &.ax-success-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-success-500;
-            }
-        }
-        &.ax-warning-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-warning-500;
-            }
-        }
-        &.ax-danger-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-danger-500;
-            }
-        }
-        &.ax-info-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-info-500;
-            }
-        }
-        &.ax-light-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-light-300;
-            }
-        }
-        &.ax-dark-default {
-            .ax-progress-bar-rise {
-                @apply ax-bg-dark-500 dark:ax-bg-dark-300;
-            }
-        }
-    }
-}

package/src/components/_radio.scss

@@ -1,32 +0,0 @@
-@layer components {
-    ax-radio,.ax-radio {
-        @apply ax-text-sm ax-font-medium ax-text-light-700;
-      
-        .ax-radio {
-            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-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,15 +0,0 @@
-@layer components {
-    .ax-range-slider {
-        @apply ax-w-full;
-        .ax-range-slider-input {
-            @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-light-600;
-            &::-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 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
-            }
-            &::-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 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
-            }
-            
-        }
-    }
-}

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,25 +0,0 @@
-@layer components {
-    ax-result,
-    .ax-result {
-        @apply ax-flex ax-flex-col;
-        .ax-result-icon {
-            @apply ax-text-6xl ax-text-center;
-        }
-        .ax-result-title,
-        .ax-result-description {
-            @apply ax-mt-4 ax-text-center;
-        }
-        .ax-result-title {
-            @apply ax-text-2xl 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 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 ax-rounded-md 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/_side-menu.scss

@@ -1,42 +0,0 @@
-@layer components {
-    .ax-side-menu {
-        @apply ax-list-none ax-p-0 ax-m-0;
-        .ax-side-menu-item {
-            @apply ax-flex ax-items-center ax-p-2 ax-cursor-pointer;
-            &:hover {
-                @apply ax-bg-light-100;
-            }
-            &:focus {
-                @apply ax-outline-none ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
-            }
-            .ax-side-menu-icon {
-                @apply ax-pr-2 ax-h-full ax-flex ax-items-center;
-            }
-            .ax-side-menu-text {
-                @apply ax-flex-1;
-            }
-            .ax-side-menu-badge {
-            }
-        }
-        &.ax-alternate {
-            .ax-side-menu-item {
-                &:nth-child(odd) {
-                    @apply ax-bg-light-100;
-                }
-                &:hover {
-                    @apply ax-bg-light-300;
-                }
-            }
-        }
-        &.ax-divided {
-            .ax-side-menu-item {
-                &:not(:last-child) {
-                    @apply ax-border-b ax-border ax-border-solid;
-                }
-                &:hover {
-                    @apply ax-bg-light-100;
-                }
-            }
-        }
-    }
-}

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 copy.scss

@@ -1,185 +0,0 @@
-@layer components {
-    .ax-switch {
-        label {
-            width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
-            height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
-            @apply ax-relative ax-inline-block;
-            input {
-                @apply ax-w-0 ax-h-0 ax-opacity-0;
-            }
-
-            .ax-switch-slider {
-                @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
-                @include control-states("editor");
-                -webkit-transition: 0.4s;
-                transition: 0.4s;
-                &::before {
-                    @apply ax-absolute ax-bg-white ax-rounded-full;
-                    content: "";
-                    width: 35%;
-                    padding-bottom: 35%;
-                    left: 7%;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    -webkit-transition: 0.4s;
-                    transition: 0.4s;
-                }
-            }
-
-            input:checked + .ax-switch-slider {
-                @apply ax-bg-primary-500;
-            }
-
-            input:focus + .ax-switch-slider {
-                @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
-            }
-
-            input:checked + .ax-switch-slider:before {
-                -webkit-transform: translate(140%, -50%);
-                -ms-transform: translate(140%, -50%);
-                transform: translate(140%, -50%);
-            }
-            
-        }
-        &.ax-success {
-            ax-loading {
-                @apply ax-stroke-success-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-success));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-success-500;
-            }
-        }
-        &.ax-secondary {
-            ax-loading {
-                @apply ax-stroke-secondary-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-secondary));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-secondary-500;
-            }
-        }
-        &.ax-danger {
-            ax-loading {
-                @apply ax-stroke-danger-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-danger));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-danger-500;
-            }
-        }
-        &.ax-warning {
-            ax-loading {
-                @apply ax-stroke-warning-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-warning));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-warning-500;
-            }
-        }
-        &.ax-info {
-            ax-loading {
-                @apply ax-stroke-info-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-info));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-info-500;
-            }
-        }
-        &.ax-light {
-            ax-loading {
-                @apply ax-stroke-light-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-light));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-light-500;
-            }
-        }
-        &.ax-dark {
-            ax-loading {
-                @apply ax-stroke-dark-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-dark));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-dark-500;
-            }
-        }
-        &.ax-state-loading {
-            label {
-                .ax-switch-slider {
-                    &::before {
-                        background-image: url("../images/fill-loading.svg");
-                        background-color: transparent;
-                        background-size: cover;
-                        @apply ax-absolute;
-                        content: "";
-                        width: 35%;
-                        padding-bottom: 35%;
-                    transform: translate(0, -50%);
-
-                        left: 7%;
-                        top: 18%;
-                        animation: rotation 0.6s infinite linear;
-
-                    }
-                    @keyframes rotation {
-                        from {
-                          transform: rotate(0deg);
-                        }
-                        to {
-                          transform: rotate(359deg);
-                        }
-                      }
-                }
-            }
-        }
-        &.ax-state-disabled {
-            @apply ax-opacity-60;
-        }
-        &.ax-state-readonly {
-            @apply ax-opacity-60;
-        }
-    }
-}