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

WIP

pull/5444/head
Nick O'Leary 2026-01-07 16:33:04 +00:00
parent 34fe8c1057
commit 471c5eecda
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
9 changed files with 149 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js vendored
View File

@ -28,6 +28,7 @@
* - autoSelect: boolean - default true - triggers item selection when navigating
* list by keyboard. If the list has checkboxed items
* you probably want to set this to false
* - expandOnLabel: boolean - default true - items expand when their label is clicked
*
* methods:
* - data(items) - clears existing items and replaces with new data
@ -91,6 +92,7 @@
*
*
*/
const paddingPerDepth = 5;
$.widget( "nodered.treeList", {
_create: function() {
@ -342,11 +344,11 @@
if (child.depth !== parent.depth+1) {
child.depth = parent.depth+1;
// var labelPaddingWidth = ((child.gutter ? child.gutter[0].offsetWidth + 2 : 0) + (child.depth * 20));
var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*20));
var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*paddingPerDepth));
child.treeList.labelPadding.width(labelPaddingWidth+'px');
if (child.element) {
$(child.element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(child.icon?20:0))+"px)"
width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(child.icon?paddingPerDepth:0))+"px)"
})
}
// This corrects all child item depths
@ -475,7 +477,7 @@
if (!childrenAdded) {
startTime = Date.now();
spinner = $('<div class="red-ui-treeList-spinner">').css({
"background-position": (35+depth*20)+'px 50%'
"background-position": (35+depth*paddingPerDepth)+'px 50%'
}).appendTo(container);
}
@ -527,10 +529,10 @@
$(element).appendTo(item.treeList.label);
// using the JQuery Object, the gutter width will
// be wrong when the element is reattached the second time
var labelPaddingWidth = (item.gutter ? item.gutter[0].offsetWidth + 2 : 0) + (item.depth * 20);
var labelPaddingWidth = (item.gutter ? item.gutter[0].offsetWidth + 2 : 0) + (item.depth * paddingPerDepth);
$(element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(item.icon?paddingPerDepth:0))+"px)"
})
}
item.element = element;
@ -565,7 +567,7 @@
}
var labelPaddingWidth = ((item.gutter&&!item.gutter.hasClass("red-ui-treeList-gutter-float"))?item.gutter.width()+2:0)+(depth*20);
var labelPaddingWidth = ((item.gutter&&!item.gutter.hasClass("red-ui-treeList-gutter-float"))?item.gutter.width()+2:0)+(depth*paddingPerDepth);
item.treeList.labelPadding = $('<span>').css({
display: "inline-block",
@ -617,6 +619,7 @@
}
$('<i class="fa fa-angle-right" />').toggleClass("hide",item.collapsible === false).appendTo(treeListIcon);
treeListIcon.on("click.red-ui-treeList-expand", function(e) {
console.log('click expand icon')
e.stopPropagation();
e.preventDefault();
if (container.hasClass("expanded")) {
@ -627,12 +630,15 @@
});
// $('<span class="red-ui-treeList-icon"><i class="fa fa-folder-o" /></span>').appendTo(label);
label.on("click.red-ui-treeList-expand", function(e) {
if (container.hasClass("expanded")) {
if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
item.treeList.collapse();
if (that.options.expandOnLabel !== false) {
if (container.hasClass("expanded")) {
if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
item.treeList.collapse();
}
} else {
console.log('click on label expand')
item.treeList.expand();
}
} else {
item.treeList.expand();
}
})
if (!item.children) {
@ -770,7 +776,7 @@
} else if (item.element) {
$(item.element).appendTo(label);
$(item.element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(item.icon?paddingPerDepth:0))+"px)"
})
}
if (item.children) {

58
packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js vendored
View File

@ -32,7 +32,7 @@ RED.sidebar = (function() {
maximumWidth: 800,
// Make LH side slightly narrower by default as its the palette that doesn't require a lot of width
defaultWidth: 210,
defaultTopHeight: 0.4
defaultTopHeight: 0.5
}
}
const defaultSidebarConfiguration = {
@ -189,6 +189,11 @@ RED.sidebar = (function() {
const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
//
if (targetSidebar.tabBars[options.targetSection].active === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) {
// if (!targetSidebar.sections[options.targetSection].hidden) {
// targetSidebar.hideSection(options.targetSection)
// } else {
// targetSidebar.showSection(options.targetSection)
// }
RED.menu.setSelected(targetSidebar.menuToggle, false);
} else {
RED.sidebar.show(options.id)
@ -264,23 +269,30 @@ RED.sidebar = (function() {
sidebar.tabBars.bottom.resizeSidebarTabBar();
}
sidebar.hideSection = function (position) {
sidebar.sections.bottom.container.hide()
sidebar.sections.bottom.hidden = true
sidebar.sections.top.container.css('flex-grow', '1')
sidebar.tabBars.top.container.css('flex-grow', '1')
sidebar.tabBars.bottom.container.css('flex-grow', '0')
sidebar.tabBars.bottom.container.css('height', '60px')
sidebar.sections[position].container.hide()
sidebar.sections[position].hidden = true
const otherPosition = position === 'top' ? 'bottom' : 'top'
sidebar.sections[otherPosition].container.css('flex-grow', '1')
sidebar.tabBars[position].clearSelected()
// sidebar.tabBars.top.container.css('flex-grow', '1')
// sidebar.tabBars[position].container.css('flex-grow', '0')
// sidebar.tabBars[position].container.css('height', '60px')
sidebar.resizeSidebar()
}
sidebar.showSection = function (position) {
sidebar.sections.bottom.container.show()
sidebar.sections.bottom.hidden = false
sidebar.sections.top.container.css('flex-grow', '0')
sidebar.sections.top.container.css('height', '70%')
sidebar.tabBars.top.container.css('flex-grow', '')
sidebar.tabBars.bottom.container.css('flex-grow', '')
sidebar.tabBars.bottom.container.css('height', '')
sidebar.sections[position].container.show()
sidebar.sections[position].hidden = false
const otherPosition = position === 'top' ? 'bottom' : 'top'
sidebar.sections[otherPosition].container.css('flex-grow', '0')
sidebar.sections[otherPosition].container.css('height', '70%')
// sidebar.tabBars.top.container.css('flex-grow', '')
// sidebar.tabBars[position].container.css('flex-grow', '')
// sidebar.tabBars[position].container.css('height', '')
sidebar.tabBars[position].active
sidebar.tabBars[position].container.find('button[data-tab-id="'+sidebar.tabBars[position].active+'"]').addClass('selected')
sidebar.resizeSidebar()
}
@ -342,6 +354,14 @@ RED.sidebar = (function() {
connectWith: ".red-ui-sidebar-tab-bar-buttons",
start: function(event, ui) {
const tabId = ui.item.attr('data-tab-id');
const tabCount = tabBarButtonsContainer.children('button:not(.red-ui-sidebar-tab-bar-overflow-button):not(.red-ui-sidebar-tab-bar-button-placeholder)').length
if (position === 'top' && tabCount === 1) {
// Call in a timeout to allow the stortable start event to complete
// processing - otherwise errors are thrown
setTimeout(function () {
tabBarButtonsContainer.sortable('cancel');
}, 0);
}
const options = knownTabs[tabId];
options.tabButtonTooltip.delete()
draggingTabButton = true
@ -584,6 +604,9 @@ RED.sidebar = (function() {
if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) {
RED.menu.setSelected(targetSidebar.menuToggle,true);
}
if (targetSidebar.sections[targetSection].hidden) {
targetSidebar.showSection(targetSection)
}
}
}
}
@ -604,11 +627,13 @@ RED.sidebar = (function() {
sidebar.sections = {};
sidebar.sections.top = {}
sidebar.sections.top.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-top"></div>').appendTo(sidebar.container);
// sidebar.sections.top.banner = $('<div class="red-ui-sidebar-banner">Head</div>').appendTo(sidebar.sections.top.container);
sidebar.sections.top.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.top.container);
sidebar.sections.top.footer = $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.top.container);
sidebar.sectionsSeparator = $('<div class="red-ui-sidebar-tab-bar-separator"><div class="red-ui-sidebar-separator-handle"></div></div>').appendTo(sidebar.container);
sidebar.sections.bottom = {}
sidebar.sections.bottom.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-bottom"></div>').appendTo(sidebar.container);
// sidebar.sections.bottom.banner = $('<div class="red-ui-sidebar-banner">Head</div>').appendTo(sidebar.sections.bottom.container);
sidebar.sections.bottom.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.bottom.container);
sidebar.sections.bottom.footer = $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.bottom.container);
@ -616,12 +641,14 @@ RED.sidebar = (function() {
let startTopSectionHeight
let startTopTabSectionHeight
let startSidebarHeight
let lastSeparatorPosition
sidebar.sectionsSeparator.draggable({
axis: "y",
containment: sidebar.container,
scroll: false,
start:function(event,ui) {
startPosition = ui.position.top
lastSeparatorPosition = ui.position.top
startTopSectionHeight = sidebar.sections.top.container.outerHeight()
startTopTabSectionHeight = sidebar.tabBars.top.container.outerHeight()
startSidebarHeight = sidebar.container.height()
@ -631,12 +658,13 @@ RED.sidebar = (function() {
const newTopHeight = startTopSectionHeight + delta
const newBottomHeight = startSidebarHeight - newTopHeight
if (newTopHeight < 100 || newBottomHeight < 100) {
ui.position.top += delta
ui.position.top = lastSeparatorPosition
return
}
sidebar.sections.top.container.outerHeight(startTopSectionHeight + delta)
sidebar.tabBars.top.container.outerHeight(startTopTabSectionHeight + delta)
ui.position.top -= delta
lastSeparatorPosition = ui.position.top
sidebar.resizeSidebar()
},
stop:function(event,ui) {

25
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js vendored
View File

@ -43,7 +43,6 @@ RED.sidebar.info.outliner = (function() {
subflowList = flowData[1];
globalConfigNodes = flowData[2];
configNodeTypes = { __global__: globalConfigNodes};
return flowData;
}
@ -222,8 +221,6 @@ RED.sidebar.info.outliner = (function() {
}
return RED._("common.label."+(((n.type==='tab' && n.disabled) || (n.type!=='tab' && n.d))?"enable":"disable"));
});
} else {
$('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
}
if (n.type === 'tab') {
var lockToggleButton = $('<button type="button" class="red-ui-info-outline-item-control-lock red-ui-button red-ui-button-small"><i class="fa fa-unlock-alt"></i><i class="fa fa-lock"></i></button>').appendTo(controls).on("click",function(evt) {
@ -238,7 +235,7 @@ RED.sidebar.info.outliner = (function() {
RED.popover.tooltip(lockToggleButton,function() {
return RED._("common.label."+(n.locked?"unlock":"lock"));
});
} else {
} else if (n.type !== 'subflow') {
$('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
}
controls.find("button").on("dblclick", function(evt) {
@ -297,7 +294,8 @@ RED.sidebar.info.outliner = (function() {
// <div class="red-ui-info-outline-item red-ui-info-outline-item-flow" style=";"><div class="red-ui-search-result-description red-ui-info-outline-item-label">Space Monkey</div><div class="red-ui-info-outline-item-controls"><button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;"><i class="fa fa-ellipsis-h"></i></button></div></div></div>').appendTo(container)
treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({
data:getFlowData()
data:getFlowData(),
expandOnLabel: false
})
treeList.on('treelistselect', function(e,item) {
var node = RED.nodes.node(item.id) || RED.nodes.group(item.id) || RED.nodes.workspace(item.id) || RED.nodes.subflow(item.id);
@ -591,14 +589,15 @@ RED.sidebar.info.outliner = (function() {
}
}
function getGutter(n) {
var span = $("<span>",{class:"red-ui-info-outline-gutter red-ui-treeList-gutter-float"});
var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
evt.preventDefault();
evt.stopPropagation();
RED.view.reveal(n.id);
})
RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
return span;
// var span = $("<span>",{class:"red-ui-info-outline-gutter red-ui-treeList-gutter-float"});
// var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
// evt.preventDefault();
// evt.stopPropagation();
// RED.view.reveal(n.id);
// })
// RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
// return span;
return null;
}
function createFlowConfigNode(parent,type) {

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

@ -182,7 +182,7 @@ $diff-merge-header-color: #800080;
$diff-merge-header-background: #e5f9ff;
$diff-merge-header-border-color: #b2edff;
$menuBackground: $primary-background;
$menuBackground: $secondary-background;
$menuDivider: $secondary-border-color;
$menuColor: $primary-text-color;
$menuActiveColor: $secondary-text-color-active;
@ -247,29 +247,33 @@ $link-unknown-color: #f00;
$clipboard-textarea-background: #F3E7E7;
$header-background: $primary-background;
$header-button-border: $primary-border-color;
$header-button-background-active: $workspace-button-background-active;
$header-accent: $primary-background;
$header-menu-color: $primary-text-color;
$header-menu-color-disabled: $secondary-text-color-disabled;
$header-menu-heading-color:$primary-text-color;
$header-menu-sublabel-color: $secondary-text-color-active;
$header-menu-background: $menuBackground;
$header-menu-item-hover: $secondary-background-hover;
$header-menu-item-border-active: $secondary-background-hover;
$headerMenuItemDivider: $secondary-border-color;
$headerMenuCaret: $tertiary-text-color;
$deploy-button-color: #eee;
$deploy-button-color-active: #ccc;
$deploy-button-color-disabled: #999;
$deploy-button-color-disabled: $secondary-text-color-disabled;
$deploy-button-border-color: $header-button-border;
$deploy-button-background: #8C101C;
$deploy-button-background-hover: #6E0A1E;
$deploy-button-background-active: #4C0A17;
$deploy-button-background-disabled: #444;
$deploy-button-background-disabled-hover: #555;
$deploy-button-background-disabled: $header-background;
$deploy-button-background-disabled-hover: $secondary-background-hover;
$header-background: #000;
$header-button-background-active: #121212;
$header-accent: #C02020;
$header-menu-color: #eee;
$header-menu-color-disabled: #666;
$header-menu-heading-color: #fff;
$header-menu-sublabel-color: #aeaeae;
$header-menu-background: #121212;
$header-menu-item-hover: #323232;
$header-menu-item-border-active: #777677;
$headerMenuItemDivider: #464646;
$headerMenuCaret: #C7C7C7;
$vcCommitShaColor: #c38888;
$dnd-background: rgba(0,0,0,0.3);

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

@ -30,7 +30,8 @@
list-style: none;
background: var(--red-ui-menuBackground);
border: 1px solid var(--red-ui-secondary-border-color);
box-shadow: 0 5px 10px var(--red-ui-shadow);
border-radius: 4px;
box-shadow: -2px 2px 6px 2px var(--red-ui-shadow);
&.pull-right {
right: 0;
@ -163,7 +164,7 @@
position: relative;
& > .red-ui-menu-dropdown {
top: 0;
left: calc(100% - 5px);
left: calc(100%);
margin-top: 0;
margin-left: -1px;
}
@ -187,8 +188,7 @@
&.pull-left {
float: none;
& > .red-ui-menu-dropdown {
left: -100%;
margin-left: 10px;
left: calc(-100% - 2px);
}
}
}

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

@ -28,31 +28,29 @@
height: var(--red-ui-header-height);
background: var(--red-ui-header-background);
box-sizing: border-box;
padding: 0px 0px 0px 20px;
padding: 0px;
color: var(--red-ui-header-menu-color);
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--red-ui-header-accent);
padding-top: 2px;
padding-top: 6px;
span.red-ui-header-logo {
float: left;
font-size: 30px;
line-height: 30px;
margin-left: 8px;
text-decoration: none;
white-space: nowrap;
span {
vertical-align: middle;
font-size: 16px !important;
font-size: 14px !important;
&:not(:first-child) {
margin-left: 8px;
}
}
img {
height: 32px;
height: 28px;
}
a {
@ -68,9 +66,9 @@
display: flex;
align-items: stretch;
padding: 0;
margin: 0;
margin: 0 10px 0 0;
list-style: none;
float: right;
gap: 15px;
> li {
display: inline-flex;
@ -82,24 +80,20 @@
}
.button {
height: 100%;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
min-width: 24px;
text-align: center;
font-size: 20px;
padding: 0px 12px;
font-size: 16px;
padding: 0px;
text-decoration: none;
color: var(--red-ui-header-menu-color);
margin: auto 5px;
margin: auto 0;
vertical-align: middle;
border-left: 2px solid var(--red-ui-header-background);
border-right: 2px solid var(--red-ui-header-background);
mask-size: contain;
&:hover {
border-color: var(--red-ui-header-menu-item-hover);
}
&:active, &.active {
background: var(--red-ui-header-button-background-active);
}
@ -110,7 +104,6 @@
.button-group {
display: inline-block;
margin: auto 15px;
vertical-align: middle;
clear: both;
& > a {
@ -128,7 +121,7 @@
.red-ui-deploy-button {
background: var(--red-ui-deploy-button-background);
color: var(--red-ui-deploy-button-color);
border: 1px solid var(--red-ui-deploy-button-border-color);
&:hover {
background: var(--red-ui-deploy-button-background-hover);
}
@ -156,18 +149,24 @@
}
#red-ui-header-button-deploy {
padding: 4px 12px;
padding: 3px 8px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: none;
border-color: var(--red-ui-deploy-button-background);
&.disabled {
cursor: default;
background: var(--red-ui-deploy-button-background-disabled);
color: var(--red-ui-deploy-button-color-disabled);
border-color: var(--red-ui-deploy-button-border-color);
.red-ui-deploy-button-content>img {
opacity: 0.3;
opacity: 0.7;
}
&+ #red-ui-header-button-deploy-options {
background: var(--red-ui-deploy-button-background-disabled);
color: var(--red-ui-deploy-button-color-active);
border-color: var(--red-ui-deploy-button-border-color);
}
&+ #red-ui-header-button-deploy-options:hover {
background: var(--red-ui-deploy-button-background-disabled-hover);
@ -176,9 +175,17 @@
background: var(--red-ui-deploy-button-background-disabled);
}
}
&+ #red-ui-header-button-deploy-options {
padding: 3px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-left: none;
border-color: var(--red-ui-deploy-button-background);
}
.red-ui-deploy-button-content>img {
margin-right: 8px;
height: 16px;
}
}
@ -212,7 +219,7 @@
background: var(--red-ui-header-menu-background);
border: 1px solid var(--red-ui-header-menu-background);
width: 260px !important;
margin-top: 0;
margin-top: 5px;
li a {
color: var(--red-ui-header-menu-color);
padding: 3px 10px 3px 30px;
@ -295,10 +302,10 @@
.red-ui-user-profile {
background-color: var(--red-ui-header-background);
border: 2px solid var(--red-ui-header-menu-color);
border: 1px solid var(--red-ui-header-button-border);
border-radius: 30px;
overflow: hidden;
padding: 3px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
@ -306,9 +313,9 @@
justify-content: center;
align-items: center;
vertical-align: middle;
width: 30px;
height: 30px;
font-size: 20px;
width: 22px;
height: 22px;
font-size: 14px;
&.red-ui-user-profile-color-1 {
background-color: var(--red-ui-user-profile-colors-1);

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

@ -14,4 +14,4 @@
* limitations under the License.
**/
$header-height: 48px;
$header-height: 36px;

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

@ -423,7 +423,7 @@ div.red-ui-info-table {
.red-ui-info-outline-item-control-spacer {
display: inline-block;
width: 23px;
width: 18px;
}
.red-ui-info-outline-gutter {
display:none;
@ -442,9 +442,18 @@ div.red-ui-info-table {
right: 1px;
padding: 1px 2px 0 1px;
text-align: right;
&.red-ui-info-outline-item-hover-controls button {
min-width: 23px;
margin: 0;
padding: 0 2px;
min-width: 18px;
height: 18px;
border-radius: 4px;
line-height: 0;
i {
font-size: 8px;
}
}
.red-ui-treeList-label:not(:hover) &.red-ui-info-outline-item-hover-controls {

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

@ -239,6 +239,7 @@
--red-ui-deploy-button-color: #{colors.$deploy-button-color};
--red-ui-deploy-button-color-active: #{colors.$deploy-button-color-active};
--red-ui-deploy-button-color-disabled: #{colors.$deploy-button-color-disabled};
--red-ui-deploy-button-border-color: #{colors.$deploy-button-border-color};
--red-ui-deploy-button-background: #{colors.$deploy-button-background};
--red-ui-deploy-button-background-hover: #{colors.$deploy-button-background-hover};
--red-ui-deploy-button-background-active: #{colors.$deploy-button-background-active};
@ -249,6 +250,7 @@
--red-ui-header-background: #{colors.$header-background};
--red-ui-header-accent: #{colors.$header-accent};
--red-ui-header-button-background-active: #{colors.$header-button-background-active};
--red-ui-header-button-border: #{colors.$header-button-border};
--red-ui-header-menu-color: #{colors.$header-menu-color};
--red-ui-header-menu-color-disabled: #{colors.$header-menu-color-disabled};
--red-ui-header-menu-heading-color: #{colors.$header-menu-heading-color};