jspreadsheet 12.0.0-beta.1 → 12.0.0-beta.10

package/dist/jspreadsheet.css

@@ -8,7 +8,7 @@
     --jss-background-color-header: #f8f8f8;
     --jss-background-color-highlight: #e8e8e8;
     --jss-background-color-active: #777;
-    --jss-icon-color: #333;
+    --jss-icon-color: #555;
     --jss-warning-color: #ff0000;
 }
 
@@ -34,6 +34,10 @@
     color: var(--jss-font-color);
 }
 
+.jss_wait {
+    cursor: wait;
+}
+
 .jss_container.fullscreen {
     position: fixed;
     top: 0;
@@ -111,10 +115,6 @@
     border-bottom: 1px solid var(--jss-border-color);
 }
 
-.jss div {
-    line-height: normal;
-}
-
 .jss .error {
     border:1px solid red;
 }
@@ -286,7 +286,7 @@
     padding-right: 24px;
 }
 
-.jss > tbody > tr > td.jss_dropdown:hover {
+.jss > tbody > tr > td.jss_dropdown:hover:not(.readonly) {
     background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
 }
 
@@ -350,7 +350,7 @@
 .jss tbody .jss_frozen_row {
     position: sticky;
     z-index: 1;
-    background-color: #fff;
+    background-color: var(--jss-background-color);
     box-shadow: 1px 1px 2px 0 var(--jss-border-color-highlight, #aaa);
 }
 
@@ -387,7 +387,7 @@
 .jss tbody .jss_frozen {
     position: sticky;
     z-index: 1;
-    background-color: #fff;
+    background-color: var(--jss-background-color);
     box-shadow: 1px 1px 2px 0 var(--jss-border-color-highlight, #aaa);
 }
 
@@ -486,7 +486,7 @@
     left: 0;
     width: 1px;
     height: 1px;
-    background-color: #00000020;
+    background-color: color-mix(in srgb, var(--jss-border-outline) 10%, transparent);
     box-sizing: border-box;
     z-index: 7;
     display: none;
@@ -619,7 +619,7 @@
 
 .jss_actions {
     float: right;
-    display: block;
+    display: flex;
     margin-left: 4px;
 }
 
@@ -914,11 +914,11 @@
     font-size: 16px;
     width: 16px;
     height: 16px;
-    color: var(--jss-icon-color);
+    color: var(--jss-border-color);
 }
 
 .jss > thead > tr > th.jss_filters_active::before {
-    color: #888;
+    color: var(--jss-icon-color);
 }
 
 .jss_filters {
@@ -1022,13 +1022,14 @@
 }
 
 div.jss_filters_icon {
-    font-size: 13px;
-    width: 13px;
-    height: 13px;
+    font-size: 15px;
+    width: 15px;
+    height: 14px;
     padding: 1px;
     border-radius: 2px;
     color: grey;
     cursor: pointer;
+    display: flex;
 }
 
 div.jss_filters_icon:hover,
@@ -1040,7 +1041,6 @@ div.jss_filters_icon.jss_filters_active {
 div.jss_filters_icon::before {
     font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
     content: 'filter_list';
-    font-size: 13px;
     font-weight: normal;
 }
 
@@ -1188,24 +1188,12 @@ div.jss_filters_icon.jss_filters_active::before {
     margin-right: 0;
 }
 
-.jss_toolbar .jtoolbar-item:hover {
-    background-color: var(--jss-background-color-highlight, #e8e8e8);
-}
-
 .jss_toolbar .jtoolbar-item > .jpicker-header:hover {
     background-color: var(--jss-background-color-highlight, #e8e8e8);
 }
 
 .jss_toolbar .material-icons {
-    color: var(--jss-icon-color, #444);
-}
-
-.jss_toolbar .jtoolbar-divisor {
-    background: var(--jss-border-color-light, #777);
-}
-
-.jss_toolbar .jpicker-content {
-    background: var(--jss-background-color-header #fff);
+    color: var(--jss-icon-color);
 }
 
 .jss_toolbar:empty {
@@ -1228,6 +1216,32 @@ div.jss_filters_icon.jss_filters_active::before {
     display: none;
 }
 
+.jss_toolbar .jpicker,
+.jss_toolbar .jpicker-content {
+    background-color: var(--jss-background-color-header);
+    color: var(--jss-font-color);
+}
+
+.jss_toolbar .jcolor-controls div {
+    color: var(--jss-font-color);
+}
+
+.jss_toolbar .jcolor-content {
+    background-color: var(--jss-background-color-header);
+    border: 1px solid var(--jss-border-color);
+    color: var(--jss-font-color);
+}
+
+.jss_toolbar .jpicker-header:hover,
+.jss_toolbar .jpicker-item:hover,
+.jss_toolbar .jpicker-content > div:hover {
+    background-color: var(--jss-background-color-highlight);
+}
+
+.jss_toolbar .jcolor-controls {
+    border-color: var(--jss-border-color);
+}
+
 /** Editors */
 
 .jss_editor {
@@ -1324,7 +1338,7 @@ div.jss_filters_icon.jss_filters_active::before {
 }
 
 .jss_input.jss_nowrap.jss_formula {
-    display: initial;
+    display: inherit;
 }
 
 .jss_editor.jss_focus .jss_notes {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jspreadsheet",
-    "title": "Jspreadsheet Pro v11",
+    "title": "Jspreadsheet Pro v12",
     "description": "Jspreadsheet is a lightweight, vanilla javascript data grid plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.",
     "author": {
         "name": "Contact <contact@jspreadsheet.com>",
@@ -44,10 +44,10 @@
         "datasheet"
     ],
     "dependencies": {
-        "jsuites": "^6.0.0-beta.5",
+        "jsuites": "^6.0.0-beta.10",
         "@jspreadsheet/formula-pro": "^6.0.0-beta.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "12.0.0-beta.1"
+    "version": "12.0.0-beta.10"
 }