newsupernova/lib/web/css/docs/source/_layout.less

// /**
//  * 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
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Variables list names</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowable values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@layout__width</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page minimum width</td>
//        </tr>
//        <tr>
//            <th>@layout__max-width</th>
//            <td class="vars_value">1280px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page maximum width</td>
//        </tr>
//        <tr>
//            <th>@layout-indent__width</th>
//            <td class="vars_value">20px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page indents on the left and right</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Class names defining different layouts</th>
//        </tr>
//        <tr>
//            <th>@layout-class-1column</th>
//            <td class="vars_value">page-layout-1column</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for one column layout</td>
//        </tr>
//        <tr>
//            <th>@layout-class-2columns__left</th>
//            <td class="vars_value">page-layout-2columns-left</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for two columns layout with left sidebar</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@layout-class-2columns__right</th>
//            <td class="vars_value">page-layout-2columns-right</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for two columns layout with right sidebar</td>
//        </tr>
//        <tr>
//            <th>@layout-class-3columns</th>
//            <td class="vars_value">page-layout-3columns</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for three columns layout with left sidebar</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Variables used for layout grid</th>
//        </tr>
//        <tr>
//            <th>@total-columns</th>
//            <td class="vars_value">12</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td>
//        </tr>
//        <tr>
//            <th>@gutter-width</th>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Distance between columns</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Variables for layout columns</th>
//        </tr>
//        <tr>
//            <th>@layout-column__width</th>
//            <td class="vars_value">@total-columns</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets base columns number</td>
//        </tr>
//        <tr>
//            <th>@layout-column__sidebar-width</th>
//            <td class="vars_value">2</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets sidebar width</td>
//        </tr>
//        <tr>
//            <th>@layout-column__left-width</th>
//            <td class="vars_value">@layout-column__sidebar-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets left column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column__right-width</th>
//            <td class="vars_value">@layout-column__sidebar-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets right column width</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Variables for layout columns depending on layout used</th>
//        </tr>
//        <tr>
//            <th>@layout-column-main__width-1</th>
//            <td class="vars_value">100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets one column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-main__width-2-left</th>
//            <td class="vars_value">@layout-column__width - @layout-column__left-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets left column width</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@layout-column-main__width-2-right</th>
//            <td class="vars_value">@layout-column__width - @layout-column__right-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets right column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-main__width-3</th>
//            <td class="vars_value">@layout-column__width - @layout-column__left-width - @layout-column__right-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets three columns layout main column width</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Settings variables</th>
//        </tr>
//        <tr>
//            <th>@use-flex</th>
//            <td class="vars_value">true</td>
//            <td class="vars_value">'' | true | false</td>
//            <td>Sets compatibility for browsers not supporting flex</td>
//        </tr>
//        <tr>
//            <th>@responsive</th>
//            <td class="vars_value">true</td>
//            <td class="vars_value">'' | true | false</td>
//            <td>Is set to true if theme has responsive layout</td>
//        </tr>
//    </table>
//  </pre>

//  # Page layouts
//
//  Default properties for page columns are generated using alias mixins:
//
//  <code>#lib-layout-columns</code> - sets columns container
//
//  <code>#lib-layout-columns > .main()</code> - alias for main column
//
//  <code>#lib-layout-columns > .left()</code> - alias for left column
//
//  <code>#lib-layout-columns > .right()</code> - alias for right column
//
//  <code>#lib-layout-columns > .reset()</code> - column width and order reset may be used in RWD
//
//  These aliases use default class names for layouts predefined in vars (i.e. <code>@layout-class-3columns: layout-3</code>) and general column mixin *[<code>.lib-layout-column()</code>](#layout-column)*
//
//  ## Three columns page layout
//
//  ```html
//  <div class="page-wrapper layout-3">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div><!--
//         --><div class="column left sidebar">Left column</div><!--
//         --><div class="column right sidebar">Right column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  ## Two columns page layout with sidebar on the left
//  ```html
//  <div class="page-wrapper layout-2-left">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div><!--
//         --><div class="column left sidebar">Left column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  ## Two columns page layout with sidebar on the right
//
//  ```html
//  <div class="page-wrapper layout-2-right">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div><!--
//         --><div class="column right sidebar">Right column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  ## One column page layout
//
//  ```html
//  <div class="page-wrapper layout-1">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```

.columns {
    #lib-layout-columns();
    > .column {
        &:extend(.add-box-sizing all);
        .lib-css(padding-bottom, @indent__xl);
    }
}

@media (min-width: 600px) {
    .column.main {
        #lib-layout-columns > .main();
    }

    .column.left {
        #lib-layout-columns > .left();
    }

    .column.right {
        #lib-layout-columns > .right();
    }
}

// # Layout column
//
//  The <code>.layout-column()</code> mixin is used to setup page columns. It configures number, position and width of columns
//
//  3 columns layout example:
//
//  ```html
//  <div class="layout-example-3">
//      <header class="header">Header</header>
//      <section class="page main">
//          <div class="columns">
//              <div class="column main">Main column</div><!--
//           --><div class="column left sidebar">Left column</div><!--
//           --><div class="column right sidebar">Right column</div>
//          </div>
//      </section>
//      <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  To move main column to the left, change 2nd argument <code>@_order</code> for main and left columns:
//
//  ```less
//  .lib-column.main {
//      .lib-layout-column(3, 1, 60%);
//  }
//  .lib-column.left {
//      .lib-layout-column(3, 2, 20%);
//  }
//  ```
//
//  ```html
//  <div class="layout-example-3-1">
//      <header class="header">Header</header>
//      <section class="page main">
//          <div class="columns">
//              <div class="column main">Main column</div><!--
//           --><div class="column left sidebar">Left column</div><!--
//           --><div class="column right sidebar">Right column</div>
//          </div>
//      </section>
//      <footer class="footer">Footer</footer>
//  </div>
//  ```

.layout-example-3 {
    .column.main {
        .lib-layout-column(3, 2, 60%);
    }
    .column.left {
        .lib-layout-column(3, 1, 20%);
    }
    .column.right {
        .lib-layout-column(3, 3, 20%);
    }
}

.layout-example-3-1 {
    .column.main {
        .lib-layout-column(3, 1, 60%);
    }
    .column.left {
        .lib-layout-column(3, 2, 20%);
    }
    .column.right {
        .lib-layout-column(3, 3, 20%);
    }
}

//  # Layout column variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_layout__min-width </th>
//            <td class="vars_value">number</td>
//            <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td>
//        </tr>
//        <tr>
//            <th>@_order</th>
//            <td class="vars_value">number</td>
//            <td>Order of current column</td>
//        </tr>
//        <tr>
//            <th>@_width</th>
//            <td class="vars_value">number</td>
//            <td>Width set in css units (<em>20%, 300px, etc.</em>) or in <em>grid columns</em> if unit is not specified. (<em>4</em>)</td>
//        </tr>
//    </table>
//  </pre>


//  # Layout width
//
//  The <code>.lib-layout-width()</code> mixin is used to set default page width of the element the mixin is applied to. It can be used to set width for the whole page wrapper or for the page elements individualy like header, footer, and so on.

//  # Layout width variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_layout__min-width</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page minimum width</td>
//        </tr>
//        <tr>
//            <th>@_layout__max-width</th>
//            <td class="vars_value">1280px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page maximum width</td>
//        </tr>
//        <tr>
//            <th>@_layout__indent</th>
//            <td class="vars_value">20px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page indents on the left and right</td>
//        </tr>
//    </table>
//  </pre>