This is a migrated thread and some comments may be shown as answers.

Styling changes in Metro and MetroTouch skins in Lightweight RenderMode for RadMenu, introduced with Q1 2016.1.225 SP1 release

0 Answers 352 Views
Menu
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Telerik Admin
Top achievements
Rank 1
Iron
Telerik Admin asked on 14 Mar 2016, 11:46 AM
Along with our long-term vision to achieve visual consistency among the build-in skins of our controls, the Metro and MetroTouch skins for RadMenu in Lightweight RenderMode have been improved with the Q1 2016.1.225 SP1 release.

The changes implemented are as follows:
  • The background and the border colors of the root group of items have been changed from blue to gray;
  • The foreground color of the items has been changed from white to dark-gray;
  • The left border color of the menu items has been changed from light-blue to gray;
  • The borders of the root links inside menu items have been removed;
  • The line-height of the root links has been removed. Top and bottom padding has been added on its place (this change is valid only for MetroTouch skin);
  • Background and foreground colors have been added to the root link on hover;

In addition to the above, the predefined font for almost all skins has been removed.

In some cases, these changes could result in undesired change of look and feel of the RadMenu. In order to revert back the styling of the control to its MetroTouch look from before the Q1 2016.1.225 SP1 release, one could apply the following CSS rules:
html .RadMenu_MetroTouch {
    font-weight: 100;
    font-size: 16px;
}
 
html .RadMenu_MetroTouch .rmRootGroup {
    border-color: #25a0da;
    background-color: #25a0da;
    color: #FFF;
}
 
html .RadMenu_MetroTouch .rmRootGroup .rmItem {
    border-color: #51b3e1;
}
 
html .RadMenu_MetroTouch .rmRootGroup .rmRootLink {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 2.125em;
    border: 1px solid transparent;
}
 
html .RadMenu_MetroTouch .rmRootGroup .rmRootLink:hover {
    background-color: transparent;
    color: #FFF;
    border-color: #92cfec;
}
 
html .RadMenu_MetroTouch .rmRootGroup .rmFocused > .rmRootLink {
    border: 1px solid #92cfec;
}
 
html .RadMenu_MetroTouch .rmRootGroup .rmSelected > .rmRootLink,
html .RadMenu_MetroTouch .rmRootGroup .rmExpanded > .rmRootLink {
    border: 1px solid white;
}

The styles that could be applied to menus using Metro skin are:
html .RadMenu_Metro {
    font-size: 16px;
}
 
html .RadMenu_Metro .rmRootGroup {
    border-color: #25a0da;
    background-color: #25a0da;
    color: #FFF;
}
 
html .RadMenu_Metro .rmRootGroup .rmItem {
    border-color: #51b3e1;
}
 
html .RadMenu_Metro .rmRootGroup .rmRootLink {
    border: 1px solid transparent;
}
 
html .RadMenu_Metro .rmRootGroup .rmRootLink:hover {
    background-color: transparent;
    color: #FFF;
    border-color: #92cfec;
}
 
html .RadMenu_Metro .rmRootGroup .rmFocused > .rmRootLink {
    border: 1px solid #92cfec;
}
 
html .RadMenu_Metro .rmRootGroup .rmSelected > .rmRootLink,
html .RadMenu_Metro .rmRootGroup .rmExpanded > .rmRootLink {
    border: 1px solid white;
}
Tags
Menu
Asked by
Telerik Admin
Top achievements
Rank 1
Iron
Share this question
or