0

I want to restyle the tab widget. Remove the Tab borders etc. so that the content looks as it were not in tabs.

I try to use to overwrite the web/css/source/lib/_sections.less but don't understand the logic behind the less file.

For instance there is a variable for the text decoration of the active tab:

@_tab-control-text-decoration-active: @tab-control__active__text-decoration,

I want the active tab to have an border-bottom: 3px solid black. If I look for the content of the variable in the Magento sources I found no occurrence where this variable get's a css value.

I read about the .lib-css mixin, which can be used to set a css style, but I want more than one style to be applied.

Another thing is, that I can't find where I can set the value for the max-width of a tab. I am using this right now (which works) but it would be better to find the less source to modify.

    [data-role="collapsible"][role="tab"]{
    max-width: 35%!important;
}

The magento UI library docs says, that those variables can have values like '' | false | value but there are no examples what a value looks like. Is the value a css class or a single value like a color?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.