Skip to content
This repository has been archived by the owner on Jul 14, 2023. It is now read-only.

Commit

Permalink
Add direction mixin
Browse files Browse the repository at this point in the history
- Closes #200
  • Loading branch information
Reda Lemeden committed Jul 25, 2014
1 parent 164d0f6 commit 25496b1
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 4 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/_neat.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,4 @@
@import "grid/to-deprecate";
@import "grid/visual-grid";
@import "grid/display";
@import "grid/direction";
8 changes: 4 additions & 4 deletions app/assets/stylesheets/functions/_private.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@

// Contains display value
@function contains-display-value($query) {
@return belongs-to(table, $query)
or belongs-to(block, $query)
or belongs-to(inline-block, $query)
@return belongs-to(table, $query)
or belongs-to(block, $query)
or belongs-to(inline-block, $query)
or belongs-to(inline, $query);
}

Expand Down Expand Up @@ -81,7 +81,7 @@
// Layout direction
@function get-direction($layout, $default) {
$direction: nil;

@if $layout == LTR or $layout == RTL {
$direction: direction-from-layout($layout);
} @else {
Expand Down
33 changes: 33 additions & 0 deletions app/assets/stylesheets/grid/_direction.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* Changes the direction property used by other mixins called in the code block argument.
*
* @param {String} $direction (left-to-right) - Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
*
* @example scss
* @include direction(right-to-left) {
* .right-to-left-block {
* @include span-columns(6);
* }
* }
*
* @example css
* // CSS
* .right-to-left-block {
* float: right;
* ...
* }
*/

@mixin direction($direction: left-to-right) {
$scope-direction: $layout-direction;

@if $direction == left-to-right {
$layout-direction: LTR !global;
} @else if $direction == right-to-left {
$layout-direction: RTL !global;
}

@content;

$layout-direction: $scope-direction !global;
}
4 changes: 4 additions & 0 deletions app/assets/stylesheets/grid/_row.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
@mixin row($display: default, $direction: $default-layout-direction) {
@if $direction != $default-layout-direction {
@warn "The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."
}

$layout-direction: $direction !global;

@if $display != default {
Expand Down
19 changes: 19 additions & 0 deletions spec/neat/direction_spec.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
require 'spec_helper'

describe "@include direction() {...}" do
before(:all) do
ParserSupport.parse_file("direction")
end

context "with no argument" do
it "uses default direction setting" do
expect('.default-block').to have_rule('float: left')
end
end

context "whith argument (right-to-left)" do
it "changes direction setting inside the block" do
expect('.right-to-left-block').to have_rule('float: right')
end
end
end
13 changes: 13 additions & 0 deletions test/direction.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import 'setup';

@include direction() {
.default-block {
@include span-columns(6);
}
}

@include direction(right-to-left) {
.right-to-left-block {
@include span-columns(6);
}
}

0 comments on commit 25496b1

Please sign in to comment.