fix(tabs): stretching while applying mc-stretch-tab within mc-light-t…

…ab (#146)
positive-js · Jun 25, 2019 · 195c5c7 · 195c5c7
1 parent 7b00549
commit 195c5c7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/mosaic-dev/tabs/template.html b/packages/mosaic-dev/tabs/template.html
@@ -1,22 +1,32 @@
 <div>
-    <mc-tab-group mc-light-tabs>
+    <h4>Default tabs</h4>
+    <mc-tab-group>
         <mc-tab label="First">Content 1</mc-tab>
         <mc-tab label="Second">Content 2</mc-tab>
         <mc-tab disabled label="Third">Content 3</mc-tab>
         <mc-tab label="4">Content 4</mc-tab>
         <mc-tab label="5">Content 5</mc-tab>
     </mc-tab-group>
 
-    <br><br><br>
+    <h4>Light tabs</h4>
+    <mc-tab-group mc-light-tabs>
+        <mc-tab label="First">Content 1</mc-tab>
+        <mc-tab label="Second">Content 2</mc-tab>
+        <mc-tab disabled label="Third">Content 3</mc-tab>
+        <mc-tab label="4">Content 4</mc-tab>
+        <mc-tab label="5">Content 5</mc-tab>
+    </mc-tab-group>
 
-    <mc-tab-group>
+    <h4>Light tabs + stretch tabs</h4>
+    <mc-tab-group mc-light-tabs mc-stretch-tabs>
         <mc-tab label="First">Content 1</mc-tab>
         <mc-tab label="Second">Content 2</mc-tab>
         <mc-tab disabled label="Third">Content 3</mc-tab>
         <mc-tab label="4">Content 4</mc-tab>
         <mc-tab label="5">Content 5</mc-tab>
     </mc-tab-group>
 
+
     <h3>Navigation</h3>
 
     <nav mc-tab-nav-bar mc-light-tabs mc-align-tabs-end>

diff --git a/packages/mosaic/tabs/tab-header.scss b/packages/mosaic/tabs/tab-header.scss
@@ -76,7 +76,7 @@
     }
 }
 
-.mc-tab-label {
+.mc-tab-label, .mc-tab-light-label {
     .mc-tab-group_stretch-labels & {
         flex-basis: 0;
         flex-grow: 1;