apps/wiki/static--wiki--editor--node_modules--grunt-contrib-less--node_modules--less--test/less/media.less

   1
   2 // For now, variables can't be declared inside @media blocks.
   3
   4 @var: 42;
   5
   6 @media print {
   7     .class {
   8         color: blue;
   9         .sub {
  10             width: @var;
  11         }
  12     }
  13     .top, header > h1 {
  14         color: (#222 * 2);
  15     }
  16 }
  17
  18 @media screen {
  19     @base: 8;
  20     body { max-width: (@base * 60); }
  21 }
  22
  23 @ratio_large: 16;
  24 @ratio_small: 9;
  25
  26 @media all and (device-aspect-ratio: @ratio_large / @ratio_small) {
  27    body { max-width: 800px; }
  28 }
  29
  30 @media all and (orientation:portrait) {
  31     aside { float: none; }
  32 }
  33
  34 @media handheld and (min-width: @var), screen and (min-width: 20em) {
  35     body {
  36         max-width: 480px;
  37     }
  38 }
  39
  40 body {
  41     @media print {
  42         padding: 20px;
  43
  44         header {
  45             background-color: red;
  46         }
  47
  48         @media (orientation:landscape) {
  49             margin-left: 20px;
  50         }
  51     }
  52 }
  53
  54 @media screen {
  55   .sidebar {
  56     width: 300px;
  57     @media (orientation: landscape) {
  58       width: 500px;
  59     }
  60   }
  61 }
  62
  63 @media a {
  64   .first {
  65     @media b {
  66       .second {
  67         .third {
  68           width: 300px;
  69           @media c {
  70             width: 500px;
  71           }
  72         }
  73         .fourth {
  74           width: 3;
  75         }
  76       }
  77     }
  78   }
  79 }
  80
  81 body {
  82     @media a, b and c {
  83         width: 95%;
  84
  85         @media x, y {
  86             width: 100%;
  87         }
  88     }
  89 }
  90
  91 .mediaMixin(@fallback: 200px) {
  92     background: black;
  93
  94     @media handheld {
  95         background: white;
  96
  97         @media (max-width: @fallback) {
  98             background: red;
  99         }
 100     }
 101 }
 102
 103 .a {
 104   .mediaMixin(100px);
 105 }
 106
 107 .b {
 108   .mediaMixin();
 109 }
 110 @smartphone: ~"only screen and (max-width: 200px)";
 111 @media @smartphone {
 112   body {
 113     width: 480px;
 114   }
 115 }
 116
 117 @media print {
 118   @page :left {
 119     margin: 0.5cm;
 120   }
 121   @page :right {
 122     margin: 0.5cm;
 123   }
 124   @page Test:first {
 125     margin: 1cm;
 126   }
 127   @page :first {
 128     size: 8.5in 11in;
 129         @top-left {
 130       margin: 1cm;
 131     }
 132     @top-left-corner {
 133       margin: 1cm;
 134     }
 135     @top-center {
 136       margin: 1cm;
 137     }
 138     @top-right {
 139       margin: 1cm;
 140     }
 141     @top-right-corner {
 142       margin: 1cm;
 143     }
 144     @bottom-left {
 145       margin: 1cm;
 146     }
 147     @bottom-left-corner {
 148       margin: 1cm;
 149     }
 150     @bottom-center {
 151       margin: 1cm;
 152     }
 153     @bottom-right {
 154       margin: 1cm;
 155     }
 156     @bottom-right-corner {
 157       margin: 1cm;
 158     }
 159     @left-top {
 160       margin: 1cm;
 161     }
 162     @left-middle {
 163       margin: 1cm;
 164     }
 165     @left-bottom {
 166       margin: 1cm;
 167     }
 168     @right-top {
 169       margin: 1cm;
 170     }
 171     @right-middle {
 172       content: "Page " counter(page);
 173     }
 174     @right-bottom {
 175       margin: 1cm;
 176     }
 177   }
 178 }
 179
 180 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
 181   .b {
 182     background: red;
 183   }
 184 }
 185
 186 .bg() {
 187     background: red;
 188
 189     @media (max-width: 500px) {
 190         background: green;
 191     }
 192 }
 193
 194 body {
 195     .bg();
 196 }
 197
 198 @bpMedium: 1000px;
 199 @media (max-width: @bpMedium) {
 200     body {
 201         .bg();
 202         background: blue;
 203     }
 204 }
 205
 206 @media (max-width: 1200px) {
 207   /* a comment */
 208
 209   @media (max-width: 900px) {
 210     body { font-size: 11px; }
 211   }
 212 }
 213
 214 .nav-justified {
 215   @media (min-width: 480px) {
 216     > li {
 217       display: table-cell;
 218     }
 219   }
 220 }
 221
 222 .menu
 223 {
 224   @media (min-width: 768px) {
 225     .nav-justified();
 226   }
 227 }
 228 @all: ~"all";
 229 @tv: ~"tv";
 230 @media @all and @tv {
 231   .all-and-tv-variables {
 232     var: all-and-tv;
 233   }
 234 }