neo.mjs 5.1.9 → 5.1.11

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.1.9'
+         * @member {String} version='5.1.11'
          */
-        version: '5.1.9'
+        version: '5.1.11'
     }
 
     /**

package/buildScripts/buildAll.mjs

@@ -119,28 +119,45 @@ if (programOpts.info) {
               insideNeo  = !!programOpts.framework || false,
               cpArgs     = ['-e', env],
               startDate  = new Date();
+        let   childProcess;
 
         programOpts.noquestions && cpArgs.push('-n');
         insideNeo               && cpArgs.push('-f');
 
-        npminstall === 'yes' && spawnSync(npmCmd, ['i'], cpOpts);
-        themes     === 'yes' && spawnSync('node', [`${neoPath}/buildScripts/buildThemes.mjs`].concat(cpArgs), cpOpts);
-        threads    === 'yes' && spawnSync('node', [`${webpackPath}/buildThreads.mjs`]        .concat(cpArgs), cpOpts);
-        parsedocs  === 'yes' && spawnSync(npmCmd, ['run', 'generate-docs-json'], cpOpts);
+        if (npminstall === 'yes') {
+            childProcess = spawnSync(npmCmd, ['i'], cpOpts);
+            childProcess.status && process.exit(childProcess.status);
+        }
+        if (themes     === 'yes') {
+            childProcess = spawnSync('node', [`${neoPath}/buildScripts/buildThemes.mjs`].concat(cpArgs), cpOpts);
+            childProcess.status && process.exit(childProcess.status);
+        }
+        if (threads    === 'yes') {
+            childProcess = spawnSync('node', [`${webpackPath}/buildThreads.mjs`].concat(cpArgs), cpOpts);
+            childProcess.status && process.exit(childProcess.status);
+        }
+        if (parsedocs  === 'yes') {
+            childProcess = spawnSync(npmCmd, ['run', 'generate-docs-json'], cpOpts);
+            childProcess.status && process.exit(childProcess.status);
+        };
 
         if (env === 'all' || env === 'dev') {
-            spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output')   } -t ${path.resolve(cwd, 'dist/development/docs/output')}`],    cpOpts);
-            spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/development/docs/resources')}`], cpOpts);
+            childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output')   } -t ${path.resolve(cwd, 'dist/development/docs/output')}`],    cpOpts);
+            childProcess.status && process.exit(childProcess.status);
+            childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/development/docs/resources')}`], cpOpts);
+            childProcess.status && process.exit(childProcess.status);
         }
 
         if (env === 'all' || env === 'prod') {
-            spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output')   } -t ${path.resolve(cwd, 'dist/production/docs/output')}`],    cpOpts);
-            spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/production/docs/resources')}`], cpOpts);
+            childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output')   } -t ${path.resolve(cwd, 'dist/production/docs/output')}`],    cpOpts);
+            childProcess.status && process.exit(childProcess.status);
+            childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/production/docs/resources')}`], cpOpts);
+            childProcess.status && process.exit(childProcess.status);
         }
 
         const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
         console.log(`\nTotal time for ${programName}: ${processTime}s`);
 
-        process.exit(0);
+        process.exit();
     });
 }

package/buildScripts/createApp.mjs

@@ -296,13 +296,14 @@ if (programOpts.info) {
             fs.writeFileSync(appJsonPath, JSON.stringify(appJson, null, 4));
 
             if (mainThreadAddons.includes('HighlightJS')) {
-                spawnSync('node', [
+                const childProcess = spawnSync('node', [
                     './buildScripts/copyFolder.mjs',
                     '-s',
                     path.resolve(neoPath, 'docs/resources'),
                     '-t',
                     path.resolve(folder, 'resources'),
                 ], { env: process.env, cwd: process.cwd(), stdio: 'inherit' });
+                childProcess.status && process.exit(childProcess.status);
             }
 
             const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);

package/buildScripts/webpack/buildMyApps.mjs

@@ -100,6 +100,7 @@ if (programOpts.info) {
               env       = answers.env || programOpts.env || ['all'],
               insideNeo = !!programOpts.framework || false,
               startDate = new Date();
+        let   childProcess;
 
         if (os.platform().startsWith('win')) {
             webpack = path.resolve(webpack).replace(/\\/g,'/');
@@ -108,13 +109,15 @@ if (programOpts.info) {
         // dist/development
         if (env === 'all' || env === 'dev') {
             console.log(chalk.blue(`${programName} starting dist/development`));
-            spawnSync(webpack, ['--config', `${webpackPath}/development/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
+            childProcess = spawnSync(webpack, ['--config', `${webpackPath}/development/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
+            childProcess.status && process.exit(childProcess.status);
         }
 
         // dist/production
         if (env === 'all' || env === 'prod') {
             console.log(chalk.blue(`${programName} starting dist/production`));
-            spawnSync(webpack, ['--config', `${webpackPath}/production/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
+            childProcess = spawnSync(webpack, ['--config', `${webpackPath}/production/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
+            childProcess.status && process.exit(childProcess.status);
         }
 
         const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);

package/buildScripts/webpack/buildThreads.mjs

@@ -88,12 +88,32 @@ if (programOpts.info) {
         }
 
         function parseThreads(tPath) {
-            (threads === 'all' || threads === 'main')    && spawnSync(webpack, ['--config', `${tPath}.main.mjs`],                                                     cpOpts);
-            (threads === 'all' || threads === 'app')     && spawnSync(webpack, ['--config', `${tPath}.appworker.mjs`, `--env insideNeo=${insideNeo}`],                cpOpts);
-            (threads === 'all' || threads === 'canvas')  && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=canvas`],  cpOpts);
-            (threads === 'all' || threads === 'data')    && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=data`],    cpOpts);
-            (threads === 'all' || threads === 'service') && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=service`], cpOpts);
-            (threads === 'all' || threads === 'vdom')    && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`,    `--env insideNeo=${insideNeo} worker=vdom`],    cpOpts);
+            let childProcess;
+
+            if (threads === 'all' || threads === 'main') {
+                childProcess = spawnSync(webpack, ['--config', `${tPath}.main.mjs`], cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
+            if (threads === 'all' || threads === 'app') {
+                childProcess = spawnSync(webpack, ['--config', `${tPath}.appworker.mjs`, `--env insideNeo=${insideNeo}`], cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
+            if (threads === 'all' || threads === 'canvas') {
+                childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=canvas`], cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
+            if (threads === 'all' || threads === 'data') {
+                childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=data`], cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
+            if (threads === 'all' || threads === 'service') {
+                childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=service`], cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
+            if (threads === 'all' || threads === 'vdom') {
+                childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=vdom`], cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
         }
 
         // dist/development

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.1.9'
+         * @member {String} version='5.1.11'
          */
-        version: '5.1.9'
+        version: '5.1.11'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.1.9",
+    "version": "5.1.11",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -48,7 +48,7 @@
         "chalk": "^5.2.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^10.0.0",
-        "cssnano": "^5.1.14",
+        "cssnano": "^5.1.15",
         "envinfo": "^7.8.1",
         "fs-extra": "^11.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
@@ -56,7 +56,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.21",
-        "sass": "^1.58.0",
+        "sass": "^1.58.1",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",
         "webpack-dev-server": "4.11.1",

package/resources/scss/src/button/Base.scss

@@ -13,7 +13,7 @@
     align-items       : center;
     background-color  : v(button-background-color);
     background-image  : v(button-background-image);
-    border            : v(button-border-width) solid v(button-border-color);
+    border            : v(button-border);
     border-radius     : v(button-border-radius);
     box-sizing        : border-box;
     cursor            : pointer;
@@ -100,7 +100,7 @@
     &:active {
         background-color: v(button-background-color-active) !important;
         background-image: none !important;
-        border-color    : v(button-border-color-active);
+        border          : v(button-border-active);
 
         .neo-button-glyph {
             color: v(button-glyph-color-active);
@@ -118,7 +118,7 @@
     &:hover {
         background-color: v(button-background-color-hover);
         background-image: none !important;
-        border-color    : v(button-border-color-hover);
+        border          : v(button-border-hover);
 
         .neo-button-glyph {
             color: v(button-glyph-color-hover);
@@ -153,10 +153,63 @@
         }
     }
 
+    &.neo-button-ghost {
+        background-color: v(button-ghost-background-color);
+        background-image: v(button-ghost-background-image);
+        border          : v(button-ghost-border);
+
+        .neo-button-badge {
+            background-color: v(button-ghost-badge-background-color);
+            color           : v(button-ghost-badge-color);
+        }
+
+        .neo-button-glyph {
+            color: v(button-ghost-glyph-color);
+        }
+
+        .neo-button-ripple {
+            background-color: v(button-ghost-ripple-background-color);
+        }
+
+        .neo-button-text {
+            color: v(button-ghost-text-color);
+        }
+
+        &:active {
+            background-color: v(button-ghost-background-color-active) !important;
+            border          : v(button-ghost-border-active);
+
+            .neo-button-glyph {
+                color: v(button-ghost-glyph-color-active);
+            }
+
+            .neo-button-text {
+                color: v(button-ghost-text-color-active);
+            }
+        }
+
+        &:hover {
+            background-color: v(button-ghost-background-color-hover);
+            border          : v(button-ghost-border-hover);
+
+            .neo-button-glyph {
+                color: v(button-ghost-glyph-color-hover);
+            }
+
+            .neo-button-text {
+                color: v(button-ghost-text-color-hover);
+            }
+        }
+
+        &.pressed {
+            border: v(button-ghost-border-pressed);
+        }
+    }
+
     &.neo-button-secondary {
         background-color: v(button-secondary-background-color);
         background-image: v(button-secondary-background-image);
-        border          : v(button-secondary-border-width) solid v(button-secondary-border-color);
+        border          : v(button-secondary-border);
 
         .neo-button-badge {
             background-color: v(button-secondary-badge-background-color);
@@ -177,7 +230,7 @@
 
         &:active {
             background-color: v(button-secondary-background-color-active) !important;
-            border-color    : v(button-secondary-border-color-active);
+            border          : v(button-secondary-border-active);
 
             .neo-button-glyph {
                 color: v(button-secondary-glyph-color-active);
@@ -190,7 +243,7 @@
 
         &:hover {
             background-color: v(button-secondary-background-color-hover);
-            border-color    : v(button-secondary-border-color-hover);
+            border          : v(button-secondary-border-hover);
 
             .neo-button-glyph {
                 color: v(button-secondary-glyph-color-hover);
@@ -200,12 +253,16 @@
                 color: v(button-secondary-text-color-hover);
             }
         }
+
+        &.pressed {
+            border: v(button-secondary-border-pressed);
+        }
     }
 
     &.neo-button-tertiary {
         background-color: v(button-tertiary-background-color);
         background-image: v(button-tertiary-background-image);
-        border          : v(button-tertiary-border-width) solid v(button-tertiary-border-color);
+        border          : v(button-tertiary-border);
 
         .neo-button-badge {
             background-color: v(button-tertiary-badge-background-color);
@@ -226,7 +283,7 @@
 
         &:active {
             background-color: v(button-tertiary-background-color-active) !important;
-            border-color    : v(button-tertiary-border-color-active);
+            border          : v(button-tertiary-border-active);
 
             .neo-button-glyph {
                 color: v(button-tertiary-glyph-color-active);
@@ -239,7 +296,7 @@
 
         &:hover {
             background-color: v(button-tertiary-background-color-hover);
-            border-color    : v(button-tertiary-border-color-hover);
+            border          : v(button-tertiary-border-hover);
 
             .neo-button-glyph {
                 color: v(button-tertiary-glyph-color-hover);
@@ -249,6 +306,10 @@
                 color: v(button-tertiary-text-color-hover);
             }
         }
+
+        &.pressed {
+            border: v(button-tertiary-border-pressed);
+        }
     }
 
     &.no-text {
@@ -258,7 +319,7 @@
     }
 
     &.pressed {
-        border-color: v(button-border-color-pressed);
+        border: v(button-border-pressed);
     }
 }
 
@@ -266,7 +327,7 @@
     .neo-button,
     &.neo-button {
         background-color: v(button-background-color-disabled);
-        border-color    : v(button-border-color-disabled);
+        border          : v(button-border-disabled);
         cursor          : default;
         opacity         : v(button-opacity-disabled);
 
@@ -280,7 +341,7 @@
 
         &.neo-button-secondary {
             background-color: v(button-secondary-background-color-disabled);
-            border-color    : v(button-secondary-border-color-disabled);
+            border          : v(button-secondary-border-disabled);
             opacity         : v(button-secondary-opacity-disabled);
 
             .neo-button-glyph {
@@ -294,7 +355,7 @@
 
         &.neo-button-tertiary {
             background-color: v(button-tertiary-background-color-disabled);
-            border-color    : v(button-tertiary-border-color-disabled);
+            border          : v(button-tertiary-border-disabled);
             opacity         : v(button-tertiary-opacity-disabled);
 
             .neo-button-glyph {

package/resources/scss/src/dialog/Base.scss

@@ -2,7 +2,7 @@
     // default styling to match buttons, since this is the most common use case
     background-color: v(button-background-color);
     background-image: v(button-background-image);
-    border          : 1px solid v(button-border-color-active);
+    border          : v(button-border-active);
 
     position: fixed;
     z-index : 1000;

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

@@ -1,6 +1,6 @@
 .neo-checkboxfield {
     .neo-checkbox-input {
-        display: none;
+        width: 0; // using display: none would break the keynav
 
         &:checked {
             +.neo-checkbox-icon {

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

@@ -4,32 +4,61 @@
     100% {background-color: v(tab-indicator-background-color-active);}
 }
 
-.neo-tab-header-button {
+.neo-tab-header-button.neo-button {
+    align-self      : end;
+    background-color: v(tab-button-background-color);
     background-image: v(tab-button-background-image);
     border-radius   : v(tab-button-border-radius);
     border-width    : 0;
-    height          : 25px;
+    height          : v(tab-button-height);
     margin          : 0;
-    padding         : 7px 12px 6px 12px;
+    padding         : v(tab-button-padding);
     text-transform  : v(tab-button-text-transform);
 
+    .neo-button-badge {
+        font-size     : 10px;
+        text-transform: none;
+    }
+
+    .neo-button-glyph {
+        color: v(tab-button-glyph-color);
+    }
+
+    .neo-button-text {
+        color: v(tab-button-text-color);
+    }
+
+    .neo-tab-button-indicator {
+        background-color: transparent;
+        bottom          : calcVar(tab-strip-height, '*', -1);
+        height          : v(tab-strip-height);
+        pointer-events  : none;
+        position        : absolute;
+        width           : 100%;
+        z-index         : 2;
+    }
+
     &:active {
+        background-color: v(tab-button-background-color-active) !important;
+
         .neo-button-glyph {
             color: v(tab-button-glyph-color-active);
         }
     }
 
     &:hover {
+        background-color: v(tab-button-background-color-hover);
         background-image: none;
 
         .neo-button-glyph {
-            color: v(tab-button-glyph-color-over);
+            color: v(tab-button-glyph-color-hover);
         }
     }
 
     &.pressed {
         background-image: v(tab-button-background-image-pressed) !important;
         cursor          : default;
+        height          : v(tab-button-height-pressed);
 
         .neo-button-glyph {
             color: v(tab-button-glyph-color-pressed);
@@ -42,26 +71,14 @@
         }
     }
 
-    .neo-button-badge {
-        font-size     : 10px;
-        text-transform: none;
-    }
-
-    .neo-button-glyph {
-        color: v(tab-button-glyph-color);
-    }
-
-    .neo-button-text {
-        color: v(tab-button-text-color);
+    &:not(:last-child) {
+        margin-right: v(tab-button-gap);
     }
+}
 
-    .neo-tab-button-indicator {
-        background-color: transparent;
-        bottom          : calcVar(tab-strip-height, '*', -1);
-        height          : v(tab-strip-height);
-        pointer-events  : none;
-        position        : absolute;
-        width           : 100%;
-        z-index         : 2;
+.neo-disabled {
+    .neo-tab-header-button.neo-button,
+    &.neo-tab-header-button.neo-button {
+        background-color: v(tab-button-background-color-disabled);
     }
 }

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

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

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

@@ -16,8 +16,8 @@
     position        : absolute;
 
     tr {
-        height    : 32px !important;
-        max-height: 32px !important;
+        height    : v(table-container-cell-height) !important;
+        max-height: v(table-container-cell-height) !important;
     }
 
     tr:last-child {
@@ -33,8 +33,8 @@
     }
 
     td, th {
-        min-width: 200px; // for testing
         height   : inherit;
+        min-width: 200px; // for testing
         width    : inherit;
 
         &:last-child {
@@ -48,12 +48,12 @@
 
     td {
         background-color: v(table-container-cell-background-color);
-        border-bottom   : 1px solid v(table-container-border-color);
+        border-bottom   : v(table-container-cell-border-bottom);
         border-right    : 1px solid v(table-container-border-color);
         border-top      : 1px solid transparent;
-        height          : 32px !important;
-        max-height      : 32px !important;
-        padding         : 2px 10px 2px;
+        height          : v(table-container-cell-height) !important;
+        max-height      : v(table-container-cell-height) !important;
+        padding         : v(table-container-cell-padding);
 
         &.neo-locked {
             z-index: 10;
@@ -96,7 +96,7 @@
             background:rgba(0,0,0,0.1);
 
             &:vertical {
-                margin-top: 32px;
+                margin-top: v(table-container-cell-height);
             }
         }
 
@@ -119,5 +119,3 @@
         }
     }
 }
-
-#myTableContainer ::-webkit-scrollbar-track:horizontal {margin-left: 400px;}