// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Layout
//
// Magento UI library provides mixins for flexible page layout customization. For simple quick layout customization global layout variables are used.
header.header {
background-color: rgba(255, 0, 0, .2);
}
.column.main {
background-color: rgba(255, 255, 0, .2);
}
.column.left {
background-color: rgba(0, 255, 255, .2);
}
.column.right {
background-color: rgba(0, 0, 255, .2);
}
footer.footer {
background-color: rgba(0, 0, 0, .2);
}
// # Layout global variables
//
//
//
// Variables list names |
// Default value |
// Allowable values |
// Comment |
//
//
// @layout__width |
// '' |
// '' | false | value |
// Page minimum width |
//
//
// @layout__max-width |
// 1280px |
// '' | false | value |
// Page maximum width |
//
//
// @layout-indent__width |
// 20px |
// '' | false | value |
// Page indents on the left and right |
//
//
// Class names defining different layouts |
//
//
// @layout-class-1column |
// page-layout-1column |
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns |
// Class name for one column layout |
//
//
// @layout-class-2columns__left |
// page-layout-2columns-left |
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns |
// Class name for two columns layout with left sidebar |
//
//
// @layout-class-2columns__right |
// page-layout-2columns-right |
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns |
// Class name for two columns layout with right sidebar |
//
//
// @layout-class-3columns |
// page-layout-3columns |
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns |
// Class name for three columns layout with left sidebar |
//
//
// Variables used for layout grid |
//
//
// @total-columns |
// 12 |
// '' | false | value |
// Number of total columns in layout (i.e. 1, 2, 3) |
//
//
// @gutter-width |
// 0 |
// '' | false | value |
// Distance between columns |
//
//
// Variables for layout columns |
//
//
// @layout-column__width |
// @total-columns |
// '' | false | value |
// Sets base columns number |
//
//
// @layout-column__sidebar-width |
// 2 |
// '' | false | value |
// Sets sidebar width |
//
//
// @layout-column__left-width |
// @layout-column__sidebar-width |
// '' | false | value |
// Sets left column width |
//
//
// @layout-column__right-width |
// @layout-column__sidebar-width |
// '' | false | value |
// Sets right column width |
//
//
// Variables for layout columns depending on layout used |
//
//
// @layout-column-main__width-1 |
// 100% |
// '' | false | value |
// Sets one column width |
//
//
// @layout-column-main__width-2-left |
// @layout-column__width - @layout-column__left-width |
// '' | false | value |
// Sets left column width |
//
//
// @layout-column-main__width-2-right |
// @layout-column__width - @layout-column__right-width |
// '' | false | value |
// Sets right column width |
//
//
// @layout-column-main__width-3 |
// @layout-column__width - @layout-column__left-width - @layout-column__right-width |
// '' | false | value |
// Sets three columns layout main column width |
//
//
// Settings variables |
//
//
// @use-flex |
// true |
// '' | true | false |
// Sets compatibility for browsers not supporting flex |
//
//
// @responsive |
// true |
// '' | true | false |
// Is set to true if theme has responsive layout |
//
//
//
// # Page layouts
//
// Default properties for page columns are generated using alias mixins:
//
//