-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a16d3ad
commit 8e3fca4
Showing
1 changed file
with
58 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
@charset "UTF-8"; | ||
/// Creates a margin right on the last object in the row and the last | ||
/// object in the container which causes a centered flexbox to self correct. | ||
/// | ||
/// It also brings back the neat 1.8 behavior of clearing *n + 1 block element, | ||
/// which addresses a secondary edge case where short elements don't | ||
/// clear the full row in floated 'box' layouts. | ||
/// | ||
/// @group Features | ||
/// | ||
/// @name Flex-omega | ||
/// | ||
/// @argument {number (`nth-of-type`) | auto} [auto] | ||
/// When passed an `nth-of-type` argument of type `*n` with `block` display, | ||
/// the flex-omega mixin automatically creates a margin right on the last | ||
/// object in the row and the last object in the container, | ||
/// which causes a centered flexbox to self correct. | ||
/// Note that this mixin does NOT clear floats in order to allow for complex nth selectors. | ||
/// | ||
/// @argument {map} $grid [$neat-grid] | ||
/// The grid to be used to generate the margins. | ||
/// By default, the global `$neat-grid` will be used. | ||
/// | ||
/// @example scss - Usage | ||
/// .element { | ||
/// @include flex-omega; | ||
/// } | ||
/// | ||
/// .nth-element { | ||
/// @include flex-omega(4n+1); | ||
/// } | ||
/// | ||
/// @example css - CSS Output | ||
/// .element:last-child { | ||
/// margin-right: 20px; | ||
/// } | ||
/// | ||
/// .nth-element:last-child { | ||
/// margin-right: 20px; | ||
/// } | ||
/// | ||
/// .nth-element:nth-of-type(4n+1) { | ||
/// margin-right: 20px; | ||
/// } | ||
|
||
@mixin omega($selector: auto, $grid: $neat-grid) { | ||
$_grid-gutter: _retrieve-neat-setting($grid, gutter); | ||
|
||
&:last-child { | ||
margin-#{_neat-opposite-direction($grid)}: $_grid-gutter; | ||
} | ||
|
||
@if $selector != auto { | ||
&:nth-of-type(#{$selector}) { | ||
margin-#{_neat-opposite-direction($grid)}: $_grid-gutter; | ||
} | ||
} | ||
} |