_layout.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. @layout-column-main__sidebar-offset: 2%;
  6. @layout-column__additional-sidebar-offset: @layout-column-main__sidebar-offset;
  7. //
  8. // Common
  9. // _____________________________________________
  10. & when (@media-common = true) {
  11. .columns {
  12. #lib-layout-columns();
  13. .column.main {
  14. &:extend(.abs-add-box-sizing all);
  15. .lib-css(padding-bottom, @indent__xl);
  16. .lib-vendor-prefix-flex-basis(100%);
  17. .lib-vendor-prefix-flex-grow(1);
  18. .lib-vendor-prefix-order(1);
  19. width: 100%;
  20. }
  21. .sidebar-main {
  22. &:extend(.abs-add-box-sizing all);
  23. .lib-vendor-prefix-flex-grow(1);
  24. .lib-vendor-prefix-flex-basis(100%);
  25. .lib-vendor-prefix-order(1);
  26. }
  27. .sidebar-additional {
  28. &:extend(.abs-add-box-sizing all);
  29. .lib-vendor-prefix-flex-grow(1);
  30. .lib-vendor-prefix-flex-basis(100%);
  31. .lib-vendor-prefix-order(2);
  32. }
  33. }
  34. }
  35. //
  36. // Mobile
  37. // _____________________________________________
  38. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  39. .navigation,
  40. .breadcrumbs,
  41. .page-header .header.panel,
  42. .header.content,
  43. .footer.content,
  44. .page-main,
  45. .page-wrapper > .widget,
  46. .page-wrapper > .page-bottom,
  47. .block.category.event,
  48. .top-container {
  49. padding-left: @layout__width-xs-indent;
  50. padding-right: @layout__width-xs-indent;
  51. }
  52. .page-main {
  53. .account &,
  54. .cms-privacy-policy & {
  55. padding-top: 41px;
  56. position: relative;
  57. }
  58. }
  59. }
  60. //
  61. // Desktop
  62. // _____________________________________________
  63. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  64. .navigation,
  65. .breadcrumbs,
  66. .page-header .header.panel,
  67. .header.content,
  68. .footer.content,
  69. .page-wrapper > .widget,
  70. .page-wrapper > .page-bottom,
  71. .block.category.event,
  72. .top-container,
  73. .page-main {
  74. box-sizing: border-box;
  75. margin-left: auto;
  76. margin-right: auto;
  77. max-width: @layout__max-width;
  78. padding-left: @layout-indent__width;
  79. padding-right: @layout-indent__width;
  80. width: auto;
  81. }
  82. .page-main {
  83. width: 100%;
  84. }
  85. .columns {
  86. display: block;
  87. }
  88. .column.main {
  89. #lib-layout-columns > .main();
  90. &:extend(.abs-add-box-sizing-desktop all);
  91. min-height: 300px;
  92. }
  93. .sidebar-main {
  94. #lib-layout-columns > .left();
  95. padding-right: @layout-column-main__sidebar-offset;
  96. &:extend(.abs-add-box-sizing-desktop all);
  97. }
  98. .page-layout-2columns-right .sidebar-main {
  99. padding-left: @layout-column-main__sidebar-offset;
  100. padding-right: 0;
  101. }
  102. .sidebar-additional {
  103. #lib-layout-columns > .right();
  104. clear: right;
  105. padding-left: @layout-column__additional-sidebar-offset;
  106. &:extend(.abs-add-box-sizing-desktop all);
  107. }
  108. .page-layout-2columns-left {
  109. .sidebar-additional {
  110. clear: left;
  111. float: left;
  112. padding-left: 0;
  113. padding-right: @layout-column__additional-sidebar-offset;
  114. }
  115. }
  116. .panel.header {
  117. padding: 10px 20px;
  118. }
  119. }