Permalink
Browse files

allowing to change the nth-selector (nth-child or nth-of-type) for th…

…e mixin isolate-grid
  • Loading branch information...
1 parent 5865792 commit 2f16b19690cd6f45875eda07a752d621705107c1 @barraq barraq committed Mar 28, 2013
Showing with 10 additions and 6 deletions.
  1. +4 −2 docs/source/guides/reference.html.md
  2. +6 −4 sass/susy/_isolation.scss
@@ -351,12 +351,12 @@ as a way of minimizing sub-pixel rounding errors in specific trouble locations.
#### <a href="#ref-isolate-grid" id="ref-isolate-grid">Isolate Grid</a>
Isolate a group of elements in an grid (such as an image gallery)
-using nth-child for positioning.
+using nth-child or nth-of-type for positioning.
Provide the column-width of each element,
and Susy will determine the positioning for you.
:::scss
- // isolate-grid(<$columns> [, <$context>, <$from>, <$style>])
+ // isolate-grid(<$columns> [, <$context>, <$from>, <$nth-selector>, <$style>])
.gallery-item {
@include isolate-grid(3);
}
@@ -366,6 +366,8 @@ and Susy will determine the positioning for you.
Default: `$total-columns`.
- `<$from>`: The origin direction of your document flow.
Default: `$from-direction`.
+- `<$nth-selector>`: either 'child' or 'of-type'.
+ Default: `child`.
- `<$style>`: Optionally return `static` lengths for grid calculations.
Default: `$container-style`.
View
@@ -19,13 +19,15 @@
// Isolate a group of elements in a grid, using nth-child selectors
//
-// $columns : The column-width of each item on the grid;
-// $context : [optional] The context (columns spanned by parent).
-// $from : The start direction of your layout (e.g. 'left' for ltr languages)
+// $columns : The column-width of each item on the grid;
+// $context : [optional] The context (columns spanned by parent).
+// $from : The start direction of your layout (e.g. 'left' for ltr languages)
+// $nth-selector : [optional] change between 'child' or 'of-type' (default is 'child')
@mixin isolate-grid(
$columns,
$context: $total-columns,
$from: $from-direction,
+ $nth-selector: 'child',
$style: fix-static-misalignment()
) {
$to: opposite-position($from);
@@ -37,7 +39,7 @@
@for $item from 1 through $line {
$nth: '#{$line}n + #{$item}';
- &:nth-child(#{$nth}) {
+ &:nth-#{$nth-selector}(#{$nth}) {
margin-#{$from}: space($location - 1, $context, $style);
@if $location == 1 { clear: $from; }

0 comments on commit 2f16b19

Please sign in to comment.