scala-news-reader

rss/atom news reader in scala

git clone https://9o.is/git/scala-news-reader.git

responsive-utilities.less

(1602B)


      1 //
      2 // Responsive: Utility classes
      3 // --------------------------------------------------
      4 
      5 
      6 // IE10 Metro responsive
      7 // Required for Windows 8 Metro split-screen snapping with IE10
      8 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
      9 @-ms-viewport{
     10   width: device-width;
     11 }
     12 
     13 // Hide from screenreaders and browsers
     14 // Credit: HTML5 Boilerplate
     15 .hidden {
     16   display: none;
     17   visibility: hidden;
     18 }
     19 
     20 // Visibility utilities
     21 
     22 // For desktops
     23 .visible-phone     { display: none !important; }
     24 .visible-tablet    { display: none !important; }
     25 .hidden-phone      { }
     26 .hidden-tablet     { }
     27 .hidden-desktop    { display: none !important; }
     28 .visible-desktop   { display: inherit !important; }
     29 
     30 // Tablets & small desktops only
     31 @media (min-width: 768px) and (max-width: 979px) {
     32   // Hide everything else
     33   .hidden-desktop    { display: inherit !important; }
     34   .visible-desktop   { display: none !important ; }
     35   // Show
     36   .visible-tablet    { display: inherit !important; }
     37   // Hide
     38   .hidden-tablet     { display: none !important; }
     39 }
     40 
     41 // Phones only
     42 @media (max-width: 767px) {
     43   // Hide everything else
     44   .hidden-desktop    { display: inherit !important; }
     45   .visible-desktop   { display: none !important; }
     46   // Show
     47   .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
     48   // Hide
     49   .hidden-phone      { display: none !important; }
     50 }
     51 
     52 // Print utilities
     53 .visible-print    { display: none !important; }
     54 .hidden-print     { }
     55 
     56 @media print {
     57   .visible-print  { display: inherit !important; }
     58   .hidden-print   { display: none !important; }
     59 }