387f8149d6
Most of Susy's mixins have been deprecated, `@include container()`, `@include full()`, `@include span()`, `@include prefix()`, `@include suffix()`, `@include gallery()`, etc. Fixes #1114
115 lines
3.1 KiB
SCSS
115 lines
3.1 KiB
SCSS
/// Plugin: SVG Grid Image
|
|
/// ======================
|
|
/// @group plugin_svg-grid
|
|
/// @see susy-svg-grid
|
|
|
|
|
|
|
|
/// ## Overview
|
|
/// If you want to generate svg-backgrounds
|
|
/// for help visualizing and debugging your grids,
|
|
/// import the SVG Grid Plugin.
|
|
///
|
|
/// The plugin adds `svg-grid-colors` setting
|
|
/// to your global defaults,
|
|
/// which you can override in `$susy`.
|
|
/// It also provides you with a new function,
|
|
/// `susy-svg-grid()`,
|
|
/// which will return inline svg for use in
|
|
/// backgrounds or generated content.
|
|
///
|
|
/// This function come with an unprefixed alias by default,
|
|
/// using the `svg-grid` import.
|
|
/// If you only only want prefixed versions of the API,
|
|
/// import the `svg-grid/prefix` partial instead.
|
|
///
|
|
/// @group plugin_svg-grid
|
|
///
|
|
/// @example scss - importing the plugin
|
|
/// // The full path to import Susy will depend on your setup…
|
|
///
|
|
/// // unprefixed
|
|
/// @import 'plugins/svg-grid';
|
|
///
|
|
/// // prefixed
|
|
/// @import 'plugins/svg-grid/prefix';
|
|
///
|
|
/// @example scss - generating background grids
|
|
/// .grid {
|
|
/// background: susy-svg-grid() no-repeat scroll;
|
|
/// }
|
|
|
|
|
|
|
|
// SVG Grid
|
|
// --------
|
|
/// Return inline svg-data in to display the grid.
|
|
///
|
|
/// @group plugin_svg-grid
|
|
///
|
|
/// @param {Map | List} $grid [$susy] -
|
|
/// Map or shorthand defining the current grid
|
|
/// @param {Color | List | null} $colors [null] -
|
|
/// Column color, or list of colors for column-gradient,
|
|
/// used to override the global `svg-grid-colors` setting
|
|
/// @param {Length | null} $offset [null] -
|
|
/// Manually override the default grid-image offset,
|
|
/// to account for grid edges
|
|
///
|
|
/// @return {String} -
|
|
/// CSS inline-data SVG string, in `url(<svg>)` format,
|
|
/// for use in image or content properties
|
|
/// @example scss
|
|
/// .grid {
|
|
/// background: susy-svg-grid() no-repeat scroll;
|
|
/// }
|
|
@function susy-svg-grid(
|
|
$grid: $susy,
|
|
$colors: null,
|
|
$offset: null
|
|
) {
|
|
// Grid parsing & normalizing
|
|
$grid: susy-compile($grid, $context-only: true);
|
|
|
|
// Color and gradient handling
|
|
$gradient: '';
|
|
|
|
@if (not $colors) {
|
|
$colors: susy-get('svg-grid-colors');
|
|
}
|
|
|
|
@if length($colors) > 1 {
|
|
$gradient: _susy-svg-gradient($colors);
|
|
$colors: 'url(%23susy-svg-gradient)';
|
|
} @else {
|
|
$colors: _susy-svg-color($colors);
|
|
}
|
|
|
|
// Get a default image-width
|
|
$span: (
|
|
'span': map-get($grid, 'columns'),
|
|
'spread': map-get($grid, 'container-spread'),
|
|
);
|
|
$span: map-merge($grid, $span);
|
|
$image-width: su-call('su-span', $span);
|
|
$image-width: if((type-of($image-width) == 'number'), $image-width, 100%);
|
|
|
|
// SVG construction
|
|
$columns: map-get($grid, 'columns');
|
|
$offset: $offset or _susy-svg-offset($grid);
|
|
|
|
$attrs: 'fill="#{$colors}" width="#{$image-width}"';
|
|
$svg: 'data:image/svg+xml,';
|
|
$svg: $svg + '%3Csvg xmlns="http://www.w3.org/2000/svg" #{$attrs} %3E';
|
|
$svg: $svg + $gradient;
|
|
|
|
@for $column from 1 through length($columns) {
|
|
$width: susy-span(1 narrow at $column, $grid);
|
|
$x: _susy-svg-column-position($column, $grid);
|
|
|
|
$svg: $svg + _susy-svg-rect($x, $width, $offset);
|
|
}
|
|
|
|
@return url('#{$svg}%3C/svg%3E');
|
|
}
|