Tabs and accordions

To set up tabs and accordions Magento UI library provides 2 types of mixins: .lib-data-tabsbase() and .lib-data-accordionbase(). These mixins reset markup elements default styles and add minimal required css setup to make these elements work properly.

Tabs

The .lib-data-tabs() mixin is used to setup tabs parameters.

.example-sections-1 {
    .lib-data-tabs();
}

Tabs mixin variables

    
Mixin variable Global variable Default value Allowed values Comment
@_tab-control-font-family @tab-control__font-family false '' | false | value Tabs font family
@_tab-control-font-size @tab-control__font-size @font-size__base '' | false | value Tabs font size
@_tab-control-font-weight @tab-control__font-weight @font-weight__semibold '' | false | value Tabs font weight
@_tab-control-font-style @tab-control__font-style false '' | false | value Tabs font style
@_tab-control-line-height @tab-control__line-height @tab-control__height '' | false | value Tabs line height
Tabs controls settings
@_tab-control-background-color @tab-control__background-color @panel__background-color '' | false | value Current tab background
@_tab-control-color @tab-control__color @link__color '' | false | value Current tab text color
@_tab-control-text-decoration @tab-control__text-decoration none '' | false | value Current tab text-decoration
@_tab-control-background-color-hover @tab-control__hover__background-color lighten(@tab-control__background-color, 5%) '' | false | value Hovered tab background
@_tab-control-color-visited @tab-control__color @text__color__muted '' | false | value Visited tab color
@_tab-control-text-decoration-visited @tab-control__color '' | false | value Visited tab text-decoration
@_tab-control-color-hover @tab-control__hover__color @tab-control__color '' | false | value Hovered tab text color
@_tab-control-text-decoration-hover @tab-control__text-decoration @tab-control__text-decoration '' | false | value Hovered tab text-decoration
@_tab-control-background-color-active @tab-control__active__background-color lighten(@tab-control__background-color, 15%) '' | false | value Active tab background
@_tab-control-color-active @tab-control__active__color @text__color '' | false | value Active tab text color
@_tab-control-text-decoration-active @tab-control__text-decoration @tab-control__text-decoration '' | false | value Active tab text-decoration
@_tab-control-height @tab-control__height @indent__l '' | false | value Height of tab control
@_tab-control-margin-right @tab-control__margin-right @indent__xs '' | false | value Right margin of tab title block
@_tab-control-padding-top @tab-control__padding-top @indent__xs '' | false | value Tab control padding top
@_tab-control-padding-right @tab-control__padding-right @indent__base '' | false | value Tab control padding right
@_tab-control-padding-bottom @tab-control__padding-bottom @tab-control__padding-bottom '' | false | value Tab control padding bottom
@_tab-control-padding-left @tab-control__padding-left @tab-control__padding-left '' | false | value Tab control padding left
@_tab-control-border-width @tab-control__border-width @border-width__base '' | false | value Tab control border width
@_tab-control-border-color @tab-control__border-color @border-color__base '' | false | value Tab control border color
Tab content settings
@_tab-content-background-color @tab-content__background-color @tab-control__active__background-color '' | false | value Tab content background
@_tab-content-border-top-status @tab-content__border-top-status false true | false Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders
@_tab-content-border @tab-content__border @tab-control__border-width solid @tab-control__border-color '' | false | value Tab content border
@_tab-content-margin-top @tab-content__margin-top @tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom '' | false | value Tab content top margin (it is the sum of tabs height and top border width)
@_tab-content-padding-top @tab-content__padding-top @indent__base '' | false | value Tab content padding
@_tab-content-padding-right @tab-content__padding-right @indent__base '' | false | value Tab content padding
@_tab-content-padding-bottom @tab-content__padding-bottom @tab-content__padding-top '' | false | value Tab content padding
@_tab-content-padding-left @tab-content__padding-left @tab-content__padding-right '' | false | value Tab content padding

Tabs with content top border

To set up tabs with only top content border use variable:

  @_tab-content-border: true
.example-sections-2 {
    .lib-data-tabs(
        @_tab-content-border-top-status: true
    );
}

Accordion

The .lib-data-accordion() mixin is used to setup accordion parameters. Accordion has the same markup as tabs.

.example-sections-3 {
    .lib-data-accordion();
}

Accordion mixin variables

    
Mixin variable Global variable Default value Allowed values Comment
@_accordion-control-font-family @accordion-control__font-family @tab-control__font-family '' | false | value Accordion font family
@_accordion-control-font-size @accordion-control__font-size @font-size__l '' | false | value Accordion font size
@_accordion-control-font-style @accordion-control__font-style @tab-control__font-style '' | false | value Accordion font style
@_accordion-control-font-weight @accordion-control__font-weight @tab-control__font-weight '' | false | value Accordion font weight
@_accordion-control-line-height @accordion-control__line-height @accordion-control__height '' | false | value Accordion line height
Accordion tabs controls settings
@_accordion-control-border-top @accordion-control__border-top @tab-control__border-width solid @tab-control__border-color '' | false | value Accordion control border
@_accordion-control-border-right @accordion-control__border-right @tab-control__border-width solid @tab-control__border-color '' | false | value Accordion control border
@_accordion-control-border-bottom @accordion-control__border-bottom @tab-control__border-width solid @tab-control__border-color '' | false | value Accordion control border
@_accordion-control-border-left @accordion-control__border-left @tab-control__border-width solid @tab-control__border-color '' | false | value Accordion control border
@_accordion-control-background-color @accordion-control__background-color @tab-control__background-color '' | false | value Accordion control background
@_accordion-control-color @accordion-control__color @tab-control__color '' | false | value Accordion control color
@_accordion-control-text-decoration @accordion-control__text-decoration @tab-control__text-decoration '' | false | value Accordion control text decoration
@_accordion-control-color-visited @accordion-control__color @accordion-control__color '' | false | value Accordion control visited link color
@_accordion-control-text-decoration-visited @accordion-control__text-decoration @accordion-control__text-decoration '' | false | value Accordion control visited link text-decoration
@_accordion-control-background-color-hover @accordion-control__hover__background-color @tab-control__hover__background-color '' | false | value Hovered accordion control background
@_accordion-control-color-hover @accordion-control__hover__color @tab-control__hover__color '' | false | value Hovered accordion control text color
@_accordion-control-text-decoration-hover @accordion-control__hover__text-decoration @tab-control__hover__text-decoration '' | false | value Hovered accordion control text-decoration
@_accordion-control-background-color-active @accordion-control__active__background-color @tab-control__active__background-color '' | false | value Active accordion control background
@_accordion-control-color-active @accordion-control__active__color @tab-control__active__color '' | false | value Active accordion control text color
@_accordion-control-text-decoration-active @accordion-control__active__text-decoration @tab-control__active__text-decoration '' | false | value Active accordion control text-decoration
@_accordion-control-height @accordion-control__height @indent__xl '' | false | value Height of accordion control
@_accordion-control-margin-bottom @accordion-control__margin-bottom @indent__xs '' | false | value Bottom margin of the accordion control
@_accordion-control-padding-top @accordion-control__padding-top @tab-control__padding-top '' | false | value Accordion tab control padding top
@_accordion-control-padding-right @accordion-control__padding-right @indent__base '' | false | value Accordion tab control padding right
@_accordion-control-padding-bottom @accordion-control__padding-bottom @tab-control__padding-bottom '' | false | value Accordion tab control padding bottom
@_accordion-control-padding-left @accordion-control__padding-left @accordion-control__padding-right '' | false | value Accordion tab control padding left
Accordion content settings
@_accordion-content-background-color @accordion-content__background-color @tab-control__active__background-color '' | false | value Accordion tab content background
@_accordion-content-border @accordion-content__border @tab-content__border '' | false | value Accordion tab content border
@_accordion-content-margin @accordion-content__margin 0 0 @indent__xs '' | false | value Accordion tab content margin
@_accordion-content-padding @accordion-content__padding @tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left '' | false | value Accordion tab content padding

Responsive tabs

Since tabs and accordion have same markup, they can transform one into other by means of CSS and JavaScript. This can be used for responsive web design. For instance, for mobile version there is an accordion, for desktop version it is transformed to tabs. To implement this approach, use the .lib-data-accordion() mixin for mobile version, and the .lib-data-tabs() mixin for desktop version.

@media only screen and (max-width: 99999px) {
    .example-sections-4 {
        .lib-data-tabs();
    }
}

@media only screen and (max-width: @screen__m) {
    .example-sections-4 {
        .lib-data-accordion();
    }
}

Tabs Base

The .lib-data-tabs__base() mixin sets basic tabs styles.

.example-sections-5 {
    .lib-data-tabs__base();
}

Accordion Base

The .lib-data-accordion__base() mixin sets basic accordion styles. Data accordion uses the same markup as data tabs.

.example-sections-6 {
    .lib-data-accordion__base();
}