Merge pull request #488 from rackerlabs/surf-1568-hx-div-inherit-box-sizing

fix(#444): hx-div box-sizing inheritance

Author: CITguy

docs/components/box/index.html

@@ -2,6 +2,7 @@
 title: Box
 minver: 0.2.0
 also:
+  components/box/test.html: Testing - Boxes
   components/grid: Grid
   components/layouts: Layouts
   elements/hx-div: <hx-div>

docs/components/box/test.html

@@ -0,0 +1,23 @@
+---
+title: Testing - Boxes
+---
+{% extends 'test.njk' %}
+{% block content %}
+<section>
+  <nav class="hxBreadcrumb">
+    <a href="components/box">Box</a>
+    <hx-icon class="delimiter" type="angle-right"></hx-icon>
+    <a href="#">{{page.title}}</a>
+  </nav>
+</section>
+
+<section>
+  <header>
+    <h2>Status inside Div</h2>
+  </header>
+
+  <hx-div>
+    <hx-status>hx-div &gt; hx-status</hx-status>
+  </hx-div>
+</section>
+{% endblock %}

src/helix-ui/elements/HXDivElement.less

@@ -1,3 +1,5 @@
+@import './HXElement';
+
 // @supports used to prevent IE from loading the ShadyCSS-rewritten styles.
 // This is so we can write shorter, less-specific CSS selectors in order
 // to apply ShadyCSS overrides in the LightDOM.