~ubuntu-branches/ubuntu/vivid/phabricator/vivid-proposed

« back to all changes in this revision

Viewing changes to arcanist/src/lint/linter/__tests__/lessc/media.lint-test

  • Committer: Package Import Robot
  • Author(s): Richard Sellam
  • Date: 2014-10-23 20:49:26 UTC
  • mfrom: (0.2.1) (0.1.1)
  • Revision ID: package-import@ubuntu.com-20141023204926-vq80u1op4df44azb
Tags: 0~git20141023-1
Initial release (closes: #703046)

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
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
}
 
235
~~~~~~~~~~