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

Allow popovers to be moved and styled

Browse Source
This commit is contained in:
Nick O'Leary
2021-09-08 22:54:42 +01:00
parent 228c15ace3
commit 2c456f044f
4 changed files with 150 additions and 88 deletions
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

@@ -140,8 +140,8 @@ $workspace-button-color-focus-outline: $form-input-focus-color;
$shade-color: rgba(160,160,160,0.5);
$popover-background: #333;
$popover-border: $popover-background;
$popover-color: #eee;
$popover-button-border-color: #bbb;
$popover-button-border-color-hover: #666;

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

@@ -19,19 +19,23 @@
display: none;
position: absolute;
width: auto;
padding: 10px;
padding: 2px;
height: auto;
background: $popover-background;
color: $popover-color;
background: var(--red-ui-popover-border);
color: var(--red-ui-popover-color);
border-radius: 4px;
z-index: 1000;
font-family: $primary-font;
font-size: 14px;
line-height: 1.4em;
@include component-shadow;
border-color: $popover-background;
border-color: var(--red-ui-popover-border);
}
.red-ui-popover-content {
padding: 8px;
border-radius: 2px;
background: var(--red-ui-popover-background);
}
.red-ui-popover:after, .red-ui-popover:before {
border: solid transparent;
content: " ";
@@ -61,26 +65,26 @@
.red-ui-popover.red-ui-popover-right:after {
border-color: transparent;
border-right-color: $popover-background;
border-right-color: var(--red-ui-popover-border);
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-right:before {
border-color: transparent;
border-right-color: $popover-background;
border-right-color: var(--red-ui-popover-border);
border-width: 11px;
margin-top: -11px;
}
.red-ui-popover.red-ui-popover-left:after {
border-color: transparent;
border-left-color: $popover-background;
border-left-color: var(--red-ui-popover-border);
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-left:before {
border-color: transparent;
border-left-color: $popover-background;
border-left-color: var(--red-ui-popover-border);
border-width: 11px;
margin-top: -11px;
}
@@ -88,26 +92,26 @@
.red-ui-popover.red-ui-popover-bottom:after {
border-color: transparent;
border-bottom-color: $popover-background;
border-bottom-color: var(--red-ui-popover-border);
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-bottom:before {
border-color: transparent;
border-bottom-color: $popover-background;
border-bottom-color: var(--red-ui-popover-border);
border-width: 11px;
margin-left: -11px;
}
.red-ui-popover.red-ui-popover-top:after {
border-color: transparent;
border-top-color: $popover-background;
border-top-color: var(--red-ui-popover-border);
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-top:before {
border-color: transparent;
border-top-color: $popover-background;
border-top-color: var(--red-ui-popover-border);
border-width: 11px;
margin-left: -11px;
}
@@ -116,9 +120,10 @@
.red-ui-popover-size-small {
font-size: 12px;
padding: 5px 7px;
line-height: 1.8em;
.red-ui-popover-content {
padding: 1px 4px;
}
&.red-ui-popover-right:after, &.red-ui-popover-left:after {
border-width: 7px;
margin-top: -7px;
@@ -143,7 +148,7 @@
font-size: 11px;
font-family: $monospace-font;
margin-left: 3px;
border: 1px solid $popover-color;
border: 1px solid var(--red-ui-popover-color);
border-radius:3px;
padding: 1px 2px;
}
@@ -152,8 +157,8 @@
.red-ui-popover button.red-ui-button {
&:not(.primary) {
border-color: $popover-button-border-color;
background: $popover-background;
color: $popover-color !important;
background: var(--red-ui-popover-background);
color: var(--red-ui-popover-color) !important;
}
&:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover;

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

@@ -81,12 +81,15 @@
--red-ui-node-status-changed-border: #{$node-status-changed-border};
--red-ui-node-status-changed-background: #{$node-status-changed-background};
--red-ui-node-border: #{$node-border};
--red-ui-node-port-background:#{$node-port-background};
--red-ui-node-label-color: #{$node-label-color};
--red-ui-node-selected-color: #{$node-selected-color};
--red-ui-port-selected-color: #{$port-selected-color};
--red-ui-popover-background: #{$popover-background};
--red-ui-popover-border: #{$popover-border};
--red-ui-popover-color: #{$popover-color};
}