@acorex/styles 4.0.24 → 5.0.4

package/src/components/_button.scss

@@ -0,0 +1,652 @@
+@import "../variables/mixins";
+@layer components {
+    ax-button {
+        @apply ax-contents;
+        button {
+            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-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-gray-300 ax-text-gray-600;
+            @include respond(mobile) {
+                @apply ax-text-base;
+            }
+            ax-prefix {
+                @apply ax-flex ax-flex-row ax-pe-2;
+            }
+            ax-suffix {
+                @apply ax-flex ax-flex-row ax-ps-2;
+            }
+            &:focus {
+                @apply ax-outline-none ax-z-10;
+            }
+            &.ax-rounded {
+                @apply ax-rounded-full;
+            }
+            &.ax-button-icon {
+                ax-prefix,
+                ax-suffix {
+                    @apply ax-p-0;
+                }
+                @apply ax-px-2;
+                [class*=" ax-ic-"],
+                [class^=ax-ic-] {
+                    @apply ax-text-2xl;
+                }
+            }
+            &.ax-sm {
+                height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
+                line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - 10px) !important;
+                @apply ax-text-sm;
+                .ax-ic {
+                    @apply ax-text-sm;
+                }
+            }
+            &.ax-lg {
+                height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
+                line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 10px) !important;
+                @apply ax-text-lg;
+                &.ax-button-icon {
+                    @apply ax-px-3;
+                }
+                .ax-ic {
+                    @apply ax-text-3xl;
+                }
+            }
+            ax-loading-spinner {
+                @apply ax-flex ax-pe-1;
+                svg {
+                    width: calc(var(--ax-base-size) * 3);
+                    height: calc(var(--ax-base-size) * 3);
+                    @apply ax-fill-current;
+                }
+            }
+            // states
+            &.ax-state-selected {
+                @apply ax-z-10;
+            }
+            &.ax-state-loading {
+                @apply ax-cursor-not-allowed;
+            }
+            &.ax-state-disabled {
+                @apply ax-cursor-not-allowed ax-opacity-60;
+            }
+            // normal
+            &.ax-primary {
+                @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-primary-600;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
+                }
+                &:active {
+                    @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-primary-700;
+                }
+            }
+            &.ax-secondary {
+                @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-secondary-600;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
+                }
+                &:active {
+                    @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-secondary-700;
+                }
+            }
+            &.ax-warning {
+                @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-warning-400;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
+                }
+                &:active {
+                    @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-warning-700 ax-text-warning-50;
+                }
+            }
+            &.ax-danger {
+                @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-danger-600;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
+                }
+                &:active {
+                    @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-danger-700;
+                }
+            }
+            &.ax-success {
+                @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-success-600;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
+                }
+                &:active {
+                    @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-success-700;
+                }
+            }
+            &.ax-info {
+                @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-info-600;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
+                }
+                &:active {
+                    @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-info-700;
+                }
+            }
+            &.ax-dark {
+                @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-dark-400;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
+                }
+                &:active {
+                    @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-dark-300;
+                }
+            }
+            &.ax-light {
+                @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-default;
+                &:hover {
+                    @apply ax-bg-light-100;
+                }
+                &:focus {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
+                }
+                &:active {
+                    @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-light-600 ax-text-light-50;
+                }
+            }
+            // twotone
+            &.ax-primary-twotone {
+                @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-primary-100 ax-text-primary-700;
+                }
+                &:active {
+                    @apply ax-bg-primary-200 ax-text-primary-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-primary-200 ax-text-primary-700;
+                }
+            }
+            &.ax-secondary-twotone {
+                @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-secondary-100 ax-text-secondary-700;
+                }
+                &:active {
+                    @apply ax-bg-secondary-200 ax-text-secondary-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-secondary-200 ax-text-secondary-700;
+                }
+            }
+            &.ax-warning-twotone {
+                @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-warning-100 ax-text-warning-700;
+                }
+                &:active {
+                    @apply ax-bg-warning-200 ax-text-warning-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-warning-200 ax-text-warning-700;
+                }
+            }
+            &.ax-danger-twotone {
+                @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-danger-100 ax-text-danger-700;
+                }
+                &:active {
+                    @apply ax-bg-danger-200 ax-text-danger-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-danger-200 ax-text-danger-700;
+                }
+            }
+            &.ax-success-twotone {
+                @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-success-100 ax-text-success-700;
+                }
+                &:active {
+                    @apply ax-bg-success-200 ax-text-success-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-success-200 ax-text-success-700;
+                }
+            }
+            &.ax-info-twotone {
+                @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-info-100 ax-text-primary-700;
+                }
+                &:active {
+                    @apply ax-bg-info-200 ax-text-primary-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-info-200 ax-text-primary-700;
+                }
+            }
+            &.ax-dark-twotone {
+                @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
+                &:hover {}
+                &:focus {
+                    @apply ax-bg-dark-100 ax-text-dark-700;
+                }
+                &:active {
+                    @apply ax-bg-dark-200 ax-text-dark-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-dark-300 ax-text-dark-fore;
+                }
+            }
+            &.ax-light-twotone {
+                @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
+                &:hover {
+                    @apply ax-bg-light-300;
+                }
+                &:focus {
+                    @apply ax-bg-light-200;
+                }
+                &:active {
+                    @apply ax-bg-light-300;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-light-400;
+                }
+            }
+            // outline
+            &.ax-primary-outline {
+                @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
+                }
+                &:active {
+                    @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-primary ax-text-primary-fore;
+                }
+            }
+            &.ax-secondary-outline {
+                @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
+                }
+                &:active {
+                    @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-secondary ax-text-secondary-fore;
+                }
+            }
+            &.ax-warning-outline {
+                @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
+                }
+                &:active {
+                    @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-warning ax-text-warning-fore;
+                }
+            }
+            &.ax-danger-outline {
+                @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
+                }
+                &:active {
+                    @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-danger ax-text-danger-fore;
+                }
+            }
+            &.ax-success-outline {
+                @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-success ax-border-success ax-text-success-fore;
+                }
+                &:active {
+                    @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-success ax-text-success-fore;
+                }
+            }
+            &.ax-info-outline {
+                @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-info ax-border-info ax-text-info-fore;
+                }
+                &:active {
+                    @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-info ax-text-info-fore;
+                }
+            }
+            &.ax-dark-outline {
+                @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500;
+                &:hover {
+                    @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
+                }
+                &:focus {
+                    @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
+                }
+                &:active {
+                    @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-dark ax-text-dark-fore;
+                }
+            }
+            &.ax-light-outline {
+                @apply ax-bg-transparent ax-text-light-fore ax-border-light-200;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-light-200 ax-border-light-200 ax-text-light-fore;
+                }
+                &:active {
+                    @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-light-300 ax-text-light-fore;
+                }
+            }
+            // blank
+            &.ax-primary-blank {
+                @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-blank {
+                @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-blank {
+                @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-blank {
+                @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-blank {
+                @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-blank {
+                @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-blank {
+                @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-dark-400 ax-text-dark-fore;
+                }
+                &:active {
+                    @apply ax-bg-dark-600 ax-text-dark-fore;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-dark-200;
+                }
+            }
+            &.ax-light-blank {
+                @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
+                &:hover,
+                &:focus {
+                    @apply ax-bg-light-100 ax-text-light-500;
+                }
+                &:active {
+                    @apply ax-bg-light-200 ax-text-light-700;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-light-600;
+                }
+            }
+            // link
+            &.ax-primary-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary;
+                &:hover,
+                &:focus {
+                    @apply ax-text-primary-600 ax-border-primary-600;
+                }
+                &:active {
+                    @apply ax-text-primary-500 ax-border-primary-500;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-primary-200;
+                }
+            }
+            &.ax-secondary-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary;
+                &:hover,
+                &:focus {
+                    @apply ax-text-secondary-600 ax-border-secondary-600;
+                }
+                &:active {
+                    @apply ax-text-secondary-500 ax-border-secondary-500;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-secondary-200;
+                }
+            }
+            &.ax-warning-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning;
+                &:hover,
+                &:focus {
+                    @apply ax-text-warning-600 ax-border-warning-600;
+                }
+                &:active {
+                    @apply ax-text-warning-500 ax-border-warning-500;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-warning-200;
+                }
+            }
+            &.ax-danger-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger;
+                &:hover,
+                &:focus {
+                    @apply ax-text-danger-600 ax-border-danger-600;
+                }
+                &:active {
+                    @apply ax-text-danger-500 ax-border-danger-500;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-danger-200;
+                }
+            }
+            &.ax-success-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success;
+                &:hover,
+                &:focus {
+                    @apply ax-text-success-600 ax-border-success-600;
+                }
+                &:active {
+                    @apply ax-text-success-500 ax-border-success-500;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-success-200;
+                }
+            }
+            &.ax-info-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info;
+                &:hover,
+                &:focus {
+                    @apply ax-text-info-600 ax-border-info-600;
+                }
+                &:active {
+                    @apply ax-text-info-500 ax-border-info-500;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-info-200;
+                }
+            }
+            &.ax-dark-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark;
+                &:hover,
+                &:focus {
+                    @apply ax-text-dark-600 ax-border-dark-600;
+                }
+                &:active {
+                    @apply ax-text-dark-300 ax-border-dark-300;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-dark-200;
+                }
+            }
+            &.ax-light-link {
+                @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-light-400 ax-border-light-400;
+                &:hover {
+                    @apply ax-text-light-300 ax-border-light-300;
+                }
+                &:focus {
+                    @apply ax-text-light-500 ax-border-light-500;
+                }
+                &:active {
+                    @apply ax-text-light-600 ax-border-light-600;
+                }
+                &.ax-state-selected {
+                    @apply ax-bg-light-600;
+                }
+            }
+        }
+    }
+    .ax-button-group {
+        @apply ax-flex;
+        ax-button {
+            button {
+                &[class*="-link"] {
+                    &:first-child,
+                    &:last-child {
+                        @apply ax-rounded-s-none ax-rounded-e-none;
+                    }
+                }
+            }
+            &:not(:first-child):not(:last-child) {
+                button {
+                    @apply ax-border-s-0;
+                }
+            }
+            button {
+                @apply ax-rounded-none;
+            }
+            &:first-child {
+                button {
+                    @apply ax-rounded-s-md;
+                }
+            }
+            &:last-child {
+                button {
+                    @apply ax-rounded-e-md ax-border-s-0;
+                }
+            }
+        }
+    }
+}