@acorex/styles 7.24.4 → 16.0.0

package/scss/master.scss

@@ -0,0 +1,330 @@
+@import "./variables.scss";
+
+:root {
+    --ax-border-color: #e0f4e0;
+    --ax-border-dark-color: rgba(34, 36, 38, 0.3);
+    --ax-size: 7px;
+    --ax-base-size: var(--ax-size);
+    --ax-base-ratio: 6;
+    --ax-overlay-full-width: 93;
+
+    // Create Sizes
+    @each $name,
+    $size in $sizes {
+        @if type-of($size)=="map" {
+
+            @each $subname,
+            $variant in $size {
+                @if $name=="" {
+                    --ax-size-#{$name}#{$subname}: #{$variant};
+                }
+
+                @else {
+                    --ax-size-#{$name}-#{$subname}: #{$variant};
+                }
+            }
+        }
+    }
+
+    // Create Colors
+    @each $name,
+    $color in $colors {
+        @if type-of($color)=="map" {
+
+            @each $subname,
+            $variant in $color {
+                @if $subname=="" {
+                    --ax-#{$name}-#{$color-suffix}: #{$variant};
+                }
+
+                @else {
+                    --ax-#{$name}-#{$subname}-#{$color-suffix}: #{$variant};
+                }
+            }
+        }
+
+        @else {
+            --ax-#{$name}-#{$color-suffix}: #{$color};
+        }
+    }
+}
+
+@each $name,
+$color in $colors {
+    @if type-of($color)=="map" {
+
+        @each $subname,
+        $variant in $color {
+            @if $subname=="" {
+                .ax-text-#{$name} {
+                    color: var(--ax-#{$name}-#{$color-suffix});
+                }
+
+                .ax-bg-#{$name} {
+                    background: var(--ax-#{$name}-#{$color-suffix});
+                }
+
+                .ax-border-#{$name} {
+                    border-color: var(--ax-#{$name}-#{$color-suffix});
+                }
+            }
+
+            @else {
+                .ax-text-#{$name}-#{$subname} {
+                    color: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
+                }
+
+                .ax-bg-#{$name}-#{$subname} {
+                    background: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
+                }
+
+                .ax-border-#{$name}-#{$subname} {
+                    background: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
+                }
+            }
+        }
+    }
+}
+
+// Sizes
+.ax {
+    &.form-control {
+        height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+        // padding: 0 0.5rem;
+        font-size: 1rem;
+        font-weight: 500;
+
+        // &.sm,
+        // &.md,
+        // &.lg {
+        //     &.ax-button-icon {
+        //         width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+        //         height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+        //     }
+        // }
+        &.sm {
+            --ax-base-size: calc(var(--ax-size) - 2px);
+            font-size: 0.875rem;
+        }
+
+        &.md {
+            height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+            font-size: 1rem;
+            font-weight: 500;
+        }
+
+        &.lg {
+            --ax-base-size: calc(var(--ax-size) + 2px);
+            font-size: 1.5rem;
+        }
+    }
+}
+
+.ax {
+    &.sm {
+        --ax-base-size: calc(var(--ax-size) - 2px);
+    }
+
+    &.lg {
+        --ax-base-size: calc(var(--ax-size) + 2px);
+    }
+}
+
+@each $name,
+$size in $sizes {
+    @if type-of($size)=="map" {
+
+        @each $subname,
+        $variant in $size {
+            @if $name=="" {
+                .ax-mrg-#{$subname} {
+                    margin: var(--ax-size-#{$subname}) !important;
+                }
+
+                .ax-pad-#{$subname} {
+                    padding: var(--ax-size-#{$subname}) !important;
+                }
+            }
+        }
+    }
+}
+
+// Create Classes
+@each $name,
+$color in $colors {
+    .ax {
+        @if type-of($color)=="map" {
+
+            @each $subname,
+            $variant in $color {
+                @if $subname=="" {
+                    &.bg-#{$name} {
+                        background-color: var(--ax-#{$name}-#{$color-suffix});
+                    }
+
+                    &.bg-light-#{$name} {
+                        background-color: var(--ax-#{$name}-light-#{$color-suffix});
+                    }
+
+                    &.bg-dark-#{$name} {
+                        background-color: var(--ax-#{$name}-dark-#{$color-suffix});
+                    }
+
+                    &.bg-lighten-#{$name} {
+                        background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
+                    }
+
+                    &.text-#{$name} {
+                        color: var(--ax-#{$name}-#{$color-suffix});
+                    }
+
+                    &.lighten-#{$name} {
+                        color: var(--ax-#{$name}-#{$color-suffix});
+                        background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
+                    }
+
+                    &.#{$name} {
+                        background: var(--ax-#{$name}-#{$color-suffix});
+                        color: var(--ax-#{$name}-fore-#{$color-suffix});
+
+                        &:hover,
+                        &:focus {
+                            background: var(--ax-#{$name}-dark-#{$color-suffix});
+                        }
+
+                        &:active {
+                            background: var(--ax-#{$name}-light-#{$color-suffix});
+                        }
+
+                        &.selected {
+                            background: var(--ax-#{$name}-dark-#{$color-suffix});
+                        }
+
+                        &.disabled {
+                            cursor: not-allowed;
+                            background: var(--ax-gray-light-color) !important;
+                            color: var(--ax-gray-fore-color) !important;
+                            border-color: var(--ax-gray-light-color) !important;
+                        }
+
+                        &.twotone {
+                            background: var(--ax-#{$name}-trans-light-#{$color-suffix});
+                            border-color: transparent;
+
+                            @if ($name =="light") {
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            }
+
+                            @else {
+                                color: var(--ax-#{$name}-#{$color-suffix});
+                            }
+
+                            &:hover:not(.disabled),
+                            &:focus:not(.disabled) {
+                                background: var(--ax-#{$name}-light-#{$color-suffix});
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            }
+
+                            &:active {
+                                background: var(--ax-#{$name}-dark-#{$color-suffix});
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            }
+
+                            &.selected {
+                                background: var(--ax-#{$name}-dark-#{$color-suffix});
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            }
+                        }
+
+                        &.outline {
+                            background: transparent;
+                            border: 1px solid;
+                            border-color: var(--ax-#{$name}-#{$color-suffix});
+
+                            @if ($name =="light") {
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            }
+
+                            @else {
+                                color: var(--ax-#{$name}-#{$color-suffix});
+                            }
+
+                            &:hover:not(.disabled),
+                            &:focus:not(.disabled) {
+                                background: var(--ax-#{$name}-#{$color-suffix});
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            }
+
+                            &:active {
+                                background: var(--ax-#{$name}-light-#{$color-suffix});
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                                border-color: var(--ax-#{$name}-light-#{$color-suffix});
+                            }
+
+                            &.selected {
+                                background: var(--ax-#{$name}-dark-#{$color-suffix});
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                                border-color: var(--ax-#{$name}-dark-#{$color-suffix});
+                            }
+                        }
+
+                        &.blank {
+                            background: transparent;
+                            border-color: transparent;
+
+                            @if ($name =="light") {
+                                color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            }
+
+                            @else {
+                                color: var(--ax-#{$name}-#{$color-suffix});
+                            }
+
+                            &:hover,
+                            &:focus {
+                                @if ($name =="light") {
+                                    background: var(--ax-#{$name}-trans-light-#{$color-suffix});
+                                    color: var(--ax-#{$name}-fore-#{$color-suffix});
+                                }
+
+                                @else {
+                                    background: var(--ax-#{$name}-trans-light-#{$color-suffix});
+                                    color: var(--ax-#{$name}-#{$color-suffix});
+                                }
+                            }
+
+                            &:active {
+                                @if ($name =="light") {
+                                    background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
+                                    color: var(--ax-#{$name}-fore-#{$color-suffix});
+                                }
+
+                                @else {
+                                    background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
+                                    color: var(--ax-#{$name}-#{$color-suffix});
+                                }
+                            }
+
+                            &.selected {
+                                @if ($name =="light") {
+                                    background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
+                                    color: var(--ax-#{$name}-fore-#{$color-suffix});
+                                }
+
+                                @else {
+                                    background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
+                                    color: var(--ax-#{$name}-#{$color-suffix});
+                                }
+                            }
+                        }
+
+                        &.panel {
+                            color: var(--ax-#{$name}-fore-#{$color-suffix});
+                            background-color: var(--ax-#{$name}-#{$color-suffix});
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/menu.scss

@@ -0,0 +1,130 @@
+.ax {
+    &.nav-menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        &.nav-vertical {
+            background-color: var(--ax-white-color);
+            flex-direction: column;
+            ul {
+                top: 0;
+                inset-inline-start: -9999px;
+            }
+
+            li {
+                width: 100%;
+                float: none;
+                text-align: right;
+            }
+        }
+        > li {
+            text-align: center;
+            padding: 0.5rem;
+            min-width: 2.375rem;
+            margin-inline-end: 0.5rem;
+            border-radius: var(--ax-size-border-radius);
+            .ax-menu-item,
+            .menu-item-start-side,
+            .menu-item-end-side {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            ul {
+                opacity: 0;
+                position: absolute;
+                top: 100%;
+                inset-inline-start: -9999px;
+                z-index: 50000;
+                -webkit-transition: opacity 0.3s;
+                transition: opacity 0.3s;
+                min-width: 12em;
+                li {
+                    float: none;
+
+                    &:hover {
+                        > ul {
+                            top: 0;
+                            inset-inline-start: 100%;
+                        }
+                    }
+                }
+            }
+            :hover {
+                > ul {
+                    inset-inline-start: 100%;
+                }
+            }
+        }
+        li {
+            cursor: pointer;
+            position: relative;
+
+            .ax-menu-item {
+                height: 100%;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                .menu-item-start-side {
+                }
+                .ax-menu-item-text {
+                    margin: 0 0.5rem;
+                    white-space: nowrap;
+                }
+
+                .menu-item-end-side {
+                }
+            }
+
+            ul {
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                background: #fff;
+                border: 1px solid var(--ax-border-color);
+                border-radius: var(--ax-size-border-radius);
+            }
+            &:hover {
+                > ul {
+                    inset-inline-start: 0;
+                    opacity: 1;
+                    z-index: 1000;
+                }
+            }
+            &.tooltip {
+                position: relative;
+                &:hover {
+                    &::before {
+                        display: block;
+                    }
+                }
+                &::before {
+                    content: attr(data-text);
+                    font-size: 0.875rem;
+                    position: absolute;
+                    bottom: -85%;
+                    inset-inline-start: 0;
+                    padding: 0.5rem 1rem;
+                    border-radius: var(--ax-size-border-radius);
+                    background: var(--ax-dark-color);
+                    color: var(--ax-dark-fore-color);
+                    text-align: center;
+                    display: none;
+                    z-index: 1;
+                }
+            }
+        }
+        .ax-sub-menu {
+            display: flex;
+            flex-direction: column;
+            li {
+                padding: 0.5rem;
+                .ax-menu-item {
+                    display: flex;
+                    justify-content: space-between;
+                }
+            }
+        }
+    }
+}

package/scss/mixin.scss

@@ -0,0 +1,12 @@
+@mixin ax-border-radius($size) {
+    border-radius: $size;
+    -moz-border-radius: $size;
+    -webkit-border-radius: $size;
+    -o-border-radius: $size;
+  }
+  @mixin ax-transition-all {
+    transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+  }

package/scss/page.scss

@@ -0,0 +1,54 @@
+.ax-page-toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 1600;
+    background: white;
+}
+
+.page-content-wrap {
+    height: 100%;
+
+    .inner-content {
+        height: 100%;
+        max-height: 90vh;
+    }
+}
+
+.ax-overlay-wrapper {
+    z-index: 1701;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    transform: translate(0px, 0px);
+    width: 100%;
+    height: 100%;
+}
+
+.ax-overlay-modal {
+    width: 100%;
+    height: 100%;
+}
+
+.ax-loading-host {
+    display: block;
+    position: relative;
+    height: 100%;
+}
+
+.ax-loading-overlay {
+    position: absolute !important;
+    background: rgba(255, 255, 255, 0.5);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+
+}
+
+.ax-tab-page-host {
+    height: 100%;
+    display: block;
+    position: relative;
+    overflow-y: auto;
+    width: 100%;
+}

package/scss/progress.scss

@@ -0,0 +1,11 @@
+.ax{
+    &.progress {
+        background: var(--ax-light-light-color);
+        margin: 0.2em 0;
+        .progress-bar {
+            background: var(--ax-primary-color);
+            color: var(--ax-primary-fore-color);
+            padding: 0.2em 0;
+        }
+    }
+}

package/scss/selection-list.scss

@@ -0,0 +1,104 @@
+.ax {
+  &.selection-list {
+    display: flex;
+
+    &.vertical {
+      flex-direction: column;
+      margin-block-end: 1rem;
+
+      label {
+        margin-block-end: 1rem;
+      }
+    }
+
+    &.horizontal {
+      flex-direction: row;
+      margin-block-end: 1rem;
+
+      label {
+        margin-inline-end: 1rem;
+      }
+    }
+  }
+}
+.ax {
+  &.radio {
+    display: block;
+    position: relative;
+    padding-inline-start: 2em;
+    line-height: 1.5em;
+    cursor: pointer;
+    font-size: inherit;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    &.readonly,
+    &.disabled {
+        opacity: 0.7;
+    }
+    &.disabled {
+        cursor: not-allowed;
+    }
+
+  }
+
+  /* Hide the browser's default radio */
+  &.radio input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  /* Create a custom radio */
+  &.radio .checkmark {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    height: 1.5em;
+    width: 1.5em;
+    background-color: var(--ax-white-color);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--ax-border-color);
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+  }
+
+  /* On mouse-over, add a grey background color */
+  &.radio:hover input ~ .checkmark {
+    border-color: var(--ax-border-dark-color);
+  }
+
+  /* When the radio is checked, add a blue background */
+  &.radio input:checked ~ .checkmark {
+    background-color: var(--ax-white-color);
+    border-color: var(--ax-primary-color);
+  }
+
+  /* Create the checkmark/indicator (hidden when not checked) */
+  &.radio .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+    border-radius: 50%;
+  }
+
+  /* Show the checkmark when checked */
+  &.radio input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+  /* Style the checkmark/indicator */
+  &.radio .checkmark:after {
+    left: 31.5%;
+    top: 33.3%;
+    width: 0.5em;
+    height: 0.5em;
+    background-color: var(--ax-primary-color);
+    border-radius: 50%;
+  }
+}

package/scss/style.scss

@@ -0,0 +1,47 @@
+@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;
+}
+
+.rtl {
+    direction: rtl;
+    text-align: right;
+}
+
+.ltr {
+    direction: ltr;
+    text-align: left;
+}
+