javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): properly style ios tabs-top

Browse Source 
Breaking Change: SCSS var $tabs-striped-off-opacity has been renamed to $tabs-off-opacity
This commit is contained in:
Perry Govier
2014-12-10 13:32:31 -06:00
parent f2705c6376
commit ae4a3bbd0f
3 changed files with 265 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
test/css/tabs-ios.html Normal file
View File

@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html ng-app="ionic">
<head>
<script src="../../dist/js/ionic.bundle.js"></script>
<meta charset="utf-8">
<title>Tabs: Android Colors</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
<style>
.tabs, .view{
position:relative !important;
}
.spacer{
margin-top: 100px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-positive has-tabs-top">
<h1 class="title">iOS Tab Bars</h1>
</header>
<div class="tabs-top tabs-positive">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-light tabs-top">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-stable tabs-top tabs-background-balanced">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-positive tabs-top tabs-background-assertive">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-calm tabs-top">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-assertive tabs-top tabs-background-dark">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-balanced tabs-top tabs-background-calm">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-energized tabs-top tabs-background-royal">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-royal tabs-top tabs-background-dark">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="tabs-dark tabs-top">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-light spacer">
<nav class="tabs ">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view">
<nav class="tabs ">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-stable tabs-background-balanced">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-color-positive tabs-background-dark">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-calm tabs-background-royal">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-assertive tabs-background-energized">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-color-balanced tabs-background-positive">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-energized">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-color-royal tabs-background-assertive">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
<div class="view tabs-dark">
<nav class="tabs">
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
</nav>
</div>
</body>
</html>