_background.scss
2.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@mixin background-gradient($bg-color, $type: $base-gradient, $direction: top) {
background-image: none;
background-color: $bg-color;
@if $base-gradient != null and $bg-color != transparent {
// Color stops provided
@if type-of($type) == "list" {
@include background-image(linear-gradient(color-stops($direction, $type)));
}
// Default gradients
@else if $type == bevel {
@include background-image(linear-gradient($direction, color_stops(
lighten($bg-color, 15%),
lighten($bg-color, 8%) 30%,
$bg-color 65%,
darken($bg-color, 6%)
)));
} @else if $type == glossy {
@include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
} @else if $type == recessed {
@include background-image(linear-gradient($direction, color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
} @else if $type == linear {
@include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 5%), darken($bg-color, 10%))));
} @else if $type == matte {
@include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 4%) 3%, darken($bg-color, 4%))));
}
}
}
// Special thanks to Lea Verou
// http://leaverou.me/css3patterns/
@mixin background-pattern-blueprint(
$bgcolor: #269,
$majorcolor: white,
$minorcolor: rgba(#fff, .3),
$majorsteps: 100px,
$minorsteps: 20px,
$majorwidth: 2px,
$minorwidth: 1px
) {
background-color: $bgcolor;
@include background-image(
linear-gradient(top, color_stops($majorcolor $majorwidth, rgba($majorcolor, 0) $majorwidth)),
linear-gradient(left, color_stops($majorcolor $majorwidth, rgba($majorcolor, 0) $majorwidth)),
linear-gradient(top, color_stops($minorcolor $minorwidth, rgba($majorcolor, 0) $minorwidth)),
linear-gradient(left, $minorcolor $minorwidth, rgba($majorcolor, 0) $minorwidth)
);
background-size: $majorsteps $majorsteps, $majorsteps $majorsteps, $minorsteps $minorsteps, $minorsteps $minorsteps;
background-position: -$majorwidth -$majorwidth, -$majorwidth -$majorwidth, -$minorwidth -$minorwidth, -$minorwidth -$minorwidth;
}