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.

92 lines
2.0 KiB

  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. .visible-sm,
  23. .visible-md,
  24. .visible-lg {
  25. .responsive-invisibility();
  26. }
  27. .visible-xs {
  28. @media (max-width: @screen-xs-max) {
  29. .responsive-visibility();
  30. }
  31. }
  32. .visible-sm {
  33. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  34. .responsive-visibility();
  35. }
  36. }
  37. .visible-md {
  38. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  39. .responsive-visibility();
  40. }
  41. }
  42. .visible-lg {
  43. @media (min-width: @screen-lg-min) {
  44. .responsive-visibility();
  45. }
  46. }
  47. .hidden-xs {
  48. @media (max-width: @screen-xs-max) {
  49. .responsive-invisibility();
  50. }
  51. }
  52. .hidden-sm {
  53. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  54. .responsive-invisibility();
  55. }
  56. }
  57. .hidden-md {
  58. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  59. .responsive-invisibility();
  60. }
  61. }
  62. .hidden-lg {
  63. @media (min-width: @screen-lg-min) {
  64. .responsive-invisibility();
  65. }
  66. }
  67. // Print utilities
  68. //
  69. // Media queries are placed on the inside to be mixin-friendly.
  70. .visible-print {
  71. .responsive-invisibility();
  72. @media print {
  73. .responsive-visibility();
  74. }
  75. }
  76. .hidden-print {
  77. @media print {
  78. .responsive-invisibility();
  79. }
  80. }