Nenhuma Descrição http://j1x-huginn.herokuapp.com

_responsive-utilities.scss 2.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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. }