diff --git a/ionic/components/tabs/modes/material.scss b/ionic/components/tabs/modes/material.scss
index e6fc58c077..5f7c2dccc7 100644
--- a/ionic/components/tabs/modes/material.scss
+++ b/ionic/components/tabs/modes/material.scss
@@ -2,9 +2,9 @@
// Material Design Tabs
// --------------------------------------------------
-$tab-bar-md-item-padding: 2px 10px !default;
+$tab-bar-md-item-padding: 12px 10px 4px 10px !default;
$tab-bar-md-item-font-size: 1.4rem !default;
-$tab-bar-md-item-icon-size: 26px !default;
+$tab-bar-md-item-icon-size: 2.4rem !default;
$tab-bar-md-item-height: 4.8rem !default;
@@ -17,6 +17,16 @@ $tab-bar-md-item-height: 4.8rem !default;
box-shadow: none;
border-radius: 0;
+ border-bottom: 2px solid transparent;
+ }
+
+ button.tab-button[aria-selected="true"] {
+ border-bottom-color: $tab-button-text-active;
+ }
+
+ .tab-button-text {
+ margin-top: 8px;
+ margin-bottom: 8px;
}
.tab-button-icon {
@@ -25,3 +35,21 @@ $tab-bar-md-item-height: 4.8rem !default;
}
}
+
+[mode=md][tab-bar-icons=bottom] button.tab-button {
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+[mode=md][tab-bar-icons=right] button.tab-button,
+[mode=md][tab-bar-icons=left] button.tab-button {
+ padding-bottom: 10px;
+
+ icon {
+ min-width: 24px;
+ }
+}
+
+[mode=md] button.tab-button.icon-only,
+[mode=md] button.tab-button.has-title-only {
+ padding: 8px 10px;
+}
diff --git a/ionic/components/tabs/test/advanced/tabs.html b/ionic/components/tabs/test/advanced/tabs.html
index 2fc079d70e..c604bd0cc9 100644
--- a/ionic/components/tabs/test/advanced/tabs.html
+++ b/ionic/components/tabs/test/advanced/tabs.html
@@ -1,6 +1,6 @@
-
-
-
+
+
+
diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html
index 07a7e67408..2f06ba15d6 100644
--- a/ionic/components/tabs/test/tab-bar-scenarios/main.html
+++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html
@@ -1,48 +1,42 @@
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
+
-
-
-
-
-
+
+
@@ -57,5 +51,6 @@