@acorex/styles 16.0.2 → 17.0.1

package/scss/tab-strip.scss

@@ -1,31 +0,0 @@
-.tab-strip-container {
-    padding: 0;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    font-size: 0.875rem;
-
-    li {
-        display: inline;
-        padding: 0.5em;
-        border-bottom: 1px solid;
-        border-color: var(--ax-gray-color);
-        margin-inline-end: 0.3em;
-        cursor: pointer;
-        background-color: var(--ax-white-color);
-
-        &.active {
-            border-color: var(--ax-primary-color) !important;
-        }
-        &.disabled {
-           // border-color: var(--ax-gray-color) !important;
-            // background-color: var(--ax-gray-color) !important;
-            // opacity: 0.6;
-            cursor: not-allowed !important;
-        }
-        &:hover{
-            background-color: var(--ax-light-light-color);
-            border-color: transparent;
-        }
-    }
-}

package/scss/tab.scss

@@ -1,36 +0,0 @@
-.ax {
-    &.nav-tabs {
-        display: flex;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        padding: 0;
-        border-bottom: 1px solid var(--ax-border-color);
-        li {
-            font-size: 0.875rem;
-            margin-inline-end: 0.5em;
-            padding: 0.5rem 1rem;
-            background: var(--ax-gray-color);
-            cursor: pointer;
-            -webkit-border-top-left-radius: var(--ax-size-border-radius);
-            -webkit-border-top-right-radius: var(--ax-size-border-radius);
-            -moz-border-radius-topleft: var(--ax-size-border-radius);
-            -moz-border-radius-topright: var(--ax-size-border-radius);
-            border-top-left-radius: var(--ax-size-border-radius);
-            border-top-right-radius: var(--ax-size-border-radius);
-            i {
-                margin-inline-end: 0.5em;
-            }
-            &:hover {
-                background: var(--ax-primary-color);
-                color: var(--ax-primary-fore-color);
-                transition: all 0.3s;
-            }
-
-            &.active {
-                background: var(--ax-primary-color);
-                color: var(--ax-primary-fore-color);
-            }
-        }
-    }
-}

package/scss/toast.scss

@@ -1,46 +0,0 @@
-@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

@@ -1,55 +0,0 @@
-.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

@@ -1,152 +0,0 @@
-$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;
-        }
-    }
-
-    .disabled {
-        background: var(--ax-gray-light-color) !important;
-        color: var(--ax-gray-fore-color);
-        cursor: not-allowed !important;
-    }
-
-    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

@@ -1,170 +0,0 @@
-.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

@@ -1,139 +0,0 @@
-$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,
-    ),
-);