frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3515 from bonanitech/svg-icons

Browse Source 
Make it easier to apply themes on SVG icons
This commit is contained in:
Nick O'Leary
2022-04-26 16:22:47 +01:00
committed by GitHub
parent 62e730b621 c9fa5c7284
commit f8d0ed7ca6
15 changed files with 137 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -142,9 +142,16 @@ body {
line-height: 14px;
vertical-align: text-top;
margin-top: 0px;
background: url(images/spin.svg) no-repeat 50% 50%;
background-size: contain
}
-webkit-mask-image: url(images/spin.svg);
mask-image: url(images/spin.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: $spinner-color;
}
.red-ui-font-code {
font-family: $monospace-font;

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

@@ -299,6 +299,14 @@ $group-default-label-color: #a4a4a4;
$tourGuide-border: #c56c6c;
$tourGuide-heading-color: #c56c6c;
$grip-color: #ccc;
$icons-flow-color: #808080;
$spinner-color: #999;
$tab-icon-color: #dedede;
// Deprecated
$text-color-green: $text-color-success;
$info-text-code-color: $text-color-code;

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

@@ -149,11 +149,27 @@
bottom: 0px;
width: 7px;
left: -9px;
background: $primary-background url(images/grip.png) no-repeat 50% 50%;
background-color: $primary-background;
cursor: col-resize;
border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px $shadow;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
-webkit-mask-image: url(images/grip.svg);
mask-image: url(images/grip.svg);
-webkit-mask-size: auto;
mask-size: auto;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: $grip-color;
}
&.red-ui-tray-resize-maximised {
background: $primary-background;
cursor: default;

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

@@ -40,7 +40,23 @@
height: 7px;
box-sizing: border-box;
cursor: ns-resize;
background: $primary-background url(images/grip-horizontal.png) no-repeat 50% 50%;
background-color: $primary-background;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
-webkit-mask-image: url(images/grip-horizontal.svg);
mask-image: url(images/grip-horizontal.svg);
-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: $grip-color;
}
}
@@ -70,6 +86,22 @@
width: 7px;
display: inline-block;
cursor: ew-resize;
background: $primary-background url(images/grip.png) no-repeat 50% 50%;
background-color: $primary-background;
}
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
-webkit-mask-image: url(images/grip.svg);
mask-image: url(images/grip.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: $grip-color;
}
}

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

@@ -47,8 +47,24 @@
bottom:10px;
width: 7px;
// z-index: 11;
background: $primary-background url(images/grip.png) no-repeat 50% 50%;
background-color: $primary-background;
cursor: col-resize;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
-webkit-mask-image: url(images/grip.svg);
mask-image: url(images/grip.svg);
-webkit-mask-size: auto;
mask-size: auto;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: $grip-color;
}
}
.red-ui-sidebar-closed > #red-ui-sidebar { display: none; }

14
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@@ -530,10 +530,16 @@ div.red-ui-info-table {
}
.red-ui-icons-flow {
background-image: url('images/subflow_tab.svg');
background-repeat: no-repeat;
background-size: contain;
filter: brightness(2.5);
mask-image: url(images/subflow_tab.svg);
-webkit-mask-image: url(images/subflow_tab.svg);
mask-position: center;
-webkit-mask-position: center;
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
background-color: $icons-flow-color;
// filter: brightness(2.5);
}
.red-ui-info-toolbar {

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

@@ -346,21 +346,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 {
opacity: 0.7;
width: 18px;
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 {
position: absolute;
top:0px;

11
packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss vendored
View File

@@ -135,6 +135,13 @@
}
.red-ui-treeList-spinner {
height: 32px;
background: url(images/spin.svg) 50% 50% no-repeat;
background-size: auto 20px;
-webkit-mask-image: url(images/spin.svg);
mask-image: url(images/spin.svg);
-webkit-mask-size: auto 20px;
mask-size: auto 20px;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: $spinner-color;
}

11
packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss vendored
View File

@@ -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,