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 separator grip themeable

Browse Source
This commit is contained in:
Mauricio Bonani 2022-04-03 18:00:08 -04:00
parent 9a6ee023b3
commit 5619c105aa
4 changed files with 70 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -301,6 +301,8 @@ $group-default-label-color: #a4a4a4;
$tourGuide-border: #c56c6c; $tourGuide-border: #c56c6c;
$tourGuide-heading-color: #c56c6c; $tourGuide-heading-color: #c56c6c;
$grip-color: #ccc;
// 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;

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

@ -149,11 +149,27 @@
bottom: 0px; bottom: 0px;
width: 7px; width: 7px;
left: -9px; left: -9px;
background: $primary-background url(images/grip.svg) no-repeat 50% 50%; background-color: $primary-background;
cursor: col-resize; cursor: col-resize;
border-left: 1px solid $primary-border-color; border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px $shadow; 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 { &.red-ui-tray-resize-maximised {
background: $primary-background; background: $primary-background;
cursor: default; cursor: default;

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

@ -40,7 +40,23 @@
height: 7px; height: 7px;
box-sizing: border-box; box-sizing: border-box;
cursor: ns-resize; cursor: ns-resize;
background: $primary-background url(images/grip-horizontal.svg) 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; width: 7px;
display: inline-block; display: inline-block;
cursor: ew-resize; cursor: ew-resize;
background: $primary-background url(images/grip.svg) 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; bottom:10px;
width: 7px; width: 7px;
// z-index: 11; // z-index: 11;
background: $primary-background url(images/grip.svg) no-repeat 50% 50%; background-color: $primary-background;
cursor: col-resize; 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; } .red-ui-sidebar-closed > #red-ui-sidebar { display: none; }