diff --git a/example/tab-bars.html b/example/tab-bars.html
index bc2f317116..76812cd225 100644
--- a/example/tab-bars.html
+++ b/example/tab-bars.html
@@ -7,6 +7,11 @@
+
@@ -20,37 +25,112 @@
+
+
+
+
+
+
-
+
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 45b6ecd342..9c381569b8 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -46,6 +46,18 @@
}
}
+@mixin bar-style($bgColor, $borderColor, $color) {
+ background-color: $bgColor;
+ border-color: $borderColor;
+ color: $color;
+}
+
+@mixin tab-style($bgColor, $borderColor, $color) {
+ background-color: $bgColor;
+ border-color: $borderColor;
+ color: $color;
+}
+
// UTILITY MIXINS
// --------------------------------------------------
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 758b5bf957..75e340c1d2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -220,6 +220,34 @@ $bar-danger-border-color: #bc4435;
$bar-dark-bg: #444;
$bar-dark-border-color: #111;
+// Tabs
+// -------------------------------
+$tabs-height: 49px !default;
+
+$tabs-default-bg: #fff;
+$tabs-default-border-color: #ddd;
+
+$tabs-secondary-bg: #f5f5f5;
+$tabs-secondary-border-color: #ccc;
+
+$tabs-primary-bg: #6999e9;
+$tabs-primary-border-color: #5981c5;
+
+$tabs-info-bg: #60d2e6;
+$tabs-info-border-color: #51b3c4;
+
+$tabs-success-bg: #89c163;
+$tabs-success-border-color: #71a052;
+
+$tabs-warning-bg: #f0b840;
+$tabs-warning-border-color: #cf9a29;
+
+$tabs-danger-bg: #de5645;
+$tabs-danger-border-color: #bc4435;
+
+$tabs-dark-bg: #444;
+$tabs-dark-border-color: #111;
+
// Lists
// -------------------------------
diff --git a/scss/ionic.scss b/scss/ionic.scss
index 2cb38c57f1..9b940205cd 100644
--- a/scss/ionic.scss
+++ b/scss/ionic.scss
@@ -6,7 +6,7 @@
"variables",
// Base
- "ionic/normalize",
+ "ionic/reset",
"ionic/base",
"ionic/grid",
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 78ddd48565..fa335af69d 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -26,71 +26,29 @@
}
&.bar-default {
- background-color: $bar-default-bg;
- border-color: $bar-default-border-color;
- color: $gray-dark;
- .tab-item a {
- color: $gray-dark;
- }
+ @include bar-style($bar-default-bg, $bar-default-border-color, $gray-dark);
}
&.bar-secondary {
- background-color: $bar-secondary-bg;
- border-color: $bar-secondary-border-color;
- color: $gray-dark;
- .tab-item a {
- color: $gray-dark;
- }
+ @include bar-style($bar-secondary-bg, $bar-secondary-border-color, $gray-dark);
}
&.bar-primary {
- background-color: $bar-primary-bg;
- border-color: $bar-primary-border-color;
- color: $white;
- .tab-item a {
- color: $white;
- }
+ @include bar-style($bar-primary-bg, $bar-primary-border-color, $white);
}
&.bar-info {
- background-color: $bar-info-bg;
- border-color: $bar-info-border-color;
- color: $white;
- .tab-item a {
- color: $white;
- }
+ @include bar-style($bar-info-bg, $bar-info-border-color, $white);
}
&.bar-success {
- background-color: $bar-success-bg;
- border-color: $bar-success-border-color;
- color: $white;
- .tab-item a {
- color: $white;
- }
+ @include bar-style($bar-success-bg, $bar-success-border-color, $white);
}
&.bar-warning {
- background-color: $bar-warning-bg;
- border-color: $bar-warning-border-color;
- color: $white;
- .tab-item a {
- color: $white;
- }
+ @include bar-style($bar-warning-bg, $bar-warning-border-color, $white);
}
&.bar-danger {
- background-color: $bar-danger-bg;
- border-color: $bar-danger-border-color;
- color: $white;
-
- .tab-item a {
- color: $white;
- }
+ @include bar-style($bar-danger-bg, $bar-danger-border-color, $white);
}
&.bar-dark {
- background-color: $bar-dark-bg;
- border-color: $bar-dark-border-color;
- color: $white;
-
- .tab-item a {
- color: $white;
- }
+ @include bar-style($bar-dark-bg, $bar-dark-border-color, $white);
}
//
diff --git a/scss/ionic/_normalize.scss b/scss/ionic/_reset.scss
similarity index 72%
rename from scss/ionic/_normalize.scss
rename to scss/ionic/_reset.scss
index 332bc56987..8e3c130064 100755
--- a/scss/ionic/_normalize.scss
+++ b/scss/ionic/_reset.scss
@@ -1,36 +1,54 @@
-/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
-
-/* ==========================================================================
- HTML5 display definitions
- ========================================================================== */
+/**
+* Adapted from normalize.css and some reset.css. We don't care even one
+* bit about IE, so we don't need any hacks for that in here.
+*
+* There are probably other things we could remove here, as well.
+*
+* normalize.css v2.1.2 | MIT License | git.io/normalize
+*/
/**
- * Correct `block` display not defined in IE 8/9.
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
*/
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
- display: block;
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
}
-/**
- * Correct `inline-block` display not defined in IE 8/9.
- */
-
-audio,
-canvas,
-video {
- display: inline-block;
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
}
/**
@@ -44,7 +62,6 @@ audio:not([controls]) {
}
/**
- * Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
@@ -81,17 +98,6 @@ body {
margin: 0;
}
-/* ==========================================================================
- Links
- ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
- background: transparent;
-}
/**
* Address `outline` inconsistency between Chrome and other browsers.
@@ -124,13 +130,6 @@ h1 {
margin: 0.67em 0;
}
-/**
- * Address styling not present in IE 8/9, Safari 5, and Chrome.
- */
-
-abbr[title] {
- border-bottom: 1px dotted;
-}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
@@ -159,14 +158,6 @@ hr {
height: 0;
}
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
- background: #ff0;
- color: #000;
-}
/**
* Correct font family set oddly in Safari 5 and Chrome.
@@ -224,42 +215,6 @@ sub {
bottom: -0.25em;
}
-/* ==========================================================================
- Embedded content
- ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9.
- */
-
-img {
- border: 0;
-}
-
-/**
- * Correct overflow displayed oddly in IE 9.
- */
-
-svg:not(:root) {
- overflow: hidden;
-}
-
-/* ==========================================================================
- Figures
- ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari 5.
- */
-
-figure {
- margin: 0;
-}
-
-/* ==========================================================================
- Forms
- ========================================================================== */
-
/**
* Define consistent border, margin, and padding.
*/
@@ -342,17 +297,6 @@ html input[disabled] {
cursor: default;
}
-/**
- * 1. Address box sizing set to `content-box` in IE 8/9.
- * 2. Remove excess padding in IE 8/9.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
-}
-
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss
index 416a449e12..5c25ab809a 100644
--- a/scss/ionic/_tabs.scss
+++ b/scss/ionic/_tabs.scss
@@ -6,46 +6,77 @@
.tabs {
font-size: 16px;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: $tabs-height;
+
+ @include box-orient(horizontal);
+ display: -webkit-box;
+ display: box;
+
+ @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
+
+ &.tabs-default {
+ @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
+ }
+ &.tabs-secondary {
+ @include tab-style($tabs-secondary-bg, $tabs-secondary-border-color, $gray-dark);
+ }
+ &.tabs-primary {
+ @include tab-style($tabs-primary-bg, $tabs-primary-border-color, $white);
+ }
+ &.tabs-success {
+ @include tab-style($tabs-success-bg, $tabs-success-border-color, $white);
+ }
+ &.tabs-info {
+ @include tab-style($tabs-info-bg, $tabs-info-border-color, $white);
+ }
+ &.tabs-warning {
+ @include tab-style($tabs-warning-bg, $tabs-warning-border-color, $white);
+ }
+ &.tabs-danger {
+ @include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white);
+ }
+ &.tabs-dark {
+ @include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white);
+ }
}
.tab-item {
- a {
- font-weight: 200;
- font-family: $light-sans-font-family;
+ font-weight: 200;
+ font-family: $light-sans-font-family;
- .active, &:active {
- //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
- }
+ color: inherit;
+
+ //line-height: $tabs-height;
+
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ .active, &:active {
+ //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
}
+
i {
font-size: 25px;
}
}
-.tabs-inner {
- @include box-orient(horizontal);
- display: -webkit-box;
- display: box;
- height: 100%;
- list-style: none;
-}
/* Navigational tab */
.tab-item {
-
- @include box-flex(1);
- box-sizing: border-box;
+ display: block;
// Required to force box elements to be the same size;
width: 0;
height: 100%;
- text-align: center;
+
+ @include box-flex(1);
+ box-sizing: border-box;
- a {
- display: block;
- width: 100%;
- height: 100%;
- text-decoration: none;
- }
+ text-align: center;
+ text-decoration: none;
}
/* Active state for tab */