@acorex/styles 16.0.2 → 17.0.1

package/scss/master.scss

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

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

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

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

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

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

@@ -1,47 +0,0 @@
-@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;
-}
-