109 lines
3.3 KiB
Plaintext
Executable File
109 lines
3.3 KiB
Plaintext
Executable File
// /**
|
|
// * Copyright © Magento, Inc. All rights reserved.
|
|
// * See COPYING.txt for license details.
|
|
// */
|
|
|
|
// # Responsive
|
|
// Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of <span style="white-space: nowrap"><code>.media-width()</code></span> mixin defined anywhere in project but invoked in one place in <span style="white-space: nowrap"><code>lib/web/css/source/lib/_responsive.less</code></span>. That's why in the resulting <code>styles.css</code> we have every media query only once with all the rules there, not a multiple calls for the same query.
|
|
//
|
|
// To see the media queries work resize window to understand which breakpoint is applied.
|
|
// ```
|
|
// <div class="example-responsive-block">
|
|
// are applied.
|
|
// </div>
|
|
// ```
|
|
|
|
.example-responsive-block {
|
|
padding: 10px;
|
|
}
|
|
|
|
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
|
|
.example-responsive-block {
|
|
background: #ffc;
|
|
}
|
|
.example-responsive-block:before {
|
|
content: 'Mobile styles ';
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
|
|
.example-responsive-block {
|
|
background: #ccf;
|
|
}
|
|
.example-responsive-block:before {
|
|
content: 'Desktop styles ';
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// # Responsive mixins usage
|
|
//
|
|
// For grouping style rules in certain media queries .media-width() mixin used.
|
|
// ```css
|
|
// .media-width(<@extremum>, <@break>);
|
|
// ```
|
|
// <span style="white-space: nowrap"><code>@extremum: max|min</code></span> - sets whether to use **min-width** or **max-width** in media query condition<br />
|
|
// <span style="white-space: nowrap"><code>@break: value</code></span> - sets the value of breakpoint to compare with in media query condition.<br />
|
|
// For example
|
|
// ```css
|
|
// .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
|
|
// your styles
|
|
// }
|
|
// ```
|
|
// It will be complied to
|
|
// ```css
|
|
// @media only screen and (max-width: 640px) {
|
|
// your styles
|
|
// }
|
|
// ```
|
|
//
|
|
//
|
|
// # Media query style groups separation variables
|
|
//
|
|
// <code>@media-common: true|false</code> - sets whether to output common styles.
|
|
// For common styles every time you want to add some styles you should use
|
|
// ```css
|
|
// & when (@media-common = true) {
|
|
// your styles
|
|
// }
|
|
// ```
|
|
//
|
|
// <code>@media-target: all|desktop|mobile</code> - Sets target device for styles output
|
|
// ```css
|
|
// & when (@media-target = 'mobile'),
|
|
// (@media-target = 'all') {
|
|
// @media only screen and (max-width: (@screen__xs - 1)) {
|
|
// .media-width('max', @screen__xs);
|
|
// }
|
|
// }
|
|
// ```
|
|
//
|
|
// ## Gathering
|
|
//
|
|
// Everything that you include in collector mixins above will go in place where they declared.
|
|
// As example all
|
|
// ```css
|
|
// .media-width(@extremum, @break) {
|
|
// your code
|
|
// }
|
|
// ```
|
|
// Will go to
|
|
// ```css
|
|
// .media-width(@extremum, @break));
|
|
// ```
|
|
// By default you can find it <code>_responsive.less</code> file in li
|
|
//
|
|
//
|
|
// # Responsive breakpoints
|
|
// In Magento UI library there are predefined variables for breakpoints.
|
|
// ```css
|
|
// @screen__xxs: 320px;
|
|
// @screen__xs: 480px;
|
|
// @screen__s: 640px;
|
|
// @screen__m: 768px;
|
|
// @screen__l: 1024px;
|
|
// @screen__xl: 1440px;
|
|
// ```
|
|
//
|