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

css(tabs): add test page for nested tabs

Browse Source
This commit is contained in:
Andy Joslin
2014-05-02 13:18:09 -06:00
parent 9c58d47b2b
commit 701c977563
2 changed files with 64 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
scss/_tabs.scss
View File

@@ -130,7 +130,9 @@
}
.tabs-icon-top > .tabs .tab-item,
.tabs-icon-bottom > .tabs .tab-item {
.tabs-icon-top.tabs .tab-item,
.tabs-icon-bottom > .tabs .tab-item,
.tabs-icon-bottom.tabs .tab-item {
font-size: $tabs-text-font-size-side-icon;
line-height: $tabs-text-font-size;
}
@@ -142,7 +144,9 @@
font-size: $tabs-icon-size;
}
.tabs-icon-left.tabs .tab-item,
.tabs-icon-left > .tabs .tab-item,
.tabs-icon-right.tabs .tab-item,
.tabs-icon-right > .tabs .tab-item {
font-size: $tabs-text-font-size-side-icon;
@@ -157,15 +161,18 @@
}
}
.tabs-icon-left > .tabs .tab-item .icon {
.tabs-icon-left > .tabs .tab-item .icon,
.tabs-icon-left.tabs .tab-item .icon {
padding-right: 3px;
}
.tabs-icon-right > .tabs .tab-item .icon {
.tabs-icon-right > .tabs .tab-item .icon,
.tabs-icon-right.tabs .tab-item .icon {
padding-left: 3px;
}
.tabs-icon-only > .tabs .icon {
.tabs-icon-only > .tabs .icon,
.tabs-icon-only.tabs .icon {
line-height: inherit;
}

53
test/css/tabs-and-cards.html Normal file
View File

@@ -0,0 +1,53 @@
<html ng-app>
<head>
<meta charset="utf-8">
<title>Tabs: Top Icons</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">
<script src="../../config/lib/js/angular/angular.js"></script>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars & Cards</h1>
</header>
<main class="padding has-header">
<div class="{{iconTypeMain}}">
<div class="tabs">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
{{iconTypeMain}}
</a>
</div>
<div class="pane">
<div class="list card">
Main Icon Type
<label class="item item-input">
<input type="text" ng-model="iconTypeMain" ng-init="iconTypeMain = 'tabs-icon-top'">
</label>
<br/>
Card Icon Type
<label class="item item-input">
<input type="text" ng-model="iconTypeSecondary" ng-init="iconTypeSecondary = 'tabs-icon-left'">
</label>
<br/>
<div class="item tabs {{iconTypeSecondary}} tabs-positive">
<a disabled class="tab-item">
<i class="icon ion-close"></i>
{{iconTypeSecondary}}
</a>
</div>
</div>
</div>
</div>
</main>
<style>
main { top: 0; left: 0; right: 0; bottom: 0; position: absolute; }
</style>
</body>
</html>