From a05f9064ad84d5eb04e83cd282e628c01167fca2 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 12 Sep 2013 10:55:11 -0500 Subject: [PATCH] Reduced markup required for tabs, added styles --- example/tab-bars.html | 140 ++++++++++++++---- scss/_mixins.scss | 12 ++ scss/_variables.scss | 28 ++++ scss/ionic.scss | 2 +- scss/ionic/_bar.scss | 58 ++------ scss/ionic/{_normalize.scss => _reset.scss} | 148 ++++++-------------- scss/ionic/_tabs.scss | 77 +++++++--- 7 files changed, 259 insertions(+), 206 deletions(-) rename scss/ionic/{_normalize.scss => _reset.scss} (72%) 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 */