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

Styling changes in MetroTouch skin in Lightweight RenderMode for RadPanelBar, introduced with Q1 2016.1.225 SP1 release

0 Answers 120 Views
PanelBar
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 22 Mar 2016, 03:36 PM

Along with our long-term vision to achieve visual consistency among the build-in skins of our controls, the MetroTouch skin for RadPanelBar in Lightweight RenderMode has been improved with the Q1 2016.1.225 SP1 release.

The changes implemented are as follows:

  • The foreground color of the items has been changed to darker gray;
  • The padding of items has been changed;
  • The indent of items has been changed;
  • Additional animated selection of items has been added, using CSS rules; 

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 RadPanelBar. 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 .RadPanelBar_MetroTouch {
    color: #767676;
    font-size: 16px;
}
 
html .RadPanelBar_MetroTouch .rpLink {
    padding: 0 16px;
}
 
html .RadPanelBar_MetroTouch .rpGroup .rpLink {
    padding-top: 4px;
    padding-bottom: 4px;
    border: 1px solid transparent;
}
 
html .RadPanelBar_MetroTouch .rpRootLink {
    color: inherit;
    padding-top: 5px;
    padding-bottom: 4px;
    font-size: 1.375em;
    line-height: 2em;
}
 
html .RadPanelBar_MetroTouch .rpLevel1 .rpLink {
    line-height: 1.25em;
}
 
html .RadPanelBar .rpLevel2 .rpLink {
    padding-left: 2em;
}
 
html .RadPanelBar .rpLevel3 .rpLink {
    padding-left: 3em;
}
 
html .RadPanelBar_MetroTouch .rpLink .rpHovered {
    background-color: transparent;
    border-color: transparent;
}

Tags
PanelBar
Asked by
Telerik Admin
Top achievements
Rank 1
Iron
Share this question
or