diff options
Diffstat (limited to '_sass/minimal-mistakes/vendor/susy/plugins/svg-grid')
6 files changed, 353 insertions, 0 deletions
diff --git a/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_prefix.scss b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_prefix.scss new file mode 100644 index 0000000..21fb45f --- /dev/null +++ b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_prefix.scss @@ -0,0 +1,7 @@ +// Prefixed SVG Plugin +// =================== + +@import 'svg-settings'; +@import 'svg-utilities'; +@import 'svg-grid-math'; +@import 'svg-api'; diff --git a/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-api.scss b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-api.scss new file mode 100644 index 0000000..7d880e3 --- /dev/null +++ b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-api.scss @@ -0,0 +1,114 @@ +/// 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'); +} diff --git a/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-grid-math.scss b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-grid-math.scss new file mode 100644 index 0000000..044801a --- /dev/null +++ b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-grid-math.scss @@ -0,0 +1,67 @@ +// SVG Grid Math +// ============= + + + +// SVG Column Position +// ------------------- +/// Determine the proper horizontal position +/// for a column rectangle +/// +/// @access private +/// +/// @param {Integer} $column - +/// 1-indexed column location on the grid +/// @param {Map} $grid - +/// Normalized settings map representing the current grid +/// +/// @return {Length} - +/// Horizontal position of svg column rectangle, +/// as distance from the grid edge +@function _susy-svg-column-position( + $column, + $grid +) { + $x: $column - 1; + + @if ($x > 0) { + $x: susy-span(first $x wide, $grid); + } + + @return $x; +} + + + +// SVG Offset +// ---------- +/// Determine if a grid image needs to be offset, +/// to account for edge gutters. +/// +/// @access private +/// +/// @param {Map} $grid - +/// Normalized settings map representing the current grid +/// +/// @return {Length | null} - +/// Expected distance from container edge to first column, +/// based on spread values and gutter-widths +@function _susy-svg-offset( + $grid +) { + $columns: su-valid-columns(map-get($grid, 'columns')); + $gutters: su-valid-gutters(map-get($grid, 'gutters')); + $container: su-valid-spread(map-get($grid, 'container-spread')) + 1; + + @if ($container == 0) { + @return null; + } + + $gutter: su-call('su-gutter', $grid); + + @if (type-of($gutter) == 'string') { + @return 'calc(#{$container} * #{$gutter} / 2)'; + } + + @return $container * $gutter / 2; +} diff --git a/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-settings.scss b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-settings.scss new file mode 100644 index 0000000..3fcc91f --- /dev/null +++ b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-settings.scss @@ -0,0 +1,14 @@ +// SVG Settings +// ============ + + +// Susy SVG Defaults +// ================= +/// This plugin adds the `svg-grid-colors` property +/// and default value to `$_susy-defaults` — +/// you can override that value in `$susy` +/// or any other grid settings map. +/// @group plugin_svg-grid +$_susy-defaults: map-merge(( + 'svg-grid-colors': hsla(120, 50%, 50%, 0.5) hsla(120, 50%, 75%, 0.5), + ), $_susy-defaults); diff --git a/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-unprefix.scss b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-unprefix.scss new file mode 100644 index 0000000..187157c --- /dev/null +++ b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-unprefix.scss @@ -0,0 +1,18 @@ +// Unprefix Susy SVG Grid +// ====================== + + + +// SVG Grid +// -------- +/// Un-prefixed alias for `susy-svg-grid` +/// +/// @group plugin_svg-grid +/// @alias susy-svg-grid +@function svg-grid( + $grid: $susy, + $colors: susy-get('svg-grid-colors'), + $offset: null +) { + @return susy-svg-grid($grid, $colors, $offset); +} diff --git a/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-utilities.scss b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-utilities.scss new file mode 100644 index 0000000..e4bf18f --- /dev/null +++ b/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-utilities.scss @@ -0,0 +1,133 @@ +// 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'; +} |