Node-Red
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5552 from bonanitech/fix-fade-effect 

Fix fade effect for tab labels that overflow
pull/5554/head
Nick O'Leary 2026-03-10 13:02:09 +00:00 committed by GitHub
parent 55a0f837a9 3826d3b1c6
commit 1192a85cb9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,13 +112,9 @@ $tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
$tab-badge-color: $tertiary-text-color;
$tab-background: $secondary-background;
$tab-background-active: $secondary-background;
$tab-background-active-alpha: rgba($tab-background-active, 0.001);
$tab-background-selected: $secondary-background-selected;
$tab-background-selected-alpha: rgba($tab-background-selected, 0.001);
$tab-background-inactive: $secondary-background-inactive;
$tab-background-inactive-alpha: rgba($tab-background-inactive, 0.001);
$tab-background-hover: $secondary-background-hover;
$tab-background-hover-alpha: rgba($tab-background-hover, 0.001);
$palette-header-background: $primary-background;
$palette-header-color: $header-text-color;

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

@ -116,7 +116,7 @@ body .red-ui-tabs {
}
.red-ui-tabs-fade {
background-image: linear-gradient(to right, var(--red-ui-tab-background-active-alpha), var(--red-ui-tab-background-active));
background-image: linear-gradient(to right, transparent, var(--red-ui-tab-background-active));
}
}
@ -124,7 +124,7 @@ body .red-ui-tabs {
&:not(.active) {
background: var(--red-ui-tab-background-selected);
.red-ui-tabs-fade {
background-image: linear-gradient(to right, var(--red-ui-tab-background-selected-alpha), var(--red-ui-tab-background-selected));
background-image: linear-gradient(to right, transparent, var(--red-ui-header-background));
}
.red-ui-tabs-badge-selected {
background: var(--red-ui-tab-background-selected);
@ -144,7 +144,7 @@ body .red-ui-tabs {
color: var(--red-ui-workspace-button-color-hover);
background: var(--red-ui-tab-background-hover);
&+.red-ui-tabs-fade {
background-image: linear-gradient(to right, var(--red-ui-tab-background-hover-alpha), var(--red-ui-tab-background-hover));
background-image: linear-gradient(to right, transparent, var(--red-ui-header-background));
}
}
}
@ -346,7 +346,7 @@ body .red-ui-tabs {
top: 0;
right: 0;
width: 15px;
background-image: linear-gradient(to right, var(--red-ui-tab-background-inactive-alpha), var(--red-ui-tab-background-inactive));
background-image: linear-gradient(to right, transparent, var(--red-ui-header-background));
pointer-events: none;
}
@ -514,10 +514,6 @@ i.red-ui-tab-icon {
}
}
&:not(.active) .red-ui-tabs-fade {
display: none;
}
&:not(.active) {
border-radius: 0;
}

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

@ -105,13 +105,9 @@
--red-ui-tab-badge-color: #{colors.$tab-badge-color};
--red-ui-tab-background: #{colors.$tab-background};
--red-ui-tab-background-active: #{colors.$tab-background-active};
--red-ui-tab-background-active-alpha: #{colors.$tab-background-active-alpha};
--red-ui-tab-background-selected: #{colors.$tab-background-selected};
--red-ui-tab-background-selected-alpha: #{colors.$tab-background-selected-alpha};
--red-ui-tab-background-inactive: #{colors.$tab-background-inactive};
--red-ui-tab-background-inactive-alpha: #{colors.$tab-background-inactive-alpha};
--red-ui-tab-background-hover: #{colors.$tab-background-hover};
--red-ui-tab-background-hover-alpha: #{colors.$tab-background-hover-alpha};
--red-ui-palette-header-background: #{colors.$palette-header-background};
--red-ui-palette-header-color: #{colors.$palette-header-color};