frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Make tab icon themeable

Browse Source
This commit is contained in:
Mauricio Bonani 2022-04-03 18:09:08 -04:00
parent 96d15b7505
commit e97f4c4054
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js vendored
View File

@ -670,7 +670,7 @@ RED.tabs = (function() {
} }
var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li); var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
if (tab.icon) { if (tab.icon) {
$('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link); $('<i>',{class:"red-ui-tab-icon", style:"mask-image: url("+tab.icon+"); -webkit-mask-image: url("+tab.icon+");"}).appendTo(link);
} else if (tab.iconClass) { } else if (tab.iconClass) {
$('<i>',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link); $('<i>',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link);
} }

2
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -307,6 +307,8 @@ $icons-flow-color: #808080;
$spinner-color: #999; $spinner-color: #999;
$tab-icon-color: #dedede;
// Deprecated // Deprecated
$text-color-green: $text-color-success; $text-color-green: $text-color-success;
$info-text-code-color: $text-color-code; $info-text-code-color: $text-color-code;

27
packages/node_modules/@node-red/editor-client/src/sass/tabs.scss vendored
View File

@ -342,21 +342,28 @@
} }
img.red-ui-tab-icon {
margin-left: -8px;
margin-right: 3px;
margin-top: -2px;
opacity: 0.1;
width: 20px;
height: 20px;
vertical-align: middle;
}
i.red-ui-tab-icon { i.red-ui-tab-icon {
opacity: 0.7; opacity: 0.7;
width: 18px; width: 18px;
height: 20px; height: 20px;
&:not(.fa) {
display: inline-block;
margin-left: -8px;
margin-right: 3px;
margin-top: -2px;
opacity: 1;
width: 20px;
height: 20px;
vertical-align: middle;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: $tab-icon-color;
}
} }
.red-ui-tabs-badges { .red-ui-tabs-badges {
position: absolute; position: absolute;
top:0px; top:0px;