Browse files

Add layout direction support to span-columns() and row()

  • Loading branch information...
1 parent fa6f8c3 commit bc9af1ec7afbeb8ec6dda355be2822be19448839 @kaishin kaishin committed Apr 4, 2013
View
3 app/assets/stylesheets/_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";
View
35 app/assets/stylesheets/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;
+}
View
1 ...s/stylesheets/grid/_global-variables.scss → app/assets/stylesheets/grid/_private.scss
@@ -3,3 +3,4 @@ $fg-column: $column;
$fg-gutter: $gutter;
$fg-max-columns: $grid-columns;
$container-display-table: false !default;
+$layout-direction: nil !default;
View
12 app/assets/stylesheets/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;
+}
View
6 app/assets/stylesheets/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;
-}
View
35 app/assets/stylesheets/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;
}
}
}
View
1 app/assets/stylesheets/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;

0 comments on commit bc9af1e

Please sign in to comment.