responsive-utilities.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. //
  2. // Responsive: Utility classes
  3. // --------------------------------------------------
  4. // IE10 in Windows (Phone) 8
  5. //
  6. // Support for responsive views via media queries is kind of borked in IE10, for
  7. // Surface/desktop in split view and for Windows Phone 8. This particular fix
  8. // must be accompanied by a snippet of JavaScript to sniff the user agent and
  9. // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
  10. // our Getting Started page for more information on this bug.
  11. //
  12. // For more information, see the following:
  13. //
  14. // Issue: https://github.com/twbs/bootstrap/issues/10497
  15. // Docs: http://getbootstrap.com/getting-started/#browsers
  16. // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
  17. @-ms-viewport {
  18. width: device-width;
  19. }
  20. // Visibility utilities
  21. .visible-xs {
  22. .responsive-invisibility();
  23. @media (max-width: @screen-xs-max) {
  24. .responsive-visibility();
  25. }
  26. &.visible-sm {
  27. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  28. .responsive-visibility();
  29. }
  30. }
  31. &.visible-md {
  32. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  33. .responsive-visibility();
  34. }
  35. }
  36. &.visible-lg {
  37. @media (min-width: @screen-lg-min) {
  38. .responsive-visibility();
  39. }
  40. }
  41. }
  42. .visible-sm {
  43. .responsive-invisibility();
  44. &.visible-xs {
  45. @media (max-width: @screen-xs-max) {
  46. .responsive-visibility();
  47. }
  48. }
  49. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  50. .responsive-visibility();
  51. }
  52. &.visible-md {
  53. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  54. .responsive-visibility();
  55. }
  56. }
  57. &.visible-lg {
  58. @media (min-width: @screen-lg-min) {
  59. .responsive-visibility();
  60. }
  61. }
  62. }
  63. .visible-md {
  64. .responsive-invisibility();
  65. &.visible-xs {
  66. @media (max-width: @screen-xs-max) {
  67. .responsive-visibility();
  68. }
  69. }
  70. &.visible-sm {
  71. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  72. .responsive-visibility();
  73. }
  74. }
  75. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  76. .responsive-visibility();
  77. }
  78. &.visible-lg {
  79. @media (min-width: @screen-lg-min) {
  80. .responsive-visibility();
  81. }
  82. }
  83. }
  84. .visible-lg {
  85. .responsive-invisibility();
  86. &.visible-xs {
  87. @media (max-width: @screen-xs-max) {
  88. .responsive-visibility();
  89. }
  90. }
  91. &.visible-sm {
  92. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  93. .responsive-visibility();
  94. }
  95. }
  96. &.visible-md {
  97. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  98. .responsive-visibility();
  99. }
  100. }
  101. @media (min-width: @screen-lg-min) {
  102. .responsive-visibility();
  103. }
  104. }
  105. .hidden-xs {
  106. .responsive-visibility();
  107. @media (max-width: @screen-xs-max) {
  108. .responsive-invisibility();
  109. }
  110. &.hidden-sm {
  111. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  112. .responsive-invisibility();
  113. }
  114. }
  115. &.hidden-md {
  116. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  117. .responsive-invisibility();
  118. }
  119. }
  120. &.hidden-lg {
  121. @media (min-width: @screen-lg-min) {
  122. .responsive-invisibility();
  123. }
  124. }
  125. }
  126. .hidden-sm {
  127. .responsive-visibility();
  128. &.hidden-xs {
  129. @media (max-width: @screen-xs-max) {
  130. .responsive-invisibility();
  131. }
  132. }
  133. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  134. .responsive-invisibility();
  135. }
  136. &.hidden-md {
  137. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  138. .responsive-invisibility();
  139. }
  140. }
  141. &.hidden-lg {
  142. @media (min-width: @screen-lg-min) {
  143. .responsive-invisibility();
  144. }
  145. }
  146. }
  147. .hidden-md {
  148. .responsive-visibility();
  149. &.hidden-xs {
  150. @media (max-width: @screen-xs-max) {
  151. .responsive-invisibility();
  152. }
  153. }
  154. &.hidden-sm {
  155. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  156. .responsive-invisibility();
  157. }
  158. }
  159. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  160. .responsive-invisibility();
  161. }
  162. &.hidden-lg {
  163. @media (min-width: @screen-lg-min) {
  164. .responsive-invisibility();
  165. }
  166. }
  167. }
  168. .hidden-lg {
  169. .responsive-visibility();
  170. &.hidden-xs {
  171. @media (max-width: @screen-xs-max) {
  172. .responsive-invisibility();
  173. }
  174. }
  175. &.hidden-sm {
  176. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  177. .responsive-invisibility();
  178. }
  179. }
  180. &.hidden-md {
  181. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  182. .responsive-invisibility();
  183. }
  184. }
  185. @media (min-width: @screen-lg-min) {
  186. .responsive-invisibility();
  187. }
  188. }
  189. // Print utilities
  190. .visible-print {
  191. .responsive-invisibility();
  192. }
  193. @media print {
  194. .visible-print {
  195. .responsive-visibility();
  196. }
  197. .hidden-print {
  198. .responsive-invisibility();
  199. }
  200. }