| /** |
| * 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); |
| } |