metro4/less/container.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";

.container, .container2, .container-fluid, section, header, footer, aside {
    .set-relative();
    .clear();
    margin: 0 auto;
}

.container, .container2 {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

.container-fluid {
    width: 100%;
    max-width: none;
    padding-right: 12px;
    padding-left: 12px;
}

section {

}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    .container2 {
        max-width: 90%;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container, .container2 {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container, .container2 {
        max-width: 1140px;
    }
}

@media (min-width: 1452px) {
    .container, .container2 {
        max-width: 1360px;
    }
}

.generate-container-media-options(@mediaBreakpointListMobileLength);
.generate-container-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
    @m: extract(@mediaBreakpointListMobile, @i);

        .container-@{m} {
            max-width: @@m!important;
        }

    .generate-container-media-options(@name, @i + 1);
}