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
54
55
56
57
58
59
60
61
62
63
|
@function v-valo-bevel ($color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
$gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) {
@if $bevel-depth == 0% or $bevel-style == none {
@return null;
}
$color-stops: v-valo-gradient-color-stops($color, $gradient-style, $gradient-depth);
$top-color: first(first($color-stops));
$bottom-color: first(last($color-stops));
$top-color: blend-lighten(adjust-color($top-color, $lightness: $bevel-depth/4, $saturation: -$bevel-depth), scale-color($top-color, $lightness: $bevel-depth/4));
$bottom-color: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$bevel-depth/3), $saturation: -$bevel-depth), $bevel-depth/100%), $bottom-color);
@return v-valo-replace-hilite-and-shade($bevel-style, $top-color, $bottom-color);
}
@function v-valo-shadow ($shadow-style: null, $shadow-depth: null) {
$shadow-style: $shadow-style or $v-shadow-style;
$shadow-depth: $shadow-depth or $v-shadow-depth;
@if $shadow-depth == 0% or $shadow-style == none {
@return null;
}
@return v-valo-replace-hilite-and-shade($shadow-style, rgba(#fff, $shadow-depth/100%), rgba(#000, $shadow-depth/100%));
}
@function v-valo-replace-hilite-and-shade($shadow-list, $hilite, $shade) {
@if $shadow-list == none {
@return null;
}
@if type-of(last($shadow-list)) == color {
@return $shadow-list;
}
// If the shadow-list only contains one shadow
// (we can't use the recursive replace function because that will mess up the list delimeters)
@if last($shadow-list) == v-hilite {
@return replace($shadow-list, v-hilite, $hilite);
} @else if last($shadow-list) == v-shade {
@return replace($shadow-list, v-shade, $shade);
}
// If there are multiple shadows in a list, recurse and separate lists with a comma
$new: null;
@each $part in $shadow-list {
@if type-of($part) == list and length($part) > 0 {
$part: v-valo-replace-hilite-and-shade($part, $hilite, $shade);
@if $part {
$new: $new, $part;
}
}
}
@return $new;
}
|
