Style changes in PanelMenu and icons

Radzen.Blazor Components
1

Had a compact panelmenu but after the last update the line height got taller for the first level menu items. Tried to play with the line-height var(--rz-panel-menu-item-line-height) with no effect.
Also looks like the icons went from filled to outlined.

Any suggestion of how to get the same effect in line height and icons ? These are the old and new menus side by side.

image
image852×909 67.8 KB

2

Hi @PMart,

In Radzen.Blazor v5.0 we've remapped the CSS variables for margin, padding, color and background color to match the respective PanelMenu item level (see changelog).

You need to also adjust --rz-panel-menu-item-padding-block and --rz-panel-menu-item-padding-inline to get to the desired sizing.

Yes, we've replaced the Material Icons font with the new Material Symbols variable font.

You can apply the following CSS to use the filled icons:

.rz-panel-menu .rz-navigation-item-icon {
    font-variation-settings: 'FILL' 1;
}

If you insist on using the old icons you need to load the old Material Icons font on your own. See Using RadzenIcon with other icon fonts in the demos.

3

(--rz-panel-menu-item-padding-block) set to 4px solved the height problem, previously I was trying to adjust (--rz-panel-menu-item-padding) and (--rz-panel-menu-item-line-height) with no effect.

I will stick to the new icons.

Thanks for the prompt response as always.

4

One more question regarding the style changes. I had custom colors for the notification service messages, in site.css:

.rz-growl-message-success .rz-growl-item {
background-color: lightgray;
color: darkblue !important;
}

According to the changelog, "rz-growl" variables are renamed to "rz-notification", so the new code should be:

.rz-notification-message-success .rz-notification-item {
background-color: lightgray;
color: darkblue !important;
}

But now I don't get the custom colors, maybe some other variable needs to be changed now ?

5

Hi @PMart,

Should be:

.rz-notification-success .rz-notification-item {
    background-color: lightgray;
    color: darkblue !important;
}

I'd also advise you to use the CSS variables instead so that your styling does not depend on the markup, for example:

.rz-notification {
    --rz-notification-success-color: darkblue;
    --rz-notification-success-icon-color: darkblue;
    --rz-notification-success-background-color: lightgray;
}
6

Excellent, thanks again.