387f8149d6
Most of Susy's mixins have been deprecated, `@include container()`, `@include full()`, `@include span()`, `@include prefix()`, `@include suffix()`, `@include gallery()`, etc. Fixes #1114
134 lines
3 KiB
SCSS
134 lines
3 KiB
SCSS
// SVG Utilities
|
|
// =============
|
|
|
|
|
|
|
|
// SVG Validate Units
|
|
// ------------------
|
|
/// Make sure a length is supported in svg
|
|
///
|
|
/// @access private
|
|
///
|
|
/// @param {Length} $length -
|
|
/// The length to validate
|
|
/// @param {String} $name [null] -
|
|
/// Optional name of length origin,
|
|
/// for error reporting
|
|
///
|
|
/// @return {Length} -
|
|
/// An svg-validated length, or comparable valid length
|
|
@function _susy-svg-validate-units(
|
|
$length,
|
|
$name: null
|
|
) {
|
|
$_svg-units: ('em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%');
|
|
$string: type-of($length) == 'string';
|
|
|
|
@if ($length == 0) or ($string) or index($_svg-units, unit($length)) {
|
|
@return $length;
|
|
}
|
|
|
|
@return _susy-error(
|
|
'`#{unit($length)}` #{$name} units are not supported in SVG',
|
|
'_susy-svg-validate-units');
|
|
}
|
|
|
|
|
|
|
|
// SVG Rect
|
|
// --------
|
|
/// Build a single svg rectangle
|
|
///
|
|
/// @access private
|
|
///
|
|
/// @param {Length} $x -
|
|
/// Horizontal position for the rectangle
|
|
/// @param {Length} $width -
|
|
/// Width of the rectangle
|
|
/// @param {Length} $offset [null] -
|
|
/// Offset the rectangle, to account for edge gutters
|
|
///
|
|
/// @return {String} -
|
|
/// Escaped string representing one svg rectangle
|
|
@function _susy-svg-rect(
|
|
$x,
|
|
$width,
|
|
$offset: null
|
|
) {
|
|
$x: _susy-svg-validate-units($x);
|
|
$width: _susy-svg-validate-units($width);
|
|
$offset: if($offset == 0, null, $offset);
|
|
|
|
@if (type-of($offset) == 'number') and (type-of($x) == 'number') {
|
|
@if comparable($x, $offset) {
|
|
$x: $x + $offset;
|
|
} @else {
|
|
$x: 'calc(#{$x} + #{$offset})';
|
|
}
|
|
} @else if $offset and ($x != 0) {
|
|
$x: 'calc(#{$x} + #{$offset})';
|
|
} @else if $offset {
|
|
$x: $offset;
|
|
}
|
|
|
|
@return '%3Crect x="#{$x}" width="#{$width}" height="100%"/%3E';
|
|
}
|
|
|
|
|
|
|
|
// SVG Color
|
|
// ---------
|
|
/// Stringify colors, and escape hex symbol
|
|
///
|
|
/// @access private
|
|
///
|
|
/// @param {Color} $color -
|
|
/// Color to stringify and escape
|
|
///
|
|
/// @return {String} -
|
|
/// Escaped string value of color
|
|
@function _susy-svg-color(
|
|
$color
|
|
) {
|
|
$color: inspect($color); // convert to string
|
|
|
|
@if (str-index($color, '#') == 1) {
|
|
$color: '%23' + str-slice($color, 2);
|
|
}
|
|
|
|
@return $color;
|
|
}
|
|
|
|
|
|
|
|
// SVG Gradient
|
|
// ------------
|
|
/// Create a multi-color svg gradient
|
|
///
|
|
/// @access private
|
|
///
|
|
/// @param {List} $colors -
|
|
/// List of colors to be equally spaced from `0%` to `100%`
|
|
/// in each column rectangle
|
|
///
|
|
/// @return {String} -
|
|
/// Escaped string representing one svg gradient
|
|
/// (`id="susy-svg-gradient"`)
|
|
@function _susy-svg-gradient(
|
|
$colors
|
|
) {
|
|
$gradient: '%3Cdefs%3E%3ClinearGradient spreadMethod="pad"';
|
|
$gradient: '#{$gradient} id="susy-svg-gradient"';
|
|
$gradient: '#{$gradient} x1="0%" y1="0%" x2="100%" y2="0%"%3E';
|
|
|
|
@for $i from 1 through length($colors) {
|
|
$color: _susy-svg-color(nth($colors, $i));
|
|
$offset: percentage(($i - 1) / (length($colors) - 1));
|
|
$stop: '%3Cstop offset="#{$offset}" style="stop-color:#{$color};" /%3E';
|
|
|
|
$gradient: $gradient + $stop;
|
|
}
|
|
|
|
@return $gradient + '%3C/linearGradient%3E%3C/defs%3E';
|
|
}
|