_responsive-utilities.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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. @include responsive-invisibility('.visible-xs, .visible-sm, .visible-md, .visible-lg');
  22. @media (max-width: $screen-xs-max) {
  23. @include responsive-visibility('.visible-xs');
  24. }
  25. @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  26. @include responsive-visibility('.visible-sm');
  27. }
  28. @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  29. @include responsive-visibility('.visible-md');
  30. }
  31. @media (min-width: $screen-lg-min) {
  32. @include responsive-visibility('.visible-lg');
  33. }
  34. @media (max-width: $screen-xs-max) {
  35. @include responsive-invisibility('.hidden-xs');
  36. }
  37. @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  38. @include responsive-invisibility('.hidden-sm');
  39. }
  40. @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  41. @include responsive-invisibility('.hidden-md');
  42. }
  43. @media (min-width: $screen-lg-min) {
  44. @include responsive-invisibility('.hidden-lg');
  45. }
  46. // Print utilities
  47. //
  48. // Media queries are placed on the inside to be mixin-friendly.
  49. @include responsive-invisibility('.visible-print');
  50. @media print {
  51. @include responsive-visibility('.visible-print');
  52. }
  53. @media print {
  54. @include responsive-invisibility('.hidden-print');
  55. }