diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/responsive-utilities.less | 150 |
1 files changed, 111 insertions, 39 deletions
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 062d6820c..c756b2361 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -36,48 +36,84 @@ // Visibility utilities .visible-xs { - .responsive-visibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-invisibility(); + .responsive-invisibility(); + @media (max-width: @screen-xs-max) { + .responsive-visibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-invisibility(); + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } } - @media (min-width: @screen-lg) { - .responsive-invisibility(); + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } + } + &.visible-lg { + @media (min-width: @screen-lg) { + .responsive-visibility(); + } } } .visible-sm { .responsive-invisibility(); + &.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } + } @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-invisibility(); + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } } - @media (min-width: @screen-lg) { - .responsive-invisibility(); + &.visible-lg { + @media (min-width: @screen-lg) { + .responsive-visibility(); + } } } .visible-md { .responsive-invisibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-invisibility(); + &.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } + } + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } } @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-lg) { - .responsive-invisibility(); + &.visible-lg { + @media (min-width: @screen-lg) { + .responsive-visibility(); + } } } .visible-lg { .responsive-invisibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-invisibility(); + &.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-invisibility(); + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } + } + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } } @media (min-width: @screen-lg) { .responsive-visibility(); @@ -85,48 +121,84 @@ } .hidden-xs { - .responsive-invisibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-visibility(); + .responsive-visibility(); + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-visibility(); + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } } - @media (min-width: @screen-lg) { - .responsive-visibility(); + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } + } + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } } } .hidden-sm { .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-visibility(); + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } } - @media (min-width: @screen-lg) { - .responsive-visibility(); + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } } } .hidden-md { .responsive-visibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } } @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-lg) { - .responsive-visibility(); + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } } } .hidden-lg { .responsive-visibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-visibility(); - } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } + } + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } } @media (min-width: @screen-lg) { .responsive-invisibility(); |