Skip to content

Commit

Permalink
new flex-omega mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
kgcreative committed Mar 2, 2017
1 parent a16d3ad commit 8e3fca4
Showing 1 changed file with 58 additions and 0 deletions.
58 changes: 58 additions & 0 deletions flex-omega.scss
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;
}
}
}

0 comments on commit 8e3fca4

Please sign in to comment.