/app/styles/compass_twitter_bootstrap/_responsive-utilities.scss

https://bitbucket.org/ceoaliongroo/torredelprior · Sass · 43 lines · 22 code · 6 blank · 15 comment · 0 complexity · 5c727e32a19796c5319182073534f5dc MD5 · raw file 

    

  1. //
    2. 

  2. // Responsive: Utility classes
    3. 

  3. // --------------------------------------------------
    4. 

  4. 

  5. 

  6. // Hide from screenreaders and browsers
    7. 

  7. // Credit: HTML5 Boilerplate
    8. 

  8. .hidden {
    9. 

  9.   display: none;
    10. 

  10.   visibility: hidden;
    11. 

  11. }
    12. 

  12. 

  13. // Visibility utilities
    14. 

  14. 

  15. // For desktops
    16. 

  16. .visible-phone     { display: none !important; }
    17. 

  17. .visible-tablet    { display: none !important; }
    18. 

  18. .visible-desktop   { } // Don't set initially
    19. 

  19. .hidden-phone      { }
    20. 

  20. .hidden-tablet     { }
    21. 

  21. .hidden-desktop    { display: none !important; }
    22. 

  22. 

  23. // Tablets & small desktops only
    24. 

  24. @media (min-width: 768px) and (max-width: 979px) {
    25. 

  25.   // Hide everything else
    26. 

  26.   .hidden-desktop    { display: inherit !important; }
    27. 

  27.   .visible-desktop   { display: none !important ; }
    28. 

  28.   // Show
    29. 

  29.   .visible-tablet    { display: inherit !important; }
    30. 

  30.   // Hide
    31. 

  31.   .hidden-tablet     { display: none !important; }
    32. 

  32. }
    33. 

  33. 

  34. // Phones only
    35. 

  35. @media (max-width: 767px) {
    36. 

  36.   // Hide everything else
    37. 

  37.   .hidden-desktop    { display: inherit !important; }
    38. 

  38.   .visible-desktop   { display: none !important; }
    39. 

  39.   // Show
    40. 

  40.   .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
    41. 

  41.   // Hide
    42. 

  42.   .hidden-phone      { display: none !important; }
    43. 

  43. }
    44.