neo.mjs 5.17.1 → 6.0.0

package/resources/scss/src/list/Base.scss

@@ -1,12 +1,12 @@
 .neo-list-wrapper {
-    background-color: v(list-container-background-color);
-    border          : v(list-container-border);
+    background-color: var(--list-container-background-color);
+    border          : var(--list-container-border);
     overflow        : hidden;
     position        : relative;
 }
 
 .neo-list {
-    color               : v(list-container-list-color);
+    color               : var(--list-container-list-color);
     list-style-type     : none;
     margin-block-start  : 0;
     margin-block-end    : 0;
@@ -17,7 +17,7 @@
 
     &.neo-use-checkicons {
         .neo-list-item:before {
-            color      : v(list-item-glyph-color);
+            color      : var(--list-item-glyph-color);
             content    : "\f0c8";
             display    : inline-block;
             font-family: var(--fa-style-family-classic);
@@ -42,8 +42,8 @@
     }
 
     .neo-list-item {
-        background-color: v(list-item-background-color);
-        padding         : v(list-item-padding);
+        background-color: var(--list-item-background-color);
+        padding         : var(--list-item-padding);
         white-space     : nowrap;
 
         &:focus {
@@ -54,19 +54,19 @@
             cursor: pointer;
 
             &:hover {
-                background-color: v(list-item-background-color-hover);
-                color           : v(list-container-list-color);
+                background-color: var(--list-item-background-color-hover);
+                color           : var(--list-container-list-color);
             }
         }
 
         &.neo-selected {
-            background-color: v(list-item-background-color-selected) !important;
-            color           : v(list-item-color-selected) !important;
+            background-color: var(--list-item-background-color-selected) !important;
+            color           : var(--list-item-color-selected) !important;
             cursor          : default !important;
         }
 
         .neo-highlight-search {
-            color: v(list-item-highlight-search-color);
+            color: var(--list-item-highlight-search-color);
         }
     }
 }

package/resources/scss/src/list/Chip.scss

@@ -10,12 +10,12 @@
             color           : inherit;
 
             .neo-chip {
-                background-color: v(list-item-background-color-selected);
-                border-color    : v(chip-border-color-focus);
+                background-color: var(--list-item-background-color-selected);
+                border-color    : var(--chip-border-color-focus);
             }
 
             .neo-chip-close-button {
-                color: v(chip-close-button-color-hover);
+                color: var(--chip-close-button-color-hover);
             }
         }
     }

package/resources/scss/src/list/Circle.scss

@@ -1,5 +1,5 @@
 .neo-circle-list.neo-list {
-    background-color: v(list-item-background-color);
+    background-color: var(--list-item-background-color);
 
     .neo-circle-component {
         background-color: transparent;
@@ -19,7 +19,7 @@
         padding         : 0;
 
         &.neo-selected {
-            background-color: v(list-item-background-color-hover);
+            background-color: var(--list-item-background-color-hover);
         }
     }
 }

package/resources/scss/src/menu/List.scss

@@ -1,22 +1,22 @@
 .neo-menu-list {
-    border     : 1px solid v(menu-list-border-color);
+    border     : 1px solid var(--menu-list-border-color);
     overflow-y : auto;
     width      : fit-content;
 
     .neo-list-item {
         align-items     : center;
-        background-color: v(menu-list-item-background-color);
-        color           : v(menu-list-item-color);
+        background-color: var(--menu-list-item-background-color);
+        color           : var(--menu-list-item-color);
         display         : flex;
-        font-family     : v(menu-list-item-font-family);
-        font-weight     : v(menu-list-item-font-weight);
-        height          : v(menu-list-item-height);
-        line-height     : v(menu-list-item-line-height);
-        padding         : v(menu-list-item-padding);
-        text-transform  : v(menu-list-item-text-transform);
+        font-family     : var(--menu-list-item-font-family);
+        font-weight     : var(--menu-list-item-font-weight);
+        height          : var(--menu-list-item-height);
+        line-height     : var(--menu-list-item-line-height);
+        padding         : var(--menu-list-item-padding);
+        text-transform  : var(--menu-list-item-text-transform);
 
         .neo-arrow-icon {
-            color      : v(menu-list-item-icon-color);
+            color      : var(--menu-list-item-icon-color);
             margin-left: 1em;
         }
 
@@ -25,45 +25,45 @@
         }
 
         .neo-icon {
-            color          : v(menu-list-item-icon-color);
+            color          : var(--menu-list-item-icon-color);
             display        : flex;
             justify-content: center;
         }
 
         .neo-menu-icon {
-            margin-right: v(menu-list-item-icon-gap);
+            margin-right: var(--menu-list-item-icon-gap);
             width       : 1.2em;
         }
 
         &:focus {
-            outline: v(menu-list-item-outline-focus);
+            outline: var(--menu-list-item-outline-focus);
         }
 
         &:hover {
-            background-color: v(menu-list-item-background-color-hover);
+            background-color: var(--menu-list-item-background-color-hover);
         }
 
         &.neo-disabled {
-            background-color: v(menu-list-item-background-color-disabled);
-            color           : v(menu-list-item-color-disabled);
-            opacity         : v(menu-list-item-opacity-disabled);
+            background-color: var(--menu-list-item-background-color-disabled);
+            color           : var(--menu-list-item-color-disabled);
+            opacity         : var(--menu-list-item-opacity-disabled);
 
             .neo-icon {
-                color: v(menu-list-item-icon-color-disabled);
+                color: var(--menu-list-item-icon-color-disabled);
             }
         }
 
         &.neo-selected {
-            background-color: v(menu-list-item-background-color-selected);
+            background-color: var(--menu-list-item-background-color-selected);
 
             .neo-icon {
-                color: v(menu-list-item-icon-color-selected);
+                color: var(--menu-list-item-icon-color-selected);
             }
         }
     }
 
     &.neo-floating {
-        box-shadow: v(menu-list-box-shadow);
+        box-shadow: var(--menu-list-box-shadow);
         position  : absolute;
     }
 }

package/resources/scss/src/menu/Panel.scss

@@ -1,5 +1,5 @@
 .neo-menu {
-    border: 1px solid v(menu-border-color);
+    border: 1px solid var(--menu-border-color);
     width : fit-content;
 
     .neo-menu-list {

package/resources/scss/src/sitemap/Component.scss

@@ -1,5 +1,5 @@
 .neo-sitemap {
-    border : 1px solid v(panel-border-color);
+    border : 1px solid var(--panel-border-color);
     display: flex;
     padding: 30px 100px 60px;
 
@@ -38,7 +38,7 @@
         flex: 1;
 
         &:not(:last-child) {
-            border-right: 1px solid v(panel-border-color);
+            border-right: 1px solid var(--panel-border-color);
             margin-right: 25px;
         }
     }

package/resources/scss/src/tab/Container.scss

@@ -29,7 +29,7 @@
 }
 
 .neo-tab-content-container {
-    border  : v(tab-container-content-border);
+    border  : var(--tab-container-content-border);
     overflow: hidden;
 }
 

package/resources/scss/src/tab/Strip.scss

@@ -1,11 +1,11 @@
 .neo-tab-strip {
-    background-color: v(tab-strip-background-color);
-    height          : v(tab-strip-height);
+    background-color: var(--tab-strip-background-color);
+    height          : var(--tab-strip-height);
     overflow        : hidden;
 
     .neo-active-tab-indicator {
-        background-color   : v(tab-indicator-background-color-active);
-        height             : v(tab-strip-height);
+        background-color   : var(--tab-indicator-background-color-active);
+        height             : var(--tab-strip-height);
         opacity            : 0;
         position           : absolute;
         transition         : all 250ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -15,12 +15,12 @@
 
     &.neo-dock-left, &.neo-dock-right {
         height: inherit;
-        width : v(tab-strip-height);
+        width : var(--tab-strip-height);
 
         .neo-active-tab-indicator {
             height             : inherit;
             transition-property: height, top;
-            width              : v(tab-strip-height) !important;
+            width              : var(--tab-strip-height) !important;
         }
     }
-}
+}

package/resources/scss/src/tab/header/Button.scss

@@ -1,20 +1,20 @@
 @keyframes delaybgcolor {
       0% {background-color: transparent;}
      99% {background-color: transparent;}
-    100% {background-color: v(tab-indicator-background-color-active);}
+    100% {background-color: var(--tab-indicator-background-color-active);}
 }
 
 .neo-tab-header-button.neo-button {
     align-self      : end;
-    background-color: v(tab-button-background-color);
-    background-image: v(tab-button-background-image);
-    border          : v(tab-button-border);
-    border-bottom   : v(tab-button-border-bottom);
-    border-radius   : v(tab-button-border-radius);
-    height          : v(tab-button-height);
-    margin          : 0 0 v(tab-button-margin-bottom);
-    padding         : v(tab-button-padding);
-    text-transform  : v(tab-button-text-transform);
+    background-color: var(--tab-button-background-color);
+    background-image: var(--tab-button-background-image);
+    border          : var(--tab-button-border);
+    border-bottom   : var(--tab-button-border-bottom);
+    border-radius   : var(--tab-button-border-radius);
+    height          : var(--tab-button-height);
+    margin          : 0 0 var(--tab-button-margin-bottom);
+    padding         : var(--tab-button-padding);
+    text-transform  : var(--tab-button-text-transform);
 
     .neo-button-badge {
         font-size     : 10px;
@@ -22,17 +22,17 @@
     }
 
     .neo-button-glyph {
-        color: v(tab-button-glyph-color);
+        color: var(--tab-button-glyph-color);
     }
 
     .neo-button-text {
-        color: v(tab-button-text-color);
+        color: var(--tab-button-text-color);
     }
 
     .neo-tab-button-indicator {
         background-color: transparent;
-        bottom          : calcVar(tab-strip-height, '*', -1);
-        height          : v(tab-strip-height);
+        bottom          : calc(var(--tab-strip-height) * -1);
+        height          : var(--tab-strip-height);
         pointer-events  : none;
         position        : absolute;
         width           : 100%;
@@ -40,48 +40,48 @@
     }
 
     &:active {
-        background-color: v(tab-button-background-color-active) !important;
+        background-color: var(--tab-button-background-color-active) !important;
 
         .neo-button-glyph {
-            color: v(tab-button-glyph-color-active);
+            color: var(--tab-button-glyph-color-active);
         }
     }
 
     &:hover {
-        background-color: v(tab-button-background-color-hover);
+        background-color: var(--tab-button-background-color-hover);
         background-image: none;
 
         .neo-button-glyph {
-            color: v(tab-button-glyph-color-hover);
+            color: var(--tab-button-glyph-color-hover);
         }
     }
 
     &.pressed {
-        background-image: v(tab-button-background-image-pressed) !important;
-        border          : v(tab-button-border-pressed);
-        border-bottom   : v(tab-button-border-bottom-pressed);
+        background-image: var(--tab-button-background-image-pressed) !important;
+        border          : var(--tab-button-border-pressed);
+        border-bottom   : var(--tab-button-border-bottom-pressed);
         cursor          : default;
-        height          : v(tab-button-height-pressed);
+        height          : var(--tab-button-height-pressed);
 
         .neo-button-glyph {
-            color: v(tab-button-glyph-color-pressed);
+            color: var(--tab-button-glyph-color-pressed);
         }
 
         .neo-tab-button-indicator {
             animation-duration: 260ms;
             animation-name    : delaybgcolor;
-            background-color  : v(tab-indicator-background-color-active);
+            background-color  : var(--tab-indicator-background-color-active);
         }
     }
 
     &:not(:last-child) {
-        margin-right: v(tab-button-gap);
+        margin-right: var(--tab-button-gap);
     }
 }
 
 .neo-disabled {
     .neo-tab-header-button.neo-button,
     &.neo-tab-header-button.neo-button {
-        background-color: v(tab-button-background-color-disabled);
+        background-color: var(--tab-button-background-color-disabled);
     }
 }

package/resources/scss/src/tab/header/Toolbar.scss

@@ -1,78 +1,78 @@
 .neo-tab-header-toolbar {
     background-color: transparent;
-    height          : v(tab-button-height-pressed);
+    height          : var(--tab-button-height-pressed);
     padding         : 0;
 
     &.neo-dock-bottom {
         .neo-tab-header-button.neo-button {
             align-self      : start;
-            background-image: v(tab-button-background-image-bottom);
+            background-image: var(--tab-button-background-image-bottom);
 
             .neo-tab-button-indicator {
                 bottom: unset;
-                height: v(tab-strip-height);
+                height: var(--tab-strip-height);
                 top   : calcVar(tab-strip-height, '*', -1);
                 width : 100%;
             }
 
             &.pressed {
-                background-image: v(tab-button-background-image-pressed-bottom) !important;
+                background-image: var(--tab-button-background-image-pressed-bottom) !important;
             }
         }
     }
 
     &.neo-dock-left {
         height: unset;
-        width : v(tab-button-height-pressed);
+        width : var(--tab-button-height-pressed);
 
         .neo-tab-header-button.neo-button {
-            background-image: v(tab-button-background-image-left);
+            background-image: var(--tab-button-background-image-left);
             height          : unset;
-            width           : v(tab-button-height);
+            width           : var(--tab-button-height);
 
             .neo-tab-button-indicator {
                 bottom: unset;
                 height: 100%;
                 right : calcVar(tab-strip-height, '*', -1);
-                width : v(tab-strip-height);
+                width : var(--tab-strip-height);
             }
 
             &.pressed {
-                background-image: v(tab-button-background-image-pressed-left) !important;
-                width           : v(tab-button-height-pressed);
+                background-image: var(--tab-button-background-image-pressed-left) !important;
+                width           : var(--tab-button-height-pressed);
             }
 
             &:not(:last-child) {
                 margin-right: unset;
-                margin-top  : v(tab-button-gap);
+                margin-top  : var(--tab-button-gap);
             }
         }
     }
 
     &.neo-dock-right {
         height: unset;
-        width : v(tab-button-height-pressed);
+        width : var(--tab-button-height-pressed);
 
         .neo-tab-header-button.neo-button {
             align-self      : start;
-            background-image: v(tab-button-background-image-right);
+            background-image: var(--tab-button-background-image-right);
             height          : unset;
-            width           : v(tab-button-height);
+            width           : var(--tab-button-height);
 
             .neo-tab-button-indicator {
                 bottom: unset;
                 height: 100%;
                 left  : calcVar(tab-strip-height, '*', -1);
-                width : v(tab-strip-height);
+                width : var(--tab-strip-height);
             }
 
             &.pressed {
-                background-image: v(tab-button-background-image-pressed-right) !important;
-                width           : v(tab-button-height-pressed);
+                background-image: var(--tab-button-background-image-pressed-right) !important;
+                width           : var(--tab-button-height-pressed);
             }
 
             &:not(:last-child) {
-                margin-bottom: v(tab-button-gap);
+                margin-bottom: var(--tab-button-gap);
                 margin-right : unset;
             }
         }

package/resources/scss/src/table/Container.scss

@@ -5,10 +5,10 @@
 }
 
 .neo-table-container {
-    border          : 1px solid v(table-container-border-color);
+    border          : 1px solid var(--table-container-border-color);
     border-top-width: 0;
     border-spacing  : 0;
-    color           : v(table-container-color);
+    color           : var(--table-container-color);
     font-size       : 13px;
     font-weight     : 400;
     line-height     : 19px;
@@ -16,8 +16,8 @@
     position        : absolute;
 
     tr {
-        height    : v(table-container-cell-height) !important;
-        max-height: v(table-container-cell-height) !important;
+        height    : var(--table-container-cell-height) !important;
+        max-height: var(--table-container-cell-height) !important;
     }
 
     tr:last-child {
@@ -28,7 +28,7 @@
 
     tr:nth-child(even) {
         td {
-            background-color: v(table-container-cell-background-color-even);
+            background-color: var(--table-container-cell-background-color-even);
         }
     }
 
@@ -47,13 +47,13 @@
     }
 
     td {
-        background-color: v(table-container-cell-background-color);
-        border-bottom   : v(table-container-cell-border-bottom);
-        border-right    : 1px solid v(table-container-border-color);
+        background-color: var(--table-container-cell-background-color);
+        border-bottom   : var(--table-container-cell-border-bottom);
+        border-right    : 1px solid var(--table-container-border-color);
         border-top      : 1px solid transparent;
-        height          : v(table-container-cell-height) !important;
-        max-height      : v(table-container-cell-height) !important;
-        padding         : v(table-container-cell-padding);
+        height          : var(--table-container-cell-height) !important;
+        max-height      : var(--table-container-cell-height) !important;
+        padding         : var(--table-container-cell-padding);
 
         &.neo-locked {
             z-index: 10;
@@ -61,10 +61,10 @@
     }
 
     th {
-        background-color: v(table-container-cell-background-color);
-        border-bottom   : v(table-container-header-cell-border-bottom);
-        border-right    : 1px solid v(table-container-border-color);
-        border-top      : 1px solid v(table-container-border-color);
+        background-color: var(--table-container-cell-background-color);
+        border-bottom   : var(--table-container-header-cell-border-bottom);
+        border-right    : 1px solid var(--table-container-border-color);
+        border-top      : 1px solid var(--table-container-border-color);
         padding         : 0;
         position        : sticky;
         top             : 0;
@@ -96,7 +96,7 @@
             background:rgba(0,0,0,0.1);
 
             &:vertical {
-                margin-top: v(table-container-cell-height);
+                margin-top: var(--table-container-cell-height);
             }
         }
 

package/resources/scss/src/table/View.scss

@@ -10,28 +10,28 @@
     .neo-table-row {
         &:hover {
             .neo-table-cell {
-                background-color: v(table-cell-background-color-hover);
+                background-color: var(--table-cell-background-color-hover);
             }
         }
 
         // selection.RowModel
         &.neo-selected {
             .neo-table-cell {
-                background-color: v(table-rowmodel-selected-cell-background-color);
-                color           : v(table-rowmodel-selected-cell-color);
+                background-color: var(--table-rowmodel-selected-cell-background-color);
+                color           : var(--table-rowmodel-selected-cell-color);
             }
         }
 
         // selection.CellModel
         .neo-table-cell {
             &.neo-selected {
-                background-color: v(table-cellmodel-selected-cell-background-color) !important;
-                color           : v(table-cellmodel-selected-cell-color) !important;
+                background-color: var(--table-cellmodel-selected-cell-background-color) !important;
+                color           : var(--table-cellmodel-selected-cell-color) !important;
             }
 
             &.selected-column-cell {
-                background-color: v(table-cellmodel-selected-column-cell-background-color);
-                color           : v(table-cellmodel-selected-column-cell-color);
+                background-color: var(--table-cellmodel-selected-column-cell-background-color);
+                color           : var(--table-cellmodel-selected-column-cell-color);
             }
         }
     }
@@ -42,15 +42,15 @@
     .neo-table-row {
         &.neo-selected {
             .neo-table-cell {
-                background-color: v(table-cellrowmodel-selected-row-cell-background-color);
-                color           : v(table-cellrowmodel-selected-row-cell-color);
+                background-color: var(--table-cellrowmodel-selected-row-cell-background-color);
+                color           : var(--table-cellrowmodel-selected-row-cell-color);
             }
         }
 
         .neo-table-cell {
             &.neo-selected {
-                background-color: v(table-cellrowmodel-selected-cell-background-color);
-                color           : v(table-cellrowmodel-selected-cell-color);
+                background-color: var(--table-cellrowmodel-selected-cell-background-color);
+                color           : var(--table-cellrowmodel-selected-cell-color);
             }
         }
     }

package/resources/scss/src/table/header/Button.scss

@@ -1,8 +1,8 @@
 .neo-table-header-button {
     align-items     : center;
-    background-color: v(table-header-button-background-color);
+    background-color: var(--table-header-button-background-color);
     border-width    : 0;
-    color           : v(table-header-button-color);
+    color           : var(--table-header-button-color);
     cursor          : pointer;
     display         : flex;
     flex-direction  : row;
@@ -15,7 +15,7 @@
     white-space     : nowrap;
     width           : 100% !important;
 
-    background-image: v(table-header-button-background-image);
+    background-image: var(--table-header-button-background-image);
 
     &.neo-drag-over {
         background-image: linear-gradient(green, darkgreen);;
@@ -52,7 +52,7 @@
     }
 
     .neo-button-glyph {
-        color         : v(table-header-button-glyph-color);
+        color         : var(--table-header-button-glyph-color);
         font-size     : 12px;
         margin        : 0 6px 0 0;
         opacity       : 0;
@@ -63,7 +63,7 @@
     }
 
     .neo-button-ripple {
-        background-color: v(table-header-button-ripple-background-color);
+        background-color: var(--table-header-button-ripple-background-color);
         border-radius   : 50%;
         opacity         : 0;
         position        : absolute;