responsive-utilities.less 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. // stylelint-disable declaration-no-important, at-rule-no-vendor-prefix
  2. //
  3. // Responsive: Utility classes
  4. // --------------------------------------------------
  5. // IE10 in Windows (Phone) 8
  6. //
  7. // Support for responsive views via media queries is kind of borked in IE10, for
  8. // Surface/desktop in split view and for Windows Phone 8. This particular fix
  9. // must be accompanied by a snippet of JavaScript to sniff the user agent and
  10. // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
  11. // our Getting Started page for more information on this bug.
  12. //
  13. // For more information, see the following:
  14. //
  15. // Issue: https://github.com/twbs/bootstrap/issues/10497
  16. // Docs: https://getbootstrap.com/docs/3.4/getting-started/#support-ie10-width
  17. // Source: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/
  18. // Source: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
  19. @-ms-viewport {
  20. width: device-width;
  21. }
  22. .hidden-xs {
  23. @media (max-width: @screen-xs-max) {
  24. .responsive-invisibility();
  25. }
  26. }
  27. .hidden-sm {
  28. @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  29. .responsive-invisibility();
  30. }
  31. }
  32. .hidden-md {
  33. @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  34. .responsive-invisibility();
  35. }
  36. }
  37. .hidden-lg {
  38. @media (min-width: @screen-lg-min) {
  39. .responsive-invisibility();
  40. }
  41. }