// Gallery Syntax // ============== // Gallery // ------- // Create an isolated gallery // - $input : // - [$selector] : child | of-type @mixin gallery( $input, $selector: child ) { $input : parse-span($input); $width : null; $location : 1; $span : get-span-setting(span, $input); $this-columns : get-span-setting(columns, $input); $this-gutters : get-span-setting(gutters, $input); $this-column-width : get-span-setting(column-width, $input); $this-layout-math : get-span-setting(layout-math, $input); $this-gutter-position : get-span-setting(gutter-position, $input); $this-flow : get-span-setting(flow, $input); $box : get-span-setting(box-sizing, $input); $inside : if(get-span-setting(gutter-position, $input) == inside, true, false); $from : from($this-flow); $context : column-count($this-columns); $line : floor($context / $span); $padding-before : null; $padding-after : null; @if $inside { $inside-gutter: get-gutters($this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position); $padding-before: nth($inside-gutter, 1); $padding-after: nth($inside-gutter, 2); } @if $box == border-box or $inside { @include box-sizing(border-box); } @else if $box == content-box { @include box-sizing(content-box); } @if is-symmetrical($this-columns) { $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math); } @include float-span-output($width, from, null, -100%, $padding-before, $padding-after, $this-flow); @for $item from 1 through $line { $nth: '#{$line}n + #{$item}'; &:#{format-nth($nth,$selector)} { $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math); $width: if(is-symmetrical($columns), null, $width); $before: get-isolation($span, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math); @include float-span-output($width, null, $before, null, null, null, $this-flow); @if is-first($location) { @include first; clear: $from; } @else { clear: none; } $location: $location + $span; @if $location > $context { $location: 1; } } } }