_responsive.less 1.67 KB
Newer Older
Ketan's avatar
Ketan committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Media variables, that can be used for splitting styles into several files
//  _____________________________________________

//  Sets whether to output common styles (true|false)
@media-common: true;
//  Sets target device for styles output ('all' | 'desktop' | 'mobile')
@media-target: 'all';

//
//  Media width mixin used to group styles output based on media queries
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
}

//
//  Style groups for 'mobile' devices
//  _____________________________________________

& when (@media-target = 'desktop'),
(@media-target = 'all') {
    @media all and (max-width: (@screen__l - 1)) {
        .media-width('max', @screen__l);
    }

    @media all and (min-width: @screen__m) {
        .media-width('min', @screen__m);
    }

    @media all and (min-width: @screen__l) {
        .media-width('min', @screen__l);
    }

    @media all and (min-width: @screen__xl) {
        .media-width('min', @screen__xl);
    }
}

//
//  Style groups for 'desktop' devices
//  _____________________________________________

& when (@media-target = 'mobile'),
(@media-target = 'all') {
    @media all and (min-width: @screen__s) {
        .media-width('min', @screen__s);
    }

    @media all and (max-width: (@screen__m - 1)) {
        .media-width('max', @screen__m);
    }

    @media all and (max-width: (@screen__s - 1)) {
        .media-width('max', @screen__s);
    }

    @media all and (max-width: (@screen__xs - 1)) {
        .media-width('max', @screen__xs);
    }
}