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

Add a slight fade to tab labels that overflow

Browse Source
This commit is contained in:
Nick O'Leary
2021-07-08 12:23:15 +01:00
parent 4624079be7
commit e7efa76e6d
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,10 +102,21 @@
img.red-ui-tab-icon {
opacity: 0.2;
}
.red-ui-tabs-fade {
background-image: linear-gradient(to right, transparent, $tab-background-active);
}
}
&.selected {
&:not(.active) {
background: $tab-background-selected;
.red-ui-tabs-fade {
background-image: linear-gradient(to right, transparent, $tab-background-selected);
}
.red-ui-tabs-badge-selected {
background: $tab-background-selected;
}
}
font-weight: bold;
.red-ui-tabs-badge-selected {
@@ -291,6 +302,15 @@
.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tabs-add {
right: 38px;
}
.red-ui-tabs-fade {
position: absolute;
bottom: 0;
top: 0;
right: 0;
width: 15px;
background-image: linear-gradient(to right, transparent, $tab-background-inactive);
pointer-events: none;
}
img.red-ui-tab-icon {