123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- // /**
- // * Copyright © Magento, Inc. All rights reserved.
- // * See COPYING.txt for license details.
- // */
- @layout-column-main__sidebar-offset: 2%;
- @layout-column__additional-sidebar-offset: @layout-column-main__sidebar-offset;
- //
- // Common
- // _____________________________________________
- & when (@media-common = true) {
- .columns {
- #lib-layout-columns();
- .column.main {
- &:extend(.abs-add-box-sizing all);
- .lib-css(padding-bottom, @indent__xl);
- .lib-vendor-prefix-flex-basis(100%);
- .lib-vendor-prefix-flex-grow(1);
- .lib-vendor-prefix-order(1);
- width: 100%;
- }
- .sidebar-main {
- &:extend(.abs-add-box-sizing all);
- .lib-vendor-prefix-flex-grow(1);
- .lib-vendor-prefix-flex-basis(100%);
- .lib-vendor-prefix-order(1);
- }
- .sidebar-additional {
- &:extend(.abs-add-box-sizing all);
- .lib-vendor-prefix-flex-grow(1);
- .lib-vendor-prefix-flex-basis(100%);
- .lib-vendor-prefix-order(2);
- }
- }
- }
- //
- // Mobile
- // _____________________________________________
- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
- .navigation,
- .breadcrumbs,
- .page-header .header.panel,
- .header.content,
- .footer.content,
- .page-main,
- .page-wrapper > .widget,
- .page-wrapper > .page-bottom,
- .block.category.event,
- .top-container {
- padding-left: @layout__width-xs-indent;
- padding-right: @layout__width-xs-indent;
- }
- .page-main {
- .account &,
- .cms-privacy-policy & {
- padding-top: 41px;
- position: relative;
- }
- }
- }
- //
- // Desktop
- // _____________________________________________
- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
- .navigation,
- .breadcrumbs,
- .page-header .header.panel,
- .header.content,
- .footer.content,
- .page-wrapper > .widget,
- .page-wrapper > .page-bottom,
- .block.category.event,
- .top-container,
- .page-main {
- box-sizing: border-box;
- margin-left: auto;
- margin-right: auto;
- max-width: @layout__max-width;
- padding-left: @layout-indent__width;
- padding-right: @layout-indent__width;
- width: auto;
- }
- .page-main {
- width: 100%;
- }
- .columns {
- display: block;
- }
- .column.main {
- #lib-layout-columns > .main();
- &:extend(.abs-add-box-sizing-desktop all);
- min-height: 300px;
- }
- .sidebar-main {
- #lib-layout-columns > .left();
- padding-right: @layout-column-main__sidebar-offset;
- &:extend(.abs-add-box-sizing-desktop all);
- }
- .page-layout-2columns-right .sidebar-main {
- padding-left: @layout-column-main__sidebar-offset;
- padding-right: 0;
- }
- .sidebar-additional {
- #lib-layout-columns > .right();
- clear: right;
- padding-left: @layout-column__additional-sidebar-offset;
- &:extend(.abs-add-box-sizing-desktop all);
- }
- .page-layout-2columns-left {
- .sidebar-additional {
- clear: left;
- float: left;
- padding-left: 0;
- padding-right: @layout-column__additional-sidebar-offset;
- }
- }
- .panel.header {
- padding: 10px 20px;
- }
- }
|