diff options
Diffstat (limited to 'test/bem/_iro-bem-modifier.scss')
-rw-r--r-- | test/bem/_iro-bem-modifier.scss | 654 |
1 files changed, 0 insertions, 654 deletions
diff --git a/test/bem/_iro-bem-modifier.scss b/test/bem/_iro-bem-modifier.scss deleted file mode 100644 index 60e2fe4..0000000 --- a/test/bem/_iro-bem-modifier.scss +++ /dev/null | |||
@@ -1,654 +0,0 @@ | |||
1 | // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations | ||
2 | |||
3 | // | ||
4 | // Included test cases: | ||
5 | // - /// 1 /// - block modifier | ||
6 | // - /// 2 /// - block modifier, in at-theme | ||
7 | // - /// 3 /// - element modifier, single element | ||
8 | // - /// 4 /// - element modifier, multiple elements | ||
9 | // - /// 5 /// - element modifier, single related element | ||
10 | // - /// 6 /// - element modifier, multiple related elements | ||
11 | // - /// 7 /// - element modifier, single element, manual selector before | ||
12 | // - /// 8 /// - element modifier, multiple elements, manual selector before | ||
13 | // - /// 9 /// - element modifier, single related element, manual selector before | ||
14 | // - /// 10 /// - element modifier, multiple related elements, manual selector before | ||
15 | // - /// 11 /// - element modifier, in at-theme | ||
16 | // - /// 12 /// - nested block modifiers, extending | ||
17 | // - /// 13 /// - nested element modifiers, extending | ||
18 | // - /// 14 /// - block and element modifiers, single element | ||
19 | // - /// 15 /// - block and element modifiers, multiple elements | ||
20 | // | ||
21 | |||
22 | @include it('iro-bem-modifier') { | ||
23 | @include assert('block modifier') { /// 1 /// | ||
24 | @include output { | ||
25 | @include iro-bem-block('something') { | ||
26 | @include iro-bem-modifier('mod') { | ||
27 | font-size: 1.5em; | ||
28 | |||
29 | @include iro-bem-modifier('submod') { | ||
30 | font-size: 1.75em; | ||
31 | } | ||
32 | } | ||
33 | } | ||
34 | } | ||
35 | |||
36 | @include expect { | ||
37 | .something--mod { | ||
38 | font-size: 1.5em; | ||
39 | } | ||
40 | |||
41 | .something--mod.something--submod { | ||
42 | font-size: 1.75em; | ||
43 | } | ||
44 | } | ||
45 | } | ||
46 | |||
47 | @include assert('block modifier, in at-theme') { /// 2 /// | ||
48 | @include output(false) { | ||
49 | @include iro-bem-block('something') { | ||
50 | @include iro-bem-at-theme('dark') { | ||
51 | @include iro-bem-modifier('mod') { | ||
52 | font-size: 1.5em; | ||
53 | |||
54 | @include iro-bem-modifier('submod') { | ||
55 | font-size: 1.75em; | ||
56 | } | ||
57 | } | ||
58 | } | ||
59 | } | ||
60 | } | ||
61 | |||
62 | @include expect(false) { | ||
63 | .t-dark .something--mod, | ||
64 | [class*=' t-'] .t-dark .something--mod, | ||
65 | [class^='t-'] .t-dark .something--mod { | ||
66 | font-size: 1.5em; | ||
67 | } | ||
68 | |||
69 | .t-dark .something--mod.something--submod, | ||
70 | [class*=' t-'] .t-dark .something--mod.something--submod, | ||
71 | [class^='t-'] .t-dark .something--mod.something--submod { | ||
72 | font-size: 1.75em; | ||
73 | } | ||
74 | } | ||
75 | } | ||
76 | |||
77 | @include assert('element modifier, single element') { /// 3 /// | ||
78 | @include output { | ||
79 | @include iro-bem-block('something') { | ||
80 | @include iro-bem-element('child') { | ||
81 | @include iro-bem-modifier('mod') { | ||
82 | font-size: 2.5em; | ||
83 | |||
84 | @include iro-bem-modifier('submod') { | ||
85 | font-size: 2.75em; | ||
86 | } | ||
87 | } | ||
88 | } | ||
89 | } | ||
90 | } | ||
91 | |||
92 | @include expect { | ||
93 | .something__child--mod { | ||
94 | font-size: 2.5em; | ||
95 | } | ||
96 | |||
97 | .something__child--mod.something__child--submod { | ||
98 | font-size: 2.75em; | ||
99 | } | ||
100 | } | ||
101 | } | ||
102 | |||
103 | @include assert('element modifier, multiple elements') { /// 4 /// | ||
104 | @include output { | ||
105 | @include iro-bem-block('something') { | ||
106 | @include iro-bem-element('child1', 'child2') { | ||
107 | @include iro-bem-modifier('mod') { | ||
108 | font-size: 2.5em; | ||
109 | |||
110 | @include iro-bem-modifier('submod') { | ||
111 | font-size: 2.75em; | ||
112 | } | ||
113 | } | ||
114 | } | ||
115 | } | ||
116 | } | ||
117 | |||
118 | @include expect { | ||
119 | .something__child1--mod, | ||
120 | .something__child2--mod { | ||
121 | font-size: 2.5em; | ||
122 | } | ||
123 | |||
124 | .something__child1--mod.something__child1--submod, | ||
125 | .something__child2--mod.something__child2--submod { | ||
126 | font-size: 2.75em; | ||
127 | } | ||
128 | } | ||
129 | } | ||
130 | |||
131 | @include assert('element modifier, single related element') { /// 5 /// | ||
132 | @include output { | ||
133 | @include iro-bem-block('something') { | ||
134 | @include iro-bem-element('child1') { | ||
135 | @include iro-bem-next-element('child2') { | ||
136 | @include iro-bem-modifier('mod') { | ||
137 | font-size: 2.5em; | ||
138 | |||
139 | @include iro-bem-modifier('submod') { | ||
140 | font-size: 2.75em; | ||
141 | } | ||
142 | } | ||
143 | } | ||
144 | } | ||
145 | } | ||
146 | } | ||
147 | |||
148 | @include expect { | ||
149 | .something__child1 + .something__child2--mod { | ||
150 | font-size: 2.5em; | ||
151 | } | ||
152 | |||
153 | .something__child1 + .something__child2--mod.something__child2--submod { | ||
154 | font-size: 2.75em; | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | |||
159 | @include assert('element modifier, multiple related elements') { /// 6 /// | ||
160 | @include output { | ||
161 | @include iro-bem-block('something') { | ||
162 | @include iro-bem-element('child1') { | ||
163 | @include iro-bem-next-element('child2', 'child3') { | ||
164 | @include iro-bem-modifier('mod') { | ||
165 | font-size: 2.5em; | ||
166 | |||
167 | @include iro-bem-modifier('submod') { | ||
168 | font-size: 2.75em; | ||
169 | } | ||
170 | } | ||
171 | } | ||
172 | } | ||
173 | } | ||
174 | } | ||
175 | |||
176 | @include expect { | ||
177 | .something__child1 + .something__child2--mod, | ||
178 | .something__child1 + .something__child3--mod { | ||
179 | font-size: 2.5em; | ||
180 | } | ||
181 | |||
182 | .something__child1 + .something__child2--mod.something__child2--submod, | ||
183 | .something__child1 + .something__child3--mod.something__child3--submod { | ||
184 | font-size: 2.75em; | ||
185 | } | ||
186 | } | ||
187 | } | ||
188 | |||
189 | @include assert('element modifier, single element, manual selector before') { /// 7 /// | ||
190 | @include output(false) { | ||
191 | @include iro-bem-block('something') { | ||
192 | &:hover { | ||
193 | @include iro-bem-element('child1') { | ||
194 | @include iro-bem-modifier('mod') { | ||
195 | font-size: 2.5em; | ||
196 | |||
197 | @include iro-bem-modifier('submod') { | ||
198 | font-size: 2.75em; | ||
199 | } | ||
200 | } | ||
201 | } | ||
202 | } | ||
203 | |||
204 | .test & { | ||
205 | @include iro-bem-element('child2') { | ||
206 | @include iro-bem-modifier('mod') { | ||
207 | font-size: 2.5em; | ||
208 | |||
209 | @include iro-bem-modifier('submod') { | ||
210 | font-size: 2.75em; | ||
211 | } | ||
212 | } | ||
213 | } | ||
214 | } | ||
215 | } | ||
216 | } | ||
217 | |||
218 | @include expect(false) { | ||
219 | .something:hover .something__child1--mod { | ||
220 | font-size: 2.5em; | ||
221 | } | ||
222 | |||
223 | .something:hover .something__child1--mod.something__child1--submod { | ||
224 | font-size: 2.75em; | ||
225 | } | ||
226 | |||
227 | .test .something__child2--mod { | ||
228 | font-size: 2.5em; | ||
229 | } | ||
230 | |||
231 | .test .something__child2--mod.something__child2--submod { | ||
232 | font-size: 2.75em; | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | |||
237 | @include assert('element modifier, multiple elements, manual selector before') { /// 8 /// | ||
238 | @include output(false) { | ||
239 | @include iro-bem-block('something') { | ||
240 | &:hover { | ||
241 | @include iro-bem-element('child1', 'child2') { | ||
242 | @include iro-bem-modifier('mod') { | ||
243 | font-size: 2.5em; | ||
244 | |||
245 | @include iro-bem-modifier('submod') { | ||
246 | font-size: 2.75em; | ||
247 | } | ||
248 | } | ||
249 | } | ||
250 | } | ||
251 | |||
252 | .test & { | ||
253 | @include iro-bem-element('child3', 'child4') { | ||
254 | @include iro-bem-modifier('mod') { | ||
255 | font-size: 2.5em; | ||
256 | |||
257 | @include iro-bem-modifier('submod') { | ||
258 | font-size: 2.75em; | ||
259 | } | ||
260 | } | ||
261 | } | ||
262 | } | ||
263 | } | ||
264 | } | ||
265 | |||
266 | @include expect(false) { | ||
267 | .something:hover .something__child1--mod, | ||
268 | .something:hover .something__child2--mod { | ||
269 | font-size: 2.5em; | ||
270 | } | ||
271 | |||
272 | .something:hover .something__child1--mod.something__child1--submod, | ||
273 | .something:hover .something__child2--mod.something__child2--submod { | ||
274 | font-size: 2.75em; | ||
275 | } | ||
276 | |||
277 | .test .something__child3--mod, | ||
278 | .test .something__child4--mod { | ||
279 | font-size: 2.5em; | ||
280 | } | ||
281 | |||
282 | .test .something__child3--mod.something__child3--submod, | ||
283 | .test .something__child4--mod.something__child4--submod { | ||
284 | font-size: 2.75em; | ||
285 | } | ||
286 | } | ||
287 | } | ||
288 | |||
289 | @include assert('element modifier, single related element, manual selector before') { /// 9 /// | ||
290 | @include output(false) { | ||
291 | @include iro-bem-block('something') { | ||
292 | &:hover { | ||
293 | @include iro-bem-element('child1') { | ||
294 | @include iro-bem-next-element('child2') { | ||
295 | @include iro-bem-modifier('mod1') { | ||
296 | font-size: 2.5em; | ||
297 | |||
298 | @include iro-bem-modifier('submod1') { | ||
299 | font-size: 2.75em; | ||
300 | } | ||
301 | } | ||
302 | } | ||
303 | } | ||
304 | } | ||
305 | |||
306 | .test & { | ||
307 | @include iro-bem-element('child3') { | ||
308 | @include iro-bem-next-element('child4') { | ||
309 | @include iro-bem-modifier('mod1') { | ||
310 | font-size: 2.5em; | ||
311 | |||
312 | @include iro-bem-modifier('submod1') { | ||
313 | font-size: 2.75em; | ||
314 | } | ||
315 | } | ||
316 | } | ||
317 | } | ||
318 | } | ||
319 | |||
320 | @include iro-bem-element('child5') { | ||
321 | &:hover { | ||
322 | @include iro-bem-next-element('child6') { | ||
323 | @include iro-bem-modifier('mod2') { | ||
324 | font-size: 2.5em; | ||
325 | |||
326 | @include iro-bem-modifier('submod2') { | ||
327 | font-size: 2.75em; | ||
328 | } | ||
329 | } | ||
330 | } | ||
331 | } | ||
332 | |||
333 | .test & { | ||
334 | @include iro-bem-next-element('child7') { | ||
335 | @include iro-bem-modifier('mod2') { | ||
336 | font-size: 2.5em; | ||
337 | |||
338 | @include iro-bem-modifier('submod2') { | ||
339 | font-size: 2.75em; | ||
340 | } | ||
341 | } | ||
342 | } | ||
343 | } | ||
344 | } | ||
345 | } | ||
346 | } | ||
347 | |||
348 | @include expect(false) { | ||
349 | .something:hover .something__child1 + .something__child2--mod1 { | ||
350 | font-size: 2.5em; | ||
351 | } | ||
352 | |||
353 | .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 { | ||
354 | font-size: 2.75em; | ||
355 | } | ||
356 | |||
357 | .test .something__child3 + .something__child4--mod1 { | ||
358 | font-size: 2.5em; | ||
359 | } | ||
360 | |||
361 | .test .something__child3 + .something__child4--mod1.something__child4--submod1 { | ||
362 | font-size: 2.75em; | ||
363 | } | ||
364 | |||
365 | .something__child5:hover + .something__child6--mod2 { | ||
366 | font-size: 2.5em; | ||
367 | } | ||
368 | |||
369 | .something__child5:hover + .something__child6--mod2.something__child6--submod2 { | ||
370 | font-size: 2.75em; | ||
371 | } | ||
372 | |||
373 | .test .something__child5 + .something__child7--mod2 { | ||
374 | font-size: 2.5em; | ||
375 | } | ||
376 | |||
377 | .test .something__child5 + .something__child7--mod2.something__child7--submod2 { | ||
378 | font-size: 2.75em; | ||
379 | } | ||
380 | } | ||
381 | } | ||
382 | |||
383 | @include assert('element modifier, multiple related elements, manual selector before') { /// 10 /// | ||
384 | @include output(false) { | ||
385 | @include iro-bem-block('something') { | ||
386 | &:hover { | ||
387 | @include iro-bem-element('child1') { | ||
388 | @include iro-bem-next-element('child2', 'child3') { | ||
389 | @include iro-bem-modifier('mod1') { | ||
390 | font-size: 2.5em; | ||
391 | |||
392 | @include iro-bem-modifier('submod1') { | ||
393 | font-size: 2.75em; | ||
394 | } | ||
395 | } | ||
396 | } | ||
397 | } | ||
398 | } | ||
399 | |||
400 | .test & { | ||
401 | @include iro-bem-element('child4') { | ||
402 | @include iro-bem-next-element('child5', 'child6') { | ||
403 | @include iro-bem-modifier('mod1') { | ||
404 | font-size: 2.5em; | ||
405 | |||
406 | @include iro-bem-modifier('submod1') { | ||
407 | font-size: 2.75em; | ||
408 | } | ||
409 | } | ||
410 | } | ||
411 | } | ||
412 | } | ||
413 | |||
414 | @include iro-bem-element('child7') { | ||
415 | &:hover { | ||
416 | @include iro-bem-next-element('child8', 'child9') { | ||
417 | @include iro-bem-modifier('mod2') { | ||
418 | font-size: 2.5em; | ||
419 | |||
420 | @include iro-bem-modifier('submod2') { | ||
421 | font-size: 2.75em; | ||
422 | } | ||
423 | } | ||
424 | } | ||
425 | } | ||
426 | |||
427 | .test & { | ||
428 | @include iro-bem-next-element('child10', 'child11') { | ||
429 | @include iro-bem-modifier('mod2') { | ||
430 | font-size: 2.5em; | ||
431 | |||
432 | @include iro-bem-modifier('submod2') { | ||
433 | font-size: 2.75em; | ||
434 | } | ||
435 | } | ||
436 | } | ||
437 | } | ||
438 | } | ||
439 | } | ||
440 | } | ||
441 | |||
442 | @include expect(false) { | ||
443 | .something:hover .something__child1 + .something__child2--mod1, | ||
444 | .something:hover .something__child1 + .something__child3--mod1 { | ||
445 | font-size: 2.5em; | ||
446 | } | ||
447 | |||
448 | .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1, | ||
449 | .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 { | ||
450 | font-size: 2.75em; | ||
451 | } | ||
452 | |||
453 | .test .something__child4 + .something__child5--mod1, | ||
454 | .test .something__child4 + .something__child6--mod1 { | ||
455 | font-size: 2.5em; | ||
456 | } | ||
457 | |||
458 | .test .something__child4 + .something__child5--mod1.something__child5--submod1, | ||
459 | .test .something__child4 + .something__child6--mod1.something__child6--submod1 { | ||
460 | font-size: 2.75em; | ||
461 | } | ||
462 | |||
463 | .something__child7:hover + .something__child8--mod2, | ||
464 | .something__child7:hover + .something__child9--mod2 { | ||
465 | font-size: 2.5em; | ||
466 | } | ||
467 | |||
468 | .something__child7:hover + .something__child8--mod2.something__child8--submod2, | ||
469 | .something__child7:hover + .something__child9--mod2.something__child9--submod2 { | ||
470 | font-size: 2.75em; | ||
471 | } | ||
472 | |||
473 | .test .something__child7 + .something__child10--mod2, | ||
474 | .test .something__child7 + .something__child11--mod2 { | ||
475 | font-size: 2.5em; | ||
476 | } | ||
477 | |||
478 | .test .something__child7 + .something__child10--mod2.something__child10--submod2, | ||
479 | .test .something__child7 + .something__child11--mod2.something__child11--submod2 { | ||
480 | font-size: 2.75em; | ||
481 | } | ||
482 | } | ||
483 | } | ||
484 | |||
485 | /* | ||
486 | @include assert('element modifier, in at-theme') { /// 11 /// | ||
487 | @include output(false) { | ||
488 | @include iro-bem-block('something') { | ||
489 | @include iro-bem-at-theme('dark') { | ||
490 | @include iro-bem-element('child') { | ||
491 | @include iro-bem-modifier('mod') { | ||
492 | font-size: 2.5em; | ||
493 | |||
494 | @include iro-bem-modifier('submod') { | ||
495 | font-size: 2.75em; | ||
496 | } | ||
497 | } | ||
498 | } | ||
499 | } | ||
500 | } | ||
501 | } | ||
502 | |||
503 | @include expect(false) { | ||
504 | .t-dark .something__child--mod, | ||
505 | [class*=' t-'] .t-dark .something__child--mod, | ||
506 | [class^='t-'] .t-dark .something__child--mod { | ||
507 | font-size: 2.5em; | ||
508 | } | ||
509 | |||
510 | .t-dark .something__child--mod.something__child--submod, | ||
511 | [class*=' t-'] .t-dark .something__child--mod.something__child--submod, | ||
512 | [class^='t-'] .t-dark .something__child--mod.something__child--submod { | ||
513 | font-size: 2.75em; | ||
514 | } | ||
515 | } | ||
516 | } | ||
517 | */ | ||
518 | |||
519 | @include assert('nested block modifiers, extending') { /// 12 /// | ||
520 | @include output { | ||
521 | @include iro-bem-block('something') { | ||
522 | @include iro-bem-modifier('mod') { | ||
523 | font-size: 1.5em; | ||
524 | |||
525 | @include iro-bem-modifier('submod' true) { | ||
526 | font-size: 1.75em; | ||
527 | } | ||
528 | } | ||
529 | } | ||
530 | } | ||
531 | |||
532 | @include expect { | ||
533 | .something--mod { | ||
534 | font-size: 1.5em; | ||
535 | } | ||
536 | |||
537 | .something--mod--submod { | ||
538 | font-size: 1.75em; | ||
539 | } | ||
540 | } | ||
541 | } | ||
542 | |||
543 | @include assert('nested element modifiers, extending') { /// 13 /// | ||
544 | @include output { | ||
545 | @include iro-bem-block('something') { | ||
546 | @include iro-bem-element('child') { | ||
547 | @include iro-bem-modifier('mod') { | ||
548 | font-size: 2.5em; | ||
549 | |||
550 | @include iro-bem-modifier('submod' true) { | ||
551 | font-size: 2.75em; | ||
552 | } | ||
553 | } | ||
554 | } | ||
555 | } | ||
556 | } | ||
557 | |||
558 | @include expect { | ||
559 | .something__child--mod { | ||
560 | font-size: 2.5em; | ||
561 | } | ||
562 | |||
563 | .something__child--mod--submod { | ||
564 | font-size: 2.75em; | ||
565 | } | ||
566 | } | ||
567 | } | ||
568 | |||
569 | @include assert('block and element modifiers, single element') { /// 14 /// | ||
570 | @include output { | ||
571 | @include iro-bem-block('something') { | ||
572 | @include iro-bem-modifier('mod1') { | ||
573 | font-size: 1.5em; | ||
574 | |||
575 | @include iro-bem-modifier('submod1') { | ||
576 | font-size: 1.75em; | ||
577 | } | ||
578 | |||
579 | @include iro-bem-element('child') { | ||
580 | @include iro-bem-modifier('mod2') { | ||
581 | font-size: 2.5em; | ||
582 | |||
583 | @include iro-bem-modifier('submod2') { | ||
584 | font-size: 2.75em; | ||
585 | } | ||
586 | } | ||
587 | } | ||
588 | } | ||
589 | } | ||
590 | } | ||
591 | |||
592 | @include expect { | ||
593 | .something--mod1 { | ||
594 | font-size: 1.5em; | ||
595 | } | ||
596 | |||
597 | .something--mod1.something--submod1 { | ||
598 | font-size: 1.75em; | ||
599 | } | ||
600 | |||
601 | .something--mod1 .something__child--mod2 { | ||
602 | font-size: 2.5em; | ||
603 | } | ||
604 | |||
605 | .something--mod1 .something__child--mod2.something__child--submod2 { | ||
606 | font-size: 2.75em; | ||
607 | } | ||
608 | } | ||
609 | } | ||
610 | |||
611 | @include assert('block and element modifiers, multiple elements') { /// 15 /// | ||
612 | @include output { | ||
613 | @include iro-bem-block('something') { | ||
614 | @include iro-bem-modifier('mod1') { | ||
615 | font-size: 1.5em; | ||
616 | |||
617 | @include iro-bem-modifier('submod') { | ||
618 | font-size: 1.75em; | ||
619 | } | ||
620 | |||
621 | @include iro-bem-element('child1', 'child2') { | ||
622 | @include iro-bem-modifier('mod2') { | ||
623 | font-size: 2.5em; | ||
624 | |||
625 | @include iro-bem-modifier('submod2') { | ||
626 | font-size: 2.75em; | ||
627 | } | ||
628 | } | ||
629 | } | ||
630 | } | ||
631 | } | ||
632 | } | ||
633 | |||
634 | @include expect { | ||
635 | .something--mod1 { | ||
636 | font-size: 1.5em; | ||
637 | } | ||
638 | |||
639 | .something--mod1.something--submod1 { | ||
640 | font-size: 1.75em; | ||
641 | } | ||
642 | |||
643 | .something--mod1 .something__child1--mod2, | ||
644 | .something--mod1 .something__child2--mod2 { | ||
645 | font-size: 2.5em; | ||
646 | } | ||
647 | |||
648 | .something--mod1 .something__child1--mod2.something__child1--submod2, | ||
649 | .something--mod1 .something__child2--mod2.something__child2--submod2 { | ||
650 | font-size: 2.75em; | ||
651 | } | ||
652 | } | ||
653 | } | ||
654 | } | ||