/sass/recipes/background/_carbon-fiber.scss
Sass | 33 lines | 20 code | 4 blank | 9 comment | 0 complexity | d4e764f36dbaa67e93b0748e6faa7955 MD5 | raw file
1/**
2 * Carbon Fiber background pattern
3 *
4 * @author Lea Verou http://lea.verou.me/ for the original pattern
5 * @author David Kaneda http://www.davidkaneda.com/ for the Sass mixin
6 *
7 * @link http://lea.verou.me/css3patterns/
8 *
9 */
10
11@import "compass/css3/images";
12
13$base-color: #222 !default;
14
15@mixin background-carbon-fiber(
16 $background-color: $base-color,
17 $dot-color: scale-lightness($background-color, -50),
18 $highlight-color: rgba(#fff, .1),
19 $spacing-size: 16px,
20 $dot-size: 2px
21) {
22 @include background-image(
23 radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
24 radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
25 radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px),
26 radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px)
27 );
28
29 background-repeat: repeat;
30 background-position: 0 0, $spacing-size/2 $spacing-size/2, 0 1px, $spacing-size/2 $spacing-size/2 + 1px;
31 background-color: $background-color;
32 background-size: $spacing-size $spacing-size;
33}