Small mm-tabs tweak

- fix example
- make icon look nicer on tab

Author: anthonykoerber

src/mm-tab/mm-tab.js

@@ -20,6 +20,14 @@
 				type: String,
 				value: ''
 			},
+			iconWidth: {
+				type: Number,
+				value: 13
+			},
+			iconHeight: {
+				type: Number,
+				value: 13
+			},
 			tabLabel: {
 				type: String,
 				value: '',

src/mm-tabs/example.html

@@ -1,5 +1,24 @@
+<style type="text/css">
+	.tab-content {
+		box-sizing: border-box;
+		padding: 15px;
+	}
+</style>
+
 <mm-tabs tab-bar-offset="15">
-	<mm-tab tab-label="First" icon="info" active>This is the first tab content.</mm-tab>
-	<mm-tab tab-label="Second"><template>This is the second tab content.</template></mm-tab>
-	<mm-tab tab-label="Third"><template>This is the third tab content.</template></mm-tab>
+	<mm-tab tab-label="First" icon="info" active>
+		<div class="tab-content">
+			<p>This is the first tab content.</p>
+		</div>
+	</mm-tab>
+	<mm-tab tab-label="Second">
+		<div class="tab-content">
+			<p>This is the second tab content.</p>
+		</div>
+	</mm-tab>
+	<mm-tab tab-label="Third">
+		<div class="tab-content">
+			<p>This is the third tab content.</p>
+		</div>
+	</mm-tab>
 </mm-tabs>

src/mm-tabs/mm-tabs.html

@@ -20,7 +20,9 @@
 		<ul id="tabBar" class$="{{tabBarPosition}}" style$="{{_updateStyle(tabBarPosition,tabBarOffset)}}">
 			<template id="tabList" is="dom-repeat" items="{{_tabs}}">
 			<li active$="{{item.active}}" on-tap="_handleTap">
-				<template is="dom-if" if="{{item.icon}}"><mm-icon type="{{item.icon}}" height="16" width="16"></mm-icon></template>
+				<template is="dom-if" if="{{item.icon}}">
+					<mm-icon type="{{item.icon}}" height="{{item.iconHeight}}" width="{{item.iconWidth}}"></mm-icon>
+				</template>
 				<span>{{item.tabLabel}}</span>
 			</li>
 			</template>

src/mm-tabs/mm-tabs.scss

@@ -33,6 +33,10 @@
 		color: $color-A5;
 		cursor: pointer;
 		list-style-type: none;
+
+		mm-icon {
+			margin-right: 5px;
+		}
 	}
 
 	li[active] {
@@ -52,6 +56,10 @@
 		border-top-right-radius: 3px;
 		margin: 0 -1px 0 0;
 		padding: .5em 1em .25em;
+
+		mm-icon {
+			margin-right: 5px;
+		}
 	}
 
 	li[active] {
@@ -93,8 +101,7 @@
 	}
 }
 
-#tabBar.left ~ ::content > mm-tab, // shadow
-::content #tabBar.left ~ mm-tab { // shady
+#tabBar.left > ::content > mm-tab {
 	border-left: 1px solid darken($color-A12, 10%);
 }
 
@@ -108,6 +115,10 @@
 		border-radius: 0;
 		border-image: linear-gradient(to bottom, transparent, $color-A20) 1 100%;
 		padding: .75em 1em .5em;
+
+		mm-icon {
+			margin-right: 5px;
+		}
 	}
 
 	li[active] {