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">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../dist/ionic.css">
<style>
.tabs {
position: relative;
}
</style>
</head>
<body>
@ -20,37 +25,112 @@
<main class="has-header">
</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">
<ul class="tabs-inner">
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-user"></i>
Friends
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-thumbs-down"></i>
Enemies
</a>
</li>
<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>
<nav id="tab-bar" class="tabs tabs-danger">
<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>
</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
// --------------------------------------------------

28
scss/_variables.scss
View File

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

2
scss/ionic.scss
View File

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

58
scss/ionic/_bar.scss
View File

@ -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);
}
//

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 */
/* ==========================================================================
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

77
scss/ionic/_tabs.scss
View File

@ -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 */