Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge omega() and nth-omega()

  • Loading branch information...
commit bb084c5c711219d12f6b2f657b94939968634565 1 parent 0e8d175
@kaishin kaishin authored
View
21 README.md
@@ -174,25 +174,16 @@ The `pad()` mixin works particularly well with `span-columns(x, table)` by addin
### Removing gutter
-Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the `omega` mixin to achieve this:
+Neat removes by default the last column's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the `omega` mixin to achieve this:
```scss
-@include omega; // Removes right gutter
+@include omega; // Removes the right gutter (margin) of the element
+@include omega(table); // Removes the right gutter (padding) of a table-cell element
+@include omega(4n) // Removes every 4th right gutter (margin)
+@include omega(4n table) // Removes every 4th right gutter (padding) of a table-cell element
```
-You can also use `nth-omega` to remove the gutter of a specific column or set of columns:
-
-```scss
-@include nth-omega(nth-child);
-```
-
- * `nth-omega` takes any valid `:nth-child` value. Composite values such as `3n+5` should be passed as strings in order to work: `nth-omega:('3n+5')`. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
-
-eg. Remove every 3rd gutter using:
-
-```scss
-@include nth-omega(3n);
-```
+The `omega` mixin takes any valid `:nth-child` value. Composite values such as `3n+5` should be passed as strings in order to work: `omega('3n+5')`. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
### Filling parent elements
View
1  app/assets/stylesheets/_neat.scss
@@ -8,4 +8,5 @@
// Grid
@import "grid/global-variables";
@import "grid/grid";
+@import "grid/omega";
@import "grid/visual-grid";
View
9 app/assets/stylesheets/functions/_private.scss
@@ -18,6 +18,15 @@
@return false;
}
+// Contains display value
+@function contains-display-value($query) {
+ @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
+ @return true;
+ }
+
+ @return false;
+}
+
// Parses the first argument of span-columns()
@function container-span($span: $span) {
@if length($span) == 3 {
View
25 app/assets/stylesheets/grid/_grid.scss
@@ -93,31 +93,6 @@ $fg-max-width: $max-width;
padding: $padding-list;
}
-// Remove element gutter
-@mixin omega($display: block, $direction: right) {
- @if $display == table {
- padding-#{$direction}: 0;
- }
-
- @else {
- margin-#{$direction}: 0;
- }
-}
-
-@mixin nth-omega($nth, $display: block, $direction: right) {
- @if $display == table {
- &:nth-child(#{$nth}) {
- padding-#{$direction}: 0;
- }
- }
-
- @else {
- &:nth-child(#{$nth}) {
- margin-#{$direction}: 0;
- }
- }
-}
-
// Fill 100% of parent
@mixin fill-parent() {
width: 100%;
View
68 app/assets/stylesheets/grid/_omega.scss
@@ -0,0 +1,68 @@
+// Remove last element gutter
+@mixin omega($query: block, $direction: right) {
+ $table: if(belongs-to(table, $query), true, false);
+ $auto: if(belongs-to(auto, $query), true, false);
+
+ @if length($query) == 1 {
+ @if $auto {
+ &:last-child {
+ margin-#{$direction}: 0;
+ }
+ }
+
+ @else if contains-display-value($query) {
+ @if $table {
+ padding-#{$direction}: 0;
+ }
+
+ @else {
+ margin-#{$direction}: 0;
+ }
+ }
+
+ @else {
+ &:nth-child(#{$query}) {
+ margin-#{$direction}: 0;
+ }
+ }
+ }
+
+ @else if length($query) == 2 {
+ @if $table {
+ @if $auto {
+ &:last-child {
+ padding-#{$direction}: 0;
+ }
+ }
+
+ @else {
+ &:nth-child(#{nth($query, 1)}) {
+ padding-#{$direction}: 0;
+ }
+ }
+ }
+
+ @else {
+ @if $auto {
+ &:last-child {
+ margin-#{$direction}: 0;
+ }
+ }
+
+ @else {
+ &:nth-child(#{nth($query, 1)}) {
+ margin-#{$direction}: 0;
+ }
+ }
+ }
+ }
+
+ @else {
+ @warn "Too many arguments passed to the omega() mixin."
+ }
+}
+
+@mixin nth-omega($nth, $display: block, $direction: right) {
+ @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
+ @include omega($nth $display, $direction);
+}
Please sign in to comment.
Something went wrong with that request. Please try again.