127 lines
3.7 KiB
Plaintext
Executable File
127 lines
3.7 KiB
Plaintext
Executable File
// /**
|
|
// * Copyright © Magento, Inc. All rights reserved.
|
|
// * See COPYING.txt for license details.
|
|
// */
|
|
|
|
//
|
|
// Layout
|
|
// _____________________________________________
|
|
|
|
// Page Width mixin
|
|
.lib-layout-width(
|
|
@_layout__min-width: @layout__min-width,
|
|
@_layout__max-width: @layout__max-width,
|
|
@_layout__indent: @layout-indent__width
|
|
) when not (@responsive = true) {
|
|
._lib-layout-width(@_layout__min-width, @_layout__max-width);
|
|
.lib-css(padding-left, @layout-indent__width);
|
|
.lib-css(padding-right, @layout-indent__width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
._lib-layout-width(
|
|
@_layout__min-width: @layout__min-width,
|
|
@_layout__max-width: @layout__max-width
|
|
) when (@_layout__min-width = @_layout__max-width) {
|
|
.lib-css(width, @_layout__min-width);
|
|
}
|
|
|
|
._lib-layout-width(
|
|
@_layout__min-width: @layout__min-width,
|
|
@_layout__max-width: @layout__max-width
|
|
) when not (@_layout__min-width = @_layout__max-width) {
|
|
.lib-css(max-width, @_layout__max-width);
|
|
.lib-css(min-width, @_layout__min-width);
|
|
width: auto;
|
|
}
|
|
|
|
#lib-layout-columns() {
|
|
& when (@use-flex = true) {
|
|
.lib-vendor-prefix-display(flex);
|
|
.lib-vendor-prefix-flex-wrap(wrap);
|
|
box-sizing: border-box;
|
|
};
|
|
&:after {
|
|
clear: both;
|
|
content: ' ';
|
|
display: block;
|
|
height: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
.main() {
|
|
.@{layout-class-1column} & {
|
|
.lib-layout-column(1, 2, 100%);
|
|
}
|
|
.@{layout-class-3columns} & {
|
|
.lib-layout-column(3, 2, @layout-column-main__width-3);
|
|
}
|
|
.@{layout-class-2columns__left} & {
|
|
.lib-layout-column(2, 2, @layout-column-main__width-2-left);
|
|
}
|
|
.@{layout-class-2columns__right} & {
|
|
.lib-layout-column(2, 1, @layout-column-main__width-2-right);
|
|
}
|
|
}
|
|
|
|
.left() {
|
|
.@{layout-class-3columns} & {
|
|
.lib-layout-column(3, 1, @layout-column__left-width);
|
|
}
|
|
.@{layout-class-2columns__left} & {
|
|
.lib-layout-column(2, 1, @layout-column__left-width);
|
|
}
|
|
.@{layout-class-2columns__right} & {
|
|
.lib-layout-column(2, 1, @layout-column__left-width);
|
|
}
|
|
}
|
|
|
|
.right() {
|
|
.@{layout-class-3columns} & {
|
|
.lib-layout-column(3, 3, @layout-column__right-width);
|
|
}
|
|
.@{layout-class-2columns__left} & {
|
|
.lib-layout-column(2, 2, @layout-column__right-width);
|
|
}
|
|
.@{layout-class-2columns__right} & {
|
|
.lib-layout-column(2, 2, @layout-column__right-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
._lib-column-width(@_width, @_check, @_index) when (@_check = false) and (@_index = 1) {
|
|
.lib-column-width(@_width);
|
|
}
|
|
|
|
._lib-column-width(@_width, @_check, @_index) when (@_check = true), (@_width = auto) {
|
|
.lib-css(width, @_width);
|
|
@_index: 1;
|
|
}
|
|
|
|
._lib-set-column-width(@_index, @_width) when (@_index > 0) {
|
|
@_checkUnit: isunit(@_width, extract(@_units, @_index));
|
|
._lib-column-width(@_width, @_checkUnit, @_index);
|
|
._lib-set-column-width(@_index - 1, @_width);
|
|
}
|
|
|
|
.lib-layout-column(@_total-columns, @_order, @_width) {
|
|
@_units: "px","%","em","rem","pt";
|
|
._lib-set-column-width(length(@_units), @_width);
|
|
.lib-flex-degradation(@_total-columns, @_order);
|
|
& when (@use-flex = true) {
|
|
.lib-vendor-prefix-order(@_order);
|
|
}
|
|
}
|
|
|
|
.lib-flex-degradation(@_total-columns, @_order) when (@_order = 1) {
|
|
float: left;
|
|
}
|
|
|
|
.lib-flex-degradation(@_total-columns, @_order) when (@_order = @_total-columns) {
|
|
float: right;
|
|
}
|
|
|
|
.lib-flex-degradation(@_total-columns, @_order) when (@_total-columns = 3) and (@_order = 2) {
|
|
display: inline-block;
|
|
}
|