diff --git a/app/assets/stylesheets/functions/_private.scss b/app/assets/stylesheets/functions/_private.scss index 872d4dc5..96236479 100644 --- a/app/assets/stylesheets/functions/_private.scss +++ b/app/assets/stylesheets/functions/_private.scss @@ -112,3 +112,36 @@ @return $opposite-direction; } + + +@function to-number($string) { + $string: str-replace($string, " ", ""); + $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; + $numbers: 0 1 2 3 4 5 6 7 8 9; + $result: 0; + + @for $i from 1 through str-length($string) { + $character: str-slice($string, $i, $i); + $index: index($strings, $character); + + @if not $index { + @warn "Unknown character `#{$character}`."; + @return false; + } + + $number: nth($numbers, $index); + $result: $result * 10 + $number; + } + + @return $result; +} + +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} diff --git a/app/assets/stylesheets/grid/_omega.scss b/app/assets/stylesheets/grid/_omega.scss index 80f918ab..f18e0f00 100644 --- a/app/assets/stylesheets/grid/_omega.scss +++ b/app/assets/stylesheets/grid/_omega.scss @@ -79,7 +79,32 @@ margin-#{$direction}: 0; } - @if type-of($query) == number and unit($query) == "n" { + @if type-of($query) == string { + $query: str-replace($query, " ", ""); + $operator: false; + + @if str_index($query, "+") { + $operator: "+"; + } @else if str_index($query, "-") { + $operator: "-"; + } + + @if $operator { + $operator-index: str_index($query, $operator); + $first: str-slice($query, 0, ($operator-index - 1)); + $last: to-number(str-slice($query, ($operator-index + 1), -1)); + @if $operator == "+" { + $last: $last + 1; + } @else if $operator == "-" { + $last: $last - 1; + } + $nth: "#{$first}#{$operator}#{$last}"; + + &:nth-child(#{$nth}) { + clear: $opposite-direction; + } + } + } @else if type-of($query) == number && unit($query) == "n" { &:nth-child(#{$query}+1) { clear: $opposite-direction; } diff --git a/spec/neat/omega_spec.rb b/spec/neat/omega_spec.rb index 68519139..ee1701e1 100644 --- a/spec/neat/omega_spec.rb +++ b/spec/neat/omega_spec.rb @@ -25,6 +25,20 @@ it "removes right margin of nth-child(4n+1)" do expect(".omega-complex-nth:nth-child(4n+1)").to have_rule("margin-right: 0") end + + it "adds clear to nth-child('4n+2')" do + expect(".omega-complex-nth:nth-child(4n+2)").to have_rule("clear: left") + end + end + + context "with argument ('3n-1')" do + it "removes right margin of nth-child(3n-1)" do + expect(".omega-complex-nth-negative:nth-child(3n-1)").to have_rule("margin-right: 0") + end + + it "adds clear to nth-child('3n-0')" do + expect(".omega-complex-nth-negative:nth-child(3n-0)").to have_rule("clear: left") + end end context "when called inside an RTL row" do diff --git a/test/omega.scss b/test/omega.scss index 7e82617c..c527bf10 100644 --- a/test/omega.scss +++ b/test/omega.scss @@ -12,6 +12,10 @@ @include omega("4n+1"); } +.omega-complex-nth-negative { + @include omega("3n-1"); +} + section { @include row($direction: RTL);