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

test(css): reorganize css tests for snapshots

Browse Source
This commit is contained in:
Adam Bradley
2014-06-05 15:12:44 -05:00
parent a49ecf35e6
commit bc48833925
68 changed files with 1531 additions and 3032 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
test/css/actionsheet.html
View File

@@ -1,76 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>Action Sheets</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">
</head>
<body>
<section>
<header class="bar bar-header bar-dark">
<h1 class="title">Action Sheets</h1>
</header>
<main class="content has-header">
<div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padding">
<a href="#" class="button button-warning" id="modal-opener">Open Sheet</a>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
</main>
</section>
<div id="sheet" class="action-sheet slide-in-up">
<div class="action-sheet-group">
<div class="action-sheet-title" ng-if="titleText">Do you like ice cream?</div>
<button class="button">Tweet</button>
<button class="button">Email</button>
</div>
<div class="action-sheet-group" ng-if="destructiveText">
<button class="button destructive">Delete photos</button>
</div>
<div class="action-sheet-group" ng-if="cancelText">
<button class="button" ng-click="cancel()">Cancel</button>
</div>
</div>
<script src="../../dist/js/ionic.bundle.js"></script>
<script>
var open = document.getElementById('modal-opener');
var sDiv = document.getElementById('sheet');
var sheet = new ionic.views.ActionSheet({el: sDiv});
ionic.on('tap', function(e) {
sheet.show();
/*
ActionSheet.show({
buttons: [
{ text: 'Option 1' },
{ text: 'Option 2' },
{ text: 'Option 3' },
],
destructiveText: 'Delete life',
titleText: 'Are you sure about life?',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
buttonClicked: function(index) {
console.log('BUTTON CLICKED', index);
return true;
},
destructiveButtonClicked: function() {
return true;
}
});
*/
return false;
}, open);
</script>
</body>
</html>

1
test/css/bars-clear.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

1294
test/css/biglists.html
View File

File diff suppressed because it is too large Load Diff

21
test/css/button-bar.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -12,7 +13,7 @@
</header>
<main class="content padding has-header overflow-scroll">
<p>
<div class="button-bar">
<a class="button">One</a>
@@ -20,7 +21,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-light">
<a class="button">One</a>
@@ -28,7 +29,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-stable">
<a class="button">One</a>
@@ -36,7 +37,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-positive">
<a class="button">One</a>
@@ -44,7 +45,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-calm">
<a class="button">One</a>
@@ -52,7 +53,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-assertive">
<a class="button">One</a>
@@ -60,7 +61,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-balanced">
<a class="button">One</a>
@@ -68,7 +69,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-energized">
<a class="button">One</a>
@@ -76,7 +77,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-royal">
<a class="button">One</a>
@@ -84,7 +85,7 @@
<a class="button">Three</a>
</div>
</p>
<p>
<div class="button-bar bar-dark">
<a class="button">One</a>

52
test/css/buttons-borderless.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: borderless</h1>
</header>
<div class="content has-header">
<h4>a.button-icon (Borderless, 32px)</h4>
<p>
<a class="button button-icon"><i class="icon ion-home"></i></a><br>
<a class="button button-clear button-dark">.button-clear Next .button-icon</i></a>
</p>
<hr>
<h4>button.button-icon (Borderless, 32px)</h4>
<p>
<button class="button button-icon"><i class="icon ion-home"></i></button>
</p>
<hr>
<h4>a.button-block.button-icon (Borderless, 32px)</h4>
<p>
<a class="button button-block button-icon"><i class="icon ion-home"></i></a>
</p>
<hr>
<h4>button.button-block.button-icon (Borderless, 32px)</h4>
<p>
<button class="button button-block button-icon"><i class="icon ion-home"></i></button>
</p>
</div>
</body>
</html>

36
test/css/buttons-button-block-clear.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: &lt;button&gt; block clear w/ padding</h1>
</header>
<div class="content has-header padding">
<button class="button button-clear button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-clear button-block">.button-light</button>
<button class="button button-stable button-clear button-block">.button-stable</button>
<button class="button button-positive button-clear button-block">.button-positive</button>
<button class="button button-calm button-clear button-block">.button-calm</button>
<button class="button button-balanced button-clear button-block">.button-balanced</button>
<button class="button button-assertive button-clear button-block">.button-assertive</button>
<button class="button button-energized button-clear button-block">.button-energized</button>
<button class="button button-royal button-clear button-block">.button-royal</button>
<button class="button button-dark button-clear button-block">.button-dark</button>
</div>
</body>
</html>

34
test/css/buttons-button-block.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: &lt;button&gt; block w/ padding</h1>
</header>
<div class="content has-header padding">
<button class="button button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-block button-light">.button-light</button>
<button class="button button-block button-stable">.button-stable</button>
<button class="button button-block button-positive">.button-positive</button>
<button class="button button-block button-calm">.button-calm</button>
<button class="button button-block button-balanced">.button-balanced</button>
<button class="button button-block button-assertive">.button-assertive</button>
<button class="button button-block button-energized">.button-energized</button>
<button class="button button-block button-royal">.button-royal</button>
<button class="button button-block button-dark">.button-dark</button>
</div>
</body>
</html>

36
test/css/buttons-button-outline.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: &lt;button&gt; outline w/ padding</h1>
</header>
<div class="content has-header padding">
<button class="button button-outline button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-outline button-block">.button-light</button>
<button class="button button-stable button-outline button-block">.button-stable</button>
<button class="button button-positive button-outline button-block">.button-positive</button>
<button class="button button-calm button-outline button-block">.button-calm</button>
<button class="button button-balanced button-outline button-block">.button-balanced</button>
<button class="button button-assertive button-outline button-block">.button-assertive</button>
<button class="button button-energized button-outline button-block">.button-energized</button>
<button class="button button-royal button-outline button-block">.button-royal</button>
<button class="button button-dark button-outline button-block">.button-dark</button>
</div>
</body>
</html>

45
test/css/buttons-clear.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: clear</h1>
</header>
<div class="content has-header">
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
<a class="button button-light">.button-light</a>
<a class="button button-stable">.button-stable</a>
<a class="button button-positive">.button-positive</a>
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-clear button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-clear button-energized"><i class="icon ion-home"></i></a>
<a class="button button-clear button-royal">.button-royal</a>
<a class="button button-clear button-dark"><i class="icon ion-home"></i> .button-dark</a>
<button class="button"><i class="icon ion-home"></i> Default</button>
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-clear button-light"><i class="icon ion-home"></i></button>
<button class="button button-clear button-stable"><i class="icon ion-home"></i></button>
<button class="button button-clear button-positive"><i class="icon ion-home"></i></button>
<button class="button button-clear button-calm">.button-calm</button>
<button class="button button-clear button-assertive">.button-assertive</button>
<button class="button button-clear button-energized">.button-energized</button>
<button class="button button-clear button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-dark"><i class="icon ion-home"></i></button>
</div>
</body>
</html>

50
test/css/buttons-default.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: default</h1>
</header>
<div class="content has-header">
<button class="button"><i class="icon ion-home"></i> Default</button>
<button class="button button-light"><i class="icon ion-home"></i></button>
<button class="button button-stable"><i class="icon ion-home"></i></button>
<button class="button button-positive"><i class="icon ion-home"></i></button>
<button class="button button-calm">.button-calm</button>
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-assertive">.button-assertive</button>
<button class="button button-energized">.button-energized</button>
<button class="button button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-dark"><i class="icon ion-home"></i></button>
<hr>
<a class="button"><i class="icon ion-home"></i> Default</a>
<a class="button button-light">.button-light</a>
<a class="button button-stable">.button-stable</a>
<a class="button button-positive">.button-positive</a>
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-energized"><i class="icon ion-home"></i> .button-energized</a>
<a class="button button-royal">.button-royal</a>
<a class="button button-dark"><i class="icon ion-chevron-right"></i> .button-dark</a>
<a class="button button-energized icon-right ion-chevron-right">Login</a>
</div>
</body>
</html>

42
test/css/buttons-full.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: full</h1>
</header>
<div class="content has-header">
<p>
<button class="button button-full"><i class="icon ion-home"></i> Default</button>
<button class="button button-full button-light">.button-light</button>
<button class="button button-full button-stable">.button-stable</button>
<button class="button button-full button-positive">.button-positive</button>
<button class="button button-full button-calm">.button-calm</button>
<button class="button button-full button-balanced">.button-balanced</button>
<button class="button button-full button-assertive">.button-assertive</button>
<button class="button button-full button-energized">.button-energized</button>
<button class="button button-full button-royal">.button-royal</button>
<button class="button button-full button-dark">.button-dark</button>
</p>
<p class="button-full">
<a class="button"><i class="icon ion-home"></i> w/ parent .button-full</a>
</p>
</div>
</body>
</html>

47
test/css/buttons-large.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: large</h1>
</header>
<div class="content has-header">
<button class="button button-large"><i class="icon ion-home"></i> Default</button>
<button class="button button-large button-light"><i class="icon ion-home"></i></button>
<button class="button button-large button-stable"><i class="icon ion-home"></i></button>
<button class="button button-large button-positive"><i class="icon ion-home"></i></button>
<button class="button button-large button-calm">.button-calm</button>
<button class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-large button-assertive">.button-assertive</button>
<button class="button button-large button-energized">.button-energized</button>
<button class="button button-large button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-large button-dark"><i class="icon ion-home"></i></button>
<hr>
<a class="button button-large"><i class="icon ion-home"></i> Default</a>
<a class="button button-large button-light">.button-light</a>
<a class="button button-large button-stable">.button-stable</a>
<a class="button button-large button-positive">.button-positive</a>
<a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-large button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-large button-energized"><i class="icon ion-home"></i></a>
<a class="button button-large button-royal">.button-royal</a>
<a class="button button-large button-dark"><i class="icon ion-home"></i> .button-dark</a>
</div>
</body>
</html>

36
test/css/buttons-link-block-clear.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: &lt;a&gt; block clear w/ padding</h1>
</header>
<div class="content has-header padding">
<a class="button button-clear button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-clear button-block">.button-light</a>
<a class="button button-stable button-clear button-block">.button-stable</a>
<a class="button button-positive button-clear button-block">.button-positive</a>
<a class="button button-calm button-clear button-block">.button-calm</a>
<a class="button button-balanced button-clear button-block">.button-balanced</a>
<a class="button button-assertive button-clear button-block">.button-assertive</a>
<a class="button button-energized button-clear button-block">.button-energized</a>
<a class="button button-royal button-clear button-block">.button-royal</a>
<a class="button button-dark button-clear button-block">.button-dark</a>
</div>
</body>
</html>

34
test/css/buttons-link-block.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: &lt;link&gt; block w/ padding</h1>
</header>
<div class="content has-header padding">
<a class="button button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-block button-light">.button-light</a>
<a class="button button-block button-stable">.button-stable</a>
<a class="button button-block button-positive">.button-positive</a>
<a class="button button-block button-calm">.button-calm</a>
<a class="button button-block button-balanced">.button-balanced</a>
<a class="button button-block button-assertive">.button-assertive</a>
<a class="button button-block button-energized">.button-energized</a>
<a class="button button-block button-royal">.button-royal</a>
<a class="button button-block button-dark">.button-dark</a>
</div>
</body>
</html>

36
test/css/buttons-link-outline.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: &lt;link&gt; outline w/ padding</h1>
</header>
<div class="content has-header padding">
<a class="button button-outline button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-outline button-block">.button-light</a>
<a class="button button-stable button-outline button-block">.button-stable</a>
<a class="button button-positive button-outline button-block">.button-positive</a>
<a class="button button-calm button-outline button-block">.button-calm</a>
<a class="button button-balanced button-outline button-block">.button-balanced</a>
<a class="button button-assertive button-outline button-block">.button-assertive</a>
<a class="button button-energized button-outline button-block">.button-energized</a>
<a class="button button-royal button-outline button-block">.button-royal</a>
<a class="button button-dark button-outline button-block">.button-dark</a>
</div>
</body>
</html>

38
test/css/buttons-misc.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: Misc.</h1>
</header>
<div class="content has-header">
<p>
<a class="button disabled button-assertive" href="#">Disabled By ClassName</a>
<a class="button button-assertive" disabled href="#">Disabled By Attribute</a>
</p>
<hr>
<p>
<input type="submit" class="button button-block button-positive" name="op" value="input element">
<button class="button button-block button-positive">button element</button>
<a class="button button-block button-positive">link element</a>
</p>
</div>
</body>
</html>

49
test/css/buttons-outline.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: outline</h1>
</header>
<div class="content has-header">
<button class="button button-outline"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-outline">.button-light</button>
<button class="button button-stable button-outline">.button-stable</button>
<button class="button button-positive button-outline">.button-positive</button>
<button class="button button-calm button-outline">.button-calm</button>
<button class="button button-balanced button-outline">.button-balanced</button>
<button class="button button-assertive button-outline">.button-assertive</button>
<button class="button button-energized button-outline">.button-energized</button>
<button class="button button-royal button-outline">.button-royal</button>
<button class="button button-dark button-outline">.button-dark</button>
<hr>
<a class="button button-outline"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-outline">.button-light</a>
<a class="button button-stable button-outline">.button-stable</a>
<a class="button button-positive button-outline">.button-positive</a>
<a class="button button-calm button-outline">.button-calm</a>
<a class="button button-balanced button-outline">.button-balanced</a>
<a class="button button-assertive button-outline">.button-assertive</a>
<a class="button button-energized button-outline">.button-energized</a>
<a class="button button-royal button-outline">.button-royal</a>
<a class="button button-dark button-outline">.button-dark</a>
</div>
</body>
</html>

45
test/css/buttons-pseudo-icon-compare.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: pseudo and &lt;i&gt; icon compare</h1>
</header>
<div class="content has-header">
<button class="button icon-left ion-home">Default</button> .button.icon-left.ion-home<br>
<button class="button"><i class="icon ion-home"></i> Default</button> .button > .icon.ion-home<br>
<button class="button icon icon-right ion-home">Default</button> .button.icon-right.ion-home<br>
<button class="button">Default <i class="icon ion-home"></i></button> .button > .icon.ion-home<br>
<button class="button icon-left ion-home">Default</button> .button.icon-left.ion-home<br>
<button class="button"><i class="icon ion-home"></i> Default</button> .button > .icon.ion-home<br>
<button class="button button-small icon icon-left ion-home">Small</button> .button.button-small.icon-left.ion-home<br>
<button class="button button-small"><i class="icon ion-home"></i> Small</button> .button.button-small > .icon.ion-home<br>
<button class="button button-large icon icon-left ion-home">Large</button> .button.button-large.icon-left.ion-home<br>
<button class="button button-large"><i class="icon ion-home"></i> Large</button> .button.button-large > .icon.ion-home<br>
<button class="button icon ion-home"></button> .button.icon.ion-home<br>
<button class="button"><i class="icon ion-home"></i></button> .button > .icon.ion-home<br>
<button class="button button-icon icon ion-home"></button> .button.button-icon.ion-home<br>
<button class="button button-icon"><i class="icon ion-home"></i></button> .button > .button-icon.ion-home<br>
</div>
</body>
</html>

48
test/css/buttons-small.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons: small</h1>
</header>
<div class="content has-header">
<button class="button button-small"><i class="icon ion-home"></i> Default</button>
<button class="button button-small button-light"><i class="icon ion-home"></i></button>
<button class="button button-small button-stable">.button-stable</button>
<button class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-small button-positive"><i class="icon ion-home"></i></button>
<button class="button button-small button-calm">.button-calm</button>
<button class="button button-small button-assertive">.button-assertive</button>
<button class="button button-small button-energized">.button-energized</button>
<button class="button button-small button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-small button-dark"><i class="icon ion-home"></i></button>
<hr>
<a class="button button-small"><i class="icon ion-home"></i> Default</a>
<a class="button button-small button-light"><i class="icon ion-home"></i> .button-light</a>
<a class="button button-small button-stable"><i class="icon ion-home"></i> .button-stable</a>
<a class="button button-small button-positive">.button-positive</a>
<a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-small button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-small button-energized"><i class="icon ion-home"></i></a>
<a class="button button-small button-royal">.button-royal</a>
<a class="button button-small button-dark"><i class="icon ion-home"></i> .button-dark</a>
</div>
</body>
</html>

448
test/css/buttons.html
View File

@@ -1,448 +0,0 @@
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Buttons</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>
body {
backgrbackground: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 31%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(31%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
}
</style>
<script src="../../dist/js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
</script>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Buttons</h1>
</header>
<ion-content class="has-header">
<div class="padding">
<h3>icon classnames assigned to the button</h3>
<p>
<button class="button icon-left ion-home">Default</button> .button.icon-left.ion-home<br>
<button class="button"><i class="icon ion-home"></i> Default</button> .button > .icon.ion-home<br>
<button class="button icon icon-right ion-home">Default</button> .button.icon-right.ion-home<br>
<button class="button">Default <i class="icon ion-home"></i></button> .button > .icon.ion-home<br>
<button class="button icon-left ion-home">Default</button> .button.icon-left.ion-home<br>
<button class="button"><i class="icon ion-home"></i> Default</button> .button > .icon.ion-home<br>
<button class="button button-small icon icon-left ion-home">Small</button> .button.button-small.icon-left.ion-home<br>
<button class="button button-small"><i class="icon ion-home"></i> Small</button> .button.button-small > .icon.ion-home<br>
<button class="button button-large icon icon-left ion-home">Large</button> .button.button-large.icon-left.ion-home<br>
<button class="button button-large"><i class="icon ion-home"></i> Large</button> .button.button-large > .icon.ion-home<br>
<button class="button icon ion-home"></button> .button.icon.ion-home<br>
<button class="button"><i class="icon ion-home"></i></button> .button > .icon.ion-home<br>
<button class="button button-icon icon ion-home"></button> .button.button-icon.ion-home<br>
<button class="button button-icon"><i class="icon ion-home"></i></button> .button > .button-icon.ion-home<br>
</p>
<hr>
<h3>a.button default</h3>
<p>
<a class="button"><i class="icon ion-home"></i> Default</a>
<a class="button button-light">.button-light</a>
<a class="button button-stable">.button-stable</a>
<a class="button button-positive">.button-positive</a>
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-energized"><i class="icon ion-home"></i> .button-energized</a>
<a class="button button-royal">.button-royal</a>
<a class="button button-dark"><i class="icon ion-chevron-right"></i> .button-dark</a>
<a class="button button-energized icon-right ion-chevron-right">Login</a>
</p>
<hr>
<h3>button.button default</h3>
<p>
<button class="button"><i class="icon ion-home"></i> Default</button>
<button class="button button-light"><i class="icon ion-home"></i></button>
<button class="button button-stable"><i class="icon ion-home"></i></button>
<button class="button button-positive"><i class="icon ion-home"></i></button>
<button class="button button-calm">.button-calm</button>
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-assertive">.button-assertive</button>
<button class="button button-energized">.button-energized</button>
<button class="button button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-dark"><i class="icon ion-home"></i></button>
</p>
<hr>
<h3>a.button.button-large default</h3>
<p>
<a class="button button-large"><i class="icon ion-home"></i> Default</a>
<a class="button button-large button-light">.button-light</a>
<a class="button button-large button-stable">.button-stable</a>
<a class="button button-large button-positive">.button-positive</a>
<a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-large button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-large button-energized"><i class="icon ion-home"></i></a>
<a class="button button-large button-royal">.button-royal</a>
<a class="button button-large button-dark"><i class="icon ion-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button. button-large default</h3>
<p>
<button class="button button-large"><i class="icon ion-home"></i> Default</button>
<button class="button button-large button-light"><i class="icon ion-home"></i></button>
<button class="button button-large button-stable"><i class="icon ion-home"></i></button>
<button class="button button-large button-positive"><i class="icon ion-home"></i></button>
<button class="button button-large button-calm">.button-calm</button>
<button class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-large button-assertive">.button-assertive</button>
<button class="button button-large button-energized">.button-energized</button>
<button class="button button-large button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-large button-dark"><i class="icon ion-home"></i></button>
</p>
<hr>
<h3>a.button.button-small default</h3>
<p>
<a class="button button-small"><i class="icon ion-home"></i> Default</a>
<a class="button button-small button-light"><i class="icon ion-home"></i> .button-light</a>
<a class="button button-small button-stable"><i class="icon ion-home"></i> .button-stable</a>
<a class="button button-small button-positive">.button-positive</a>
<a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-small button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-small button-energized"><i class="icon ion-home"></i></a>
<a class="button button-small button-royal">.button-royal</a>
<a class="button button-small button-dark"><i class="icon ion-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button.button-small</h3>
<p>
<button class="button button-small"><i class="icon ion-home"></i> Default</button>
<button class="button button-small button-light"><i class="icon ion-home"></i></button>
<button class="button button-small button-stable">.button-stable</button>
<button class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-small button-positive"><i class="icon ion-home"></i></button>
<button class="button button-small button-calm">.button-calm</button>
<button class="button button-small button-assertive">.button-assertive</button>
<button class="button button-small button-energized">.button-energized</button>
<button class="button button-small button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-small button-dark"><i class="icon ion-home"></i></button>
</p>
<hr>
<h3>a.button.button-clear (Mixed in with others)</h3>
<p>
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
<a class="button button-light">.button-light</a>
<a class="button button-stable">.button-stable</a>
<a class="button button-positive">.button-positive</a>
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
<a class="button button-clear button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
<a class="button button-assertive"><i class="icon ion-home"></i></a>
<a class="button button-clear button-energized"><i class="icon ion-home"></i></a>
<a class="button button-clear button-royal">.button-royal</a>
<a class="button button-clear button-dark"><i class="icon ion-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button.button-clear default</h3>
<p>
<button class="button"><i class="icon ion-home"></i> Default</button>
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
<button class="button button-clear button-light"><i class="icon ion-home"></i></button>
<button class="button button-clear button-stable"><i class="icon ion-home"></i></button>
<button class="button button-clear button-positive"><i class="icon ion-home"></i></button>
<button class="button button-clear button-calm">.button-calm</button>
<button class="button button-clear button-assertive">.button-assertive</button>
<button class="button button-clear button-energized">.button-energized</button>
<button class="button button-clear button-royal"><i class="icon ion-home"></i> .button-royal</button>
<button class="button button-dark"><i class="icon ion-home"></i></button>
</p>
<hr>
<h3>a.button-block (parent w/ padding)</h3>
<p>
<a class="button button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-block button-light">.button-light</a>
<a class="button button-block button-stable">.button-stable</a>
<a class="button button-block button-positive">.button-positive</a>
<a class="button button-block button-calm">.button-calm</a>
<a class="button button-block button-balanced">.button-balanced</a>
<a class="button button-block button-assertive">.button-assertive</a>
<a class="button button-block button-energized">.button-energized</a>
<a class="button button-block button-royal">.button-royal</a>
<a class="button button-block button-dark">.button-dark</a>
</p>
<hr>
<h3>button.button-block (parent w/ padding)</h3>
<p>
<button class="button button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-block button-light">.button-light</button>
<button class="button button-block button-stable">.button-stable</button>
<button class="button button-block button-positive">.button-positive</button>
<button class="button button-block button-calm">.button-calm</button>
<button class="button button-block button-balanced">.button-balanced</button>
<button class="button button-block button-assertive">.button-assertive</button>
<button class="button button-block button-energized">.button-energized</button>
<button class="button button-block button-royal">.button-royal</button>
<button class="button button-block button-dark">.button-dark</button>
</p>
<hr>
<h3>a.button-icon (Borderless, 32px)</h3>
<p>
<a class="button button-icon"><i class="icon ion-home"></i></a>
<a class="button button-clear button-dark">.button-clear Next .button-icon</i></a>
</p>
<hr>
<h3>button.button-icon (Borderless, 32px)</h3>
<p>
<button class="button button-icon"><i class="icon ion-home"></i></button>
</p>
<hr>
<h3>a.button-block.button-icon (Borderless, 32px)</h3>
<p>
<a class="button button-block button-icon"><i class="icon ion-home"></i></a>
</p>
<hr>
<h3>button.button-block.button-icon (Borderless, 32px)</h3>
<p>
<button class="button button-block button-icon"><i class="icon ion-home"></i></button>
</p>
<hr>
<h3>a.button-outline</h3>
<p>
<a class="button button-outline"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-outline">.button-light</a>
<a class="button button-stable button-outline">.button-stable</a>
<a class="button button-positive button-outline">.button-positive</a>
<a class="button button-calm button-outline">.button-calm</a>
<a class="button button-balanced button-outline">.button-balanced</a>
<a class="button button-assertive button-outline">.button-assertive</a>
<a class="button button-energized button-outline">.button-energized</a>
<a class="button button-royal button-outline">.button-royal</a>
<a class="button button-dark button-outline">.button-dark</a>
</p>
<hr>
<h3>button.button-outline</h3>
<p>
<button class="button button-outline"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-outline">.button-light</button>
<button class="button button-stable button-outline">.button-stable</button>
<button class="button button-positive button-outline">.button-positive</button>
<button class="button button-calm button-outline">.button-calm</button>
<button class="button button-balanced button-outline">.button-balanced</button>
<button class="button button-assertive button-outline">.button-assertive</button>
<button class="button button-energized button-outline">.button-energized</button>
<button class="button button-royal button-outline">.button-royal</button>
<button class="button button-dark button-outline">.button-dark</button>
</p>
<hr>
<h3>a.button-block.button-outline (parent w/ padding)</h3>
<p>
<a class="button button-outline button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-outline button-block">.button-light</a>
<a class="button button-stable button-outline button-block">.button-stable</a>
<a class="button button-positive button-outline button-block">.button-positive</a>
<a class="button button-calm button-outline button-block">.button-calm</a>
<a class="button button-balanced button-outline button-block">.button-balanced</a>
<a class="button button-assertive button-outline button-block">.button-assertive</a>
<a class="button button-energized button-outline button-block">.button-energized</a>
<a class="button button-royal button-outline button-block">.button-royal</a>
<a class="button button-dark button-outline button-block">.button-dark</a>
</p>
<hr>
<h3>button.button-block.button-outline (parent w/ padding)</h3>
<p>
<button class="button button-outline button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-outline button-block">.button-light</button>
<button class="button button-stable button-outline button-block">.button-stable</button>
<button class="button button-positive button-outline button-block">.button-positive</button>
<button class="button button-calm button-outline button-block">.button-calm</button>
<button class="button button-balanced button-outline button-block">.button-balanced</button>
<button class="button button-assertive button-outline button-block">.button-assertive</button>
<button class="button button-energized button-outline button-block">.button-energized</button>
<button class="button button-royal button-outline button-block">.button-royal</button>
<button class="button button-dark button-outline button-block">.button-dark</button>
</p>
<hr>
<h3>a.button-clear</h3>
<p>
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-clear">.button-light</a>
<a class="button button-stable button-clear">.button-stable</a>
<a class="button button-positive button-clear">.button-positive</a>
<a class="button button-calm button-clear">.button-calm</a>
<a class="button button-balanced button-clear">.button-balanced</a>
<a class="button button-assertive button-clear">.button-assertive</a>
<a class="button button-energized button-clear">.button-energized</a>
<a class="button button-royal button-clear">.button-royal</a>
<a class="button button-dark button-clear">.button-dark</a>
</p>
<hr>
<h3>button.button-clear</h3>
<p>
<button class="button button-clear"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-clear">.button-light</button>
<button class="button button-stable button-clear">.button-stable</button>
<button class="button button-positive button-clear">.button-positive</button>
<button class="button button-calm button-clear">.button-calm</button>
<button class="button button-balanced button-clear">.button-balanced</button>
<button class="button button-assertive button-clear">.button-assertive</button>
<button class="button button-energized button-clear">.button-energized</button>
<button class="button button-royal button-clear">.button-royal</button>
<button class="button button-dark button-clear">.button-dark</button>
</p>
<hr>
<h3>a.button-block.button-clear (parent w/ padding)</h3>
<p>
<a class="button button-clear button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-clear button-block">.button-light</a>
<a class="button button-stable button-clear button-block">.button-stable</a>
<a class="button button-positive button-clear button-block">.button-positive</a>
<a class="button button-calm button-clear button-block">.button-calm</a>
<a class="button button-balanced button-clear button-block">.button-balanced</a>
<a class="button button-assertive button-clear button-block">.button-assertive</a>
<a class="button button-energized button-clear button-block">.button-energized</a>
<a class="button button-royal button-clear button-block">.button-royal</a>
<a class="button button-dark button-clear button-block">.button-dark</a>
</p>
<hr>
<h3>button.button-block.button-clear (parent w/ padding)</h3>
<p>
<button class="button button-clear button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-clear button-block">.button-light</button>
<button class="button button-stable button-clear button-block">.button-stable</button>
<button class="button button-positive button-clear button-block">.button-positive</button>
<button class="button button-calm button-clear button-block">.button-calm</button>
<button class="button button-balanced button-clear button-block">.button-balanced</button>
<button class="button button-assertive button-clear button-block">.button-assertive</button>
<button class="button button-energized button-clear button-block">.button-energized</button>
<button class="button button-royal button-clear button-block">.button-royal</button>
<button class="button button-dark button-clear button-block">.button-dark</button>
</p>
</div>
<hr>
<h3>a.button-block (parent w/out padding)</h3>
<p>
<a class="button button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-block button-light">.button-light</a>
<a class="button button-block button-stable">.button-stable</a>
<a class="button button-block button-positive">.button-positive</a>
<a class="button button-block button-calm">.button-calm</a>
<a class="button button-block button-balanced">.button-balanced</a>
<a class="button button-block button-assertive">.button-assertive</a>
<a class="button button-block button-energized">.button-energized</a>
<a class="button button-block button-royal">.button-royal</a>
<a class="button button-block button-dark">.button-dark</a>
</p>
<hr>
<h3>a.button-block (.button-full on the parent)</h3>
<p class="button-full">
<a class="button"><i class="icon ion-home"></i> Default</a>
<a class="button button-light">.button-light</a>
<a class="button button-stable">.button-stable</a>
<a class="button button-positive">.button-positive</a>
<a class="button button-calm">.button-calm</a>
<a class="button button-balanced">.button-balanced</a>
<a class="button button-assertive">.button-assertive</a>
<a class="button button-energized">.button-energized</a>
<a class="button button-royal">.button-royal</a>
<a class="button button-dark">.button-dark</a>
</p>
<hr>
<h3>button.button-block.button-full on each button and nothing on the parent</h3>
<p>
<button class="button button-full"><i class="icon ion-home"></i> Default</button>
<button class="button button-full button-light">.button-light</button>
<button class="button button-full button-stable">.button-stable</button>
<button class="button button-full button-positive">.button-positive</button>
<button class="button button-full button-calm">.button-calm</button>
<button class="button button-full button-balanced">.button-balanced</button>
<button class="button button-full button-assertive">.button-assertive</button>
<button class="button button-full button-energized">.button-energized</button>
<button class="button button-full button-royal">.button-royal</button>
<button class="button button-full button-dark">.button-dark</button>
</p>
<hr>
<p>
<a class="button disabled button-assertive" href="#">Disabled By ClassName</a>
<a class="button button-assertive" disabled href="#">Disabled By Attribute</a>
</p>
<hr>
<p>
<input type="submit" class="button button-block button-positive" name="op" value="input element">
<button class="button button-block button-positive">button element</button>
</p>
<p>
<a class="button button-assertive" href="./">All CSS Tests</a>
</p>
<hr>
</ion-content>
</body>
</html>

32
test/css/cards-header-footer.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cards</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">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Cards: Header/Footer</h1>
</header>
<div class="content has-header">
<div class="card">
<div class="item item-divider">
I'm a Header in a Card!
</div>
<div class="item item-text-wrap">
This is a basic Card with some text.
</div>
<div class="item item-divider">
I'm a Footer in a Card!
</div>
</div>
</div>
</body>
</html>

47
test/css/cards-item-avatar.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Cards</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">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Cards: Item Avatar</h1>
</header>
<div class="content has-header">
<div class="list card">
<div class="item item-avatar">
<img src="" style="background:black; width: 40px; height: 40px;">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-avatar item-complex">
<a class="item-content">
<img class="item-img" src="" style="background:black; width: 40px; height: 40px;">
<h2>Pretty Hate Machine, .item-complex</h2>
<p>Nine Inch Nails</p>
</a>
</div>
<div class="item item-image">
<img src="" style="background:black; width: 100px; height: 100px;">
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
</div>
</body>
</html>

52
test/css/cards-item-body.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Cards</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">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Cards: Item Body</h1>
</header>
<div class="content has-header">
<div class="list card">
<div class="item item-body">
<img src="" style="background:black; width: 240px; height: 180px;">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of a Tab Bar, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</div>
</body>
</html>

44
test/css/cards-item-icon.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cards</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">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Cards: Item Icon</h1>
</header>
<div class="content has-header">
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios7-telephone"></i>
Enter phone number
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-wifi"></i>
Enter wireless password
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-card"></i>
Enter card information
</a>
</div>
</div>
</body>
</html>

58
test/css/cards-item-thumbnail.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cards</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">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Cards: Item Thumbnail</h1>
</header>
<div class="content has-header">
<div class="list card">
<div class="item item-avatar">
<img src="" style="background:black; width: 80px; height: 80px;">
<h2>.item.item-avatar</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-left">
<img src="" style="background:black; width: 80px; height: 80px;">
<h2>.item.item-thumbnail-left</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-left item-complex">
<a class="item-content">
<img src="" style="background:black; width: 80px; height: 80px;">
<h2>.item.item-thumbnail-left.item-complex .item-content</h2>
<p>November 05, 1955</p>
</a>
</div>
<div class="item item-thumbnail-right">
<img src="" style="background:black; width: 80px; height: 80px;">
<h2>.item.item-thumbnail-right</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-right item-complex">
<a class="item-content">
<img src="" style="background:black; width: 80px; height: 80px;">
<h2>.item.item-thumbnail-right.item-complex .item-content</h2>
<p>November 05, 1955</p>
</a>
</div>
</div>
</div>
</body>
</html>

60
test/css/cards-text.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cards</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">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Cards: Text</h1>
</header>
<div class="content has-header">
<div class="card">
<div class="item item-text-wrap">
<code>.card .item.item-text-wrap</code>
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
<div class="card item-text-wrap">
<div class="item">
<code>.card.item-text-wrap .item</code>
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
<div class="card">
<div class="item item-complex item-text-wrap">
<div class="item-content">
<code>.card .item item-complex.item-text-wrap .item-content</code>
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
</div>
<div class="card item-text-wrap">
<div class="item item-complex">
<div class="item-content">
<code>.card.item-text-wrap .item.item-complex .item-content</code>
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
</div>
</div>
</body>
</html>

190
test/css/cards.html
View File

@@ -1,190 +0,0 @@
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Cards</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="../../dist/js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
</script>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Cards</h1>
</header>
<ion-content class="has-header">
<div class="card">
<div class="item item-text-wrap">
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
<div class="card item-text-wrap">
<div class="item">
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
<div class="card">
<div class="item item-complex item-text-wrap">
<div class="item-content">
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
</div>
<div class="card item-text-wrap">
<div class="item item-complex">
<div class="item-content">
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
This is a basic Card with some wrapping text.
</div>
</div>
</div>
<div class="card">
<div class="item item-divider">
I'm a Header in a Card!
</div>
<div class="item item-text-wrap">
This is a basic Card with some text.
</div>
<div class="item item-divider">
I'm a Footer in a Card!
</div>
</div>
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios7-telephone"></i>
Enter phone number
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-wifi"></i>
Enter wireless password
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-card"></i>
Enter card information
</a>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="http://tutupash.com/site/assets/nin_logo.jpeg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-avatar item-complex">
<a class="item-content">
<img class="item-img" src="http://tutupash.com/site/assets/nin_logo.jpeg">
<h2>Pretty Hate Machine, .item-complex</h2>
<p>Nine Inch Nails</p>
</a>
</div>
<div class="item item-image">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-left">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-left item-complex">
<a class="item-content">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly, .item-complex</h2>
<p>November 05, 1955</p>
</a>
</div>
<div class="item item-thumbnail-right">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-right item-complex">
<a class="item-content">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly, .item-complex</h2>
<p>November 05, 1955</p>
</a>
</div>
<div class="item item-body">
<img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of a Tab Bar, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
<p><a class="button button-secondary" href="../">All CSS Tests</a></p>
</ion-content>
</body>
</html>

3
test/css/colors.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -22,7 +23,7 @@
</header>
<div class="content has-header">
<ul class="list color-list-demo">
<li class="item positive">
positive

2
test/css/footers.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -72,7 +73,6 @@
Content<br>
Content<br>
</p>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</main>
<footer class="bar bar-footer bar-positive">

11
test/css/grid.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -25,8 +26,6 @@
<div class="content has-header">
<h3>.row</h3>
<div class="row">
<div class="col">
<div>
@@ -273,13 +272,7 @@
</div>
</div>
<hr>
<div class="padding">
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</div>
</div>
</body>
</html>
</html>

31
test/css/headers.html
View File

@@ -1,4 +1,5 @@
<html ng-app="ionicApp">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Header</title>
@@ -10,10 +11,6 @@
top: 0;
}
</style>
<script src="../../dist/js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
</script>
</head>
<body>
@@ -169,18 +166,6 @@
</a>
</header>
<header class="bar bar-light">
<a class="button icon ion-home"></a>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button">
<i class="icon ion-star"></i>
</a>
</header>
<header class="bar bar-light">
<a class="button icon ion-arrow-left-c"></a>
<div class="button-bar">
@@ -205,18 +190,6 @@
</a>
</header>
<header class="bar">
<a class="button button-icon icon ion-arrow-left-c"></a>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button button-clear">
title
</a>
</header>
<header class="bar bar-header bar-stable">
<button class="button button-clear button-icon ion-ios7-arrow-back"> Back</button>
<h1 class="title">Title here</h1>

10
test/css/input-checkbox.html
View File

@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input: Checkbox</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
@@ -46,10 +52,6 @@
</li>
</ul>
<div class="padding">
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</div>
</main>
</body>

10
test/css/input-radio.html
View File

@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Radio Inputs</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
@@ -65,10 +71,6 @@
</div>
<div class="padding">
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</div>
</div>
</body>

17
test/css/input-range.html
View File

@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input: Range</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
@@ -11,12 +17,7 @@
<h1 class="title">Input: Range</h1>
</header>
<main class="content has-header padding overflow-scroll">
<p>
Level of Awesomeness:
<input type="range" name="awesomeness1" min="0" max="10" value="10">
</p>
<main class="content has-header padding">
<div class="range">
<i class="icon ion-volume-low"></i>
@@ -95,10 +96,6 @@
</div>
</div>
<div class="padding">
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</div>
</main>
</body>

10
test/css/input-select.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -5,6 +6,11 @@
<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="../../dist/js/ionic.bundle.js"></script>
<style>
.content {
height: 1000px;
}
</style>
</head>
<body>
@@ -160,10 +166,6 @@
</div>
<div class="margin">
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</div>
</main>
</body>

1
test/css/input-text.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

1
test/css/input-textarea.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

81
test/css/input-toggle.html
View File

@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input: Toggle</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
@@ -15,7 +21,7 @@
<ul class="list">
<li class="item item-toggle">
HTML5
Default
<label class="toggle">
<input type="checkbox" checked>
<div class="track">
@@ -23,54 +29,9 @@
</div>
</label>
</li>
<li class="item item-toggle">
CSS3
<label class="toggle">
<input type="checkbox" checked>
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Flashplayer
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Java Applets
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
JavaScript
<label class="toggle">
<input type="checkbox" checked>
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Silverlight
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<i class="icon ion-star"></i>
Silverlight
W/ Icon
<label class="toggle">
<input type="checkbox">
<div class="track">
@@ -78,7 +39,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-positive
<label class="toggle toggle-positive">
<input type="checkbox" checked>
@@ -87,7 +48,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-calm
<label class="toggle toggle-calm">
<input type="checkbox" checked>
@@ -96,7 +57,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-balanced
<label class="toggle toggle-balanced">
<input type="checkbox" checked>
@@ -105,7 +66,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-energized
<label class="toggle toggle-energized">
<input type="checkbox" checked>
@@ -114,7 +75,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-assertive
<label class="toggle toggle-assertive">
<input type="checkbox" checked>
@@ -123,7 +84,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-royal
<label class="toggle toggle-royal">
<input type="checkbox" checked>
@@ -132,7 +93,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-light
<label class="toggle toggle-light">
<input type="checkbox" checked>
@@ -141,7 +102,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-stable
<label class="toggle toggle-stable">
<input type="checkbox" checked>
@@ -150,7 +111,7 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
toggle-dark
<label class="toggle toggle-dark">
<input type="checkbox" checked>
@@ -161,7 +122,7 @@
</li>
<li class="item item-toggle item-icon-left">
<li class="item item-toggle">
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
<label class="toggle toggle-dark">
<input type="checkbox" checked>
@@ -198,13 +159,7 @@
</ul>
<div class="padding">
<a class="button button-secondary" href="./">All CSS Tests</a>
</div>
</main>
<script src="../dist/js/ionic.js"></script>
</body>
</html>

57
test/css/lists-avatar.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lists</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Lists: Avatars</h1>
</header>
<div class="content has-header">
<div class="list">
<a href="#" class="item item-avatar-left">
<img src="" style="background:black; width:40px; height:40px;">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
<a href="#" class="item item-complex item-avatar-left">
<div class="item-content">
<img src="" style="background:black; width:40px; height:40px;">
<h2>Nevermind</h2>
<p>Nirvana</p>
</div>
</a>
<a href="#" class="item item-avatar-right">
<img src="" style="background:black; width:40px; height:40px;">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</a>
<a href="#" class="item item-complex item-avatar-right">
<div class="item-content">
<img src="" style="background:black; width:40px; height:40px;">
<h2>gjpqy</h2>
<p>Test descenders.</p>
</div>
</a>
</div>
</div>
</body>
</html>

115
test/css/lists-buttons.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Lists</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>
.content {
height: 1000px;
}
</style>
</head>
<body class="ionic-pseudo">
<header class="bar bar-header bar-dark">
<h1 class="title">Lists</h1>
</header>
<div class="content has-header">
<div class="list">
<div class="item item-icon-left item-button-right">
<i class="icon ion-chatbubble-working ion-primary"></i>
Left Icon and Right Button
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
<div class="item item-button-right">
Right Button
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
<div class="item item-button-right">
Right Button Text
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i> Text
</button>
</div>
<div class="item item-icon-left item-button-right">
<i class="icon ion-chatbubble-working ion-primary"></i>
Call Ma
<div class="buttons">
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
<button class="button button-balanced">
<i class="icon ion-ios7-camera"></i>
</button>
</div>
</div>
<div class="item item-button-left">
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
Me Button
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-positive icon ion-arrow-right-c">
Submit
</button>
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small button-positive icon ion-arrow-right-c">
Submit
</button>
<button class="button button-small button-positive icon ion-arrow-right-c">
Cancel
</button>
<button class="button button-small button-positive icon ion-arrow-right-c">
Cancel
</button>
</div>
<div class="item item-button-right">
Badge with right button: Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
<span class="badge badge-royal">999</span>
<button class="button button-calm">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
</div>
</div>
</body>
</html>

36
test/css/lists-colors.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lists</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>
.content {
height: 1000px;
}
</style>
</head>
<body class="ionic-pseudo">
<header class="bar bar-header bar-dark">
<h1 class="title">Lists: Colors</h1>
</header>
<div class="content has-header">
<div class="list">
<a class="item" href="#">Default</a>
<a class="item item-light" href="#">item-light</a>
<a class="item item-stable" href="#">item-stable</a>
<a class="item item-positive" href="#">item-positive</a>
<a class="item item-calm" href="#">item-calm</a>
<a class="item item-assertive" href="#">item-assertive</a>
<a class="item item-balanced" href="#">item-balanced</a>
<a class="item item-energized" href="#">item-energized</a>
<a class="item item-royal" href="#">item-royal</a>
<a class="item item-dark" href="#">item-dark</a>
</div>
</body>
</html>

89
test/css/lists-icons.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lists</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Lists: Icons</h1>
</header>
<div class="content has-header">
<div class="list">
<div class="item item-divider">
List Icons
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-email"></i>
Icon Left
</a>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-chatbubble-working"></i>
Icon Left and Right
<i class="icon ion-home"></i>
</a>
<a href="#" class="item item-icon-right">
Icon Right
<i class="icon ion-star"></i>
</a>
<div class="item item-divider">
List Accessory Icons
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-chevron-left icon-accessory"></i>
Icon Left Accessory Icon
</a>
<a href="#" class="item item-icon-right">
<i class="icon ion-chevron-right icon-accessory"></i>
Icon Right Accessory Icon
</a>
<div class="item item-divider">
List Badges
<span class="badge badge-positive">3</span>
</div>
<a href="#" class="item">
Problems
<span class="badge badge-assertive">99</span>
</a>
<a href="#" class="item item-complex">
<div class="item-content">
Mambo
<span class="badge">5</span>
</div>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-person-stalker"></i>
Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
<span class="badge badge-assertive">0</span>
</a>
</div>
</div>
</body>
</html>

91
test/css/lists-text.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lists</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Lists: Text</h1>
</header>
<div class="content has-header">
<div class="list">
<div class="list-header">
List Header
</div>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Default has no wrap! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Assigned "item-text-wrap". This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
<div class="item-content slide-left slide-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Default no wrap and has item-content! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-text-wrap item-slider">
<div class="item-content slide-left slide-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios7-mic positive"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-flask calm"></i>
Breaking Bad
<span class="item-note">
Blue, yellow, pink
</span>
</a>
</div>
</div>
</body>
</html>

56
test/css/lists-thumbnails.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lists</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Lists: Thumbnails</h1>
</header>
<div class="content has-header">
<div class="list">
<a href="#" class="item item-thumbnail-left">
<img src="" style="background:black; width:80px; height:80px;">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
<a href="#" class="item item-complex item-thumbnail-left">
<div class="item-content">
<img src="" style="background:black; width:80px; height:80px;">
<h2>Nevermind</h2>
<p>Nirvana</p>
</div>
</a>
<a href="#" class="item item-thumbnail-right">
<img src="" style="background:black; width:80px; height:80px;">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</a>
<a href="#" class="item item-complex item-thumbnail-right">
<div class="item-content">
<img src="" style="background:black; width:80px; height:80px;">
<h2>Dookie</h2>
<p>Green Day</p>
</div>
</a>
</div>
</body>
</html>

585
test/css/lists.html
View File

@@ -1,585 +0,0 @@
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Lists</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>
#list {
height: 100%;
position: relative;
overflow: hidden;
}
</style>
<script src="../../dist/js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
</script>
</head>
<body class="ionic-pseudo">
<header class="bar bar-header bar-dark">
<h1 class="title">Lists</h1>
</header>
<div id="list">
<ion-content id="content" class="has-header">
<div class="list">
<div class="item item-divider">
Work
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-right">
Right side nav icon
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-chevron-left icon-accessory"></i>
Left side nav icon
</a>
</div>
<div class="list">
<div class="item item-divider">
Work
</div>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-email"></i>
Check mail
<span class="badge">5</span>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<div class="item item-icon-left item-button-right">
<i class="icon ion-chatbubble-working ion-primary"></i>
Left Icon and Right Button
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
<div class="item item-button-right">
Right Button
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
<div class="item item-button-right">
Right Button Text
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i> Text
</button>
</div>
<div class="item item-icon-left item-button-right">
<i class="icon ion-chatbubble-working ion-primary"></i>
Call Ma
<div class="buttons">
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
<button class="button button-balanced">
<i class="icon ion-ios7-camera"></i>
</button>
</div>
</div>
<div class="item item-button-left">
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
Me Button
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-positive icon ion-arrow-right-c">
Submit
</button>
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small button-positive icon ion-arrow-right-c">
Submit
</button>
<button class="button button-small button-positive icon ion-arrow-right-c">
Cancel
</button>
<button class="button button-small button-positive icon ion-arrow-right-c">
Cancel
</button>
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-loading-d positive"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-flask calm"></i>
Breaking Bad
<span class="item-note">
Blue, yellow, pink
</span>
</a>
<div class="item item-divider">
Leisure
<span class="badge badge-positive">33</span>
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-game-controller-b energized"></i>
Games
<span class="item-note">
Super Mario
</span>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-music-note assertive"></i>
Music
<span class="item-note">
JT
</span>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-bag"></i>
Shopping
<span class="item-note">
Bag
</span>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-person-stalker energized fill-icon"></i>
Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
<span class="badge badge-assertive">0</span>
</a>
</div>
<div class="list">
<div class="list-header">
List Header
</div>
<div href="#" class="item">
Not a link so no default right arrow
<span class="badge badge-assertive">999</span>
</div>
<div class="item item-button-right">
Badge with right button: Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
<span class="badge badge-royal">999</span>
<button class="button button-calm">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
<a href="#" class="item item-complex item-icon-right">
<div class="item-content slide-right">
Processing Icon
<i class="icon ion-loading-b"></i>
</div>
</a>
<div class="item item-divider">
List Divider
</div>
<a href="#" class="item item-complex">
<div class="item-content slide-left">
Computers
<span class="badge">Badge</span>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="item item-complex">
<div class="item-content slide-left">
Monitors
<span class="badge">6</span>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
</div>
<h3>List with padding</h3>
<div class="padding">
<div class="list">
<a href="#" class="item item-complex">
<div class="item-content slide-right">
Madison, WI
</div>
</a>
<div class="item item-divider">
List Divider
</div>
<a href="#" class="item item-complex">
<div class="item-content slide-left">
Driving Directions
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="item item-complex">
<div class="item-content">
Computers
<span class="badge">3</span>
</div>
</a>
</div>
</div>
<h3>List with card</h3>
<div class="list card">
<a href="#" class="item item-complex">
<div class="item-content slide-right">
Madison, WI
</div>
</a>
<a href="#" class="item item-complex">
<div class="item-content slide-left">
Driving Directions
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
<div class="item item-divider">
List Divider
</div>
<a href="#" class="item item-complex">
<div class="item-content">
Computers
<span class="badge">3</span>
</div>
</a>
</div>
<div class="list">
<div class="item item-divider">
Without .item-content
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-heart brand-assertive"></i>
Madison, WI
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-image brand-energized"></i>
Driving Directions
</a>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-ios7-cog gray"></i>
Settings
<i class="icon ion-ios7-information-outline"></i>
</a>
</div>
<div class="list">
<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
<div class="item-content">
<i class="icon ion-heart brand-assertive fill-icon"></i>
Madison, WI
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
<div class="item-content slide-left">
<i class="icon ion-image brand-energized fill-icon"></i>
Driving Directions
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
<div class="item-content slide-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Settings
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</a>
</div>
<div class="list">
<div class="list-header">
Me List Header
</div>
<a href="#" class="item item-icon-left">
<div class="item-content">
<i class="icon ion-heart brand-assertive fill-icon"></i>
Icon is filled!!
</div>
</a>
<a href="#" class="item item-icon-left">
<div class="item-content">
<i class="icon ion-image brand-energized fill-icon"></i>
.fill-icon
</div>
</a>
<div class="item item-divider">
List Divider
</div>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Default has no wrap! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Assigned "item-text-wrap". This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
<div class="item-content slide-left slide-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Default no wrap and has item-content! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-text-wrap item-slider">
<div class="item-content slide-left slide-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
</div>
</a>
</div>
<div class="padding">
<button class="button button-secondary" id="btn-test-right">Test Slide Right</button>
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
</div>
<h3>Thumbnails .item-thumbnail</h3>
<div class="list">
<a href="#" class="item item-avatar-left">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
<a href="#" class="item item-complex item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
<p>Nirvana</p>
</div>
</a>
<a href="#" class="item item-avatar-right">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</a>
<a href="#" class="item item-complex item-avatar-right">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>gjpqy</h2>
<p>Test descenders.</p>
</div>
</a>
</div>
<h3>Large Thumbnails .item-thumbnail-left and .item-thumbnail-right</h3>
<div class="list">
<a href="#" class="item item-thumbnail-left">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
<a href="#" class="item item-complex item-thumbnail-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
<p>Nirvana</p>
</div>
</a>
<a href="#" class="item item-thumbnail-right">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</a>
<a href="#" class="item item-complex item-thumbnail-right">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2>
<p>Green Day</p>
</div>
</a>
</div>
<div class="padding">
<a class="button button-secondary" href="./">All CSS Tests</a>
</div>
<h3>Colors</h3>
<div class="list">
<a class="item" href="#">Default</a>
<a class="item item-light" href="#">item-light</a>
<a class="item item-stable" href="#">item-stable</a>
<a class="item item-positive" href="#">item-positive</a>
<a class="item item-calm" href="#">item-calm</a>
<a class="item item-assertive" href="#">item-assertive</a>
<a class="item item-balanced" href="#">item-balanced</a>
<a class="item item-energized" href="#">item-energized</a>
<a class="item item-royal" href="#">item-royal</a>
<a class="item item-dark" href="#">item-dark</a>
</div>
</ion-content>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#btn-test-left").click(function(){
if(this.isLeft) {
// back to normal
this.isLeft = false;
$(".slide-left").css({
left: "0"
})
$(".list").removeClass("item-opened");
} else {
// open
this.isLeft = true;
$(".slide-left").css({
left: "-72px"
})
$(".list").addClass("item-opened");
}
return false;
});
$("#btn-test-right").click(function(){
if(this.isRight) {
// back to normal
this.isRight = false;
$(".slide-right").css({
left: "0"
})
$(".list").removeClass("item-opened");
} else {
// open
this.isRight = true;
$(".slide-right").css({
left: "72px"
})
$(".list").addClass("item-opened");
}
return false;
});
</script>
</body>
</html>

24
test/css/loading.html
View File

@@ -1,24 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>Loading</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">
</head>
<body>
<div id="loading" class="loading">
<h4>Loading</h4>
</div>
<button id="show" class="button">Show</button>
<script src="../../dist/js/ionic.js"></script>
<script>
var loading = document.getElementById('loading');
var l = new ionic.views.Loading({el: loading});
var sb = document.getElementById('show');
sb.addEventListener('click', function(e) {
l.show();
});
</script>
</body>
</html>

59
test/css/modals.html
View File

@@ -1,59 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>Modals</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">
</head>
<body>
<section>
<header class="bar bar-header bar-dark">
<h1 class="title">Modals</h1>
</header>
<main class="content padding has-header">
<a href="#" class="button button-warning" id="modal-opener">Open Modal</a>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>
</section>
<div id="modal" class="modal slide-in-up">
<header class="bar bar-header bar-secondary">
<h1 class="title">BOOM</h1>
<a href="#" class="button" id="modal-closer">Close</a>
</header>
<main class="content padding has-header">
<h2>I'm a thing</h2>
<div style="background-color: blue; width: 100%; height: 1000px"></div>
</main>
</div>
<script src="../../dist/js/ionic.js"></script>
<script>
var open = document.getElementById('modal-opener');
var anim = ionic.Animator.animate(modal, function() {
console.log('Animation finished');
});
ionic.on('tap', function(e) {
var modal = document.getElementById('modal');
modal.classList.add('active');
anim.enter();
return false;
}, open);
var closer = document.getElementById('modal-closer');
ionic.on('tap', function(e) {
var modal = document.getElementById('modal');
modal.classList.remove('active');
anim.leave();
return false;
}, closer);
</script>
</body>
</html>

13
test/css/progress.html
View File

@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progress</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>
.content {
height: 1000px;
}
</style>
</head>
<body>
@@ -13,13 +19,12 @@
<main class="content padding has-header">
<progress></progress>
<progress></progress>
<progress value=3 max=10></progress>
<progress value=3 max=10></progress>
<progress value=7 max=10></progress>
<progress value=7 max=10></progress>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</main>
</body>

4
test/css/scroll.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -17,12 +18,9 @@
<body>
<section class="view-full">
<div class="bar bar-header bar-secondary">
<a href="#" class="button button-danger button-clear">Edit</a>
<h1 class="title">Scroll Me</h1>
<a href="#" class="button button-danger button-clear">Delete</a>
</div>
<div id="scroller" class="scroll" style="top:44px">
<!--<div id="filler" style="height: 1400px; background: url('tree_bark.png') repeat;"></div>-->
<form>
<input type="text">
</form>

1
test/css/search-ios7.html → test/css/search-ios.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

1
test/css/search.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

56
test/css/side-menus.html
View File

@@ -1,56 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>Side Menus</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">
</head>
<body>
<div id="content" class="pane">
<header class="bar bar-header bar-dark">
<h1 class="title">Center</h1>
</header>
</div>
<div id="menu-left" class="menu menu-left">
<header class="bar bar-header bar-dark">
<h1 class="title">Left</h1>
</header>
</div>
<div id="menu-right" class="menu menu-right">
<header class="bar bar-header bar-dark">
<h1 class="title">Right</h1>
</header>
</div>
<script src="../../dist/js/ionic.js"></script>
<script>
var contentEl = document.getElementById('content');
var content = new ionic.views.SideMenuContent({
el: contentEl
});
var leftMenuEl = document.getElementById('menu-left');
var leftMenu = new ionic.views.SideMenu({
el: leftMenuEl,
width: 270
});
var rightMenuEl = document.getElementById('menu-right');
var rightMenu = new ionic.views.SideMenu({
el: rightMenuEl,
width: 270
});
var sm = new ionic.controllers.SideMenuController({
content: content,
left: leftMenu,
right: rightMenu
});
</script>
</body>
</html>

3
test/css/splitPane.html → test/css/split-pane.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -155,7 +156,7 @@
</main>
</section>
<script src="../../dist/js/ionic.js"></script>
</body>
</html>

1
test/css/status-bar.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">

16
test/css/tabs-and-cards.html
View File

@@ -1,23 +1,25 @@
<html ng-app>
<!DOCTYPE html>
<html>
<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>
<style>
main { top: 0; left: 0; right: 0; bottom: 0; position: absolute; }
</style>
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars & Cards</h1>
<h1 class="title">Tab &amp; Cards</h1>
</header>
<main class="padding has-header">
<div class="{{iconTypeMain}}">
<div>
<div class="tabs">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
{{iconTypeMain}}
</a>
</div>
<div class="pane">
@@ -37,7 +39,6 @@
<div class="item tabs {{iconTypeSecondary}} tabs-positive">
<a disabled class="tab-item">
<i class="icon ion-close"></i>
{{iconTypeSecondary}}
</a>
</div>
</div>
@@ -46,8 +47,5 @@
</main>
<style>
main { top: 0; left: 0; right: 0; bottom: 0; position: absolute; }
</style>
</body>
</html>

22
test/css/tab-bars.html → test/css/tabs-default.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -11,22 +12,7 @@
<h1 class="title">Tab Bars</h1>
</header>
<main class="content padding has-header">
<h1>Icons On Top Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="./">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-icon-top">
<nav class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
Fun
@@ -35,10 +21,6 @@
<i class="icon ion-locked"></i>
Security
</a>
<a class="tab-item">
<i class="icon ion-heart"></i>
Simple
</a>
<a class="tab-item has-badge">
<i class="badge badge-assertive">3</i>
<i class="icon ion-leaf"></i>

37
test/css/tab-bars-icons-bottom.html → test/css/tabs-icons-bottom.html
View File

@@ -1,42 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs: Bottom 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">
<style>
.content {
height: 1000px;
}
</style>
</head>
<body class="tabs-icon-bottom">
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
<h1 class="title">Tabs: Bottom Icons</h1>
</header>
<main class="content padding has-header">
<h1>Icons On Bottom Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="./">Homepage</a></li>
</ul>
<div class="list card tabs-icon-left">
<div class="item item-avatar">
<img src="http://ionicframework.com/img/docs/mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<p>
This is a crude example of the parent tabs having .tabs-icon-bottom set,
while a nested tabs has .tabs-icon-left set.
</p>
This is a crude example of the parent tabs having .tabs-icon-bottom set,
while a nested tabs has .tabs-icon-left set.
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
@@ -58,7 +45,7 @@
</main>
<nav id="tab-bar" class="tabs tabs-icon-bottom tabs-positive">
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" href="#">
Fun
<i class="icon ion-game-controller-a"></i>
@@ -67,10 +54,6 @@
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item">
Simple
<i class="icon ion-heart"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>

24
test/css/tab-bars-icons-left.html → test/css/tabs-icons-left.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -8,25 +9,10 @@
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
<h1 class="title">Tabs: Left Icons</h1>
</header>
<main class="content padding has-header">
<h1>Icons On Left Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="./">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-icon-left tabs-assertive">
<nav class="tabs tabs-icon-left tabs-assertive">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
Fun
@@ -35,10 +21,6 @@
<i class="icon ion-locked"></i>
Security
</a>
<a class="tab-item">
<i class="icon ion-heart"></i>
Simple
</a>
<a class="tab-item has-badge">
<i class="badge">3</i>
<i class="icon ion-leaf"></i>

24
test/css/tab-bars-icons-right.html → test/css/tabs-icons-right.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -8,25 +9,10 @@
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
<h1 class="title">Tabs: Right Icons</h1>
</header>
<main class="content padding has-header">
<h1>Icons On Right Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="./">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-icon-right tabs-royal">
<nav class="tabs tabs-icon-right tabs-royal">
<a class="tab-item" href="#">
Fun
<i class="icon ion-game-controller-a"></i>
@@ -35,10 +21,6 @@
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item">
Simple
<i class="icon ion-heart"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>

23
test/css/tab-bars-no-icons.html → test/css/tabs-no-icons.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -8,34 +9,16 @@
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
<h1 class="title">Tabs: No Icons</h1>
</header>
<main class="content padding has-header">
<h1>No Icons</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="./">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-calm">
<nav class="tabs tabs-calm">
<a class="tab-item" href="#">
Fun
</a>
<a class="tab-item">
Security
</a>
<a class="tab-item">
Simple
</a>
<a class="tab-item has-badge">
<i class="badge">3</i>
Light

23
test/css/tab-bars-only-icons.html → test/css/tabs-only-icons.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -8,34 +9,16 @@
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
<h1 class="title">Tabs: Only Icons</h1>
</header>
<main class="content padding has-header">
<h1>Only Icons</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="./">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-icon-only tabs-default">
<nav class="tabs tabs-icon-only tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon ion-game-controller-a"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon ion-locked"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon ion-heart"></i>
</a>
<a class="tab-item tab-item-danger has-badge">
<i class="badge">3</i>
<i class="icon ion-leaf"></i>

5
test/css/tab-with-footer.html → test/css/tabs-with-footer.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -87,10 +88,6 @@
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item">
Simple
<i class="icon ion-heart"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>

36
test/css/test.scenario.js Normal file
View File

@@ -0,0 +1,36 @@
describe('css snapshot', function() {
var tests = [
'bars-clear',
'buttons',
'cards-header-footer',
'cards-item-avatar',
'cards-item-body',
'cards-item-icon',
'cards-item-thumbnail',
'cards-text',
'colors',
'footers',
'grid',
'headers',
'input-checkbox',
'input-radio',
'input-range',
'input-select',
'input-text',
'input-textarea',
'input-toogle',
'list',
'modals',
];
for(var x=0; x<tests.length; x++) {
(function(){
var testId = tests[x];
it(testId, function() {
browser.get('http://localhost:8876/test/css/' + testId + '.html');
});
})();
}
});

BIN
test/css/tree_bark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

3
test/css/type.html
View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@@ -25,8 +26,6 @@
<h6>I'm an H6 Element: gjpqy</h6>
<p>I'm a paragraph Element!</p>
<p>As am I'm a paragraph Element too.</p>
<hr>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</main>
</body>