javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reduced markup required for tabs, added styles

Browse Source
This commit is contained in:
Max Lynch
2013-09-12 10:55:11 -05:00
parent 107d226ae2
commit a05f9064ad
7 changed files with 259 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
example/tab-bars.html
View File

@ -7,6 +7,11 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../dist/ionic.css"> <link rel="stylesheet" href="../dist/ionic.css">
<style>
.tabs {
position: relative;
}
</style>
</head> </head>
<body> <body>
@ -20,37 +25,112 @@
<main class="has-header"> <main class="has-header">
</main> </main>
<nav id="tab-bar" class="tabs tabs-default">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-secondary">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-primary">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-success">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-info">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-warning">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<footer class="bar bar-tabs bar-footer bar-success"> <nav id="tab-bar" class="tabs tabs-danger">
<nav id="tab-bar" class="tabs"> <a class="tab-item" href="#">
<ul class="tabs-inner"> <i class="icon-home"></i>
<li class="tab-item"> Friends
<a href="#"> </a>
<i class="glyphicon glyphicon-user"></i> <a class="tab-item">
Friends Enemies
</a> </a>
</li> <a class="tab-item">
<li class="tab-item"> Settings
<a href="#"> </a>
<i class="glyphicon glyphicon-thumbs-down"></i> <a class="tab-item">
Enemies More
</a> </a>
</li> </nav>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-wrench"></i>
Settings
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-th"></i>
More
</a>
</li>
</ul>
</nav>
</footer>
</section> </section>

12
scss/_mixins.scss
View File

@ -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 // UTILITY MIXINS
// -------------------------------------------------- // --------------------------------------------------

28
scss/_variables.scss
View File

@ -220,6 +220,34 @@ $bar-danger-border-color: #bc4435;
$bar-dark-bg: #444; $bar-dark-bg: #444;
$bar-dark-border-color: #111; $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 // Lists
// ------------------------------- // -------------------------------

2
scss/ionic.scss
View File

@ -6,7 +6,7 @@
"variables", "variables",
// Base // Base
"ionic/normalize", "ionic/reset",
"ionic/base", "ionic/base",
"ionic/grid", "ionic/grid",

58
scss/ionic/_bar.scss
View File

@ -26,71 +26,29 @@
} }
&.bar-default { &.bar-default {
background-color: $bar-default-bg; @include bar-style($bar-default-bg, $bar-default-border-color, $gray-dark);
border-color: $bar-default-border-color;
color: $gray-dark;
.tab-item a {
color: $gray-dark;
}
} }
&.bar-secondary { &.bar-secondary {
background-color: $bar-secondary-bg; @include bar-style($bar-secondary-bg, $bar-secondary-border-color, $gray-dark);
border-color: $bar-secondary-border-color;
color: $gray-dark;
.tab-item a {
color: $gray-dark;
}
} }
&.bar-primary { &.bar-primary {
background-color: $bar-primary-bg; @include bar-style($bar-primary-bg, $bar-primary-border-color, $white);
border-color: $bar-primary-border-color;
color: $white;
.tab-item a {
color: $white;
}
} }
&.bar-info { &.bar-info {
background-color: $bar-info-bg; @include bar-style($bar-info-bg, $bar-info-border-color, $white);
border-color: $bar-info-border-color;
color: $white;
.tab-item a {
color: $white;
}
} }
&.bar-success { &.bar-success {
background-color: $bar-success-bg; @include bar-style($bar-success-bg, $bar-success-border-color, $white);
border-color: $bar-success-border-color;
color: $white;
.tab-item a {
color: $white;
}
} }
&.bar-warning { &.bar-warning {
background-color: $bar-warning-bg; @include bar-style($bar-warning-bg, $bar-warning-border-color, $white);
border-color: $bar-warning-border-color;
color: $white;
.tab-item a {
color: $white;
}
} }
&.bar-danger { &.bar-danger {
background-color: $bar-danger-bg; @include bar-style($bar-danger-bg, $bar-danger-border-color, $white);
border-color: $bar-danger-border-color;
color: $white;
.tab-item a {
color: $white;
}
} }
&.bar-dark { &.bar-dark {
background-color: $bar-dark-bg; @include bar-style($bar-dark-bg, $bar-dark-border-color, $white);
border-color: $bar-dark-border-color;
color: $white;
.tab-item a {
color: $white;
}
} }
// //

148
scss/ionic/_normalize.scss → scss/ionic/_reset.scss
View File

@ -1,36 +1,54 @@
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */ /**
* 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.
HTML5 display definitions *
========================================================================== */ * 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
*/ */
html, body, div, span, applet, object, iframe,
article, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
aside, a, abbr, acronym, address, big, cite, code,
details, del, dfn, em, img, ins, kbd, q, s, samp,
figcaption, small, strike, strong, sub, sup, tt, var,
figure, b, u, i, center,
footer, dl, dt, dd, ol, ul, li,
header, fieldset, form, label, legend,
hgroup, table, caption, tbody, tfoot, thead, tr, th, td,
main, article, aside, canvas, details, embed,
nav, figure, figcaption, footer, header, hgroup,
section, menu, nav, output, ruby, section, summary,
summary { time, mark, audio, video {
display: block; margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} }
/** body {
* Correct `inline-block` display not defined in IE 8/9. line-height: 1;
*/ }
ol, ul {
audio, list-style: none;
canvas, }
video { blockquote, q {
display: inline-block; 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. * Hide the `template` element in IE, Safari, and Firefox < 22.
*/ */
@ -81,17 +98,6 @@ body {
margin: 0; 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. * Address `outline` inconsistency between Chrome and other browsers.
@ -124,13 +130,6 @@ h1 {
margin: 0.67em 0; 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. * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
@ -159,14 +158,6 @@ hr {
height: 0; 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. * Correct font family set oddly in Safari 5 and Chrome.
@ -224,42 +215,6 @@ sub {
bottom: -0.25em; 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. * Define consistent border, margin, and padding.
*/ */
@ -342,17 +297,6 @@ html input[disabled] {
cursor: default; 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. * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome

77
scss/ionic/_tabs.scss
View File

@ -6,46 +6,77 @@
.tabs { .tabs {
font-size: 16px; 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 { .tab-item {
a { font-weight: 200;
font-weight: 200; font-family: $light-sans-font-family;
font-family: $light-sans-font-family;
.active, &:active { color: inherit;
//box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
} //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 { i {
font-size: 25px; font-size: 25px;
} }
} }
.tabs-inner {
@include box-orient(horizontal);
display: -webkit-box;
display: box;
height: 100%;
list-style: none;
}
/* Navigational tab */ /* Navigational tab */
.tab-item { .tab-item {
display: block;
@include box-flex(1);
box-sizing: border-box;
// Required to force box elements to be the same size; // Required to force box elements to be the same size;
width: 0; width: 0;
height: 100%; height: 100%;
text-align: center;
a { @include box-flex(1);
display: block; box-sizing: border-box;
width: 100%;
height: 100%; text-align: center;
text-decoration: none; text-decoration: none;
}
} }
/* Active state for tab */ /* Active state for tab */