Make typedInput themeable

node-red · Apr 3, 2022 · c9fa5c7 · c9fa5c7
1 parent e97f4c4
commit c9fa5c7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
@@ -637,7 +637,7 @@
                     if (opt.icon.indexOf("<") === 0) {
                         $(opt.icon).prependTo(op);
                     } else if (opt.icon.indexOf("/") !== -1) {
-                        $('<img>',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px; height: 18px;"}).prependTo(op);
+                        $('<i>',{class:"red-ui-typedInput-icon", style:"mask-image: url("+opt.icon+"); -webkit-mask-image: url("+opt.icon+");"}).prependTo(op);
                     } else {
                         $('<i>',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(op);
                     }

diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
@@ -104,6 +104,17 @@
     }
     .red-ui-typedInput-icon {
         margin-right: 6px;
+        &:not(.fa) {
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            -webkit-mask-position: center;
+            mask-position: center;
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            background-color: $primary-text-color;
+            height: 14px;
+            width: 12px;
+        }
     }
 }
 button.red-ui-typedInput-type-select,