Use improved box-sizing reset

- More on the syntax here http://bit.ly/1qk2tVR - Closes #196
thoughtbot · Jul 18, 2014 · 8e8b695 · 8e8b695 · Freekbron · Sep 9, 2014
1 parent ced0c2e
commit 8e8b695
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 8 deletions.
diff --git a/app/assets/stylesheets/_neat.scss b/app/assets/stylesheets/_neat.scss
@@ -8,7 +8,7 @@
 // Grid
 @import "grid/private";
 @import "grid/reset";
-@import "grid/grid";
+@import "grid/box-sizing";
 @import "grid/omega";
 @import "grid/outer-container";
 @import "grid/span-columns";

diff --git a/app/assets/stylesheets/grid/_box-sizing.scss b/app/assets/stylesheets/grid/_box-sizing.scss
@@ -0,0 +1,11 @@
+@if $border-box-sizing == true {
+  html { // http://bit.ly/1qk2tVR
+    @include box-sizing(border-box);
+  }
+
+  * {
+    &, &:before, &:after {
+      @include box-sizing(inherit);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/grid/_grid.scss b/app/assets/stylesheets/grid/_grid.scss
diff --git a/spec/neat/default_spec.rb b/spec/neat/default_spec.rb
@@ -0,0 +1,15 @@
+require 'spec_helper'
+
+describe "By default" do
+  before(:all) do
+    ParserSupport.parse_file("default")
+  end
+
+  it "sets sizing on the html element to 'border-box'" do
+    expect('html').to have_rule('box-sizing: border-box')
+  end
+
+  it "sets sizing on the global selector to 'inherit'" do
+    expect('*:after').to have_rule('box-sizing: inherit')
+  end
+end
diff --git a/test/_setup.scss b/test/_setup.scss
@@ -1,4 +1,2 @@
-$border-box-sizing: false;
-
 @import 'bourbon/bourbon';
 @import 'app/assets/stylesheets/neat';
diff --git a/test/default.scss b/test/default.scss
@@ -0,0 +1 @@
+@import 'setup';