diff --git a/less/grid.less b/less/grid.less index 88957f42a586361bab27f5d35173f5ca3a3d68a5..2170a025d16230866ad0a6705cf97bfc92f4cc8e 100644 --- a/less/grid.less +++ b/less/grid.less @@ -10,6 +10,9 @@ .container { .container-fixed(); + // @media (min-width: @screen-hs-min) { + // width: @container-hs; + // } @media (min-width: @screen-sm-min) { width: @container-sm; } diff --git a/less/mixins.less b/less/mixins.less index ae746d83aa8677069fa72976fff2a77fcc6f4f1e..ab8377ae0abc5a5c0c88070115a2fbf44bd2de65 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -680,6 +680,33 @@ } } +.make-hs-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + @media (min-width: @screen-hs-min) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +.make-hs-column-offset(@columns) { + @media (min-width: @screen-hs-min) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-hs-column-push(@columns) { + @media (min-width: @screen-hs-min) { + left: percentage((@columns / @grid-columns)); + } +} +.make-hs-column-pull(@columns) { + @media (min-width: @screen-hs-min) { + right: percentage((@columns / @grid-columns)); + } +} // Generate the small columns .make-sm-column(@columns; @gutter: @grid-gutter-width) { @@ -776,11 +803,11 @@ .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial - @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + @item: ~".col-xs-@{index}, .col-hs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo - @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + @item: ~".col-xs-@{index}, .col-hs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 5a31816af0dff9dd7334cf37273d114d2075dea5..8d3f75f84563c89dbdb8cd81854a6b7657dbde5a 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -30,6 +30,13 @@ .responsive-visibility(); } } +.visible-hs { + .responsive-invisibility(); + + @media (min-width: @screen-hs-min) and (max-width: @screen-hs-max) { + .responsive-visibility(); + } +} .visible-sm { .responsive-invisibility(); @@ -57,6 +64,11 @@ .responsive-invisibility(); } } +.hidden-hs { + @media (min-width: @screen-hs-min) and (max-width: @screen-hs-max) { + .responsive-invisibility(); + } +} .hidden-sm { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .responsive-invisibility(); diff --git a/less/tables.less b/less/tables.less index c41989c04d2d0d484ad337017936603fb2a5efa2..32eeee35346512dada3863fff04357d734db93ee 100644 --- a/less/tables.less +++ b/less/tables.less @@ -168,7 +168,7 @@ table { // by enabling horizontal scrolling. Only applies <768px. Everything above that // will display normally. -@media (max-width: @screen-xs-max) { +@media (max-width: @screen-hs-max) { .table-responsive { width: 100%; margin-bottom: (@line-height-computed * 0.75); diff --git a/less/variables.less b/less/variables.less index b06206dfb296fb0bcbeae503938ee2851f8aaf9c..2f0ceb1283dd0070994b0994275437bed760849a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -260,6 +260,9 @@ // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 480px; @screen-xs-min: @screen-xs; + +// Horizontal Small screen / phone horizontal +@screen-hs-min: @screen-xs; @screen-phone: @screen-xs-min; // Small screen / tablet @@ -281,7 +284,8 @@ @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum -@screen-xs-max: (@screen-sm-min - 1); +@screen-xs-max: (@screen-hs-min - 1); +@screen-hs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); @@ -811,6 +815,10 @@ // //## Define the maximum width of `.container` for different screen sizes. +// Horizontal Small screen / phone horizontal +//** For `@screen-sm-min` and up. +@container-hs: ((434px + @grid-gutter-width)); + // Small screen / tablet @container-tablet: ((720px + @grid-gutter-width)); //** For `@screen-sm-min` and up.