You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

173 lines
3.4 KiB

10 years ago
  1. //
  2. // Responsive: Utility classes
  3. // --------------------------------------------------
  4. // Visibility utilities
  5. // Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
  6. .visible-xs,
  7. .visible-sm,
  8. .visible-md,
  9. .visible-lg {
  10. .responsive-invisibility();
  11. }
  12. .visible-xs-block,
  13. .visible-xs-inline,
  14. .visible-xs-inline-block,
  15. .visible-sm-block,
  16. .visible-sm-inline,
  17. .visible-sm-inline-block,
  18. .visible-md-block,
  19. .visible-md-inline,
  20. .visible-md-inline-block,
  21. .visible-lg-block,
  22. .visible-lg-inline,
  23. .visible-lg-inline-block {
  24. display: none !important;
  25. }
  26. .visible-xs {
  27. @media (max-width: @screen-xs-max) {
  28. .responsive-visibility();
  29. }
  30. }
  31. .visible-xs-block {
  32. @media (max-width: @screen-xs-max) {
  33. display: block !important;
  34. }
  35. }
  36. .visible-xs-inline {
  37. @media (max-width: @screen-xs-max) {
  38. display: inline !important;
  39. }
  40. }
  41. .visible-xs-inline-block {
  42. @media (max-width: @screen-xs-max) {
  43. display: inline-block !important;
  44. }
  45. }
  46. .visible-sm {
  47. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  48. .responsive-visibility();
  49. }
  50. }
  51. .visible-sm-block {
  52. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  53. display: block !important;
  54. }
  55. }
  56. .visible-sm-inline {
  57. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  58. display: inline !important;
  59. }
  60. }
  61. .visible-sm-inline-block {
  62. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  63. display: inline-block !important;
  64. }
  65. }
  66. .visible-md {
  67. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  68. .responsive-visibility();
  69. }
  70. }
  71. .visible-md-block {
  72. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  73. display: block !important;
  74. }
  75. }
  76. .visible-md-inline {
  77. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  78. display: inline !important;
  79. }
  80. }
  81. .visible-md-inline-block {
  82. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  83. display: inline-block !important;
  84. }
  85. }
  86. .visible-lg {
  87. @media (min-width: @screen-lg-min) {
  88. .responsive-visibility();
  89. }
  90. }
  91. .visible-lg-block {
  92. @media (min-width: @screen-lg-min) {
  93. display: block !important;
  94. }
  95. }
  96. .visible-lg-inline {
  97. @media (min-width: @screen-lg-min) {
  98. display: inline !important;
  99. }
  100. }
  101. .visible-lg-inline-block {
  102. @media (min-width: @screen-lg-min) {
  103. display: inline-block !important;
  104. }
  105. }
  106. .hidden-xs {
  107. @media (max-width: @screen-xs-max) {
  108. .responsive-invisibility();
  109. }
  110. }
  111. .hidden-sm {
  112. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  113. .responsive-invisibility();
  114. }
  115. }
  116. .hidden-md {
  117. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  118. .responsive-invisibility();
  119. }
  120. }
  121. .hidden-lg {
  122. @media (min-width: @screen-lg-min) {
  123. .responsive-invisibility();
  124. }
  125. }
  126. // Print utilities
  127. //
  128. // Media queries are placed on the inside to be mixin-friendly.
  129. // Note: Deprecated .visible-print as of v3.2.0
  130. .visible-print {
  131. .responsive-invisibility();
  132. @media print {
  133. .responsive-visibility();
  134. }
  135. }
  136. .visible-print-block {
  137. display: none !important;
  138. @media print {
  139. display: block !important;
  140. }
  141. }
  142. .visible-print-inline {
  143. display: none !important;
  144. @media print {
  145. display: inline !important;
  146. }
  147. }
  148. .visible-print-inline-block {
  149. display: none !important;
  150. @media print {
  151. display: inline-block !important;
  152. }
  153. }
  154. .hidden-print {
  155. @media print {
  156. .responsive-invisibility();
  157. }
  158. }