@acorex/styles 3.0.27 → 3.0.31

package/scss/mixin.scss

@@ -1,12 +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;
+@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 +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;
-    min-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%;
+.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;
+    min-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 +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;
-        }
-    }
+.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,116 +1,116 @@
-.ax {
-  &.selection-list {
-    display: flex;
-
-    &.vertical {
-      flex-direction: column;
-      margin-block-end: 1em;
-
-      label {
-        margin-block-end: 1em;
-      }
-    }
-
-    &.horizontal {
-      flex-direction: row;
-      margin-block-end: 1em;
-
-      label {
-        margin-inline-end: 1em;
-      }
-    }
-  }
-}
-.ax {
-  &.radio {
-    display: block;
-    position: relative;
-    padding-left: 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;
-
-    [dir="rtl"] &{
-      padding-left: 0 !important;
-      padding-right: 2em;
-    }
-
-    &.disabled .checkmark {
-      background: var(--ax-light-light-color) !important;
-      border-color: var(--ax-light-light-color) !important;
-      cursor: not-allowed;
-    }
-
-    &.disabled .checkmark:after {
-      background-color: var(--ax-gray-color) !important;
-    }
-  }
-
-  /* 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;
-    left: 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%;
-
-    [dir="rtl"] &{
-      right: 0 !important;
-      left: inherit !important;
-    }
-  }
-
-  /* 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%;
-  }
-}
+.ax {
+  &.selection-list {
+    display: flex;
+
+    &.vertical {
+      flex-direction: column;
+      margin-block-end: 1em;
+
+      label {
+        margin-block-end: 1em;
+      }
+    }
+
+    &.horizontal {
+      flex-direction: row;
+      margin-block-end: 1em;
+
+      label {
+        margin-inline-end: 1em;
+      }
+    }
+  }
+}
+.ax {
+  &.radio {
+    display: block;
+    position: relative;
+    padding-left: 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;
+
+    [dir="rtl"] &{
+      padding-left: 0 !important;
+      padding-right: 2em;
+    }
+
+    &.disabled .checkmark {
+      background: var(--ax-light-light-color) !important;
+      border-color: var(--ax-light-light-color) !important;
+      cursor: not-allowed;
+    }
+
+    &.disabled .checkmark:after {
+      background-color: var(--ax-gray-color) !important;
+    }
+  }
+
+  /* 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;
+    left: 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%;
+
+    [dir="rtl"] &{
+      right: 0 !important;
+      left: inherit !important;
+    }
+  }
+
+  /* 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,49 +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;
-}
-
+@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

@@ -1,24 +1,24 @@
-.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;
-        }
-        &:hover{
-            background-color: var(--ax-light-light-color);
-            border-color: transparent;
-        }
-    }
+.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;
+        }
+        &:hover{
+            background-color: var(--ax-light-light-color);
+            border-color: transparent;
+        }
+    }
 }

package/scss/tab.scss

@@ -1,33 +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);
-            }
-        }
-    }
+.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

@@ -1,24 +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);
-        }
-    }
+@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);
+        }
+    }
 }