diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/grid.less | 196 | ||||
| -rw-r--r-- | less/responsive-utilities.less | 58 | ||||
| -rw-r--r-- | less/variables.less | 5 |
3 files changed, 198 insertions, 61 deletions
diff --git a/less/grid.less b/less/grid.less index 5142feb65..f02bc7148 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,6 +2,7 @@ // Grid system // -------------------------------------------------- + // Set the container width, and override it for fixed navbars in media queries .container { .container-fixed(); @@ -13,18 +14,18 @@ } // Common styles for small and large grid columns -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, @@ -37,6 +38,18 @@ .col-sm-10, .col-sm-11, .col-sm-12, +.col-md-1, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-10, +.col-md-11, +.col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, @@ -58,41 +71,45 @@ } - -// -// Container and grid column sizing +// Extra small grid // +// Grid classes for extra small devices like smartphones. No offset, push, or +// pull classes are present here due to the size of the target -// Extra small device columns (smartphones) -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12 { +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { float: left; } -.col-1 { width: percentage((1 / @grid-columns)); } -.col-2 { width: percentage((2 / @grid-columns)); } -.col-3 { width: percentage((3 / @grid-columns)); } -.col-4 { width: percentage((4 / @grid-columns)); } -.col-5 { width: percentage((5 / @grid-columns)); } -.col-6 { width: percentage((6 / @grid-columns)); } -.col-7 { width: percentage((7 / @grid-columns)); } -.col-8 { width: percentage((8 / @grid-columns)); } -.col-9 { width: percentage((9 / @grid-columns)); } -.col-10 { width: percentage((10/ @grid-columns)); } -.col-11 { width: percentage((11/ @grid-columns)); } -.col-12 { width: 100%; } - -// Small device columns (phones to tablets) -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { +.col-xs-1 { width: percentage((1 / @grid-columns)); } +.col-xs-2 { width: percentage((2 / @grid-columns)); } +.col-xs-3 { width: percentage((3 / @grid-columns)); } +.col-xs-4 { width: percentage((4 / @grid-columns)); } +.col-xs-5 { width: percentage((5 / @grid-columns)); } +.col-xs-6 { width: percentage((6 / @grid-columns)); } +.col-xs-7 { width: percentage((7 / @grid-columns)); } +.col-xs-8 { width: percentage((8 / @grid-columns)); } +.col-xs-9 { width: percentage((9 / @grid-columns)); } +.col-xs-10 { width: percentage((10/ @grid-columns)); } +.col-xs-11 { width: percentage((11/ @grid-columns)); } +.col-xs-12 { width: 100%; } + + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: @screen-tablet) { .container { max-width: @container-tablet; } @@ -123,7 +140,9 @@ .col-sm-10 { width: percentage((10/ @grid-columns)); } .col-sm-11 { width: percentage((11/ @grid-columns)); } .col-sm-12 { width: 100%; } +} +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { // Push and pull columns for source order changes .col-sm-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-2 { left: percentage((2 / @grid-columns)); } @@ -163,11 +182,93 @@ .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); } } -// Medium and large device columns (desktop and up) + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + @media (min-width: @screen-desktop) { .container { max-width: @container-desktop; } + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { + float: left; + } + .col-md-1 { width: percentage((1 / @grid-columns)); } + .col-md-2 { width: percentage((2 / @grid-columns)); } + .col-md-3 { width: percentage((3 / @grid-columns)); } + .col-md-4 { width: percentage((4 / @grid-columns)); } + .col-md-5 { width: percentage((5 / @grid-columns)); } + .col-md-6 { width: percentage((6 / @grid-columns)); } + .col-md-7 { width: percentage((7 / @grid-columns)); } + .col-md-8 { width: percentage((8 / @grid-columns)); } + .col-md-9 { width: percentage((9 / @grid-columns)); } + .col-md-10 { width: percentage((10/ @grid-columns)); } + .col-md-11 { width: percentage((11/ @grid-columns)); } + .col-md-12 { width: 100%; } +} + +@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + // Push and pull columns for source order changes + .col-md-push-1 { left: percentage((1 / @grid-columns)); } + .col-md-push-2 { left: percentage((2 / @grid-columns)); } + .col-md-push-3 { left: percentage((3 / @grid-columns)); } + .col-md-push-4 { left: percentage((4 / @grid-columns)); } + .col-md-push-5 { left: percentage((5 / @grid-columns)); } + .col-md-push-6 { left: percentage((6 / @grid-columns)); } + .col-md-push-7 { left: percentage((7 / @grid-columns)); } + .col-md-push-8 { left: percentage((8 / @grid-columns)); } + .col-md-push-9 { left: percentage((9 / @grid-columns)); } + .col-md-push-10 { left: percentage((10/ @grid-columns)); } + .col-md-push-11 { left: percentage((11/ @grid-columns)); } + + .col-md-pull-1 { right: percentage((1 / @grid-columns)); } + .col-md-pull-2 { right: percentage((2 / @grid-columns)); } + .col-md-pull-3 { right: percentage((3 / @grid-columns)); } + .col-md-pull-4 { right: percentage((4 / @grid-columns)); } + .col-md-pull-5 { right: percentage((5 / @grid-columns)); } + .col-md-pull-6 { right: percentage((6 / @grid-columns)); } + .col-md-pull-7 { right: percentage((7 / @grid-columns)); } + .col-md-pull-8 { right: percentage((8 / @grid-columns)); } + .col-md-pull-9 { right: percentage((9 / @grid-columns)); } + .col-md-pull-10 { right: percentage((10/ @grid-columns)); } + .col-md-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); } +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: @screen-large-desktop) { + .container { + max-width: @container-large-desktop; + } + .col-lg-1, .col-lg-2, .col-lg-3, @@ -233,10 +334,3 @@ .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); } } - -// Large desktops and up -@media (min-width: @screen-large-desktop) { - .container { - max-width: @container-large-desktop; - } -} diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 0815909cc..cec869083 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -35,21 +35,39 @@ // Visibility utilities -.visible-sm { +.visible-xs { .responsive-visibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-large-desktop) { + .responsive-invisibility(); + } +} +.visible-sm { + .responsive-invisibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-visibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-invisibility(); } } .visible-md { .responsive-invisibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-large-desktop) { .responsive-invisibility(); } } @@ -58,26 +76,47 @@ @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-visibility(); } } -.hidden-sm { +.hidden-xs { .responsive-invisibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-visibility(); + } + @media (min-width: @screen-large-desktop) { + .responsive-visibility(); + } +} +.hidden-sm { + .responsive-visibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-visibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-visibility(); } } .hidden-md { .responsive-visibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-visibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-large-desktop) { .responsive-visibility(); } } @@ -86,7 +125,10 @@ @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-visibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-invisibility(); } } diff --git a/less/variables.less b/less/variables.less index f2a622fbe..4bdf54905 100644 --- a/less/variables.less +++ b/less/variables.less @@ -209,6 +209,7 @@ @screen-large-desktop: @screen-large; // So media queries don't overlap when required, provide a maximum +@screen-phone-max: (@screen-small - 1); @screen-small-max: (@screen-medium - 1); @screen-tablet-max: (@screen-desktop - 1); @screen-desktop-max: (@screen-large-desktop - 1); @@ -595,10 +596,10 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: 728px; +@container-tablet: 720px; // Medium screen / desktop @container-desktop: 940px; // Large screen / wide desktop -@container-large-desktop: 1170px; +@container-large-desktop: 1140px; |