stylesheets/flint/mixins/lib/_grid-overlay.scss in flint-gs-2.3.6 vs stylesheets/flint/mixins/lib/_grid-overlay.scss in flint-gs-2.3.7
- old
+ new
@@ -1,73 +1,73 @@
-///
-/// Create encoded SVG grid overlay
-///
-/// @access private
-///
-/// @param {String} $key - breakpoint alias
-/// @param {Number} $breakpoint - breakpoint value
-/// @param {Number} $columns - breakpoint column count
-/// @param {Number} $gutter - gutter value
-///
-/// @group Internal Mixins
-///
-@mixin flint-svg-grid($key, $breakpoint, $columns, $gutter) {
- $svg: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>";
- $svg: $svg + "<defs>";
- $svg: $svg + "<linearGradient id='gr' x1='0%' y1='0%' x2='100%' y2='0%'>";
- $svg: $svg + "<stop offset='0%' style='stop-color: #{$flint-overlay-color};' />";
- $svg: $svg + "<stop offset='100%' style='stop-color: #{lighten($flint-overlay-color, 10%)};' />";
- $svg: $svg + "</linearGradient>";
- $svg: $svg + "</defs>";
-
- @for $i from 1 through $columns {
- $x: flint-fluid-width(((($breakpoint / $columns) * ($i - 1)) + $gutter), $breakpoint);
- $span: flint-fluid-width(((($breakpoint) / $columns)) - ($gutter * 2), $breakpoint);
- $svg: $svg + "<rect x='#{$x}' fill='url(#gr)' width='#{$span}' height='100%'/>";
- }
-
- $svg: $svg + "</svg>";
-
- @include _($key) {
- max-width: $breakpoint;
- background: {
- image: url("data:image/svg+xml," + flint-html-encode($svg));
- size: 100% 100%;
- position: 0 0;
- }
- }
-}
-
-///
-/// Apply SVG grid overlay
-///
-/// @access private
-///
-/// @group Internal Mixins
-///
-@mixin flint-overlay-grid {
- @at-root html {
- position: relative;
-
- &:after {
- transform: translateX(-50%);
- content: " ";
- position: absolute;
- display: block;
- top: 0;
- left: 50%;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
- opacity: 0.25;
- z-index: 9999;
- pointer: {
- events: none;
- }
-
- @each $key, $settings in flint-get-value("breakpoints") {
- @include flint-svg-grid($key, map-get($settings, "breakpoint"), map-get($settings, "columns"), flint-get-gutter());
- }
- }
- }
-}
+///
+/// Create encoded SVG grid overlay
+///
+/// @access private
+///
+/// @param {String} $key - breakpoint alias
+/// @param {Number} $breakpoint - breakpoint value
+/// @param {Number} $columns - breakpoint column count
+/// @param {Number} $gutter - gutter value
+///
+/// @group Internal Mixins
+///
+@mixin flint-svg-grid($key, $breakpoint, $columns, $gutter) {
+ $svg: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>";
+ $svg: $svg + "<defs>";
+ $svg: $svg + "<linearGradient id='gr' x1='0%' y1='0%' x2='100%' y2='0%'>";
+ $svg: $svg + "<stop offset='0%' style='stop-color: #{$flint-overlay-color};' />";
+ $svg: $svg + "<stop offset='100%' style='stop-color: #{lighten($flint-overlay-color, 10%)};' />";
+ $svg: $svg + "</linearGradient>";
+ $svg: $svg + "</defs>";
+
+ @for $i from 1 through $columns {
+ $x: flint-fluid-width(((($breakpoint / $columns) * ($i - 1)) + $gutter), $breakpoint);
+ $span: flint-fluid-width(((($breakpoint) / $columns)) - ($gutter * 2), $breakpoint);
+ $svg: $svg + "<rect x='#{$x}' fill='url(#gr)' width='#{$span}' height='100%'/>";
+ }
+
+ $svg: $svg + "</svg>";
+
+ @include _($key) {
+ max-width: $breakpoint;
+ background: {
+ image: url("data:image/svg+xml," + flint-html-encode($svg));
+ size: 100% 100%;
+ position: 0 0;
+ }
+ }
+}
+
+///
+/// Apply SVG grid overlay
+///
+/// @access private
+///
+/// @group Internal Mixins
+///
+@mixin flint-overlay-grid {
+ @at-root html {
+ position: relative;
+
+ &:after {
+ transform: translateX(-50%);
+ content: " ";
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 50%;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0.25;
+ z-index: 9999;
+ pointer: {
+ events: none;
+ }
+
+ @each $key, $settings in flint-get-value("breakpoints") {
+ @include flint-svg-grid($key, map-get($settings, "breakpoint"), map-get($settings, "columns"), flint-get-gutter());
+ }
+ }
+ }
+}