Skip to content
This repository
Browse code

Ensure that silent push and pull classes work given that they cannot

make use of the push and pull attribute selector.

Fixes #9
commit 31a547fa00f47b22635a8e748c7a9de22c79d6b8 1 parent 8831cc3
Harry Roberts authored March 16, 2013
1  CHANGELOG.md
Source Rendered
@@ -9,3 +9,4 @@
9 9
 * **1.6**       Add push and pull classes
10 10
 * **1.7**       Ability to define custom breakpoints
11 11
 * **1.7.1**     Add `!default` flags to library variables
  12
+* **1.7.2**     Fix push and pull when using silent classes
183  csswizardry-grids.scss
@@ -173,6 +173,17 @@ $class-type:            unquote(".");
173 173
 }
174 174
 
175 175
 
  176
+/**
  177
+ * Drop relative positioning into silent classes which can’t take advantage of
  178
+ * the `[class*="push--"]` and `[class*="pull--"]` selectors.
  179
+ */
  180
+@mixin silent-relative(){
  181
+    @if $use-silent-classes == true{
  182
+        position:relative;
  183
+    }
  184
+}
  185
+
  186
+
176 187
 
177 188
 
178 189
 
@@ -380,89 +391,89 @@ $class-type:            unquote(".");
380 391
     /**
381 392
      * Whole
382 393
      */
383  
-    #{$class-type}push--#{$namespace}one-whole           { left:100%; }
  394
+    #{$class-type}push--#{$namespace}one-whole           { left:100%; @include silent-relative(); }
384 395
 
385 396
 
386 397
     /**
387 398
      * Halves
388 399
      */
389  
-    #{$class-type}push--#{$namespace}one-half            { left:50%; }
  400
+    #{$class-type}push--#{$namespace}one-half            { left:50%; @include silent-relative(); }
390 401
 
391 402
 
392 403
     /**
393 404
      * Thirds
394 405
      */
395  
-    #{$class-type}push--#{$namespace}one-third           { left:33.333%; }
396  
-    #{$class-type}push--#{$namespace}two-thirds          { left:66.666%; }
  406
+    #{$class-type}push--#{$namespace}one-third           { left:33.333%; @include silent-relative(); }
  407
+    #{$class-type}push--#{$namespace}two-thirds          { left:66.666%; @include silent-relative(); }
397 408
 
398 409
 
399 410
     /**
400 411
      * Quarters
401 412
      */
402  
-    #{$class-type}push--#{$namespace}one-quarter         { left:25%; }
403  
-    #{$class-type}push--#{$namespace}two-quarters        { @extend #{$class-type}push--#{$namespace}one-half; }
404  
-    #{$class-type}push--#{$namespace}three-quarters      { left:75%; }
  413
+    #{$class-type}push--#{$namespace}one-quarter         { left:25%; @include silent-relative(); }
  414
+    #{$class-type}push--#{$namespace}two-quarters        { @extend #{$class-type}push--#{$namespace}one-half; @include silent-relative(); }
  415
+    #{$class-type}push--#{$namespace}three-quarters      { left:75%; @include silent-relative(); }
405 416
 
406 417
 
407 418
     /**
408 419
      * Fifths
409 420
      */
410  
-    #{$class-type}push--#{$namespace}one-fifth           { left:20%; }
411  
-    #{$class-type}push--#{$namespace}two-fifths          { left:40%; }
412  
-    #{$class-type}push--#{$namespace}three-fifths        { left:60%; }
413  
-    #{$class-type}push--#{$namespace}four-fifths         { left:80%; }
  421
+    #{$class-type}push--#{$namespace}one-fifth           { left:20%; @include silent-relative(); }
  422
+    #{$class-type}push--#{$namespace}two-fifths          { left:40%; @include silent-relative(); }
  423
+    #{$class-type}push--#{$namespace}three-fifths        { left:60%; @include silent-relative(); }
  424
+    #{$class-type}push--#{$namespace}four-fifths         { left:80%; @include silent-relative(); }
414 425
 
415 426
 
416 427
     /**
417 428
      * Sixths
418 429
      */
419  
-    #{$class-type}push--#{$namespace}one-sixth           { left:16.666%; }
420  
-    #{$class-type}push--#{$namespace}two-sixths          { @extend #{$class-type}push--#{$namespace}one-third; }
421  
-    #{$class-type}push--#{$namespace}three-sixths        { @extend #{$class-type}push--#{$namespace}one-half; }
422  
-    #{$class-type}push--#{$namespace}four-sixths         { @extend #{$class-type}push--#{$namespace}two-thirds; }
423  
-    #{$class-type}push--#{$namespace}five-sixths         { left:83.333%; }
  430
+    #{$class-type}push--#{$namespace}one-sixth           { left:16.666%; @include silent-relative(); }
  431
+    #{$class-type}push--#{$namespace}two-sixths          { @extend #{$class-type}push--#{$namespace}one-third; @include silent-relative(); }
  432
+    #{$class-type}push--#{$namespace}three-sixths        { @extend #{$class-type}push--#{$namespace}one-half; @include silent-relative(); }
  433
+    #{$class-type}push--#{$namespace}four-sixths         { @extend #{$class-type}push--#{$namespace}two-thirds; @include silent-relative(); }
  434
+    #{$class-type}push--#{$namespace}five-sixths         { left:83.333%; @include silent-relative(); }
424 435
 
425 436
 
426 437
     /**
427 438
      * Eighths
428 439
      */
429  
-    #{$class-type}push--#{$namespace}one-eighth          { left:12.5%; }
430  
-    #{$class-type}push--#{$namespace}two-eighths         { @extend #{$class-type}push--#{$namespace}one-quarter; }
431  
-    #{$class-type}push--#{$namespace}three-eighths       { left:37.5%; }
432  
-    #{$class-type}push--#{$namespace}four-eighths        { @extend #{$class-type}push--#{$namespace}one-half; }
433  
-    #{$class-type}push--#{$namespace}five-eighths        { left:62.5%; }
434  
-    #{$class-type}push--#{$namespace}six-eighths         { @extend #{$class-type}push--#{$namespace}three-quarters; }
435  
-    #{$class-type}push--#{$namespace}seven-eighths       { left:87.5%; }
  440
+    #{$class-type}push--#{$namespace}one-eighth          { left:12.5%; @include silent-relative(); }
  441
+    #{$class-type}push--#{$namespace}two-eighths         { @extend #{$class-type}push--#{$namespace}one-quarter; @include silent-relative(); }
  442
+    #{$class-type}push--#{$namespace}three-eighths       { left:37.5%; @include silent-relative(); }
  443
+    #{$class-type}push--#{$namespace}four-eighths        { @extend #{$class-type}push--#{$namespace}one-half; @include silent-relative(); }
  444
+    #{$class-type}push--#{$namespace}five-eighths        { left:62.5%; @include silent-relative(); }
  445
+    #{$class-type}push--#{$namespace}six-eighths         { @extend #{$class-type}push--#{$namespace}three-quarters; @include silent-relative(); }
  446
+    #{$class-type}push--#{$namespace}seven-eighths       { left:87.5%; @include silent-relative(); }
436 447
 
437 448
 
438 449
     /**
439 450
      * Tenths
440 451
      */
441  
-    #{$class-type}push--#{$namespace}one-tenth           { left:10%; }
442  
-    #{$class-type}push--#{$namespace}two-tenths          { @extend #{$class-type}push--#{$namespace}one-fifth; }
443  
-    #{$class-type}push--#{$namespace}three-tenths        { left:30%; }
444  
-    #{$class-type}push--#{$namespace}four-tenths         { @extend #{$class-type}push--#{$namespace}two-fifths; }
445  
-    #{$class-type}push--#{$namespace}five-tenths         { @extend #{$class-type}push--#{$namespace}one-half; }
446  
-    #{$class-type}push--#{$namespace}six-tenths          { @extend #{$class-type}push--#{$namespace}three-fifths; }
447  
-    #{$class-type}push--#{$namespace}seven-tenths        { left:70%; }
448  
-    #{$class-type}push--#{$namespace}eight-tenths        { @extend #{$class-type}push--#{$namespace}four-fifths; }
449  
-    #{$class-type}push--#{$namespace}nine-tenths         { left:90%; }
  452
+    #{$class-type}push--#{$namespace}one-tenth           { left:10%; @include silent-relative(); }
  453
+    #{$class-type}push--#{$namespace}two-tenths          { @extend #{$class-type}push--#{$namespace}one-fifth; @include silent-relative(); }
  454
+    #{$class-type}push--#{$namespace}three-tenths        { left:30%; @include silent-relative(); }
  455
+    #{$class-type}push--#{$namespace}four-tenths         { @extend #{$class-type}push--#{$namespace}two-fifths; @include silent-relative(); }
  456
+    #{$class-type}push--#{$namespace}five-tenths         { @extend #{$class-type}push--#{$namespace}one-half; @include silent-relative(); }
  457
+    #{$class-type}push--#{$namespace}six-tenths          { @extend #{$class-type}push--#{$namespace}three-fifths; @include silent-relative(); }
  458
+    #{$class-type}push--#{$namespace}seven-tenths        { left:70%; @include silent-relative(); }
  459
+    #{$class-type}push--#{$namespace}eight-tenths        { @extend #{$class-type}push--#{$namespace}four-fifths; @include silent-relative(); }
  460
+    #{$class-type}push--#{$namespace}nine-tenths         { left:90%; @include silent-relative(); }
450 461
 
451 462
 
452 463
     /**
453 464
      * Twelfths
454 465
      */
455  
-    #{$class-type}push--#{$namespace}one-twelfth         { left:8.333%; }
456  
-    #{$class-type}push--#{$namespace}two-twelfths        { @extend #{$class-type}push--#{$namespace}one-sixth; }
457  
-    #{$class-type}push--#{$namespace}three-twelfths      { @extend #{$class-type}push--#{$namespace}one-quarter; }
458  
-    #{$class-type}push--#{$namespace}four-twelfths       { @extend #{$class-type}push--#{$namespace}one-third; }
459  
-    #{$class-type}push--#{$namespace}five-twelfths       { left:41.666% }
460  
-    #{$class-type}push--#{$namespace}six-twelfths        { @extend #{$class-type}push--#{$namespace}one-half; }
461  
-    #{$class-type}push--#{$namespace}seven-twelfths      { left:58.333%; }
462  
-    #{$class-type}push--#{$namespace}eight-twelfths      { @extend #{$class-type}push--#{$namespace}two-thirds; }
463  
-    #{$class-type}push--#{$namespace}nine-twelfths       { @extend #{$class-type}push--#{$namespace}three-quarters; }
464  
-    #{$class-type}push--#{$namespace}ten-twelfths        { @extend #{$class-type}push--#{$namespace}five-sixths; }
465  
-    #{$class-type}push--#{$namespace}eleven-twelfths     { left:91.666%; }
  466
+    #{$class-type}push--#{$namespace}one-twelfth         { left:8.333%; @include silent-relative(); }
  467
+    #{$class-type}push--#{$namespace}two-twelfths        { @extend #{$class-type}push--#{$namespace}one-sixth; @include silent-relative(); }
  468
+    #{$class-type}push--#{$namespace}three-twelfths      { @extend #{$class-type}push--#{$namespace}one-quarter; @include silent-relative(); }
  469
+    #{$class-type}push--#{$namespace}four-twelfths       { @extend #{$class-type}push--#{$namespace}one-third; @include silent-relative(); }
  470
+    #{$class-type}push--#{$namespace}five-twelfths       { left:41.666%; @include silent-relative(); }
  471
+    #{$class-type}push--#{$namespace}six-twelfths        { @extend #{$class-type}push--#{$namespace}one-half; @include silent-relative(); }
  472
+    #{$class-type}push--#{$namespace}seven-twelfths      { left:58.333%; @include silent-relative(); }
  473
+    #{$class-type}push--#{$namespace}eight-twelfths      { @extend #{$class-type}push--#{$namespace}two-thirds; @include silent-relative(); }
  474
+    #{$class-type}push--#{$namespace}nine-twelfths       { @extend #{$class-type}push--#{$namespace}three-quarters; @include silent-relative(); }
  475
+    #{$class-type}push--#{$namespace}ten-twelfths        { @extend #{$class-type}push--#{$namespace}five-sixths; @include silent-relative(); }
  476
+    #{$class-type}push--#{$namespace}eleven-twelfths     { left:91.666%; @include silent-relative(); }
466 477
 }
467 478
 
468 479
 @if $push == true {
@@ -502,89 +513,89 @@ $class-type:            unquote(".");
502 513
     /**
503 514
      * Whole
504 515
      */
505  
-    #{$class-type}pull--#{$namespace}one-whole           { right:100%; }
  516
+    #{$class-type}pull--#{$namespace}one-whole           { right:100%; @include silent-relative(); }
506 517
 
507 518
 
508 519
     /**
509 520
      * Halves
510 521
      */
511  
-    #{$class-type}pull--#{$namespace}one-half            { right:50%; }
  522
+    #{$class-type}pull--#{$namespace}one-half            { right:50%; @include silent-relative(); }
512 523
 
513 524
 
514 525
     /**
515 526
      * Thirds
516 527
      */
517  
-    #{$class-type}pull--#{$namespace}one-third           { right:33.333%; }
518  
-    #{$class-type}pull--#{$namespace}two-thirds          { right:66.666%; }
  528
+    #{$class-type}pull--#{$namespace}one-third           { right:33.333%; @include silent-relative(); }
  529
+    #{$class-type}pull--#{$namespace}two-thirds          { right:66.666%; @include silent-relative(); }
519 530
 
520 531
 
521 532
     /**
522 533
      * Quarters
523 534
      */
524  
-    #{$class-type}pull--#{$namespace}one-quarter         { right:25%; }
525  
-    #{$class-type}pull--#{$namespace}two-quarters        { @extend #{$class-type}pull--#{$namespace}one-half; }
526  
-    #{$class-type}pull--#{$namespace}three-quarters      { right:75%; }
  535
+    #{$class-type}pull--#{$namespace}one-quarter         { right:25%; @include silent-relative(); }
  536
+    #{$class-type}pull--#{$namespace}two-quarters        { @extend #{$class-type}pull--#{$namespace}one-half; @include silent-relative(); }
  537
+    #{$class-type}pull--#{$namespace}three-quarters      { right:75%; @include silent-relative(); }
527 538
 
528 539
 
529 540
     /**
530 541
      * Fifths
531 542
      */
532  
-    #{$class-type}pull--#{$namespace}one-fifth           { right:20%; }
533  
-    #{$class-type}pull--#{$namespace}two-fifths          { right:40%; }
534  
-    #{$class-type}pull--#{$namespace}three-fifths        { right:60%; }
535  
-    #{$class-type}pull--#{$namespace}four-fifths         { right:80%; }
  543
+    #{$class-type}pull--#{$namespace}one-fifth           { right:20%; @include silent-relative(); }
  544
+    #{$class-type}pull--#{$namespace}two-fifths          { right:40%; @include silent-relative(); }
  545
+    #{$class-type}pull--#{$namespace}three-fifths        { right:60%; @include silent-relative(); }
  546
+    #{$class-type}pull--#{$namespace}four-fifths         { right:80%; @include silent-relative(); }
536 547
 
537 548
 
538 549
     /**
539 550
      * Sixths
540 551
      */
541  
-    #{$class-type}pull--#{$namespace}one-sixth           { right:16.666%; }
542  
-    #{$class-type}pull--#{$namespace}two-sixths          { @extend #{$class-type}pull--#{$namespace}one-third; }
543  
-    #{$class-type}pull--#{$namespace}three-sixths        { @extend #{$class-type}pull--#{$namespace}one-half; }
544  
-    #{$class-type}pull--#{$namespace}four-sixths         { @extend #{$class-type}pull--#{$namespace}two-thirds; }
545  
-    #{$class-type}pull--#{$namespace}five-sixths         { right:83.333%; }
  552
+    #{$class-type}pull--#{$namespace}one-sixth           { right:16.666%; @include silent-relative(); }
  553
+    #{$class-type}pull--#{$namespace}two-sixths          { @extend #{$class-type}pull--#{$namespace}one-third; @include silent-relative(); }
  554
+    #{$class-type}pull--#{$namespace}three-sixths        { @extend #{$class-type}pull--#{$namespace}one-half; @include silent-relative(); }
  555
+    #{$class-type}pull--#{$namespace}four-sixths         { @extend #{$class-type}pull--#{$namespace}two-thirds; @include silent-relative(); }
  556
+    #{$class-type}pull--#{$namespace}five-sixths         { right:83.333%; @include silent-relative(); }
546 557
 
547 558
 
548 559
     /**
549 560
      * Eighths
550 561
      */
551  
-    #{$class-type}pull--#{$namespace}one-eighth          { right:12.5%; }
552  
-    #{$class-type}pull--#{$namespace}two-eighths         { @extend #{$class-type}pull--#{$namespace}one-quarter; }
553  
-    #{$class-type}pull--#{$namespace}three-eighths       { right:37.5%; }
554  
-    #{$class-type}pull--#{$namespace}four-eighths        { @extend #{$class-type}pull--#{$namespace}one-half; }
555  
-    #{$class-type}pull--#{$namespace}five-eighths        { right:62.5%; }
556  
-    #{$class-type}pull--#{$namespace}six-eighths         { @extend #{$class-type}pull--#{$namespace}three-quarters; }
557  
-    #{$class-type}pull--#{$namespace}seven-eighths       { right:87.5%; }
  562
+    #{$class-type}pull--#{$namespace}one-eighth          { right:12.5%; @include silent-relative(); }
  563
+    #{$class-type}pull--#{$namespace}two-eighths         { @extend #{$class-type}pull--#{$namespace}one-quarter; @include silent-relative(); }
  564
+    #{$class-type}pull--#{$namespace}three-eighths       { right:37.5%; @include silent-relative(); }
  565
+    #{$class-type}pull--#{$namespace}four-eighths        { @extend #{$class-type}pull--#{$namespace}one-half; @include silent-relative(); }
  566
+    #{$class-type}pull--#{$namespace}five-eighths        { right:62.5%; @include silent-relative(); }
  567
+    #{$class-type}pull--#{$namespace}six-eighths         { @extend #{$class-type}pull--#{$namespace}three-quarters; @include silent-relative(); }
  568
+    #{$class-type}pull--#{$namespace}seven-eighths       { right:87.5%; @include silent-relative(); }
558 569
 
559 570
 
560 571
     /**
561 572
      * Tenths
562 573
      */
563  
-    #{$class-type}pull--#{$namespace}one-tenth           { right:10%; }
564  
-    #{$class-type}pull--#{$namespace}two-tenths          { @extend #{$class-type}pull--#{$namespace}one-fifth; }
565  
-    #{$class-type}pull--#{$namespace}three-tenths        { right:30%; }
566  
-    #{$class-type}pull--#{$namespace}four-tenths         { @extend #{$class-type}pull--#{$namespace}two-fifths; }
567  
-    #{$class-type}pull--#{$namespace}five-tenths         { @extend #{$class-type}pull--#{$namespace}one-half; }
568  
-    #{$class-type}pull--#{$namespace}six-tenths          { @extend #{$class-type}pull--#{$namespace}three-fifths; }
569  
-    #{$class-type}pull--#{$namespace}seven-tenths        { right:70%; }
570  
-    #{$class-type}pull--#{$namespace}eight-tenths        { @extend #{$class-type}pull--#{$namespace}four-fifths; }
571  
-    #{$class-type}pull--#{$namespace}nine-tenths         { right:90%; }
  574
+    #{$class-type}pull--#{$namespace}one-tenth           { right:10%; @include silent-relative(); }
  575
+    #{$class-type}pull--#{$namespace}two-tenths          { @extend #{$class-type}pull--#{$namespace}one-fifth; @include silent-relative(); }
  576
+    #{$class-type}pull--#{$namespace}three-tenths        { right:30%; @include silent-relative(); }
  577
+    #{$class-type}pull--#{$namespace}four-tenths         { @extend #{$class-type}pull--#{$namespace}two-fifths; @include silent-relative(); }
  578
+    #{$class-type}pull--#{$namespace}five-tenths         { @extend #{$class-type}pull--#{$namespace}one-half; @include silent-relative(); }
  579
+    #{$class-type}pull--#{$namespace}six-tenths          { @extend #{$class-type}pull--#{$namespace}three-fifths; @include silent-relative(); }
  580
+    #{$class-type}pull--#{$namespace}seven-tenths        { right:70%; @include silent-relative(); }
  581
+    #{$class-type}pull--#{$namespace}eight-tenths        { @extend #{$class-type}pull--#{$namespace}four-fifths; @include silent-relative(); }
  582
+    #{$class-type}pull--#{$namespace}nine-tenths         { right:90%; @include silent-relative(); }
572 583
 
573 584
 
574 585
     /**
575 586
      * Twelfths
576 587
      */
577  
-    #{$class-type}pull--#{$namespace}one-twelfth         { right:8.333%; }
578  
-    #{$class-type}pull--#{$namespace}two-twelfths        { @extend #{$class-type}pull--#{$namespace}one-sixth; }
579  
-    #{$class-type}pull--#{$namespace}three-twelfths      { @extend #{$class-type}pull--#{$namespace}one-quarter; }
580  
-    #{$class-type}pull--#{$namespace}four-twelfths       { @extend #{$class-type}pull--#{$namespace}one-third; }
581  
-    #{$class-type}pull--#{$namespace}five-twelfths       { right:41.666% }
582  
-    #{$class-type}pull--#{$namespace}six-twelfths        { @extend #{$class-type}pull--#{$namespace}one-half; }
583  
-    #{$class-type}pull--#{$namespace}seven-twelfths      { right:58.333%; }
584  
-    #{$class-type}pull--#{$namespace}eight-twelfths      { @extend #{$class-type}pull--#{$namespace}two-thirds; }
585  
-    #{$class-type}pull--#{$namespace}nine-twelfths       { @extend #{$class-type}pull--#{$namespace}three-quarters; }
586  
-    #{$class-type}pull--#{$namespace}ten-twelfths        { @extend #{$class-type}pull--#{$namespace}five-sixths; }
587  
-    #{$class-type}pull--#{$namespace}eleven-twelfths     { right:91.666%; }
  588
+    #{$class-type}pull--#{$namespace}one-twelfth         { right:8.333%; @include silent-relative(); }
  589
+    #{$class-type}pull--#{$namespace}two-twelfths        { @extend #{$class-type}pull--#{$namespace}one-sixth; @include silent-relative(); }
  590
+    #{$class-type}pull--#{$namespace}three-twelfths      { @extend #{$class-type}pull--#{$namespace}one-quarter; @include silent-relative(); }
  591
+    #{$class-type}pull--#{$namespace}four-twelfths       { @extend #{$class-type}pull--#{$namespace}one-third; @include silent-relative(); }
  592
+    #{$class-type}pull--#{$namespace}five-twelfths       { right:41.666%; @include silent-relative(); }
  593
+    #{$class-type}pull--#{$namespace}six-twelfths        { @extend #{$class-type}pull--#{$namespace}one-half; @include silent-relative(); }
  594
+    #{$class-type}pull--#{$namespace}seven-twelfths      { right:58.333%; @include silent-relative(); }
  595
+    #{$class-type}pull--#{$namespace}eight-twelfths      { @extend #{$class-type}pull--#{$namespace}two-thirds; @include silent-relative(); }
  596
+    #{$class-type}pull--#{$namespace}nine-twelfths       { @extend #{$class-type}pull--#{$namespace}three-quarters; @include silent-relative(); }
  597
+    #{$class-type}pull--#{$namespace}ten-twelfths        { @extend #{$class-type}pull--#{$namespace}five-sixths; @include silent-relative(); }
  598
+    #{$class-type}pull--#{$namespace}eleven-twelfths     { right:91.666%; @include silent-relative(); }
588 599
 }
589 600
 
590 601
 @if $pull == true{

2 notes on commit 31a547f

Ben Scott

Do you need to have the @includes on classes that @extend something else? As the class that is being extended from already has slient-relative() applied to it. e.g.

#{$class-type}push--#{$namespace}two-quarters        { @extend #{$class-type}push--#{$namespace}one-half; @include silent-relative(); }

could continue to be

#{$class-type}push--#{$namespace}two-quarters        { @extend #{$class-type}push--#{$namespace}one-half; }

as one-half already has @include silent-relative();

Harry Roberts
Owner

Good thinking; I just blitzed through and applied it to all of them! Thanks man :)

Please sign in to comment.
Something went wrong with that request. Please try again.