@acorex/styles 5.1.2 → 5.1.5

package/scss/toast.scss

@@ -0,0 +1,46 @@
+@import "./variables.scss";
+.ax {
+    &.toast {
+        font-size: 0.875rem;
+       
+        &.info {
+            background-color: var(--ax-info-color);
+            color: var(--ax-info-fore-color);
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: var(--ax-info-color);
+                color: var(--ax-info-fore-color);
+            }
+        }
+
+        &.success {
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: var(--ax-success-color);
+                color: var(--ax-success-fore-color);
+            }
+        }
+
+        &.warning {
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: var(--ax-warning-color);
+                color: var(--ax-warning-fore-color);
+            }
+        }
+
+        &.error {
+            background-color: var(--ax-danger-color);
+            color: var(--ax-danger-fore-color);
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: var(--ax-danger-color);
+                color: var(--ax-danger-fore-color);
+            }
+        }
+    }
+}

package/scss/tooltip.scss

@@ -0,0 +1,55 @@
+.ax-tooltip {
+    position: absolute;
+    font-size: 0.875rem;
+    min-width: fit-content;
+    max-width: 150px;
+    text-align: center;
+    color: var(--ax-dark-fore-color);
+    padding: 0.5rem 0.7rem;
+    background: var(--ax-dark-color);
+    border-radius: var(--ax-size-border-radius);
+    z-index: 20000;
+    opacity: 0;
+  
+    &:after {
+      content: "";
+      position: absolute;
+      border-style: solid;
+    }
+  
+    &.ax-tooltip-top:after {
+      top: 100%;
+      inset-inline-start: 50%;
+      margin-inline-start: -5px;
+      border-width: 5px;
+      border-color: var(--ax-dark-color) transparent transparent transparent;
+    }
+  
+    &.ax-tooltip-bottom:after {
+      bottom: 100%;
+      inset-inline-start: 50%;
+      margin-inline-start: -5px;
+      border-width: 5px;
+      border-color: transparent transparent var(--ax-dark-color) transparent;
+    }
+  
+    &.ax-tooltip-left:after {
+      top: 50%;
+      inset-inline-end: 100%;
+      margin-top: -5px;
+      border-width: 5px;
+      border-color: transparent transparent transparent var(--ax-dark-color);
+    }
+  
+    &.ax-tooltip-right:after {
+      top: 50%;
+      inset-inline-start: 100%;
+      margin-top: -5px;
+      border-width: 5px;
+      border-color: transparent var(--ax-dark-color) transparent transparent;
+    }
+  
+    &.ax-tooltip-show {
+      opacity: 1;
+    }
+  }

package/scss/treeview.scss

@@ -0,0 +1,122 @@
+$ident: 1.5rem;
+$left: -($ident);
+.treeview {
+    padding: 0 1.2rem;
+    font-size: 0.875rem;
+    &.sm {
+        .child {
+            padding-inline-start: 1.5em;
+        }
+        .bordered {
+            &::before {
+                width: 1.5em;
+            }
+            &::after {
+                width: 1.5em;
+            }
+        }
+        .check-box {
+            margin-top: -1rem;
+        }
+    }
+    li {
+        list-style-type: none;
+        position: relative;
+        cursor: pointer;
+        .ax-checkbox-container{
+            span{
+                display: none;
+            }
+        }
+        &.node {
+                padding-inline-start: 1rem;
+            // .start-side {
+            //     display: none;
+            // }
+            .check-box {
+                margin-inline-start: -2em;
+                z-index: 1;
+            }
+        }
+        &.selected {
+            background-color: var(--ax-primary-trans-dark-color);
+        }
+        &.bordered {
+            &:before {
+                content: "";
+                position: absolute;
+                top: 0.12rem;
+                inset-inline-start: -1rem;
+                border-inline-start: 1px solid var(--ax-gray-dark-color);
+                border-bottom: 1px solid var(--ax-gray-dark-color);
+                width: 1.5em;
+                height: 17.8px;
+            }
+            &:after {
+                position: absolute;
+                content: "";
+                top: 1.2rem;
+                inset-inline-start: -1rem;
+                border-inline-start: 1px solid var(--ax-gray-dark-color);
+                border-top: 1px solid var(--ax-gray-dark-color);
+                width: $ident;
+                height: 100%;
+            }
+            &:last-child:after {
+                display: none;
+            }
+        }
+        [dir="rtl"] & {
+            .fas {
+                -webkit-transform: scaleX(-1);
+                transform: scaleX(-1);
+            }
+        }
+        .start-side {
+            display: flex;
+            align-items: center;
+            .collapse-icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 1rem;
+                height: 1rem;
+                border: 1px solid var(--ax-gray-dark-color);
+                background: var(--ax-white-color);
+                z-index: 1;
+                i {
+                    font-size: 0.875rem;
+                    text-align: center;
+                     :not(.fa-spin) {
+                        font-size: initial !important;
+                    }
+                }
+            }
+            .ax-checkbox-container {
+                margin-inline-start: 0.5rem;
+            }
+        }
+        .check-box {
+            margin-top: -1.5em;
+        }
+        .text-list {
+            flex: 1;
+            display: flex;
+            margin-inline-start: 0.5rem;
+
+        }
+        >div {
+            padding: 0.5em 0;
+            &:hover {
+                background-color: var(--ax-gray-trans-light-color);
+            }
+        }
+        .child{
+            li:not(.node){
+                .text-list{
+                        margin-inline-start: 0.5rem;
+                }
+            }
+        }
+    }
+}

package/scss/upload.scss

@@ -0,0 +1,170 @@
+.ax {
+    &.upload-file-box {
+        display: flex;
+        background: var(--ax-white-color);
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0.5em 0;
+        border-width: 2px;
+        border-style: dashed;
+        border-color: var(--ax-border-dark-color);
+        min-height: 200px;
+        cursor: pointer;
+        position: relative;
+
+        &:hover {
+            border-color: var(--ax-primary-color);
+            border-style: solid;
+            transition: all 0.3s;
+
+            .upload-content {
+                color: var(--ax-primary-color);
+            }
+
+            .action-container {
+                display: flex !important;
+            }
+        }
+
+        .upload-content {
+            text-align: center;
+            color: var(--ax-border-color);
+
+            i {
+                font-size: 30px;
+            }
+
+            p {
+                padding-top: var(--sp-md-size);
+
+            }
+        }
+
+        .preview {
+            background-position: center !important;
+            background-size: contain !important;
+            background-repeat: no-repeat !important;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-height: 200px;
+        }
+
+        .action-container {
+            background: rgba(var(--ax-secondary-color), 0.5);
+            min-height: 195px;
+            display: none;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+
+    }
+
+    .ax-upload-drop-over {
+        position: relative;
+
+        .overlay {
+            pointer-events: none;
+            z-index: 1;
+            display: none;
+            position: absolute;
+            align-items: center;
+            text-align: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            top: 0px;
+            left: 0px;
+            right: 0px;
+            bottom: 0px;
+            background-color: var(--ax-white-color);
+            outline: 2px dashed var(--ax-primary-color);
+            outline-offset: 0;
+            opacity: 0;
+            transition: display 0s, opacity 0.15s linear, outline-offset 0.15s linear;
+
+            &.show {
+                display: flex;
+                opacity: 0.95;
+                outline-offset: calc(-1 * 0.5em);
+            }
+
+            .icon-wrapper {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+
+                i {
+                    margin-bottom: 10px;
+                    color: var(--ax-primary-color);
+                    -webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
+                    animation: pulsate-fwd 0.5s ease-in-out infinite both;
+                }
+
+                span {
+                    color: var(--ax-secondary-light-color);
+                }
+            }
+
+            @-webkit-keyframes pulsate-fwd {
+                0% {
+                    -webkit-transform: scale(1);
+                    transform: scale(1);
+                }
+
+                50% {
+                    -webkit-transform: scale(1.1);
+                    transform: scale(1.1);
+                }
+
+                100% {
+                    -webkit-transform: scale(1);
+                    transform: scale(1);
+                }
+            }
+
+            @keyframes pulsate-fwd {
+                0% {
+                    -webkit-transform: scale(1);
+                    transform: scale(1);
+                }
+
+                50% {
+                    -webkit-transform: scale(1.1);
+                    transform: scale(1.1);
+                }
+
+                100% {
+                    -webkit-transform: scale(1);
+                    transform: scale(1);
+                }
+            }
+
+        }
+    }
+
+    .ax-upload-progress-panel {
+        padding: 0.5em;
+        background-color: var(--ax-white-color);
+
+        small {
+            display: block;
+            margin: 0.5em  0 0 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+  
+}

package/scss/variables.scss

@@ -0,0 +1,139 @@
+$color-suffix: color;
+$size-suffix: size;
+$white: #fff;
+$black: #000;
+
+$primary: #3b82f6; // 500
+$primary-dark: #1d4ed8; // 700
+$primary-light: #93c5fd; // 400
+
+$secondary: #ec4899;
+$secondary-dark: #be185d;
+$secondary-light: #f472b6;
+
+$success: #10b981;
+$success-dark: #047857;
+$success-light: #34d399;
+
+$warning: #f59e0b;
+$warning-dark: #d97706;
+$warning-light: #fbbf24;
+
+
+$danger: #ef4444;
+$danger-dark: #b91c1c;
+$danger-light: #f87171;
+
+$info: #8b5cf6;
+$info-dark: #6d28d9;
+$info-light: #a78bfa;
+
+$gray: #cbd5e1; // 300
+$gray-light: #f1f5f9; // 100
+$gray-dark: #94a3b8; // 400
+
+
+$light: #d1d5db; // 300
+$light-light: #f3f4f6; // 100
+$light-dark: #9ca3af; // 400
+
+$dark: #3f3f46;
+$dark-dark: #18181b;
+$dark-light: #71717a;
+
+$shadow: rgba(0, 0, 0, 0.1);
+
+$colors: (
+    "white": $white,
+    "black": $black,
+    "trans-white": transparentize($white, 0.85),
+    "trans-black": transparentize($black, 0.85),
+    "primary": (
+        "": $primary,
+        "fore": $white,
+        "light": $primary-light,
+        "dark": $primary-dark,
+        "trans-dark": transparentize($primary-light, 0.85),
+        "trans-light": transparentize($primary-dark, 0.85),
+    ),
+    "secondary": (
+        "": $secondary,
+        "fore": $white,
+        "light": $secondary-light,
+        "dark": $secondary-dark,
+        "trans-dark": transparentize($secondary-light, 0.85),
+        "trans-light": transparentize($secondary-dark, 0.85),
+    ),
+    "success": (
+        "": $success,
+        "fore": $white,
+        "light": $success-light,
+        "dark": $success-dark,
+        "trans-dark": transparentize($success-light, 0.85),
+        "trans-light": transparentize($success-dark, 0.85),
+    ),
+    "warning": (
+        "": $warning,
+        "fore": #78350f,
+        "light": $warning-light,
+        "dark": $warning-dark,
+        "trans-dark": transparentize($warning-light, 0.85),
+        "trans-light": transparentize($warning-dark, 0.85),
+    ),
+    "danger": (
+        "": $danger,
+        "fore": $white,
+        "light": $danger-light,
+        "dark": $danger-dark,
+        "trans-dark": transparentize($danger-light, 0.85),
+        "trans-light": transparentize($danger-dark, 0.85),
+    ),
+    "info": (
+        "": $info,
+        "fore": $white,
+        "light": $info-light,
+        "dark": $info-dark,
+        "trans-dark": transparentize($info-light, 0.85),
+        "trans-light": transparentize($info-light, 0.85),
+    ),
+    "gray": (
+        "": $gray,
+        "fore": darken($gray, 50%),
+        "light": $gray-light,
+        "dark": $gray-dark,
+        "trans-dark": transparentize($gray-light, 0.85),
+        "trans-light": transparentize($gray-dark, 0.85),
+    ),
+    "light": (
+        "": $light,
+        "fore": darken($light, 80%),
+        "light": $light-light,
+        "dark": $light-dark,
+        "trans-dark": transparentize($light-light, 0.85),
+        "trans-light": transparentize($light-dark, 0.85),
+    ),
+    "dark": (
+        "": $dark,
+        "fore": #f4f4f5,
+        "light": $dark-light,
+        "dark": $dark-dark,
+        "trans-dark": transparentize($dark-light, 0.85),
+        "trans-light": transparentize($dark-dark, 0.85),
+    ),
+);
+$sizes: (
+    "": (
+        xxs: 0.4rem,
+        xs: 0.6rem,
+        sm: 0.8rem,
+        md: 1rem,
+        lg: 1.2rem,
+        xl: 1.4rem,
+        xxl: 1.6rem,
+    ),
+    "border": (
+        width: 1px,
+        radius: 4px,
+        circle: 50px,
+    ),
+);

package/index.scss

@@ -1,11 +0,0 @@
-@import "./src/variables/colors";
-@import "./src/icons/style.scss";
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "./src/base/index.scss";
-@import "./src/components/index.scss";
-@import "./src/utility/index.scss";
-

package/src/base/index.scss

@@ -1,44 +0,0 @@
-@import "../utility/mixins";
-
-[class*=" ax-ic-"],
-[class^="ax-ic-"] {
-    vertical-align: middle;
-}
-
-:root {
-    --ax-base: 8px;
-    --ax-base-size: 8px;
-    --ax-base-ratio: 6;
-    --ax-color-default-background: 255, 255, 255;
-    --ax-color-default-color: 107, 114, 128;
-    --ax-overlay-full-width: 93;
-    @include colors($theme-colors);
-}
-
-html,
-body {
-    background-color: rgb(var(--ax-color-default-background));
-    color: rgba(var(--ax-color-default-color));
-    height: 100%;
-    font-size: 16px;
-}
-
-html.ax-dark,
-html.ax-dark * {
-    --tw-ring-offset-color: #151b24;
-    --ax-color-default-background: 21 27 36;
-    --ax-color-default-color: 255 255 255;
-    --ax-color-border: 55 65 81;
-    --ax-color-placeholder: 161 161 161;
-    .ax-skeleton {
-        &.ax-skeleton-animate {
-            &::before {
-                content: "";
-                background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
-            }
-        }
-    }
-    .cdk-overlay-dark-backdrop {
-        background: rgba(0, 0, 0, 0.5) !important;
-    }
-}

package/src/components/_action-sheet.scss

@@ -1,25 +0,0 @@
-@layer components {
-    ax-action-sheet,
-    .ax-action-sheet {
-        .ax-action-sheet-container {
-            @apply ax-fixed ax-bottom-0 ax-left-1/2 -ax-translate-x-1/2 ax-z-[9999] ax-w-1/3 ax-rounded-t-2xl  ax-overflow-hidden;
-
-            @include screen(mobile) {
-                @apply ax-w-full;
-            }
-            .ax-action-sheet-caption {
-                @apply ax-text-sm ax-p-4;
-            }
-            .ax-action-sheet-items {
-                @apply ax-flex ax-flex-col ax-pb-3 ax-overflow-x-hidden ax-overflow-y-auto;
-                    ax-button {
-                        @apply ax-rounded-none ax-w-full ax-text-start ax-justify-start;
-                    }
-            }
-        }
-    }
-
-    .ax-action-sheet-backdrop {
-        @apply ax-bg-black/75 ax-left-0 ax-right-0 ax-top-0 ax-bottom-0 ax-fixed ax-z-[9998];
-    }
-}

package/src/components/_alert.scss

@@ -1,64 +0,0 @@
-@layer components {
-    .ax-alert {
-        @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ;
-        transition: visibility 0s, opacity 0.5s ease-in-out;
-        &.ax-state-hidden {
-            visibility: hidden;
-            opacity: 0;
-        }
-        &.ax-state-visible {
-            visibility: visible;
-            opacity: 1;
-        }
-        .ax-alert-icon {
-            @apply ax-text-xl ax-self-baseline ax-me-2;
-        }
-        .ax-alert-body {
-            @apply ax-ml-2 ax-flex-1;
-            .ax-alert-title {
-                @apply ax-inline-flex ax-text-sm ax-font-bold ax-mb-2.5;
-                a {
-                    @apply ax-text-current ax-font-bold;
-                }
-            }
-            .ax-alert-content {
-                @apply ax-block ax-text-sm ax-break-words;
-
-                ul {
-                    @apply ax-my-2 ax-ms-5 ax-list-disc;
-                }
-                a {
-                    @apply ax-text-current ax-font-bold ax-underline;
-                    &:hover {
-                        @apply ax-underline;
-                    }
-                }
-            }
-            .ax-alert-footer {
-                .ax-alert-buttons {
-                    @apply ax-flex ax-mt-4;
-                    .ax-alert-button {
-                        @apply ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
-                    }
-                }
-            }
-        }
-        .ax-alert-prefix {
-            .ax-alert-buttons {
-                @apply ax-flex;
-            }
-        }
-        .ax-alert-suffix {
-            .ax-alert-buttons {
-                @apply ax-flex;
-                .ax-alert-button {
-                    @apply ax-me-0.5 ax-text-sm ax-font-semibold ax-cursor-pointer;
-                    i {
-                        @apply ax-mx-1;
-                    }
-                }
-            }
-        }
-        @include color-look-generator();
-    }
-}