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

Update styling of tabs to floating active tab and ghost inactive tabs

pull/5510/head
Noley Holland 2026-03-03 07:16:20 -08:00
parent 83d79ef58a
commit bbaa922dd0
1 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -488,13 +488,58 @@ i.red-ui-tab-icon {
display: flex;
align-items: center;
border: none;
gap: 2px;
li {
min-width: 60px;
max-width: 150px;
flex: 1 1 100%;
border-color: var(--red-ui-header-button-border);
border-radius: 4px;
margin-top: 0;
border-color: transparent;
margin: 0;
background: transparent;
a.red-ui-tab-label {
padding-left: 0;
text-align: center;
}
&:not(.active) .red-ui-tabs-fade {
display: none;
}
&:not(.active) {
border-radius: 0;
}
&:not(:first-child):not(.active) {
box-shadow: -1px 0 0 rgba(0,0,0,0.15);
}
&:not(:first-child):not(.active):hover,
&.active + li:not(:first-child),
&:hover + li:not(:first-child):not(.active) {
box-shadow: none;
}
&.active {
background: var(--red-ui-secondary-background);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
border-color: var(--red-ui-primary-border-color);
border-radius: 4px;
}
&:not(.active):hover::after {
content: '';
position: absolute;
inset: 0 0 0 1px;
background: rgba(0,0,0,0.06);
border-radius: 4px;
pointer-events: none;
}
&:not(.active) a:hover {
background: transparent;
}
}
}
}