Permalink
Browse files

Add layout direction support

- Remove buggy inline-block support in `span-columns`
- Closes #71 and #73
  • Loading branch information...
1 parent fa6f8c3 commit ff730fcb9a54305d1de37f3d34fabd25f07369e4 Reda Lemeden committed Apr 5, 2013
@@ -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";
@@ -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;
+}
@@ -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 plugin no longer takes a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
+ }
+
+ $direction: get-direction($layout-direction, $default-layout-direction);
+
@if length($query) == 1 {
@if $auto {
&:last-child {
@@ -3,3 +3,4 @@ $fg-column: $column;
$fg-gutter: $gutter;
$fg-max-columns: $grid-columns;
$container-display-table: false !default;
+$layout-direction: nil !default;
@@ -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;
+}
@@ -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;
-}
@@ -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;
@@ -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;
}
}
}
@@ -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;
View
@@ -30,4 +30,5 @@ Neat is an open source grid framework built on top of Bourbon with the aim of be
s.add_development_dependency('rspec')
s.add_development_dependency('rdoc')
s.add_development_dependency('bundler')
+ s.add_development_dependency('rb-fsevent', '~> 0.9.1')
end
@@ -52,10 +52,4 @@
expect('.span-columns-table:last-child').to have_rule('width: 48.82117%')
end
end
-
- context "with argument 'inline-block'" do
- it "sets display to inline-block" do
- expect('.span-columns-inline-block').to have_rule('display: inline-block')
- end
- end
end
View
@@ -19,39 +19,39 @@
end
end
- context "with argument 'block, left'" do
+ context "with argument 'block' in a RTL layout" do
it "removes left margin" do
- expect('.omega-block-left').to have_rule('margin-left: 0')
+ expect('section .omega-block-left').to have_rule('margin-left: 0')
end
end
context "with argument 'table, left'" do
it "removes left padding" do
- expect('.omega-table-left').to have_rule('padding-left: 0')
+ expect('section .omega-table-left').to have_rule('padding-left: 0')
end
end
- context "with argument '4n'" do
- it "removes right margin of nth-child(4n)" do
- expect('.omega-nth-default:nth-child(4n)').to have_rule('margin-right: 0')
+ context "with argument '4n block' in a RTL layout" do
+ it "removes left margin of nth-child(4n)" do
+ expect('section .omega-nth-default-left:nth-child(4n)').to have_rule('margin-left: 0')
end
end
- context "with argument '4n table'" do
- it "removes right padding of nth-child(4n)" do
- expect('.omega-nth-table:nth-child(4n)').to have_rule('padding-right: 0')
+ context "with argument '4n table' in a RTL layout" do
+ it "removes left padding of nth-child(4n)" do
+ expect('section .omega-nth-table-left:nth-child(4n)').to have_rule('padding-left: 0')
end
end
- context "with argument '4n block, left'" do
- it "removes left margin of nth-child(4n)" do
- expect('.omega-nth-default-left:nth-child(4n)').to have_rule('margin-left: 0')
+ context "with argument '4n'" do
+ it "removes right margin of nth-child(4n)" do
+ expect('.omega-nth-default:nth-child(4n)').to have_rule('margin-right: 0')
end
end
- context "with argument '4n table, left'" do
- it "removes left padding of nth-child(4n)" do
- expect('.omega-nth-table-left:nth-child(4n)').to have_rule('padding-left: 0')
+ context "with argument '4n table'" do
+ it "removes right padding of nth-child(4n)" do
+ expect('.omega-nth-table:nth-child(4n)').to have_rule('padding-right: 0')
end
end
end
View
@@ -8,19 +8,19 @@
end
context "with no argument" do
- it "shifts element one column to the left" do
+ it "shifts element one column in the default direction" do
expect('.shift-default').to have_rule('margin-left: 8.5298%')
end
end
context "with argument '2'" do
- it "shifts element 2 column to the left" do
+ it "shifts element 2 columns in the default direction" do
expect('.shift-positive').to have_rule('margin-left: 17.05961%')
end
end
context "with argument '-3'" do
- it "shifts element 3 column to the right" do
+ it "shifts element 3 columns in the opposite direction" do
expect('.shift-negative').to have_rule('margin-left: -25.58941%')
end
end
@@ -34,4 +34,10 @@
expect('.post-nested-shift').to have_rule('margin-left: 17.05961%')
end
end
+
+ context "when layout direction changes" do
+ it "shifts element in the corresponding direction" do
+ expect('section .shift-negative').to have_rule('margin-right: -25.58941%')
+ end
+ end
end
View
@@ -9,13 +9,26 @@
@include omega(table);
}
-.omega-block-left {
- @include omega(block, left);
- color: #000;
-}
+section {
+ @include row($direction: RTL);
+
+ .omega-block-left {
+ @include omega(block);
+ color: #000;
+ }
+
+ .omega-table-left{
+ @include omega(table);
+ }
+
+ .omega-nth-default-left {
+ @include omega(4n block);
+ }
-.omega-table-left{
- @include omega(table, left);
+ .omega-nth-table-left {
+ @include omega(4n table);
+ @include reset-layout-direction;
+ }
}
.omega-nth-default {
@@ -25,11 +38,3 @@
.omega-nth-table {
@include omega(4n table);
}
-
-.omega-nth-default-left {
- @include omega(4n block, left);
-}
-
-.omega-nth-table-left {
- @include omega(4n table, left);
-}
View
@@ -1,9 +1,5 @@
@import 'setup';
-.shift-default {
- @include shift;
-}
-
.shift-positive {
@include shift(2);
}
@@ -25,3 +21,17 @@
.post-nested-shift {
@include shift(2);
}
+
+// Changing direction
+section {
+ @include row($direction: RTL);
+
+ .shift-negative {
+ @include shift(-3);
+ @include reset-layout-direction;
+ }
+}
+
+.shift-default {
+ @include shift;
+}

0 comments on commit ff730fc

Please sign in to comment.