bootstrap-ml.less

bootstrap-ml.less

// Bootstrap Mid-Large - col-ml-* - the missing grid set for Bootstrap3.
//
//
//
// This is a hack to fill the gap between 768 and 991 pixels - a missing range
// in the bootstrap responsive grid structure. Use these classes to style pages
// on cellphones when they transition from portrait to landscape.
//
// Contains:
// Columns, Offsets, Pushes, Pulls for the Mid-Small layout
// Visibility classes for the Mid-Small layout
// Redefined visibility classes for the Extra Small layout
//
// Extends bootstrap-md.less to cater to 768 - 992
// https://gist.github.com/wdollar/135ec3c80faaf5a821b0
//
// See https://github.com/twbs/bootstrap/issues/10203 for more info.
// Forked from: https://gist.github.com/Jakobud/8eca95f07a3b50453cd7
// Original gist: https://gist.github.com/andyl/6360906
//
// Instructions: Add the following to the end of bootstrap.less
//
// @import "bootstrap-ml";
//

// Mid-Small breakpoint

@screen-ml: 768px;
@screen-ml-min: @screen-ml;
@screen-ml-max: (@screen-md-min - 1);

// Redefined Extra Small max value
@screen-ms-max-new: (@screen-ml-min - 1);

// Common styles (see make-grid-columns() in bootstrap/mixins/_grid-framework.less)

.col-ml-1,
.col-ml-2,
.col-ml-3,
.col-ml-4,
.col-ml-5,
.col-ml-6,
.col-ml-7,
.col-ml-8,
.col-ml-9,
.col-ml-10,
.col-ml-11,
.col-ml-12 {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left: (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
}

// Misc. class adjustments for col-ml

@media (min-width: @screen-ml) and (max-width: @screen-ml-max) {
    .container {
        max-width: @screen-md - 20px;
    }
    .hidden-ms {
        display: block !important;
    }
}

// col-ml grid

@media (min-width: @screen-ml-min) and (max-width: @screen-ml-max) {
    .make-grid(ml);
}

// Visibility utilities

.visible-ms, .visible-ml {
    // set to no display so we have a fresh start
    .responsive-invisibility;
}

.visible-ms-block,
.visible-ms-inline,
.visible-ms-inline-block,
.visible-ml-block,
.visible-ml-inline,
.visible-ml-inline-block {
    display: none !important;
}

@media (max-width: @screen-ms-max-new) {
    .visible-ms {
        .responsive-visibility;
    }
}
.visible-ms-block {
    @media (max-width: @screen-ms-max-new) {
        display: block !important;
    }
}
.visible-ms-inline {
    @media (max-width: @screen-ms-max-new) {
        display: inline !important;
    }
}
.visible-ms-inline-block {
    @media (max-width: @screen-ms-max-new) {
        display: inline-block !important;
    }
}

@media (min-width: @screen-ml-min) and (max-width: @screen-ml-max) {
    .visible-ml {
        .responsive-visibility;
    }
}
.visible-ml-block {
    @media (min-width: @screen-ml-min) and (max-width: @screen-ml-max) {
        display: block !important;
    }
}
.visible-ml-inline {
    @media (min-width: @screen-ml-min) and (max-width: @screen-ml-max) {
        display: inline !important;
    }
}
.visible-ml-inline-block {
    @media (min-width: @screen-ml-min) and (max-width: @screen-ml-max) {
        display: inline-block !important;
    }
}

@media (max-width: @screen-ms-max-new) {
    .hidden-ms {
        .responsive-invisibility;
    }
}

@media (min-width: @screen-ml-min) and (max-width: @screen-ml-max) {
    .hidden-ml {
        .responsive-invisibility;
    }
}