0

I want to change the expand / collapse icons of the product tab from @icon-up / @icon-down to @icon-expand / @icon-collapse (mobile view). I changed the mage-init and added the icons options like written in the docs. The new icons just got added as a span, but they did not replace the up/down icons. After that I looked for the classed in my _extend.less and _theme.less (luma) but the only thing I found was a class named .abs-toggling-title which is not used by the tabs. I don't understand why the tabs are not overwritten.

 <div class="product data items the-grid-pda-col-1"
         data-mage-init='
         {
            "tabs":{
                "openedState":"active",
                "active":"false",
                "icons": {
                    "header": "ico-expand",
                    "activeHeader": "ico-collapse"
                    }
            }
         }
        '
    >

The ico-expand and ico-collapse in mage-init are classes which are adding a svg via the icon lib.

2 Answers 2

0

actually it was pretty easy. The css is located in css/source/_sections.less.

I just had to change the corresponding icon libs in common and it worked.

0

you can edit your less like this:

.product{
&.detailed{
    .items{
        .title{
            &:after{
                content:'down-arrow';
            }
            &.active{
                &:after{
                    content:'up-arrow';
                }
            }
        }
    }
 }
}
1
  • Select code and use Ctrl+k for code format @Mark Henry Dec 25, 2019 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.