metro4/less/sizing.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

.w-auto {width: auto!important;}
.h-auto {height: auto!important;}

each(@mediaBreakpointListMobile, {
    .w-@{value} {width: @@value!important;}
})

each(@percents, {
    .h-vh-@{value} {height: unit(@value, vh)!important;}
    .h-vw-@{value} {height: unit(@value, vw)!important;}
    .w-vh-@{value} {width: unit(@value, vh)!important;}
    .w-vw-@{value} {width: unit(@value, vw)!important;}
    .h-@{value} {height: unit(@value, %)!important;}
    .w-@{value} {width: unit(@value, %)!important;}
    .mh-@{value} {max-height: unit(@value, %)!important;}
    .mw-@{value} {max-width: unit(@value, %)!important;}
})

each(@mediaBreakpointListMobile, .(@m) {
    @media screen and (min-width: @@m) {

        .w-auto-@{m} {width: auto!important;}
        .h-auto-@{m} {width: auto!important;}


        each(@percents, .(@p) {
            .h-vh-@{p}-@{m} {height: unit(@p, vh)!important;}
            .h-vw-@{p}-@{m} {height: unit(@p, vw)!important;}
            .w-vh-@{p}-@{m} {width: unit(@p, vh)!important;}
            .w-vw-@{p}-@{m} {width: unit(@p, vw)!important;}
            .h-@{p}-@{m} {height: unit(@p, %)!important;}
            .w-@{p}-@{m} {width: unit(@p, %)!important;}
            .mh-@{p}-@{m} {max-height: unit(@p, %)!important;}
            .mw-@{p}-@{m} {max-width: unit(@p, %)!important;}
        })
    }
})