.example-sections-1 {
.lib-data-tabs();
}
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 |
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
);
}
The .lib-data-accordion()
mixin is used to setup accordion parameters. Accordion has the same markup as tabs.
.example-sections-3 {
.lib-data-accordion();
}
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 |
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();
}
}
.example-sections-5 {
.lib-data-tabs__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();
}