// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Sections
// _____________________________________________
.lib-data-tabs__base(@_tab-control-height__base: @tab-control__height__base) {
.lib-clearfix();
position: relative;
z-index: 1;
> .item.title {
float: left;
width: auto;
> .switch {
.lib-css(height, @_tab-control-height__base);
display: block;
position: relative;
z-index: 2;
}
}
> .item.content {
.lib-clearfix();
.lib-css(margin-top, @_tab-control-height__base);
box-sizing: border-box;
float: right;
margin-left: -100%;
width: 100%;
&.active {
display: block;
}
}
}
.lib-data-tabs(
@_tab-control-font-family: @tab-control__font-family,
@_tab-control-font-size: @tab-control__font-size,
@_tab-control-font-style: @tab-control__font-style,
@_tab-control-font-weight: @tab-control__font-weight,
@_tab-control-line-height: @tab-control__line-height,
@_tab-control-background-color: @tab-control__background-color,
@_tab-control-color: @tab-control__color,
@_tab-control-text-decoration: @tab-control__text-decoration,
@_tab-control-color-visited: @tab-control__visited__color,
@_tab-control-text-decoration-visited: @tab-control__visited__text-decoration,
@_tab-control-background-color-hover: @tab-control__hover__background-color,
@_tab-control-color-hover: @tab-control__hover__color,
@_tab-control-text-decoration-hover: @tab-control__hover__text-decoration,
@_tab-control-background-color-active: @tab-control__active__background-color,
@_tab-control-color-active: @tab-control__active__color,
@_tab-control-text-decoration-active: @tab-control__active__text-decoration,
@_tab-control-height: @tab-control__height,
@_tab-control-margin-right: @tab-control__margin-right,
@_tab-control-padding-top: @tab-control__padding-top,
@_tab-control-padding-right: @tab-control__padding-right,
@_tab-control-padding-bottom: @tab-control__padding-bottom,
@_tab-control-padding-left: @tab-control__padding-left,
@_tab-control-border-width: @tab-control__border-width,
@_tab-control-border-color: @tab-control__border-color,
@_tab-content-background-color: @tab-content__background-color,
@_tab-content-border: @tab-content__border,
@_tab-content-border-top-status: @tab-content__border-top-status,
@_tab-content-margin-top: @tab-content__margin-top,
@_tab-content-padding-top: @tab-content__padding-top,
@_tab-content-padding-right: @tab-content__padding-right,
@_tab-content-padding-bottom: @tab-content__padding-bottom,
@_tab-content-padding-left: @tab-content__padding-left
) {
.lib-data-tabs__base();
> .item.title {
.lib-css(margin, 0 @_tab-control-margin-right 0 0);
> .switch {
.lib-typography(
@_color: @_tab-control-color,
@_font-size: @_tab-control-font-size,
@_font-family: @_tab-control-font-family,
@_font-weight: @_tab-control-font-weight,
@_font-style: @_tab-control-font-style,
@_line-height: @_tab-control-line-height
);
.lib-link(
@_link-color: @_tab-control-color,
@_link-text-decoration: @_tab-control-text-decoration,
@_link-color-visited: @_tab-control-color-visited,
@_link-text-decoration-visited: @_tab-control-text-decoration-visited,
@_link-color-hover: @_tab-control-color-hover,
@_link-text-decoration-hover: @_tab-control-text-decoration-hover,
@_link-color-active: @_tab-control-color-active,
@_link-text-decoration-active: @_tab-control-text-decoration-active
);
.lib-css(background, @_tab-control-background-color);
.lib-css(border, @_tab-content-border);
border-bottom: none;
.lib-css(height, @_tab-control-height);
.lib-css(padding, @_tab-control-padding-top @_tab-control-padding-right @_tab-control-padding-bottom @_tab-control-padding-left);
}
&:not(.disabled) > .switch:focus,
&:not(.disabled) > .switch:hover {
.lib-css(background, @_tab-control-background-color-hover);
}
&:not(.disabled) > .switch:active,
&.active > .switch,
&.active > .switch:focus,
&.active > .switch:hover {
.lib-css(background, @_tab-control-background-color-active);
.lib-css(color, @_tab-control-color-active);
.lib-css(text-decoration, @_tab-control-text-decoration-active);
}
&.active > .switch,
&.active > .switch:focus,
&.active > .switch:hover {
.lib-css(padding-bottom, @_tab-control-padding-bottom + @_tab-control-border-width);
}
}
> .item.content {
.lib-css(background, @_tab-content-background-color);
margin-top: @_tab-content-margin-top;
padding: @_tab-content-padding-top @_tab-content-padding-right @_tab-content-padding-bottom @_tab-content-padding-left;
._lib-tab-content-border(
@_tab-content-border-top-status: @_tab-content-border-top-status,
@_tab-content-border: @_tab-content-border
);
}
}
._lib-tab-content-border(
@_tab-content-border-top-status,
@_tab-content-border
) when (@_tab-content-border-top-status = false){
.lib-css(border, @_tab-content-border);
}
._lib-tab-content-border(
@_tab-content-border-top-status,
@_tab-content-border
) when (@_tab-content-border-top-status = true){
border: 0;
.lib-css(border-top, @_tab-content-border);
}
.lib-data-accordion__base() {
margin: 0;
padding: 0;
> .item.title {
box-sizing: border-box;
float: none;
width: 100%;
> .switch {
display: block;
}
}
> .item.content {
.lib-clearfix();
box-sizing: border-box;
display: block;
float: none;
margin: 0;
&.active {
display: block;
}
}
}
.lib-data-accordion(
@_accordion-control-font-family: @accordion-control__font-family,
@_accordion-control-font-size: @accordion-control__font-size,
@_accordion-control-font-style: @accordion-control__font-style,
@_accordion-control-font-weight: @accordion-control__font-weight,
@_accordion-control-line-height: @accordion-control__line-height,
@_accordion-control-border-top: @accordion-control__border-top,
@_accordion-control-border-right: @accordion-control__border-right,
@_accordion-control-border-bottom: @accordion-control__border-bottom,
@_accordion-control-border-left: @accordion-control__border-left,
@_accordion-control-background-color: @accordion-control__background-color,
@_accordion-control-color: @accordion-control__color,
@_accordion-control-text-decoration: @accordion-control__text-decoration,
@_accordion-control-color-visited: @accordion-control__visited__color,
@_accordion-control-text-decoration-visited: @accordion-control__visited__text-decoration,
@_accordion-control-background-color-hover: @accordion-control__hover__background-color,
@_accordion-control-color-hover: @accordion-control__hover__color,
@_accordion-control-text-decoration-hover: @accordion-control__hover__text-decoration,
@_accordion-control-background-color-active: @accordion-control__active__background-color,
@_accordion-control-color-active: @accordion-control__active__color,
@_accordion-control-text-decoration-active: @accordion-control__active__text-decoration,
@_accordion-control-height: @accordion-control__height,
@_accordion-control-margin-bottom: @accordion-control__margin-bottom,
@_accordion-control-padding-top: @accordion-control__padding-top,
@_accordion-control-padding-right: @accordion-control__padding-right,
@_accordion-control-padding-bottom: @accordion-control__padding-bottom,
@_accordion-control-padding-left: @accordion-control__padding-left,
@_accordion-content-background-color: @accordion-content__background-color,
@_accordion-content-border: @accordion-content__border,
@_accordion-content-margin: @accordion-content__margin,
@_accordion-content-padding: @accordion-content__padding
) {
.lib-data-accordion__base();
& when (@_accordion-control-margin-bottom = 0) {
> .item.title {
.lib-css(margin, 0);
}
}
& when not (@_accordion-control-margin-bottom = 0) {
> .item.title {
.lib-css(margin, 0 0 @_accordion-control-margin-bottom);
}
}
> .item.title {
> .switch {
.lib-css(background, @_accordion-control-background-color);
.lib-css(border-bottom,@_accordion-control-border-bottom);
.lib-css(border-left,@_accordion-control-border-left);
.lib-css(border-right,@_accordion-control-border-right);
.lib-css(border-top,@_accordion-control-border-top);
.lib-css(height, @_accordion-control-height);
.lib-css(padding, @_accordion-control-padding-top @_accordion-control-padding-right @_accordion-control-padding-bottom @_accordion-control-padding-left);
.lib-typography(
@_color: @_accordion-control-color,
@_font-family: @_accordion-control-font-family,
@_font-size: @_accordion-control-font-size,
@_font-style: @_accordion-control-font-style,
@_font-weight: @_accordion-control-font-weight,
@_line-height: @_accordion-control-line-height
);
.lib-link(
@_link-color: @_accordion-control-color,
@_link-text-decoration: @_accordion-control-text-decoration,
@_link-color-visited: @_accordion-control-color-visited,
@_link-text-decoration-visited: @_accordion-control-text-decoration-visited,
@_link-color-hover: @_accordion-control-color-hover,
@_link-text-decoration-hover: @_accordion-control-text-decoration-hover,
@_link-color-active: @_accordion-control-color-active,
@_link-text-decoration-active: @_accordion-control-text-decoration-active
);
}
&:not(.disabled) > .switch:focus,
&:not(.disabled) > .switch:hover {
.lib-css(background, @_accordion-control-background-color-hover);
}
&:not(.disabled) > .switch:active,
&.active > .switch,
&.active > .switch:focus,
&.active > .switch:hover {
.lib-css(background, @_accordion-control-background-color-active);
.lib-css(color, @_accordion-control-color-active);
.lib-css(text-decoration, @_accordion-control-text-decoration-active);
.lib-css(padding-bottom, @_accordion-control-padding-bottom);
}
}
> .item.content {
.lib-css(background, @_accordion-content-background-color);
.lib-css(border, @_accordion-content-border);
.lib-css(margin, @_accordion-content-margin);
.lib-css(padding, @_accordion-content-padding);
}
}
|