projects / sencha-touch.git / blame
| Commit | Line | Data |
|---|---|---|
| c4685c84 TL |
1 | /** |
| 2 | * Checkerboard background pattern | |
| 3 | * | |
| 4 | * @link http://lea.verou.me/css3patterns/#checkerboard | |
| 5 | * @link http://lea.verou.me/css3patterns/#diagonal-checkerboard | |
| 6 | * | |
| 7 | * @author Lea Verou http://lea.verou.me/ for the original pattern | |
| 8 | * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin | |
| 9 | */ | |
| 10 | ||
| 11 | @import "compass/css3/images"; | |
| 12 | ||
| 13 | @mixin background-checkerboard($bg-color: #eee, $box-color: black, $size: 60px) { | |
| 14 | $transparent: rgba(black, 0); | |
| 15 | background-color: $bg-color; | |
| 16 | @include background-image( | |
| 17 | linear-gradient( | |
| 18 | 45deg, | |
| 19 | $box-color 25%, | |
| 20 | $transparent 25%, | |
| 21 | $transparent 75%, | |
| 22 | $box-color 75%, | |
| 23 | $box-color | |
| 24 | ), | |
| 25 | linear-gradient( | |
| 26 | 45deg, | |
| 27 | $box-color 25%, | |
| 28 | $transparent 25%, | |
| 29 | $transparent 75%, | |
| 30 | $box-color 75%, | |
| 31 | $box-color | |
| 32 | ) | |
| 33 | ); | |
| 34 | background-size: $size $size; | |
| 35 | background-position: 0 0, ($size / 2) ($size / 2); | |
| 36 | } | |
| 37 | ||
| 38 | ||
| 39 | @mixin background-checkerboard-diagonal($bg-color: #eee, $box-color: black, $size: 60px) { | |
| 40 | $transparent: rgba(black, 0); | |
| 41 | background-color: $bg-color; | |
| 42 | @include background-image( | |
| 43 | linear-gradient( | |
| 44 | 45deg, | |
| 45 | $box-color 25%, | |
| 46 | $transparent 25%, | |
| 47 | $transparent 75%, | |
| 48 | $box-color 75%, | |
| 49 | $box-color | |
| 50 | ), | |
| 51 | linear-gradient( | |
| 52 | -45deg, | |
| 53 | $box-color 25%, | |
| 54 | $transparent 25%, | |
| 55 | $transparent 75%, | |
| 56 | $box-color 75%, | |
| 57 | $box-color | |
| 58 | ) | |
| 59 | ); | |
| 60 | background-size:$size $size; | |
| 61 | } |