neat-compass 1.2.1 → 1.3.0

data/stylesheets/neat/_neat.scss

@@ -6,7 +6,8 @@
 @import "neat-helpers";
 
 // Grid
-@import "grid/global-variables";
+@import "grid/private";
+@import "grid/reset";
 @import "grid/grid";
 @import "grid/omega";
 @import "grid/outer-container";

data/stylesheets/neat/functions/_private.scss

@@ -70,3 +70,38 @@
 
   @return $values;
 }
+
+// Layout direction
+@function get-direction($layout, $default) {
+  $direction: nil;
+  
+  @if $layout == LTR or $layout == RTL {
+    $direction: direction-from-layout($layout);
+  } @else {
+    $direction: direction-from-layout($default);
+  }
+
+  @return $direction;
+}
+
+@function direction-from-layout($layout) {
+  $direction: nil;
+
+  @if $layout == LTR {
+    $direction: right;
+  } @else {
+    $direction: left;
+  }
+
+  @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+  $opposite-direction: left;
+
+  @if $direction == left {
+    $opposite-direction: right;
+  }
+
+  @return $opposite-direction;
+}

data/stylesheets/neat/grid/_omega.scss

@@ -1,8 +1,14 @@
 // Remove last element gutter
-@mixin omega($query: block, $direction: right) {
+@mixin omega($query: block, $direction: default) {
   $table: if(belongs-to(table, $query), true, false);
   $auto: if(belongs-to(auto, $query), true, false);
 
+  @if $direction != default {
+    @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
+  } @else {
+    $direction: get-direction($layout-direction, $default-layout-direction);
+  }
+
   @if length($query) == 1 {
     @if $auto {
       &:last-child {
@@ -21,9 +27,7 @@
     }
 
     @else {
-      &:nth-child(#{$query}) {
-        margin-#{$direction}: 0;
-      }
+      @include nth-child($query, $direction);
     }
   }
 
@@ -50,9 +54,7 @@
       }
 
       @else {
-        &:nth-child(#{nth($query, 1)}) {
-          margin-#{$direction}: 0;
-        }
+        @include nth-child(nth($query, 1), $direction);
       }
     }
   }
@@ -62,7 +64,16 @@
   }
 }
 
-@mixin nth-omega($nth, $display: block, $direction: right) {
-  @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
-  @include omega($nth $display, $direction);
+@mixin nth-child($query, $direction) {
+  $opposite-direction: get-opposite-direction($direction);
+
+  &:nth-child(#{$query}) {
+    margin-#{$direction}: 0;
+  }
+
+  @if type-of($query) == number {
+    &:nth-child(#{$query}+1) {
+      clear: $opposite-direction;
+    }
+  }
 }

data/stylesheets/neat/grid/_private.scss

@@ -0,0 +1,21 @@
+$parent-columns: $grid-columns !default;
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$container-display-table: false !default;
+$layout-direction: nil !default;
+
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}

data/stylesheets/neat/grid/_reset.scss

@@ -0,0 +1,12 @@
+@mixin reset-display {
+  $container-display-table: false;
+}
+
+@mixin reset-layout-direction {
+  $layout-direction: $default-layout-direction;
+}
+
+@mixin reset-all {
+  @include reset-display;
+  @include reset-layout-direction;
+}

data/stylesheets/neat/grid/_row.scss

@@ -1,5 +1,6 @@
-@mixin row($display: block) {
+@mixin row($display: block, $direction: $default-layout-direction) {
   @include clearfix;
+  $layout-direction: $direction;
 
   @if $display == table {
     display: table;
@@ -14,6 +15,3 @@
   }
 }
 
-@mixin reset-display {
-  $container-display-table: false;
-}

data/stylesheets/neat/grid/_shift.scss

@@ -1,5 +1,9 @@
 @mixin shift($n-columns: 1) {
-  margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
 
   // Reset nesting context
   $parent-columns: $grid-columns;

data/stylesheets/neat/grid/_span-columns.scss

@@ -4,55 +4,42 @@
   $container-columns: container-span($span);
   $display-table: false;
 
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
   @if $container-columns != $grid-columns {
     $parent-columns: $container-columns;
-  }
-
-  @else {
+  } @else {
     $parent-columns: $grid-columns;
   }
 
   @if $container-display-table == true {
     $display-table: true;
-  }
-
-  @else if $display == table {
+  } @else if $display == table {
     $display-table: true;
-  }
-
-  @else {
+  } @else {
     $display-table: false;
   }
 
   @if $display-table  {
     display: table-cell;
-    padding-right: flex-gutter($container-columns);
+    padding-#{$direction}: flex-gutter($container-columns);
     width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
 
     &:last-child {
       width: flex-grid($columns, $container-columns);
-      padding-right: 0;
-    }
-  }
-
-  @else if $display == inline-block {
-    @include inline-block;
-    margin-right: flex-gutter($container-columns);
-    width: flex-grid($columns, $container-columns);
-
-    &:last-child {
-      margin-right: 0;
+      padding-#{$direction}: 0;
     }
   }
 
   @else {
     display: block;
-    float: left;
-    margin-right: flex-gutter($container-columns);
+    float: #{$opposite-direction};
+    margin-#{$direction}: flex-gutter($container-columns);
     width: flex-grid($columns, $container-columns);
 
     &:last-child {
-      margin-right: 0;
+      margin-#{$direction}: 0;
     }
   }
 }

data/stylesheets/neat/grid/_to-deprecate.scss

@@ -50,3 +50,8 @@
     @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
   }
 }
+
+@mixin nth-omega($nth, $display: block, $direction: default) {
+  @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
+  @include omega($nth $display, $direction);
+}

data/stylesheets/neat/grid/_visual-grid.scss

@@ -20,6 +20,7 @@
     position: fixed;
     right: 0;
     width: 100%;
+    pointer-events: none;
 
     @if $visual-grid-index == back {
       z-index: -1;

data/stylesheets/neat/settings/_grid.scss

@@ -4,3 +4,4 @@ $grid-columns: 12 !default; // Total number of columns in the grid
 $max-width: em(1088) !default; // Max-width of the outer container
 $border-box-sizing: true !default; // Makes all elements have a border-box layout
 $default-feature: min-width; // Default @media feature for the breakpoint() mixin
+$default-layout-direction: LTR !default;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: neat-compass
 version: !ruby/object:Gem::Version
-  version: 1.2.1
+  version: 1.3.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-04-04 00:00:00.000000000 Z
+date: 2013-05-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -72,12 +72,13 @@ files:
 - stylesheets/neat/functions/_private.scss
 - stylesheets/neat/functions/_px-to-em.scss
 - stylesheets/neat/grid/_fill-parent.scss
-- stylesheets/neat/grid/_global-variables.scss
 - stylesheets/neat/grid/_grid.scss
 - stylesheets/neat/grid/_media.scss
 - stylesheets/neat/grid/_omega.scss
 - stylesheets/neat/grid/_outer-container.scss
 - stylesheets/neat/grid/_pad.scss
+- stylesheets/neat/grid/_private.scss
+- stylesheets/neat/grid/_reset.scss
 - stylesheets/neat/grid/_row.scss
 - stylesheets/neat/grid/_shift.scss
 - stylesheets/neat/grid/_span-columns.scss

data/stylesheets/neat/grid/_global-variables.scss

@@ -1,5 +0,0 @@
-$parent-columns: $grid-columns !default;
-$fg-column: $column;
-$fg-gutter: $gutter;
-$fg-max-columns: $grid-columns;
-$container-display-table: false !default;