neo.mjs 5.18.0 → 6.0.0

package/resources/scss/src/form/field/Text.scss

@@ -1,15 +1,15 @@
 .neo-textfield {
     align-items  : center;
     display      : flex;
-    height       : calc(v(textfield-input-height) + v(textfield-border-width) * 2);
+    height       : calc(var(--textfield-input-height) + var(--textfield-border-width) * 2);
     margin-bottom: 5px;
     margin-top   : 5px;
     white-space  : nowrap;
 
     &.neo-focus {
         .neo-input-wrapper {
-            border-color: v(textfield-border-color-active) !important;
-            outline     : v(textfield-outline-active);
+            border-color: var(--textfield-border-color-active) !important;
+            outline     : var(--textfield-outline-active);
 
             .neo-textfield-input {
                 outline: none;
@@ -23,8 +23,8 @@
         }
 
         .neo-textfield-input {
-            border-color: v(textfield-border-color-active);
-            outline     : v(textfield-outline-active) !important; // important is needed, since the default &:focus selector would get a prio
+            border-color: var(--textfield-border-color-active);
+            outline     : var(--textfield-outline-active) !important; // important is needed, since the default &:focus selector would get a prio
         }
     }
 
@@ -32,27 +32,27 @@
         &:not(&.neo-focus) {
             &:not(&.label-inline) {
                 .neo-input-wrapper {
-                    border-color: v(textfield-border-color-hovered) !important;
-                    outline     : v(textfield-outline-hovered);
+                    border-color: var(--textfield-border-color-hovered) !important;
+                    outline     : var(--textfield-outline-hovered);
                 }
             }
 
             .neo-label-wrapper {
                 .neo-center-border, .neo-left-border, .neo-right-border {
-                    border-bottom-color: v(textfield-border-color-hovered);
-                    border-top-color   : v(textfield-border-color-hovered);
+                    border-bottom-color: var(--textfield-border-color-hovered);
+                    border-top-color   : var(--textfield-border-color-hovered);
                 }
 
                 .neo-left-border, .neo-right-border {
-                    border-top-color: v(textfield-border-color-hovered);
+                    border-top-color: var(--textfield-border-color-hovered);
                 }
 
                 .neo-left-border {
-                    border-left-color: v(textfield-border-color-hovered);
+                    border-left-color: var(--textfield-border-color-hovered);
                 }
 
                 .neo-right-border {
-                    border-right-color: v(textfield-border-color-hovered);
+                    border-right-color: var(--textfield-border-color-hovered);
                 }
             }
         }
@@ -60,32 +60,32 @@
 
     &.neo-invalid:not(.neo-disabled) {
         .neo-input-wrapper {
-            border-color: v(textfield-border-color-invalid);
+            border-color: var(--textfield-border-color-invalid);
         }
 
         &.label-inline {
             .neo-label-wrapper {
                 .neo-center-border, .neo-left-border, .neo-right-border {
-                    border-bottom-color: v(textfield-border-color-invalid);
+                    border-bottom-color: var(--textfield-border-color-invalid);
                 }
 
                 .neo-left-border, .neo-right-border {
-                    border-top-color: v(textfield-border-color-invalid);
+                    border-top-color: var(--textfield-border-color-invalid);
                 }
 
                 .neo-left-border {
-                    border-left-color: v(textfield-border-color-invalid);
+                    border-left-color: var(--textfield-border-color-invalid);
                 }
 
                 .neo-right-border {
-                    border-right-color: v(textfield-border-color-invalid);
+                    border-right-color: var(--textfield-border-color-invalid);
                 }
             }
         }
 
         &:not(.label-inline, .neo-input-wrapper) {
             .neo-textfield-input {
-                border-color: v(textfield-border-color-invalid);
+                border-color: var(--textfield-border-color-invalid);
             }
         }
     }
@@ -93,84 +93,84 @@
     &.neo-invalid:not(.neo-disabled, .neo-has-content) {
         .neo-label-wrapper {
             .neo-center-border {
-                border-top-color: v(textfield-border-color-invalid);
+                border-top-color: var(--textfield-border-color-invalid);
             }
         }
     }
 
     &.neo-disabled {
-        opacity: v(textfield-opacity-disabled);
+        opacity: var(--textfield-opacity-disabled);
 
         &.label-inline {
             .neo-label-wrapper {
                 .neo-center-border, .neo-left-border, .neo-right-border {
-                    border-bottom-color: v(textfield-border-color-disabled);
+                    border-bottom-color: var(--textfield-border-color-disabled);
                 }
 
                 .neo-left-border, .neo-right-border {
-                    border-top-color: v(textfield-border-color-disabled);
+                    border-top-color: var(--textfield-border-color-disabled);
                 }
 
                 .neo-left-border {
-                    border-left-color: v(textfield-border-color-disabled);
+                    border-left-color: var(--textfield-border-color-disabled);
                 }
 
                 .neo-right-border {
-                    border-right-color: v(textfield-border-color-disabled);
+                    border-right-color: var(--textfield-border-color-disabled);
                 }
             }
         }
 
         .neo-input-wrapper {
-            background-color: v(textfield-input-background-color-disabled);
-            border-color    : v(textfield-border-color-disabled);
+            background-color: var(--textfield-input-background-color-disabled);
+            border-color    : var(--textfield-border-color-disabled);
         }
 
         .neo-textfield-input {
-            background-color: v(textfield-input-background-color-disabled);
-            color           : v(textfield-input-color-disabled);
+            background-color: var(--textfield-input-background-color-disabled);
+            color           : var(--textfield-input-color-disabled);
         }
 
         .neo-textfield-label {
-            color: v(textfield-label-color-disabled);
+            color: var(--textfield-label-color-disabled);
         }
     }
 
     &.neo-readonly {
-        opacity: v(textfield-opacity-readonly);
+        opacity: var(--textfield-opacity-readonly);
 
         &.label-inline {
             .neo-label-wrapper {
                 .neo-center-border, .neo-left-border, .neo-right-border {
-                    border-bottom-color: v(textfield-border-color-readonly);
+                    border-bottom-color: var(--textfield-border-color-readonly);
                 }
 
                 .neo-left-border, .neo-right-border {
-                    border-top-color: v(textfield-border-color-readonly);
+                    border-top-color: var(--textfield-border-color-readonly);
                 }
 
                 .neo-left-border {
-                    border-left-color: v(textfield-border-color-readonly);
+                    border-left-color: var(--textfield-border-color-readonly);
                 }
 
                 .neo-right-border {
-                    border-right-color: v(textfield-border-color-readonly);
+                    border-right-color: var(--textfield-border-color-readonly);
                 }
             }
         }
 
         .neo-input-wrapper {
-            background-color: v(textfield-input-background-color-readonly);
-            border-color    : v(textfield-border-color-readonly);
+            background-color: var(--textfield-input-background-color-readonly);
+            border-color    : var(--textfield-border-color-readonly);
         }
 
         .neo-textfield-input {
-            background-color: v(textfield-input-background-color-readonly);
-            color           : v(textfield-input-color-readonly);
+            background-color: var(--textfield-input-background-color-readonly);
+            color           : var(--textfield-input-color-readonly);
         }
 
         .neo-textfield-label {
-            color: v(textfield-label-color-readonly);
+            color: var(--textfield-label-color-readonly);
         }
     }
 
@@ -193,11 +193,11 @@
         &.neo-focus {
             .neo-label-wrapper {
                 .neo-center-border, .neo-left-border, .neo-right-border {
-                    border-bottom-color: v(textfield-border-color-active);
+                    border-bottom-color: var(--textfield-border-color-active);
                 }
 
                 .neo-left-border, .neo-right-border {
-                    border-top-color: v(textfield-border-color-active);
+                    border-top-color: var(--textfield-border-color-active);
                 }
 
                 .neo-center-border {
@@ -205,17 +205,17 @@
                 }
 
                 .neo-left-border {
-                    border-left-color: v(textfield-border-color-active);
+                    border-left-color: var(--textfield-border-color-active);
                 }
 
                 .neo-right-border {
-                    border-right-color: v(textfield-border-color-active);
+                    border-right-color: var(--textfield-border-color-active);
                 }
             }
 
             .neo-textfield-label {
-                color    : v(textfield-border-color-active) !important;
-                transform: translateX(4px) translateY(calc(-62% - 0.5 * v(textfield-border-width))) scale(.7);
+                color    : var(--textfield-border-color-active) !important;
+                transform: translateX(4px) translateY(calc(-62% - 0.5 * var(--textfield-border-width))) scale(.7);
             }
         }
 
@@ -226,7 +226,7 @@
 
             .neo-textfield-label {
                 color    : #777;
-                transform: translateX(4px) translateY(calc(-62% - 0.5 * v(textfield-border-width))) scale(.7);
+                transform: translateX(4px) translateY(calc(-62% - 0.5 * var(--textfield-border-width))) scale(.7);
             }
         }
 
@@ -240,30 +240,30 @@
 
         .neo-label-wrapper {
             display : flex;
-            height  : calc(v(textfield-input-height) + v(textfield-border-width) * 2);
+            height  : calc(var(--textfield-input-height) + var(--textfield-border-width) * 2);
             position: absolute;
             width   : 100%;
 
             .neo-center-border {
-                border-bottom: v(textfield-border-width) solid v(textfield-border-color);
-                border-top   : v(textfield-border-width) solid v(textfield-border-color);
+                border-bottom: var(--textfield-border-width) solid var(--textfield-border-color);
+                border-top   : var(--textfield-border-width) solid var(--textfield-border-color);
                 flex         : 0 0 auto;
             }
 
             .neo-left-border {
-                border                   : v(textfield-border-width) solid v(textfield-border-color);
-                border-bottom-left-radius: v(textfield-border-radius);
+                border                   : var(--textfield-border-width) solid var(--textfield-border-color);
+                border-bottom-left-radius: var(--textfield-border-radius);
                 border-right             : 0;
-                border-top-left-radius   : v(textfield-border-radius);
+                border-top-left-radius   : var(--textfield-border-radius);
                 flex                     : 0 0 auto;
-                width                    : calc(11px + v(textfield-border-width));
+                width                    : calc(11px + var(--textfield-border-width));
             }
 
             .neo-right-border {
-                border                    : v(textfield-border-width) solid v(textfield-border-color);
-                border-bottom-right-radius: v(textfield-border-radius);
+                border                    : var(--textfield-border-width) solid var(--textfield-border-color);
+                border-bottom-right-radius: var(--textfield-border-radius);
                 border-left               : 0;
-                border-top-right-radius   : v(textfield-border-radius);
+                border-top-right-radius   : var(--textfield-border-radius);
                 flex                      : 1 0 auto;
             }
         }
@@ -300,19 +300,19 @@
         flex-direction: column;
 
         .neo-textfield-label {
-            margin: v(textfield-label-top-margin);
+            margin: var(--textfield-label-top-margin);
         }
     }
 
     .neo-input-wrapper {
         align-items     : stretch;
-        background-color: v(textfield-input-background-color);
-        border          : v(textfield-border-width) solid v(textfield-border-color);
-        border-radius   : v(textfield-border-radius);
+        background-color: var(--textfield-input-background-color);
+        border          : var(--textfield-border-width) solid var(--textfield-border-color);
+        border-radius   : var(--textfield-border-radius);
         display         : flex;
         flex            : 1 1 1px;
-        min-height      : v(textfield-input-height);
-        outline         : 0 solid v(textfield-outline-active);
+        min-height      : var(--textfield-input-height);
+        outline         : 0 solid var(--textfield-outline-active);
         overflow        : hidden;
         transition      : outline-width .1s ease-out;
 
@@ -322,12 +322,12 @@
             flex-grow    : 1;
             flex-shrink  : 1;
             margin       : 0; // important for Safari => #1125
-            min-height   : v(textfield-input-height);
+            min-height   : var(--textfield-input-height);
         }
     }
 
     .neo-textfield-error {
-        color      : v(textfield-border-color-invalid);
+        color      : var(--textfield-border-color-invalid);
         font-size  : 11px;
         margin-top : .3em;
         white-space: break-spaces;
@@ -343,14 +343,14 @@
     }
 
     .neo-textfield-input {
-        background-color: v(textfield-input-background-color);
-        border          : v(textfield-border-width) solid v(textfield-border-color);
-        border-radius   : v(textfield-border-radius);
-        color           : v(textfield-input-color);
-        font            : v(textfield-input-font);
-        min-height      : v(textfield-input-height);
+        background-color: var(--textfield-input-background-color);
+        border          : var(--textfield-border-width) solid var(--textfield-border-color);
+        border-radius   : var(--textfield-border-radius);
+        color           : var(--textfield-input-color);
+        font            : var(--textfield-input-font);
+        min-height      : var(--textfield-input-height);
         min-width       : 50px;
-        padding         : v(textfield-input-padding);
+        padding         : var(--textfield-input-padding);
         transition      : 250ms border-color cubic-bezier(0.4, 0, 0.2, 1);
         width           : 100%;
 
@@ -359,12 +359,12 @@
         }
 
         &::-webkit-input-placeholder {
-            color  : v(textfield-input-placeholder-color) !important;
-            opacity: v(textfield-input-placeholder-opacity) !important;
+            color  : var(--textfield-input-placeholder-color) !important;
+            opacity: var(--textfield-input-placeholder-opacity) !important;
         }
 
         &.neo-invalid {
-            border-color: v(textfield-border-color-invalid);
+            border-color: var(--textfield-border-color-invalid);
 
             &.neo-disabled {
                 border-color: inherit;
@@ -373,18 +373,18 @@
     }
 
     .neo-textfield-label {
-        color      : v(textfield-label-color);
+        color      : var(--textfield-label-color);
         display    : inline-block;
         flex       : 0 0 auto;
         user-select: none;
     }
 
     .neo-textfield-sublabel {
-        color      : v(textfield-sublabel-color);
+        color      : var(--textfield-sublabel-color);
         display    : inline-block;
         flex       : 0 0 auto;
-        font-size  : v(textfield-sublabel-font-size);
-        margin     : v(textfield-sublabel-margin);
+        font-size  : var(--textfield-sublabel-font-size);
+        margin     : var(--textfield-sublabel-margin);
         user-select: none;
         white-space: break-spaces;
     }

package/resources/scss/src/form/field/TextArea.scss

@@ -29,7 +29,7 @@
 
     &.neo-invalid {
         .neo-textfield-input {
-            border-color: v(textfield-border-color-invalid);
+            border-color: var(--textfield-border-color-invalid);
         }
     }
 

package/resources/scss/src/form/field/trigger/Base.scss

@@ -1,12 +1,12 @@
 .neo-field-trigger {
     align-items    : center;
-    border-left    : v(trigger-border-width) solid v(textfield-border-color);
-    color          : v(trigger-color);
+    border-left    : var(--trigger-border-width) solid var(--textfield-border-color);
+    color          : var(--trigger-color);
     cursor         : pointer;
     display        : flex;
     flex-shrink    : 0;
     font-size      : 14px;
-    height         : v(textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
+    height         : var(--textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
     justify-content: center;
     line-height    : 26px;
     text-align     : center;
@@ -14,12 +14,12 @@
 
     &.neo-align-start {
         border-left : 0;
-        border-right: v(trigger-border-width) solid v(textfield-border-color);
+        border-right: var(--trigger-border-width) solid var(--textfield-border-color);
     }
 
     &:hover {
-        background-color: v(trigger-background-color-hover);
-        color           : v(trigger-color-hover);
+        background-color: var(--trigger-background-color-hover);
+        color           : var(--trigger-color-hover);
     }
 }
 

package/resources/scss/src/form/field/trigger/Clear.scss

@@ -1,11 +1,11 @@
 .neo-trigger-clear {
-    border-left-color: v(textfield-border-color);
+    border-left-color: var(--textfield-border-color);
     overflow         : hidden;
     transition       : 250ms width cubic-bezier(0.4, 0, 0.2, 1);
 
     &.neo-align-start {
         border-left : 0;
-        border-right: 1px solid v(textfield-border-color);
+        border-right: 1px solid var(--textfield-border-color);
 
         &.neo-is-hidden {
             border-right-color: transparent;

package/resources/scss/src/form/field/trigger/CopyToClipboard.scss

@@ -1,11 +1,11 @@
 .neo-trigger-clipboard {
-    border-left-color: v(textfield-border-color);
+    border-left-color: var(--textfield-border-color);
     overflow         : hidden;
     transition       : 250ms width cubic-bezier(0.4, 0, 0.2, 1);
 
     &.neo-align-start {
         border-left : 0;
-        border-right: 1px solid v(textfield-border-color);
+        border-right: 1px solid var(--textfield-border-color);
 
         &.neo-is-hidden {
             border-right-color: transparent;
@@ -16,4 +16,4 @@
         border-left-color: transparent;
         width            : 0;
     }
-}
+}

package/resources/scss/src/form/field/trigger/Time.scss

@@ -6,27 +6,27 @@
 
     &:hover {
         .neo-clock {
-            background-color: v(trigger-time-background-color-hover);
+            background-color: var(--trigger-time-background-color-hover);
         }
     }
 
     .neo-clock {
-        background-color: v(trigger-color);
+        background-color: var(--trigger-color);
         background-image: none;
         height          : 16px;
         width           : 16px;
 
         .neo-hours,
         .neo-minutes {
-            background-color: v(trigger-time-pointer-color);
+            background-color: var(--trigger-time-pointer-color);
         }
 
         .neo-hours {
-            box-shadow: 0 -2em v(trigger-time-pointer-color), 0 -4em v(trigger-time-pointer-color);
+            box-shadow: 0 -2em var(--trigger-time-pointer-color), 0 -4em var(--trigger-time-pointer-color);
         }
 
         .neo-minutes {
-            box-shadow: 0 -3.4em v(trigger-time-pointer-color), 0 -6.8em v(trigger-time-pointer-color);
+            box-shadow: 0 -3.4em var(--trigger-time-pointer-color), 0 -6.8em var(--trigger-time-pointer-color);
         }
     }
 }

package/resources/scss/src/grid/Container.scss

@@ -1,7 +1,7 @@
 .neo-grid-container {
-    border        : 1px solid v(grid-container-border-color);
+    border        : 1px solid var(--grid-container-border-color);
     border-spacing: 0;
-    color         : v(grid-container-color);
+    color         : var(--grid-container-color);
     font-size     : 13px;
     font-weight   : 400;
     height        : 100%;
@@ -33,7 +33,7 @@
 
     .neo-grid-row:nth-child(even) {
         .neo-grid-cell {
-            background-color: v(grid-container-cell-background-color-even);
+            background-color: var(--grid-container-cell-background-color-even);
         }
     }
 
@@ -57,8 +57,8 @@
     }
 
     .neo-grid-cell, .neo-grid-header-cell {
-        border-bottom: 1px solid v(grid-container-border-color);
-        border-right : 1px solid v(grid-container-border-color);
+        border-bottom: 1px solid var(--grid-container-border-color);
+        border-right : 1px solid var(--grid-container-border-color);
         height       : inherit;
         min-width    : 300px;
 
@@ -74,7 +74,7 @@
 
     .neo-grid-cell {
         align-items     : center;
-        background-color: v(grid-container-cell-background-color);
+        background-color: var(--grid-container-cell-background-color);
         display         : flex;
         height          : 32px !important;
         max-height      : 32px !important;

package/resources/scss/src/grid/View.scss

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

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

@@ -1,9 +1,9 @@
 .neo-grid-header-button {
     align-items     : center;
-    background-color: v(grid-header-button-background-color);
-    background-image: v(grid-header-button-background-image);
+    background-color: var(--grid-header-button-background-color);
+    background-image: var(--grid-header-button-background-image);
     border-width    : 0;
-    color           : v(grid-header-button-color);
+    color           : var(--grid-header-button-color);
     cursor          : pointer;
     display         : flex;
     flex-direction  : row;
@@ -17,7 +17,7 @@
     white-space     : nowrap;
 
     &:not(:last-child) {
-        border-right: 1px solid v(grid-container-border-color);
+        border-right: 1px solid var(--grid-container-border-color);
     }
 
     &.neo-locked { // todo: for testing, will get removed once the header toolbar is outside of the scroll region
@@ -61,7 +61,7 @@
     }
 
     .neo-button-glyph {
-        color         : v(grid-header-button-glyph-color);
+        color         : var(--grid-header-button-glyph-color);
         font-size     : 12px;
         margin        : 0 6px 0 0;
         opacity       : 0;

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

@@ -1,6 +1,6 @@
 .neo-grid-header-toolbar {
-    border-bottom: 2px solid v(grid-container-border-color);
-    border-top   : 1px solid v(grid-container-border-color);
+    border-bottom: 2px solid var(--grid-container-border-color);
+    border-top   : 1px solid var(--grid-container-border-color);
     padding      : 0;
     position     : sticky;
     top          : 0;