Description
There are couple of issues when trying to use mixins for "tabs" and "accordion" components.
The issue is related to lib/web/css/source/lib/_sections.less.
The default variables are predefined in lib/web/css/source/lib/variables/_sections.less.
Summary (*)
When you try to customize the view of "tabs" and "accordion" components by redefining the default variables in the scope of a custom theme, the following issues appear:
- The text color for active "accordion" control is not applied.
- The text-decoration for active control is not working for both "accordion" and "tabs" components.
- There are also incorrectly defined default variables for mixins. (e.g. accordion control visited and tab control hover variables etc.).
Examples (*)
Let's try to define the following variables in the scope of a custom theme.
@tab-control__active__background-color: yellow;
@tab-control__active__color: red;
@tab-control__active__text-decoration: underline;
Assuming that those variables are not defined elsewhere (in the scope of current or parent theme) except the default lib variables file lib/web/css/source/lib/variables/_sections.less.
Expected Result
There are red color, yellow background and underline text decoration applied for both accordion and tabs active controls.
Actual Result
The red color is not applied accordion active controls.
The underline text decoration is not apllied for both accordion and tabs active controls.
Proposed solution
Add missing rules to lib/web/css/source/lib/_sections.less and change the default variable names to the correct ones.