javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

.icon- renamed to .ion.ion-

Browse Source
This commit is contained in:
Adam Bradley
2013-11-04 09:45:56 -06:00
parent 64a214d08f
commit 86bf5ed92d
30 changed files with 2252 additions and 2260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
dist/css/ionic-ios7.css vendored
View File

@ -647,11 +647,11 @@ a.subdued‎ {
color: inherit; }
.bar > .button {
z-index: 1;
padding: 0 8px;
padding: 8px;
min-height: 31px;
font-size: 12px;
line-height: 30px; }
.bar > .button i, .bar > .button .icon {
.bar > .button .ion {
font-size: 24px;
line-height: 29px; }
.bar .button-bar > .button {
@ -935,8 +935,7 @@ a.subdued‎ {
font-size: 10px;
line-height: 14px; }
.tab-item i,
.tab-item .icon {
.tab-item .ion {
display: block;
margin: 0 auto;
height: 32px;
@ -945,16 +944,14 @@ a.subdued‎ {
.tabs-icon-left .tab-item,
.tabs-icon-right .tab-item {
font-size: 10px; }
.tabs-icon-left .tab-item i, .tabs-icon-left .tab-item .icon,
.tabs-icon-right .tab-item i,
.tabs-icon-right .tab-item .icon {
.tabs-icon-left .tab-item .ion,
.tabs-icon-right .tab-item .ion {
font-size: 24px;
display: inline-block;
vertical-align: top;
line-height: 49px; }
.tabs-icon-only i,
.tabs-icon-only .icon {
.tabs-icon-only .ion {
line-height: inherit; }
/* Navigational tab */
@ -983,7 +980,7 @@ a.subdued‎ {
display: -ms-flexbox;
display: flex;
padding: 0; }
.item.tabs i, .item.tabs .icon {
.item.tabs .ion {
position: relative; }
.menu {
@ -1196,8 +1193,7 @@ a.item {
overflow: hidden;
white-space: nowrap; }
.item i,
.item .icon {
.item .ion {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
@ -1220,7 +1216,7 @@ a.item {
.item-icon-left {
padding-left: 45px; }
.item-icon-left i, .item-icon-left .icon {
.item-icon-left .ion {
left: 7.5px; }
.item-slider.item-icon-left {
@ -1228,16 +1224,13 @@ a.item {
.item-slider.item-icon-left .item-content {
padding-left: 45px; }
.item-icon-right i,
.item-icon-right .icon {
.item-icon-right .ion {
right: 7.5px; }
.item-icon-left.item-icon-right i:first-child,
.item-icon-left.item-icon-right .icon:first-child {
.item-icon-left.item-icon-right .ion:first-child {
right: auto; }
.item-icon-left.item-icon-right i:last-child,
.item-icon-left.item-icon-right .icon:last-child {
.item-icon-left.item-icon-right .ion:last-child {
left: auto; }
a.item:active,
@ -1265,8 +1258,8 @@ button.item:active,
left: 7.5px;
font-size: 32px;
min-height: 32px; }
.item-button-left > .button i,
.item-button-left .item-content > .button i {
.item-button-left > .button .ion,
.item-button-left .item-content > .button .ion {
position: relative;
line-height: 31px;
left: auto; }
@ -1291,8 +1284,8 @@ button.item:active,
right: 15px;
font-size: 32px;
min-height: 32px; }
.item-button-right > .button i,
.item-button-right .item-content > .button i {
.item-button-right > .button .ion,
.item-button-right .item-content > .button .ion {
position: relative;
line-height: 31px;
left: auto; }
@ -1423,7 +1416,7 @@ button.item-button-right:after {
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit .button {
height: 100%; }
.item-edit i, .item-edit .icon {
.item-edit .ion {
color: #ef4e3a;
font-size: 24px; }
.item-edit.ng-enter {
@ -1631,7 +1624,7 @@ textarea {
max-width: 200px;
color: black;
font-weight: bold; }
.item-input i, .item-input .icon {
.item-input .ion {
-webkit-box-flex: 0;
-webkit-flex: 0 0 24px;
-moz-box-flex: 0;
@ -1650,7 +1643,7 @@ textarea {
display: block;
background-color: transparent;
box-shadow: none; }
.item-stacked-label .input-label, .item-stacked-label [class^="icon-"], .item-stacked-label [class*=" icon-"] {
.item-stacked-label .input-label, .item-stacked-label .ion {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
@ -1887,8 +1880,8 @@ input[type="range"] {
position: relative;
display: inline-block;
margin: 0;
padding: 0 12px;
padding-top: 1px;
padding: 1px 12px 0 12px;
min-width: 52px;
min-height: 42px;
border-width: 1px;
border-style: solid;
@ -1900,7 +1893,7 @@ input[type="range"] {
font-size: 16px;
line-height: 41px;
cursor: pointer; }
.button i, .button .icon {
.button .ion {
display: inline-block;
padding: 0 0 1px 0;
vertical-align: inherit;
@ -1909,12 +1902,12 @@ input[type="range"] {
.button.button-icon {
padding: 2px 4px;
background: none; }
.button.button-icon i, .button.button-icon .icon {
.button.button-icon .ion {
font-size: 32px; }
.button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
padding: 0 6px;
padding: 6px;
max-height: 42px;
border: none;
background: none;
@ -2115,21 +2108,24 @@ input[type="range"] {
.button-small {
padding: 0 4px;
min-width: 28px;
min-height: 28px;
font-size: 12px;
line-height: 27px; }
.button-small i, .button-small .icon {
.button-small .ion {
font-size: 16px;
line-height: 26px; }
.button-large {
padding: 0 12px;
padding: 0 16px;
min-width: 66px;
min-height: 54px;
font-size: 18px;
line-height: 53px; }
.button-large i, .button-large .icon {
.button-large .ion {
font-size: 32px;
line-height: 52px; }
line-height: 51px;
padding-bottom: 2px; }
.padding > .button.block:first-child {
margin-top: 0; }
@ -2367,43 +2363,43 @@ a.button {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
i.icon-default, .icon.icon-default {
.ion-default {
color: white; }
i.icon-secondary, .icon.icon-secondary {
.ion-secondary {
color: gainsboro; }
i.icon-primary, .icon.icon-primary {
.ion-primary {
color: #4a87ee; }
i.icon-info, .icon.icon-info {
.ion-info {
color: #43cee6; }
i.icon-success, .icon.icon-success {
.ion-success {
color: #66cc33; }
i.icon-warning, .icon.icon-warning {
.ion-warning {
color: #f0b840; }
i.icon-danger, .icon.icon-danger {
.ion-danger {
color: #ef4e3a; }
i.icon-dark, .icon.icon-dark {
.ion-dark {
color: #444444; }
i.icon-gray-darker, .icon.icon-gray-darker {
.ion-gray-darker {
color: #222222; }
i.icon-gray-dark, .icon.icon-gray-dark {
.ion-gray-dark {
color: #333333; }
i.icon-gray, .icon.icon-gray {
.ion-gray {
color: #555555; }
i.icon-gray-light, .icon.icon-gray-light {
.ion-gray-light {
color: #999999; }
i.icon-gray-lighter, .icon.icon-gray-lighter {
.ion-gray-lighter {
color: #999999; }
.fill-icon {
@ -2413,35 +2409,35 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
position: relative;
border-radius: 6px;
padding: 1px; }
.fill-icon.icon-default:before {
.fill-icon.ion-default:before {
background: white; }
.fill-icon.icon-secondary:before {
.fill-icon.ion-secondary:before {
background: whitesmoke; }
.fill-icon.icon-primary:before {
.fill-icon.ion-primary:before {
background: #4a87ee; }
.fill-icon.icon-info:before {
.fill-icon.ion-info:before {
background: #43cee6; }
.fill-icon.icon-success:before {
.fill-icon.ion-success:before {
background: #66cc33; }
.fill-icon.icon-warning:before {
.fill-icon.ion-warning:before {
background: #f0b840; }
.fill-icon.icon-danger:before {
.fill-icon.ion-danger:before {
background: #ef4e3a; }
.fill-icon.icon-dark:before {
.fill-icon.ion-dark:before {
background: #444444; }
.fill-icon.icon-gray-darker:before {
.fill-icon.ion-gray-darker:before {
background: #222222; }
.fill-icon.icon-gray-dark:before {
.fill-icon.ion-gray-dark:before {
background: #333333; }
.fill-icon.icon-gray:before {
.fill-icon.ion-gray:before {
background: #555555; }
.fill-icon.icon-gray-light:before {
.fill-icon.ion-gray-light:before {
background: #999999; }
.fill-icon.icon-gray-lighter:before {
.fill-icon.ion-gray-lighter:before {
background: #eeeeee; }
.icon-loading {
font-family: 'ionicons';
.ion-loading {
font-family: 'Ionicons';
speak: none;
font-weight: normal;
font-variant: normal;
@ -2452,11 +2448,11 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-loading:before {
.ion-loading:before {
content: "\e144"; }
.icon-refreshing {
font-family: 'ionicons';
.ion-refreshing {
font-family: 'Ionicons';
speak: none;
font-weight: normal;
font-variant: normal;
@ -2467,7 +2463,7 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-refreshing:before {
.ion-refreshing:before {
content: "\e144"; }
.hidden,

1020
dist/css/ionic-scoped.css vendored
View File

File diff suppressed because it is too large Load Diff

1020
dist/css/ionic.css vendored
View File

File diff suppressed because it is too large Load Diff

686
ionicons/index.html
View File

File diff suppressed because it is too large Load Diff

896
ionicons/style.scss
View File

File diff suppressed because it is too large Load Diff

2
scss/ionic/_bar.scss
View File

@ -108,7 +108,7 @@
font-size: $button-bar-button-font-size;
line-height: $button-bar-button-height - $button-border-width;
i, .icon {
.ion {
font-size: $button-bar-button-icon-size;
line-height: $button-bar-button-height - $button-border-width - 1;
}

25
scss/ionic/_button.scss
View File

@ -1,10 +1,14 @@
// Buttons
// -------------------------------
.button {
position: relative;
display: inline-block;
margin: 0;
padding: $button-padding;
padding-top: 1px;
padding: 1px $button-padding 0 $button-padding;
min-width: ($button-padding * 3) + $button-font-size;
min-height: $button-height;
border-width: $button-border-width;
@ -22,7 +26,7 @@
cursor: pointer;
i, .icon {
.ion {
display: inline-block;
padding: 0 0 $button-border-width 0;
vertical-align: inherit;
@ -34,7 +38,7 @@
padding: 2px 4px;
background: none;
i, .icon {
.ion {
font-size: $button-large-icon-size;
}
}
@ -117,26 +121,29 @@
}
.button-small {
padding: $button-small-padding;
padding: 0 $button-small-padding;
min-width: $button-small-height;
min-height: $button-small-height;
font-size: $button-small-font-size;
line-height: $button-small-height - $button-border-width;
i, .icon {
.ion {
font-size: $button-small-icon-size;
line-height: $button-small-height - $button-border-width - 1;
}
}
.button-large {
padding: $button-large-padding;
padding: 0 $button-large-padding;
min-width: ($button-large-padding * 3) + $button-large-font-size;
min-height: $button-large-height;
font-size: $button-large-font-size;
line-height: $button-large-height - $button-border-width;
i, .icon {
.ion {
font-size: $button-large-icon-size;
line-height: $button-large-height - $button-border-width - 1;
line-height: $button-large-height - ($button-border-width * 2) - 1;
padding-bottom: ($button-border-width * 2);
}
}

4
scss/ionic/_form.scss
View File

@ -67,7 +67,7 @@ textarea {
color: $input-label-color;
font-weight: bold;
}
i, .icon {
.ion {
@include flex(0, 0, 24px);
position: static;
height: auto;
@ -85,7 +85,7 @@ textarea {
background-color: transparent;
box-shadow: none;
.input-label, [class^="icon-"], [class*=" icon-"] {
.input-label, .ion {
display: inline-block;
padding: 4px 0;
vertical-align: middle;

63
scss/ionic/_icons.scss
View File

@ -1,53 +1,56 @@
i.icon-default, .icon.icon-default {
// Icons
// -------------------------------
.ion-default {
color: $brand-default;
}
i.icon-secondary, .icon.icon-secondary {
.ion-secondary {
color: darken($brand-secondary, 10%);
}
i.icon-primary, .icon.icon-primary {
.ion-primary {
color: $brand-primary;
}
i.icon-info, .icon.icon-info {
.ion-info {
color: $brand-info;
}
i.icon-success, .icon.icon-success {
.ion-success {
color: $brand-success;
}
i.icon-warning, .icon.icon-warning {
.ion-warning {
color: $brand-warning;
}
i.icon-danger, .icon.icon-danger {
.ion-danger {
color: $brand-danger;
}
i.icon-dark, .icon.icon-dark {
.ion-dark {
color: $brand-dark;
}
i.icon-gray-darker, .icon.icon-gray-darker {
.ion-gray-darker {
color: $gray-darker;
}
i.icon-gray-dark, .icon.icon-gray-dark {
.ion-gray-dark {
color: $gray-dark;
}
i.icon-gray, .icon.icon-gray {
.ion-gray {
color: $gray;
}
i.icon-gray-light, .icon.icon-gray-light {
.ion-gray-light {
color: $gray-light;
}
i.icon-gray-lighter, .icon.icon-gray-lighter {
.ion-gray-lighter {
color: $gray-light;
}
@ -61,51 +64,51 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
padding: 1px;
}
&.icon-default:before {
&.ion-default:before {
background: $brand-default;
}
&.icon-secondary:before {
&.ion-secondary:before {
background: $brand-secondary;
}
&.icon-primary:before {
&.ion-primary:before {
background: $brand-primary;
}
&.icon-info:before {
&.ion-info:before {
background: $brand-info;
}
&.icon-success:before {
&.ion-success:before {
background: $brand-success;
}
&.icon-warning:before {
&.ion-warning:before {
background: $brand-warning;
}
&.icon-danger:before {
&.ion-danger:before {
background: $brand-danger;
}
&.icon-dark:before {
&.ion-dark:before {
background: $brand-dark;
}
&.icon-gray-darker:before {
&.ion-gray-darker:before {
background: $gray-darker;
}
&.icon-gray-dark:before {
&.ion-gray-dark:before {
background: $gray-dark;
}
&.icon-gray:before {
&.ion-gray:before {
background: $gray;
}
&.icon-gray-light:before {
&.ion-gray-light:before {
background: $gray-light;
}
&.icon-gray-lighter:before {
&.ion-gray-lighter:before {
background: $gray-lighter;
}
}
.icon-loading {
font-family: 'ionicons';
.ion-loading {
font-family: 'Ionicons';
speak: none;
font-weight: normal;
font-variant: normal;
@ -123,8 +126,8 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
}
}
.icon-refreshing {
font-family: 'ionicons';
.ion-refreshing {
font-family: 'Ionicons';
speak: none;
font-weight: normal;
font-variant: normal;

22
scss/ionic/_items.scss
View File

@ -174,8 +174,7 @@ a.item {
// List Icons
// -------------------------------
.item i,
.item .icon {
.item .ion {
@include display-flex();
@include align-items(center);
position: absolute;
@ -193,7 +192,7 @@ a.item {
.item-icon-left {
padding-left: ($item-padding * 3);
i, .icon {
.ion {
left: $item-padding / 2;
}
}
@ -205,17 +204,14 @@ a.item {
}
}
.item-icon-right i,
.item-icon-right .icon {
.item-icon-right .ion {
right: $item-padding / 2;
}
.item-icon-left.item-icon-right i:first-child,
.item-icon-left.item-icon-right .icon:first-child {
.item-icon-left.item-icon-right .ion:first-child {
right: auto;
}
.item-icon-left.item-icon-right i:last-child,
.item-icon-left.item-icon-right .icon:last-child {
.item-icon-left.item-icon-right .ion:last-child {
left: auto;
}
@ -243,7 +239,7 @@ button.item:active,
font-size: $item-icon-font-size;
min-height: $item-icon-font-size;
i {
.ion {
position: relative;
line-height: $item-icon-font-size - 1;
left: auto;
@ -264,7 +260,7 @@ button.item:active,
font-size: $item-icon-font-size;
min-height: $item-icon-font-size;
i {
.ion {
position: relative;
line-height: $item-icon-font-size - 1;
left: auto;
@ -285,7 +281,7 @@ button.item:after {
right: $item-padding - 4;
height: 100%;
color: #ccc;
content: "\e0fc"; // icon-chevron-right
content: "\e0fc"; // ion-chevron-right
text-transform: none;
font-weight: normal;
font-style: normal;
@ -448,7 +444,7 @@ button.item-button-right:after {
height: 100%;
}
i, .icon {
.ion {
color: $brand-danger;
font-size: 24px;
}

10
scss/ionic/_tabs.scss
View File

@ -93,8 +93,7 @@
line-height: $tabs-text-font-size;
}
.tab-item i,
.tab-item .icon {
.tab-item .ion {
display: block;
margin: 0 auto;
height: $tabs-icon-size;
@ -104,7 +103,7 @@
.tabs-icon-left .tab-item,
.tabs-icon-right .tab-item {
font-size: $tabs-text-with-icon-font-size;
i, .icon {
.ion {
font-size: $tabs-icon-size - 8;
display: inline-block;
vertical-align: top;
@ -112,8 +111,7 @@
}
}
.tabs-icon-only i,
.tabs-icon-only .icon {
.tabs-icon-only .ion {
line-height: inherit;
}
@ -150,7 +148,7 @@
@include display-flex();
padding: 0;
i, .icon {
.ion {
position: relative;
}
}

12
scss/ionic/_variables.scss
View File

@ -211,28 +211,28 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%);
$button-color: #222;
$button-block-margin: 10px !default;
$button-clear-padding: 0 6px;
$button-clear-padding: 6px !default;
$button-border-radius: 2px;
$button-border-width: 1px;
$button-font-size: 16px;
$button-height: 42px;
$button-padding: 0 12px;
$button-padding: 12px !default;
$button-icon-size: 24px;
$button-large-font-size: 18px;
$button-large-height: 54px;
$button-large-padding: 0 12px;
$button-large-padding: 16px !default;
$button-large-icon-size: 32px;
$button-small-font-size: 12px;
$button-small-height: 28px;
$button-small-padding: 0 4px;
$button-small-padding: 4px !default;
$button-small-icon-size: 16px;
$button-bar-button-font-size: 12px;
$button-bar-button-height: 31px !default;
$button-bar-button-padding: 0 8px;
$button-bar-button-height: 31px;
$button-bar-button-padding: 8px !default;
$button-bar-button-icon-size: 24px;
$button-default-bg: $brand-default;

122
test/buttons.html
View File

@ -30,119 +30,119 @@
<h3>a.button default</h3>
<p>
<a class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary"><i class="icon-home"></i></a>
<a class="button button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-info"><i class="icon-home"></i></a>
<a class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary"><i class="ion ion-home"></i></a>
<a class="button button-primary"><i class="ion ion-home"></i> .button-primary</a>
<a class="button button-info"><i class="ion ion-home"></i></a>
<a class="button button-success">.button-success</a>
<a class="button button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-warning"><i class="ion ion-home"></i> .button-warning</a>
<a class="button button-danger">.button-danger</a>
<a class="button button-dark"><i class="icon-home"></i> .button-dark</a>
<a class="button button-dark"><i class="ion ion-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button default</h3>
<p>
<button class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary">.button-secondary</button>
<button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-primary"><i class="ion ion-home"></i> .button-primary</button>
<button class="button button-info">.button-info</button>
<button class="button button-success"><i class="icon-home"></i></button>
<button class="button button-success"><i class="ion ion-home"></i></button>
<button class="button button-warning">.button-warning</button>
<button class="button button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-dark"><i class="icon-home"></i></button>
<button class="button button-danger"><i class="ion ion-home"></i> .button-danger</button>
<button class="button button-dark"><i class="ion ion-home"></i></button>
</p>
<hr>
<h3>a.button.button-large default</h3>
<p>
<a class="button button-large button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-large button-secondary"><i class="icon-home"></i></a>
<a class="button button-large button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-large button-info"><i class="icon-home"></i></a>
<a class="button button-large button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-large button-secondary"><i class="ion ion-home"></i></a>
<a class="button button-large button-primary"><i class="ion ion-home"></i> .button-primary</a>
<a class="button button-large button-info"><i class="ion ion-home"></i></a>
<a class="button button-large button-success">.button-success</a>
<a class="button button-large button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-large button-warning"><i class="ion ion-home"></i> .button-warning</a>
<a class="button button-large button-danger">.button-danger</a>
<a class="button button-large button-dark"><i class="icon-home"></i> .button-dark</a>
<a class="button button-large button-dark"><i class="ion ion-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button. button-large default</h3>
<p>
<button class="button button-large button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-large button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-large button-secondary">.button-secondary</button>
<button class="button button-large button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-large button-primary"><i class="ion ion-home"></i> .button-primary</button>
<button class="button button-large button-info">.button-info</button>
<button class="button button-large button-success"><i class="icon-home"></i></button>
<button class="button button-large button-success"><i class="ion ion-home"></i></button>
<button class="button button-large button-warning">.button-warning</button>
<button class="button button-large button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-large button-dark"><i class="icon-home"></i></button>
<button class="button button-large button-danger"><i class="ion ion-home"></i> .button-danger</button>
<button class="button button-large button-dark"><i class="ion ion-home"></i></button>
</p>
<hr>
<h3>a.button.button-small default</h3>
<p>
<a class="button button-small button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-small button-secondary"><i class="icon-home"></i></a>
<a class="button button-small button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-small button-info"><i class="icon-home"></i></a>
<a class="button button-small button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-small button-secondary"><i class="ion ion-home"></i></a>
<a class="button button-small button-primary"><i class="ion ion-home"></i> .button-primary</a>
<a class="button button-small button-info"><i class="ion ion-home"></i></a>
<a class="button button-small button-success">.button-success</a>
<a class="button button-small button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-small button-warning"><i class="ion ion-home"></i> .button-warning</a>
<a class="button button-small button-danger">.button-danger</a>
<a class="button button-small button-dark"><i class="icon-home"></i> .button-dark</a>
<a class="button button-small button-dark"><i class="ion ion-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button.button-small</h3>
<p>
<button class="button button-small button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-small button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-small button-secondary">.button-secondary</button>
<button class="button button-small button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-small button-primary"><i class="ion ion-home"></i> .button-primary</button>
<button class="button button-small button-info">.button-info</button>
<button class="button button-small button-success"><i class="icon-home"></i></button>
<button class="button button-small button-success"><i class="ion ion-home"></i></button>
<button class="button button-small button-warning">.button-warning</button>
<button class="button button-small button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-small button-dark"><i class="icon-home"></i></button>
<button class="button button-small button-danger"><i class="ion ion-home"></i> .button-danger</button>
<button class="button button-small button-dark"><i class="ion ion-home"></i></button>
</p>
<hr>
<h3>a.button.button-clear (Mixed in with others)</h3>
<p>
<a class="button button-clear button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary"><i class="icon-home"></i></a>
<a class="button button-clear button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-clear button-info"><i class="icon-home"></i></a>
<a class="button button-clear button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary"><i class="ion ion-home"></i></a>
<a class="button button-clear button-primary"><i class="ion ion-home"></i> .button-primary</a>
<a class="button button-clear button-info"><i class="ion ion-home"></i></a>
<a class="button button-success">.button-success</a>
<a class="button button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-warning"><i class="ion ion-home"></i> .button-warning</a>
<a class="button button-clear button-danger">.button-danger</a>
<a class="button button-clear button-dark"><i class="icon-home"></i> .button-dark</a>
<a class="button button-clear button-dark"><i class="ion ion-home"></i> .button-dark</a>
</p>
<hr>
<h3>button.button.button-clear default</h3>
<p>
<button class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-clear button-secondary">.button-secondary</button>
<button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-primary"><i class="ion ion-home"></i> .button-primary</button>
<button class="button button-clear button-info">.button-info</button>
<button class="button button-clear button-success"><i class="icon-home"></i></button>
<button class="button button-clear button-success"><i class="ion ion-home"></i></button>
<button class="button button-clear button-warning">.button-warning</button>
<button class="button button-clear button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-dark"><i class="icon-home"></i></button>
<button class="button button-clear button-danger"><i class="ion ion-home"></i> .button-danger</button>
<button class="button button-dark"><i class="ion ion-home"></i></button>
</p>
<hr>
<h3>a.block (parent w/ padding)</h3>
<p>
<a class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button block button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button block button-secondary">.button-secondary</a>
<a class="button block button-primary">.button-primary</a>
<a class="button block button-info">.button-info</a>
@ -156,7 +156,7 @@
<h3>button.block (parent w/ padding)</h3>
<p>
<button class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button block button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button block button-secondary">.button-secondary</button>
<button class="button block button-primary">.button-primary</button>
<button class="button block button-info">.button-info</button>
@ -170,35 +170,35 @@
<h3>a.button-icon (Borderless, 32px)</h3>
<p>
<a class="button button-icon"><i class="icon-home"></i></a>
<a class="button button-icon"><i class="ion ion-home"></i></a>
</p>
<hr>
<h3>button.button-icon (Borderless, 32px)</h3>
<p>
<button class="button button-icon"><i class="icon-home"></i></button>
<button class="button button-icon"><i class="ion ion-home"></i></button>
</p>
<hr>
<h3>a.block.button-icon (Borderless, 32px)</h3>
<p>
<a class="button block button-icon"><i class="icon-home"></i></a>
<a class="button block button-icon"><i class="ion ion-home"></i></a>
</p>
<hr>
<h3>button.block.button-icon (Borderless, 32px)</h3>
<p>
<button class="button block button-icon"><i class="icon-home"></i></button>
<button class="button block button-icon"><i class="ion ion-home"></i></button>
</p>
<hr>
<h3>a.button-outline</h3>
<p>
<a class="button button-default button-outline"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-default button-outline"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-outline">.button-secondary</a>
<a class="button button-primary button-outline">.button-primary</a>
<a class="button button-info button-outline">.button-info</a>
@ -212,7 +212,7 @@
<h3>button.button-outline</h3>
<p>
<button class="button button-default button-outline"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-default button-outline"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-outline">.button-secondary</button>
<button class="button button-primary button-outline">.button-primary</button>
<button class="button button-info button-outline">.button-info</button>
@ -226,7 +226,7 @@
<h3>a.block.button-outline (parent w/ padding)</h3>
<p>
<a class="button button-default button-outline block"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-default button-outline block"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-outline block">.button-secondary</a>
<a class="button button-primary button-outline block">.button-primary</a>
<a class="button button-info button-outline block">.button-info</a>
@ -240,7 +240,7 @@
<h3>button.block.button-outline (parent w/ padding)</h3>
<p>
<button class="button button-default button-outline block"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-default button-outline block"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-outline block">.button-secondary</button>
<button class="button button-primary button-outline block">.button-primary</button>
<button class="button button-info button-outline block">.button-info</button>
@ -254,7 +254,7 @@
<h3>a.button-clear</h3>
<p>
<a class="button button-default button-clear"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-default button-clear"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-clear">.button-secondary</a>
<a class="button button-primary button-clear">.button-primary</a>
<a class="button button-info button-clear">.button-info</a>
@ -268,7 +268,7 @@
<h3>button.button-clear</h3>
<p>
<button class="button button-default button-clear"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-default button-clear"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-clear">.button-secondary</button>
<button class="button button-primary button-clear">.button-primary</button>
<button class="button button-info button-clear">.button-info</button>
@ -282,7 +282,7 @@
<h3>a.block.button-clear (parent w/ padding)</h3>
<p>
<a class="button button-default button-clear block"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-default button-clear block"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary button-clear block">.button-secondary</a>
<a class="button button-primary button-clear block">.button-primary</a>
<a class="button button-info button-clear block">.button-info</a>
@ -296,7 +296,7 @@
<h3>button.block.button-clear (parent w/ padding)</h3>
<p>
<button class="button button-default button-clear block"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-default button-clear block"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-secondary button-clear block">.button-secondary</button>
<button class="button button-primary button-clear block">.button-primary</button>
<button class="button button-info button-clear block">.button-info</button>
@ -312,7 +312,7 @@
<h3>a.block (parent w/out padding)</h3>
<p>
<a class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button block button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button block button-secondary">.button-secondary</a>
<a class="button block button-primary">.button-primary</a>
<a class="button block button-info">.button-info</a>
@ -326,7 +326,7 @@
<h3>a.block (.button-full on the parent)</h3>
<p class="button-full">
<a class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
<a class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
<a class="button button-secondary">.button-secondary</a>
<a class="button button-primary">.button-primary</a>
<a class="button button-info">.button-info</a>
@ -340,7 +340,7 @@
<h3>button.block.button-full on each button and nothing on the parent</h3>
<p>
<button class="button button-full button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
<button class="button button-full button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
<button class="button button-full button-secondary">.button-secondary</button>
<button class="button button-full button-primary">.button-primary</button>
<button class="button button-full button-info">.button-info</button>

16
test/cards.html
View File

@ -47,22 +47,22 @@
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon-home"></i>
<i class="ion ion-home"></i>
Enter home address
</a>
<a href="#" class="item item-icon-left">
<i class="icon-ios7-telephone"></i>
<i class="ion ion-ios7-telephone"></i>
Enter phone number
</a>
<a href="#" class="item item-icon-left">
<i class="icon-wifi"></i>
<i class="ion ion-wifi"></i>
Enter wireless password
</a>
<a href="#" class="item item-icon-left">
<i class="icon-card"></i>
<i class="ion ion-card"></i>
Enter card information
</a>
@ -81,7 +81,7 @@
</div>
<a href="#" class="item item-icon-left">
<i class="icon-music-note"></i>
<i class="ion ion-music-note"></i>
Start listening
</a>
@ -122,15 +122,15 @@
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon-thumbsup"></i>
<i class="ion ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon-chatbox"></i>
<i class="ion ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon-share"></i>
<i class="ion ion-share"></i>
Share
</a>
</div>

2
test/controllers/sideMenu.html
View File

@ -13,7 +13,7 @@
<section id="content" class="full-section menu-animated">
<header class="bar bar-header bar-dark">
<a href="#" class="button"><i class="icon-reorder"></i></a>
<a href="#" class="button"><i class="ion ion-reorder"></i></a>
<h1 class="title">Tab Bars</h1>
</header>

16
test/headers.html
View File

@ -21,12 +21,12 @@
<header class="bar bar-header bar-dark">
<a class="button">Back</a>
<h1 class="title">Really really really really really really really really long title!</h1>
<a class="button"><i class="icon-home"></i> Home</a>
<a class="button"><i class="ion ion-home"></i> Home</a>
</header>
<div class="bar bar-header-secondary bar-success">
<a class="button">
<i class="icon-home"></i> Home
<i class="ion ion-home"></i> Home
</a>
<div class="button-bar">
<a class="button">Success</a>
@ -40,7 +40,7 @@
<header class="bar bar-header bar-default">
<a class="button button-default">
<i class="icon-home"></i> Home
<i class="ion ion-home"></i> Home
</a>
<div class="button-bar">
<a class="button">Success</a>
@ -48,13 +48,13 @@
<a class="button">Danger</a>
</div>
<a class="button">
<i class="icon-star"></i> Favorites
<i class="ion ion-star"></i> Favorites
</a>
</header>
<div class="bar bar-header bar-default">
<a class="button button-icon">
<i class="icon-home"></i>
<i class="ion ion-home"></i>
</a>
<div class="button-bar">
<a href="#" class="button button-clear">Edit</a>
@ -62,13 +62,13 @@
<a href="#" class="button button-clear">Delete</a>
</div>
<a class="button button-icon">
<i class="icon-home"></i>
<i class="ion ion-home"></i>
</a>
</div>
<header class="bar bar-header bar-default">
<a class="button button-default">
<i class="icon-home"></i>
<i class="ion ion-home"></i>
</a>
<div class="button-bar">
<a class="button">Success</a>
@ -76,7 +76,7 @@
<a class="button">Danger</a>
</div>
<a class="button">
<i class="icon-star"></i>
<i class="ion ion-star"></i>
</a>
</header>

42
test/index.html
View File

@ -17,27 +17,27 @@
<div class="content-wrapper">
<main class="content padding has-header">
<p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
<p><a class="button button-block button-default" href="buttons.html"><i class="icon-star"></i> Buttons</a></p>
<p><a class="button button-block button-default" href="button-bar.html"><i class="icon-star"></i> Button Bar</a></p>
<p><a class="button button-block button-default" href="cards.html"><i class="icon-star"></i> Cards</a></p>
<p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star"></i> Headers</a></p>
<p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star"></i> Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star"></i> Lists</a></p>
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon-star-empty"></i> Pull To Refresh</a></p>
<p><a class="button button-block button-default" href="side-menus.html"><i class="icon-star-empty"></i> Side Menus</a></p>
<p><a class="button button-block button-default" href="swipe.html"><i class="icon-star-empty"></i> Swipe</a></p>
<p><a class="button button-block button-default" href="tab-bars.html"><i class="icon-star-half-empty"></i> Tab Bars</a></p>
<p><a class="button button-block button-default" href="type.html"><i class="icon-star"></i> Type</a></p>
<p><a class="button button-block button-default" href="alerts.html"><i class="ion ion-star"></i> Alerts</a></p>
<p><a class="button button-block button-default" href="buttons.html"><i class="ion ion-star"></i> Buttons</a></p>
<p><a class="button button-block button-default" href="button-bar.html"><i class="ion ion-star"></i> Button Bar</a></p>
<p><a class="button button-block button-default" href="cards.html"><i class="ion ion-star"></i> Cards</a></p>
<p><a class="button button-block button-default" href="footers.html"><i class="ion ion-star"></i> Footers</a></p>
<p><a class="button button-block button-default" href="headers.html"><i class="ion ion-star"></i> Headers</a></p>
<p><a class="button button-block button-default" href="input-text.html"><i class="ion ion-star"></i> Input: Text (single-line)</a></p>
<p><a class="button button-block button-default" href="input-textarea.html"><i class="ion ion-star"></i> Input: Text (multi-line)</a></p>
<p><a class="button button-block button-default" href="input-radio.html"><i class="ion ion-star"></i> Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="input-range.html"><i class="ion ion-star"></i> Input: Range</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="ion ion-star"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="ion ion-star"></i> Input: Checkbox</a></p>
<p><a class="button button-block button-default" href="input-toggle.html"><i class="ion ion-star"></i> Input: Toggle</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="ion ion-star"></i> Lists</a></p>
<p><a class="button button-block button-default" href="modals.html"><i class="ion ion-star-empty"></i> Modals</a></p>
<p><a class="button button-block button-default" href="popovers.html"><i class="ion ion-star-empty"></i> Popovers</a></p>
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="ion ion-star-empty"></i> Pull To Refresh</a></p>
<p><a class="button button-block button-default" href="side-menus.html"><i class="ion ion-star-empty"></i> Side Menus</a></p>
<p><a class="button button-block button-default" href="swipe.html"><i class="ion ion-star-empty"></i> Swipe</a></p>
<p><a class="button button-block button-default" href="tab-bars.html"><i class="ion ion-star-half-empty"></i> Tab Bars</a></p>
<p><a class="button button-block button-default" href="type.html"><i class="ion ion-star"></i> Type</a></p>
</main>
</div>

12
test/input-radio.html
View File

@ -22,7 +22,7 @@
<div class="item-content">
Go
</div>
<i class="radio-icon icon-checkmark"></i>
<i class="radio-icon ico ion-checkmark"></i>
</label>
<label class="item item-radio">
@ -30,7 +30,7 @@
<div class="item-content">
Python
</div>
<i class="radio-icon icon-checkmark"></i>
<i class="radio-icon ico ion-checkmark"></i>
</label>
<label class="item item-radio">
@ -38,7 +38,7 @@
<div class="item-content">
Ruby
</div>
<i class="radio-icon icon-checkmark"></i>
<i class="radio-icon ico ion-checkmark"></i>
</label>
<label class="item item-radio">
@ -46,7 +46,7 @@
<div class="item-content">
.Net
</div>
<i class="radio-icon icon-checkmark"></i>
<i class="radio-icon ico ion-checkmark"></i>
</label>
<label class="item item-radio">
@ -54,7 +54,7 @@
<div class="item-content">
Java
</div>
<i class="radio-icon icon-checkmark"></i>
<i class="radio-icon ico ion-checkmark"></i>
</label>
<label class="item item-radio">
@ -62,7 +62,7 @@
<div class="item-content">
PHP
</div>
<i class="radio-icon icon-checkmark"></i>
<i class="radio-icon ico ion-checkmark"></i>
</label>
</div>

14
test/input-text.html
View File

@ -107,12 +107,12 @@
<h3>Label left of input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<i class="icon-person"></i>
<i class="ion ion-person"></i>
<span class="input-label">Username</span>
<input type="text" placeholder="@drifty">
</label>
<label class="item item-input">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
<span class="input-label">Email</span>
<input type="email" placeholder="your@email.com">
</label>
@ -212,7 +212,7 @@
<h3>Default Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<i class="icon-search placeholder-icon"></i>
<i class="ion ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</div>
@ -220,7 +220,7 @@
<h3>Default Text Input, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<i class="icon-star placeholder-icon"></i>
<i class="ion ion-star placeholder-icon"></i>
<input type="text" placeholder="Favorites">
</label>
</div>
@ -229,7 +229,7 @@
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
@ -240,7 +240,7 @@
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<i class="icon-cloud"></i>
<i class="ion ion-cloud"></i>
<span class="input-label">SaaS</span>
<input type="text" placeholder="Codiqa">
</label>
@ -249,7 +249,7 @@
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<i class="icon-headphone"></i>
<i class="ion ion-headphone"></i>
<span class="input-label">Favorite Music</span>
<input type="text" placeholder="Bee Gees">
</label>

66
test/lists.html
View File

@ -30,12 +30,12 @@
</div>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-chatbubble-working"></i>
<i class="ion ion-chatbubble-working"></i>
Call Ma
</a>
@ -48,28 +48,28 @@
</div>
<a href="#" class="item item-icon-left">
<i class="icon-email icon-secondary"></i>
<i class="ion ion-email ion-secondary"></i>
Check mail
<span class="badge badge-info">5</span>
</a>
<a href="#" class="item item-icon-left item-button-right">
<i class="icon-chatbubble-working icon-primary"></i>
<i class="ion ion-chatbubble-working ion-primary"></i>
Call Ma
<button class="button button-success">
<i class="icon-ios7-telephone"></i>
<i class="ion ion-ios7-telephone"></i>
</button>
</a>
<a href="#" class="item item-button-left">
<button class="button button-success">
<i class="icon-ios7-telephone"></i>
<i class="ion ion-ios7-telephone"></i>
</button>
Me Button
</a>
<a href="#" class="item item-icon-left">
<i class="icon-mic-a icon-info"></i>
<i class="ion ion-mic-a ion-info"></i>
Record album
<span class="item-note">
Grammy
@ -77,7 +77,7 @@
</a>
<a href="#" class="item item-icon-left">
<i class="icon-flask icon-success"></i>
<i class="ion ion-flask ion-success"></i>
Breaking Bad
<span class="item-note">
Blue, yellow, pink
@ -89,7 +89,7 @@
</div>
<a href="#" class="item item-icon-left">
<i class="icon-game-controller-b icon-warning"></i>
<i class="ion ion-game-controller-b ion-warning"></i>
Games
<span class="item-note">
Super Mario
@ -97,7 +97,7 @@
</a>
<a href="#" class="item item-icon-left">
<i class="icon-music-note icon-danger"></i>
<i class="ion ion-music-note ion-danger"></i>
Music
<span class="item-note">
JT
@ -105,7 +105,7 @@
</a>
<a href="#" class="item item-icon-left">
<i class="icon-bag icon-dark"></i>
<i class="ion ion-bag ion-dark"></i>
Shopping
<span class="item-note">
Bag
@ -113,7 +113,7 @@
</a>
<a href="#" class="item item-icon-left">
<i class="icon-person-stalker icon-warning fill-icon"></i>
<i class="ion ion-person-stalker ion-warning fill-icon"></i>
Friends
<span class="badge badge-danger">0</span>
</a>
@ -139,7 +139,7 @@
<a href="#" class="item item-icon-right">
<div class="item-content slide-right">
Processing Icon
<i class="icon-loading"></i>
<i class="ion ion-loading"></i>
</div>
</a>
@ -252,19 +252,19 @@
</div>
<a href="#" class="item item-icon-left">
<i class="icon-heart brand-danger"></i>
<i class="ion ion-heart brand-danger"></i>
Madison, WI
</a>
<a href="#" class="item item-icon-left">
<i class="icon-image brand-warning"></i>
<i class="ion ion-image brand-warning"></i>
Driving Directions
</a>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon-ios7-cog gray"></i>
<i class="ion ion-ios7-cog gray"></i>
Settings
<i class="icon-ios7-information-outline"></i>
<i class="ion ion-ios7-information-outline"></i>
</a>
</div>
@ -273,17 +273,17 @@
<a href="#" class="item item-icon-left item-icon-right item-slider">
<div class="item-content">
<i class="icon-heart brand-danger fill-icon"></i>
<i class="ion ion-heart brand-danger fill-icon"></i>
Madison, WI
<i class="icon-chevron-right"></i>
<i class="ion ion-chevron-right"></i>
</div>
</a>
<a href="#" class="item item-icon-left item-icon-right item-slider">
<div class="item-content slide-left">
<i class="icon-image brand-warning fill-icon"></i>
<i class="ion ion-image brand-warning fill-icon"></i>
Driving Directions
<i class="icon-chevron-right"></i>
<i class="ion ion-chevron-right"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@ -292,9 +292,9 @@
<a href="#" class="item item-icon-left item-icon-right item-slider">
<div class="item-content slide-right">
<i class="icon-ios7-cog gray fill-icon"></i>
<i class="ion ion-ios7-cog gray fill-icon"></i>
Settings
<i class="icon-chevron-right"></i>
<i class="ion ion-chevron-right"></i>
</div>
</a>
@ -308,14 +308,14 @@
<a href="#" class="item item-icon-left">
<div class="item-content">
<i class="icon-heart brand-danger fill-icon"></i>
<i class="ion ion-heart brand-danger fill-icon"></i>
Icon is filled!!
</div>
</a>
<a href="#" class="item item-icon-left">
<div class="item-content">
<i class="icon-image brand-warning fill-icon"></i>
<i class="ion ion-image brand-warning fill-icon"></i>
.fill-icon
</div>
</a>
@ -325,28 +325,28 @@
</div>
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon-ios7-cog gray fill-icon"></i>
<i class="ion 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-chevron-right"></i>
<i class="ion ion-chevron-right"></i>
</a>
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
<i class="icon-ios7-cog gray fill-icon"></i>
<i class="ion 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-chevron-right"></i>
<i class="ion ion-chevron-right"></i>
</a>
<a href="#" class="item item-icon-left item-icon-right item-slider">
<div class="item-content slide-left slide-right">
<i class="icon-ios7-cog gray fill-icon"></i>
<i class="ion 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-chevron-right"></i>
<i class="ion ion-chevron-right"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@ -355,11 +355,11 @@
<a href="#" class="item item-icon-left item-icon-right item-text-wrap item-slider">
<div class="item-content slide-left slide-right">
<i class="icon-ios7-cog gray fill-icon"></i>
<i class="ion 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-chevron-right"></i>
<i class="ion ion-chevron-right"></i>
</div>
<div class="item-options">
<button class="button">Button</button>

104
test/menu_controller.html
View File

@ -14,13 +14,13 @@
<header class="bar bar-header bar-dark">
<div class="buttons">
<a id="left-button" class="button button-dark" href="#">
<i class="icon-reorder"></i>
<i class="ion ion-reorder"></i>
</a>
</div>
<h1 class="title">Chats</h1>
<div class="buttons">
<button id="right-button" class="button button-dark">
<i class="icon-cog"></i>
<i class="ion ion-cog"></i>
</button>
</div>
</header>
@ -65,103 +65,103 @@
<li class="list-divider">Left Nav Things</li>
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
</ul>
</section>
@ -171,103 +171,103 @@
<li class="list-divider">Left Nav Things</li>
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
</ul>
</section>

104
test/menus.html
View File

@ -14,11 +14,11 @@
<header class="bar bar-header bar-dark">
<button class="button button-borderless button-transparent " data-panel-toggle="my-left-panel">
<i class="icon-reorder"></i>
<i class="ion ion-reorder"></i>
</button>
<h1 class="title">Panels</h1>
<button class="button button-borderless button-transparent " data-panel-toggle="my-right-panel" data-panel-direction="right">
<i class="icon-cog"></i>
<i class="ion ion-cog"></i>
</button>
</header>
@ -39,103 +39,103 @@
<li class="list-divider">Left Nav Things</li>
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
</ul>
</section>
@ -145,103 +145,103 @@
<li class="list-divider">Right Nav Things</li>
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
<i class="ion ion-arrow-right"></i>
</a>
</ul>
</section>

4
test/side-menus.html
View File

@ -13,13 +13,13 @@
<header class="bar bar-header bar-dark">
<div class="buttons">
<a id="left-button" class="button button-dark" href="#">
<i class="icon-reorder"></i>
<i class="ion ion-reorder"></i>
</a>
</div>
<h1 class="title">Chats</h1>
<div class="buttons">
<button id="right-button" class="button button-dark">
<i class="icon-cog"></i>
<i class="ion ion-cog"></i>
</button>
</div>
</header>

6
test/slideBox.html
View File

@ -38,9 +38,9 @@
</div>
</div>
<div class="slide-box-pager">
<span><i class="icon-record"></i></span>
<span><i class="icon-record"></i></span>
<span><i class="icon-record"></i></span>
<span><i class="ion ion-record"></i></span>
<span><i class="ion ion-record"></i></span>
<span><i class="ion ion-record"></i></span>
</div>
</div>
</div>

62
test/splitPane.html
View File

@ -24,127 +24,127 @@
<h1>Left side</h1>
<ul class="list">
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
<a href="#" class="item item-icon-left">
<i class="icon-email"></i>
<i class="ion ion-email"></i>
Check mail
</a>
</ul>

10
test/tab-bars-icons-bottom.html
View File

@ -31,23 +31,23 @@
<nav id="tab-bar" class="tabs tabs-icon-bottom tabs-default">
<a class="tab-item tab-item-danger" href="#">
Fun
<i class="icon-game-controller-a"></i>
<i class="ion ion-game-controller-a"></i>
</a>
<a class="tab-item tab-item-danger">
Security
<i class="icon-locked"></i>
<i class="ion ion-locked"></i>
</a>
<a class="tab-item tab-item-danger">
Simple
<i class="icon-heart"></i>
<i class="ion ion-heart"></i>
</a>
<a class="tab-item tab-item-danger">
Light
<i class="icon-leaf"></i>
<i class="ion ion-leaf"></i>
</a>
<a class="tab-item tab-item-danger">
Clean
<i class="icon-waterdrop"></i>
<i class="ion ion-waterdrop"></i>
</a>
</nav>

10
test/tab-bars-icons-left.html
View File

@ -30,23 +30,23 @@
<nav id="tab-bar" class="tabs tabs-icon-left tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
<i class="ion ion-game-controller-a"></i>
Fun
</a>
<a class="tab-item tab-item-danger">
<i class="icon-locked"></i>
<i class="ion ion-locked"></i>
Security
</a>
<a class="tab-item tab-item-danger">
<i class="icon-heart"></i>
<i class="ion ion-heart"></i>
Simple
</a>
<a class="tab-item tab-item-danger">
<i class="icon-leaf"></i>
<i class="ion ion-leaf"></i>
Light
</a>
<a class="tab-item tab-item-danger">
<i class="icon-waterdrop"></i>
<i class="ion ion-waterdrop"></i>
Clean
</a>
</nav>

10
test/tab-bars-icons-right.html
View File

@ -31,23 +31,23 @@
<nav id="tab-bar" class="tabs tabs-icon-right tabs-default">
<a class="tab-item tab-item-danger" href="#">
Fun
<i class="icon-game-controller-a"></i>
<i class="ion ion-game-controller-a"></i>
</a>
<a class="tab-item tab-item-danger">
Security
<i class="icon-locked"></i>
<i class="ion ion-locked"></i>
</a>
<a class="tab-item tab-item-danger">
Simple
<i class="icon-heart"></i>
<i class="ion ion-heart"></i>
</a>
<a class="tab-item tab-item-danger">
Light
<i class="icon-leaf"></i>
<i class="ion ion-leaf"></i>
</a>
<a class="tab-item tab-item-danger">
Clean
<i class="icon-waterdrop"></i>
<i class="ion ion-waterdrop"></i>
</a>
</nav>

10
test/tab-bars-only-icons.html
View File

@ -30,19 +30,19 @@
<nav id="tab-bar" class="tabs tabs-icon-only tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
<i class="ion ion-game-controller-a"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-locked"></i>
<i class="ion ion-locked"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-heart"></i>
<i class="ion ion-heart"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-leaf"></i>
<i class="ion ion-leaf"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-waterdrop"></i>
<i class="ion ion-waterdrop"></i>
</a>
</nav>

10
test/tab-bars.html
View File

@ -30,23 +30,23 @@
<nav id="tab-bar" class="tabs tabs-icon-top tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
<i class="ion ion-game-controller-a"></i>
Fun
</a>
<a class="tab-item tab-item-danger">
<i class="icon-locked"></i>
<i class="ion ion-locked"></i>
Security
</a>
<a class="tab-item tab-item-danger">
<i class="icon-heart"></i>
<i class="ion ion-heart"></i>
Simple
</a>
<a class="tab-item tab-item-danger">
<i class="icon-leaf"></i>
<i class="ion ion-leaf"></i>
Light
</a>
<a class="tab-item tab-item-danger">
<i class="icon-waterdrop"></i>
<i class="ion ion-waterdrop"></i>
Clean
</a>
</nav>