fix(slot): correct broken style inheritance

Ryan A. Johnson · Ryan A. Johnson · commit 067879adc1ca · 2017-11-17T14:00:23.000-06:00
diff --git a/source/_less/reset.less b/source/_less/reset.less
@@ -21,6 +21,10 @@ html {
   box-sizing: inherit;
 }
 
+[hidden] {
+  display: none;
+}
+
 a {
   background-color: transparent;
 }
diff --git a/source/components/HxElement.less b/source/components/HxElement.less
@@ -0,0 +1,12 @@
+@import (reference) "vars";
+
+* {
+  box-sizing: border-box;
+
+  // Text styles need passed through
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
diff --git a/source/components/checkbox/HxCheckbox.less b/source/components/checkbox/HxCheckbox.less
@@ -1,4 +1,4 @@
-@import 'vars';
+@import "../HxElement";
 
 :host {
   background-color: @gray-0;
@@ -12,10 +12,6 @@
   vertical-align: middle;
   width: 1rem;
 
-  &([hidden]) {
-    display: none;
-  }
-
   /* default unchecked */
   &(:hover) {
     background-color: @cyan-50;
diff --git a/source/components/reveal/HxReveal.html b/source/components/reveal/HxReveal.html
@@ -1,6 +1,4 @@
 <button id="toggle" aria-expanded="false">
   <slot name="summary"></slot>
 </button>
-<div id="content">
-  <slot></slot>
-</div>
+<slot id="content"></slot>
diff --git a/source/components/reveal/HxReveal.less b/source/components/reveal/HxReveal.less
@@ -1,8 +1,10 @@
+@import "../HxElement";
+
 :host {
   display: block;
 
-  &([open]) > #content {
-    display: block;
+  &([open]) #content {
+    display: contents;
   }
 }
 
@@ -13,8 +15,6 @@
 #toggle {
   background-color: transparent;
   border: none;
-  color: inherit;
-  font-size: 1em;
   margin: 0;
   padding: 0;
   text-align: left;
diff --git a/source/components/tabset/HxTabpanel.less b/source/components/tabset/HxTabpanel.less
@@ -1,4 +1,3 @@
-@import (reference) 'vars';
 @import '../reveal/HxReveal.less';
 
 :host {
diff --git a/source/components/tabset/HxTabset.less b/source/components/tabset/HxTabset.less
@@ -1,3 +1,5 @@
+@import "../HxElement";
+
 :host {
   background-color: inherit;
   display: block;
diff --git a/source/components/tabset/index.html b/source/components/tabset/index.html
@@ -18,9 +18,23 @@ <h2 class="hxSectionTitle" id="tabset">Tabset</h2>
       <a href="#" role="tab" class="hxTab">Caramels Marzipan</a>
     </div>
     <hx-tabpanel id="cupcake">
-      <p>
-        Cupcake ipsum dolor sit amet pie. Tiramisu icing cake. Macaroon halvah apple pie. Carrot cake cheesecake chocolate bar toffee biscuit candy gummi bears. Apple pie chocolate cake dessert liquorice biscuit cupcake. Jelly sugar plum chocolate bar chocolate. Wafer fruitcake carrot cake jelly jujubes cookie danish. Sesame snaps gingerbread gingerbread pastry gummies jelly beans icing. Sesame snaps wafer lollipop. Cookie gummies icing marshmallow powder soufflé topping tart.
-      </p>
+      <div class="hxRow">
+        <div class="hxCol-6">
+          <p>
+            Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps
+            gummi bears liquorice cookie chupa chups fruitcake croissant
+            chocolate topping. Brownie biscuit wafer marshmallow liquorice
+            soufflé powder jelly.
+          </p>
+        </div>
+        <div class="hxCol-6">
+          <p>
+            Sweet roll sesame snaps danish I love jelly wafer dragée soufflé
+            cake. Cookie chocolate cake gingerbread powder icing. Ice cream
+            cotton candy gummi bears oat cake sweet pastry.
+          </p>
+        </div>
+      </div>
     </hx-tabpanel>
     <hx-tabpanel id="biscuit">
       <p>
@@ -41,7 +55,12 @@ <h2 class="hxSectionTitle" id="tabset">Tabset</h2>
       <a href="#" role="tab" class="hxTab">Biscuit Marshmallow</a>
       <a href="#" role="tab" class="hxTab">Caramel Marzipan</a>
     </div>
-    <hx-tabpanel id="cupcake">...</hx-tabpanel>
+    <hx-tabpanel id="cupcake">
+      <div class="hxRow">
+        <div class="hxCol-6">...</div>
+        <div class="hxCol-6">...</div>
+      </div>
+    </hx-tabpanel>
     <hx-tabpanel id="biscuit">...</hx-tabpanel>
     <hx-tabpanel id="caramel">...</hx-tabpanel>
   </hx-tabset>
diff --git a/source/docs.less b/source/docs.less
@@ -12,7 +12,7 @@
   -------------------------
   For distributed HelixUI CSS styles, see source/styles/helix-ui.less
 */
-@import 'vars';
+@import (reference) 'vars';
 
 body {
   background-color: @gray-25;
diff --git a/source/helix-ui.less b/source/helix-ui.less
@@ -4,8 +4,8 @@
 @import 'imports';
 
 // LESS Vars and Mixins
-@import (less, reference) 'vars';
-@import (less, reference) 'mixins';
+@import (reference) 'vars';
+@import (reference) 'mixins';
 
 // Normalization and Resets
 @import  'reset';

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,10 @@ html {`
`21`	`21`	`box-sizing: inherit;`
`22`	`22`	`}`
`23`	`23`
	`24`	`+[hidden] {`
	`25`	`+ display: none;`
	`26`	`+}`
	`27`	`+`
`24`	`28`	`a {`
`25`	`29`	`background-color: transparent;`
`26`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-@import (reference) 'vars';`
`2`	`1`	`@import '../reveal/HxReveal.less';`
`3`	`2`
`4`	`3`	`:host {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@import "../HxElement";`
	`2`	`+`
`1`	`3`	`:host {`
`2`	`4`	`background-color: inherit;`
`3`	`5`	`display: block;`