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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
/**
* Outputs cross-browser Valo-specific linear gradient background-image declarations.
*
* @group style
*
* @param {color} $color ($v-background-color) - The base color for the gradient color stops
* @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
* @param {color} $fallback (null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular). If null, the base $color is used instead.
* @param {string} $direction (to bottom) - the direction of the linear gradient. The color stops are by default so that a lighter shade is at the start and a darker shade is at the end.
*/
@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) {
@if $color {
@if $gradient {
$color-stops: valo-gradient-color-stops($color, $gradient);
@include linear-gradient($direction, $color-stops, $fallback: $fallback or $color);
} @else {
background: $fallback or $color;
}
}
}
/**
* Returns a valid CSS, Valo-specific, color stop list to be used in a linear gradient.
*
* @group style
*
* @param {color} $color - the base color for the color stops
* @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
*/
@function valo-gradient-color-stops($color, $gradient: $v-gradient) {
$style: valo-gradient-style($gradient);
$opacity: valo-gradient-opacity($gradient);
@if $style != none and $opacity > 0 {
@if $style == v-linear or $style == v-linear-reverse {
$start: blend-overlay(rgba(#fff, $opacity/100%), $color);
$end: blend-overlay(rgba(#000, max(0, $opacity/100%)), $color);
$end: blend-multiply(rgba(#000, max(0, $opacity/200%)), $end);
@if $style == v-linear {
@return $start 2%, $end 98%;
} @else {
@return $end 2%, $start 98%;
}
}
}
@return $color 0%, $color 100%;
}
/**
* Returns the style part of a Valo-specific gradient value.
*
* @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
*
* @return {string} One of the possible style values for $v-gradient
*/
@function valo-gradient-style($gradient: $v-gradient) {
@if type-of($gradient) != list {
@return none;
}
@return first-string($gradient);
}
/**
* Returns the opacity part of a Valo-specific gradient value.
*
* @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
*
* @return {number} A percentage value from 0% to 100%
*/
@function valo-gradient-opacity($gradient: $v-gradient) {
@if type-of($gradient) != list {
@return 0%;
}
@return first-number($gradient);
}
|
