app/Resources/static/themes/material/css/media_queries.scss

   1 /* ==========================================================================
   2    Media queries
   3    ========================================================================== */
   4
   5 @media only screen and (min-width: 992px) {
   6   nav,
   7   body:not(.entry):not(.login) main,
   8   footer {
   9     padding-left: 240px;
  10   }
  11
  12   .pagination {
  13     margin-left: auto;
  14   }
  15
  16   .card-tag-labels li {
  17     max-width: 50%;
  18   }
  19 }
  20
  21 @media screen and (min-width: 993px) {
  22   main #content {
  23     padding-left: 70px;
  24   }
  25 }
  26
  27 @media only screen and (max-width: 992px) {
  28   header,
  29   main,
  30   footer,
  31   nav {
  32     padding-left: 0;
  33   }
  34
  35   table {
  36     display: block;
  37     overflow: auto;
  38   }
  39
  40   iframe {
  41     max-width: 100%;
  42     height: auto;
  43   }
  44
  45   .nav-panels .action {
  46     padding-right: 0.75rem;
  47   }
  48
  49   .nav-panel-buttom {
  50     justify-content: space-between;
  51   }
  52
  53   #article {
  54     max-width: 35em;
  55     margin-left: auto;
  56     margin-right: auto;
  57     font-size: 18px;
  58
  59     > header > h1 {
  60       font-size: 1.33em;
  61     }
  62   }
  63
  64   .reader-mode {
  65     width: 240px !important;
  66
  67     span {
  68       opacity: 1;
  69     }
  70   }
  71
  72   .tabs {
  73     display: inline-block;
  74     height: auto;
  75   }
  76
  77   .tab {
  78     min-width: 100%;
  79   }
  80
  81   .indicator {
  82     display: none;
  83   }
  84
  85   .pagination li {
  86     margin-bottom: 0.5rem;
  87
  88     &.prev,
  89     &.next {
  90       width: auto;
  91     }
  92   }
  93
  94   .drag-target + .drag-target {
  95     height: 50%;
  96   }
  97
  98   .drag-target + .drag-target + .drag-target {
  99     top: 50%;
 100   }
 101 }
 102
 103 @media only screen and (min-width: 1200px) and (max-width: 1650px) {
 104   .row .col.l3 {
 105     width: 33.33333%;
 106     margin-left: 0;
 107   }
 108 }
 109
 110 @media only screen and (min-width: 993px) and (max-width: 1200px) {
 111   .row {
 112     .col.l1 {
 113       width: 25%;
 114       margin-left: 0;
 115     }
 116
 117     .col.l2 {
 118       width: 33.33333%;
 119       margin-left: 0;
 120     }
 121
 122     .col.l3 {
 123       width: 41.66667%;
 124       margin-left: 0;
 125     }
 126
 127     .col.l4 {
 128       width: 50%;
 129       margin-left: 0;
 130     }
 131
 132     .col.l5 {
 133       width: 58.33333%;
 134       margin-left: 0;
 135     }
 136
 137     .col.l6 {
 138       width: 66.66667%;
 139       margin-left: 0;
 140     }
 141
 142     .col.l7 {
 143       width: 75%;
 144       margin-left: 0;
 145     }
 146
 147     .col.l8 {
 148       width: 83.33333%;
 149       margin-left: 0;
 150     }
 151
 152     .col.l9 {
 153       width: 91.66667%;
 154       margin-left: 0;
 155     }
 156
 157     .col.l10 {
 158       width: 100%;
 159       margin-left: 0;
 160     }
 161   }
 162 }
 163
 164 @media only screen and (max-width: 350px) {
 165   .nb-results {
 166     display: none;
 167   }
 168
 169   main ul.row {
 170     padding: 0;
 171   }
 172
 173   .row .col {
 174     padding: 0;
 175   }
 176 }