@acorex/styles 4.0.24 → 4.1.1

package/scss/style.scss

@@ -0,0 +1,49 @@
+@import "./buttons.scss";
+@import "./calendar.scss";
+@import "./checkbox.scss";
+@import "./context-menu.scss";
+@import "./drawer.scss";
+@import "./data-grid.scss";
+@import "./fieldset.scss";
+@import "./list.scss";
+@import "./menu.scss";
+@import "./progress.scss";
+@import "./selection-list.scss";
+@import "./forms.scss";
+@import "./tooltip.scss";
+@import "./tab.scss";
+@import "./tab-strip.scss";
+@import "./toast.scss";
+@import "./treeview.scss";
+@import "./upload.scss";
+@import "./master.scss";
+@import "./page.scss";
+@import "~animate.css/animate.min.css";
+* {
+    box-sizing: border-box;
+    outline-color: transparent;
+    &:focus {
+        outline: none;
+      }
+}
+
+html,
+body {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 12px;
+    line-height: 1.4285em;
+}
+
+.rtl {
+    direction: rtl;
+    text-align: right;
+}
+
+.ltr {
+    direction: ltr;
+    text-align: left;
+}
+

package/scss/tab-strip.scss

@@ -0,0 +1,30 @@
+.tab-strip-container {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+
+    li {
+        display: inline;
+        padding: 0.5em;
+        border-bottom: 1px solid;
+        border-color: var(--ax-border-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

@@ -0,0 +1,33 @@
+.ax {
+    &.nav-tabs {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        padding: 0;
+        border-bottom: 1px solid var(--ax-border-color);
+        li {
+            margin-inline-end: 0.5em;
+            padding: 1em;
+            background: var(--ax-light-light-color);
+            border-bottom: 2px solid var(--ax-primary-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);
+            &: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

@@ -0,0 +1,24 @@
+@import "./variables.scss";
+.ax {
+    &.toast {
+        &.info {
+            background-color: var(--ax-info-color);
+            color: var(--ax-info-fore-color);
+        }
+
+        &.success {
+            background-color: var(--ax-success-color);
+            color: var(--ax-success-fore-color);
+        }
+
+        &.warning {
+            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);
+        }
+    }
+}

package/scss/tooltip.scss

@@ -0,0 +1,53 @@
+.ax-tooltip {
+    position: absolute;
+    max-width: 150px;
+    text-align: center;
+    color: #fff;
+    padding: 0.5rem 0.7rem;
+    background: #282a36;
+    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%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-color: #282a36 transparent transparent transparent;
+    }
+  
+    &.ax-tooltip-bottom:after {
+      bottom: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-color: transparent transparent #282a36 transparent;
+    }
+  
+    &.ax-tooltip-left:after {
+      top: 50%;
+      left: 100%;
+      margin-top: -5px;
+      border-width: 5px;
+      border-color: transparent transparent transparent #282a36;
+    }
+  
+    &.ax-tooltip-right:after {
+      top: 50%;
+      right: 100%;
+      margin-top: -5px;
+      border-width: 5px;
+      border-color: transparent #282a36 transparent transparent;
+    }
+  
+    &.ax-tooltip-show {
+      opacity: 1;
+    }
+  }

package/scss/treeview.scss

@@ -0,0 +1,133 @@
+$ident: 1.5em;
+$left: -($ident);
+.treeview {
+    padding: 0 1.6em;
+    &.sm {
+        .child {
+            padding-inline-start: 1.5em;
+        }
+        .bordered {
+            &::before {
+                width: 1.5em;
+            }
+            &::after {
+                width: 1.5em;
+            }
+        }
+        .check-box {
+            margin-top: -1em;
+        }
+    }
+    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.2em;
+                left: -1em;
+                border-left: 1px solid var(--ax-gray-dark-color);
+                border-bottom: 1px solid var(--ax-gray-dark-color);
+                width: 1.5em;
+                height: 17.8px;
+                [dir="rtl"] & {
+                    right: -1em !important;
+                    left: initial !important;
+                    border-right: 1px solid var(--ax-gray-dark-color);
+                    border-left: none !important;
+                }
+            }
+            &:after {
+                position: absolute;
+                content: "";
+                top: 1.2em;
+                left: -1em;
+                border-left: 1px solid var(--ax-gray-dark-color);
+                border-top: 1px solid var(--ax-gray-dark-color);
+                width: $ident;
+                height: 100%;
+                [dir="rtl"] & {
+                    right: -1em;
+                    left: initial;
+                    border-right: 1px solid var(--ax-gray-dark-color);
+                    border-left: none !important;
+                }
+            }
+            &: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: 1em;
+                height: 1em;
+                border: 1px solid var(--ax-gray-dark-color);
+                background: var(--ax-white-color);
+                z-index: 1;
+                i {
+                    font-size: 0.7em;
+                    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,169 @@
+.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,106 @@
+$color-suffix: color;
+$size-suffix: size;
+$white: #fff;
+$black: #000;
+$primary: #3b82f6;
+$secondary: #ec4899;
+$gray: #cbd5e1;
+$success: #10b981;
+$info: #8b5cf6;
+$warning: #f59e0b;
+$danger: #ef4444;
+$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": lighten($primary, 10%),
+        "dark": darken($primary, 10%),
+        "trans-dark": transparentize($primary, 0.85),
+        "trans-light": transparentize($primary, 0.85),
+    ),
+    "secondary": (
+        "": $secondary,
+        "fore": $white,
+        "light": lighten($secondary, 10%),
+        "dark": darken($secondary, 10%),
+        "trans-dark": transparentize($secondary, 0.85),
+        "trans-light": transparentize($secondary, 0.85),
+    ),
+    "info": (
+        "": $info,
+        "fore": $white,
+        "light": lighten($info, 10%),
+        "dark": darken($info, 10%),
+        "trans-dark": transparentize($info, 0.85),
+        "trans-light": transparentize($info, 0.85),
+    ),
+    "success": (
+        "": $success,
+        "fore": $white,
+        "light": lighten($success, 10%),
+        "dark": darken($success, 10%),
+        "trans-dark": transparentize($success, 0.85),
+        "trans-light": transparentize($success, 0.85),
+    ),
+    "warning": (
+        "": $warning,
+        "fore": $white,
+        "light": lighten($warning, 10%),
+        "dark": darken($warning, 10%),
+        "trans-dark": transparentize($warning, 0.85),
+        "trans-light": transparentize($warning, 0.85),
+    ),
+    "danger": (
+        "": $danger,
+        "fore": $white,
+        "light": lighten($danger, 10%),
+        "dark": darken($danger, 10%),
+        "trans-dark": transparentize($danger, 0.85),
+        "trans-light": transparentize($danger, 0.85),
+    ),
+    "gray": (
+        "": $gray,
+        "fore": darken($gray, 50%),
+        "light": lighten($gray, 10%),
+        "dark": darken($gray, 10%),
+        "trans-dark": transparentize($gray, 0.85),
+        "trans-light": transparentize($gray, 0.85),
+    ),
+    "light": (
+        "": $gray,
+        "fore": darken($gray, 50%),
+        "light": lighten($gray, 10%),
+        "dark": darken($gray, 10%),
+        "trans-dark": transparentize($gray, 0.85),
+        "trans-light": transparentize($gray, 0.85),
+    ),
+    "dark": (
+        "": $black,
+        "fore": $white,
+        "light": lighten($black, 10%),
+        "dark": darken($black, 10%),
+        "trans-dark": transparentize($black, 0.85),
+        "trans-light": transparentize($black, 0.85),
+    ),
+);
+$sizes: (
+    "": (
+        xxs: 0.4em,
+        xs: 0.6em,
+        sm: 0.8em,
+        md: 1em,
+        lg: 1.2em,
+        xl: 1.4em,
+        xxl: 1.6em,
+    ),
+    "border": (
+        width: 1px,
+        radius: 4px,
+        circle: 50px,
+    ),
+);

package/index.scss

@@ -1,48 +0,0 @@
-@import "./scss/ax-icon/style.scss";
-
-@import "./scss/bases/accessiblity.scss";
-@import "./scss/bases/background.scss";
-@import "./scss/bases/border.scss";
-@import "./scss/bases/effects.scss";
-@import "./scss/bases/flexbox-and-grid.scss";
-@import "./scss/bases/interactivity.scss";
-@import "./scss/bases/layout.scss";
-
-@import "./scss/bases/root.scss";
-
-@import "./scss/bases/sizing.scss";
-@import "./scss/bases/skeleton.scss";
-@import "./scss/bases/spacing.scss";
-@import "./scss/bases/svg.scss";
-@import "./scss/bases/table.scss";
-@import "./scss/bases/transform.scss";
-@import "./scss/bases/transition-and-animation.scss";
-@import "./scss/bases/typography.scss";
-
-@import "./scss/components/alert.scss";
-@import "./scss/components/badge.scss";
-@import "./scss/components/button.scss";
-@import "./scss/components/checkbox.scss";
-@import "./scss/components/calendar.scss";
-@import "./scss/components/datepicker.scss";
-@import "./scss/components/dialog.scss";
-@import "./scss/components/drawer.scss";
-@import "./scss/components/dropdown.scss";
-@import "./scss/components/editor-container.scss";
-@import "./scss/components/input.scss";
-@import "./scss/components/radio.scss";
-@import "./scss/components/switch.scss";
-@import "./scss/components/selectbox.scss";
-@import "./scss/components/table.scss";
-@import "./scss/components/tabs.scss";
-@import "./scss/components/label.scss";
-@import "./scss/components/selection-list.scss";
-@import "./scss/components/side-menu.scss";
-@import "./scss/components/list.scss";
-@import "./scss/components/popup.scss";
-@import "./scss/components/text-box.scss";
-@import "./scss/components/toast.scss";
-@import "./scss/components/tooltip.scss";
-@import "./scss/components/datapager.scss";
-@import "./scss/components/loading.scss";
-@import "./scss/components/carousel.scss";