mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
renamed .ion to .icon
This commit is contained in:
Adam Bradley
422
dist/css/ionic-ios7.css
vendored
422
dist/css/ionic-ios7.css
vendored
@@ -1887,215 +1887,12 @@ input[type="range"] {
|
||||
font-size: 16px;
|
||||
line-height: 41px;
|
||||
cursor: pointer; }
|
||||
.button .ion {
|
||||
.button .icon {
|
||||
display: inline-block;
|
||||
padding: 0 0 1px 0;
|
||||
vertical-align: inherit;
|
||||
font-size: 24px;
|
||||
line-height: 40px; }
|
||||
.button.button-icon {
|
||||
padding: 2px 4px;
|
||||
background: none; }
|
||||
.button.button-icon .icon {
|
||||
font-size: 32px; }
|
||||
.button.button-clear {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
padding: 6px;
|
||||
max-height: 42px;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-clear:active, .button.button-clear.active {
|
||||
opacity: 0.3; }
|
||||
.button.button-default {
|
||||
color: #333333;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.button.button-default:hover {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.button.button-default.active, .button.button-default:active {
|
||||
background-color: #fafafa;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #bbbbbb; }
|
||||
.button.button-default.button-clear {
|
||||
color: #dddddd;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-default.button-outline {
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
.button.button-default.button-outline.active, .button.button-default.button-outline:active {
|
||||
background-color: #dddddd;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-secondary {
|
||||
color: #333333;
|
||||
background-color: whitesmoke;
|
||||
border-color: #bbbbbb; }
|
||||
.button.button-secondary:hover {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.button.button-secondary.active, .button.button-secondary:active {
|
||||
background-color: #e5e5e5;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #999999; }
|
||||
.button.button-secondary.button-clear {
|
||||
color: #bbbbbb;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-secondary.button-outline {
|
||||
border-color: #bbbbbb;
|
||||
color: #333333; }
|
||||
.button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active {
|
||||
background-color: #bbbbbb;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-primary {
|
||||
color: white;
|
||||
background-color: #4a87ee;
|
||||
border-color: #3b6dc2; }
|
||||
.button.button-primary:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-primary.active, .button.button-primary:active {
|
||||
background-color: #4175ce;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #32599c; }
|
||||
.button.button-primary.button-clear {
|
||||
color: #4a87ee;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-primary.button-outline {
|
||||
border-color: #4a87ee;
|
||||
color: #4a87ee; }
|
||||
.button.button-primary.button-outline.active, .button.button-primary.button-outline:active {
|
||||
background-color: #4a87ee;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-info {
|
||||
color: white;
|
||||
background-color: #43cee6;
|
||||
border-color: #3bb3c8; }
|
||||
.button.button-info:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-info.active, .button.button-info:active {
|
||||
background-color: #3db8cd;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #3293a4; }
|
||||
.button.button-info.button-clear {
|
||||
color: #43cee6;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-info.button-outline {
|
||||
border-color: #43cee6;
|
||||
color: #43cee6; }
|
||||
.button.button-info.button-outline.active, .button.button-info.button-outline:active {
|
||||
background-color: #43cee6;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-success {
|
||||
color: white;
|
||||
background-color: #66cc33;
|
||||
border-color: #5bb22f; }
|
||||
.button.button-success:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-success.active, .button.button-success:active {
|
||||
background-color: #55aa2b;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #448922; }
|
||||
.button.button-success.button-clear {
|
||||
color: #66cc33;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-success.button-outline {
|
||||
border-color: #66cc33;
|
||||
color: #66cc33; }
|
||||
.button.button-success.button-outline.active, .button.button-success.button-outline:active {
|
||||
background-color: #66cc33;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-warning {
|
||||
color: white;
|
||||
background-color: #f0b840;
|
||||
border-color: #d29f31; }
|
||||
.button.button-warning:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-warning.active, .button.button-warning:active {
|
||||
background-color: #e2a114;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #b88517; }
|
||||
.button.button-warning.button-clear {
|
||||
color: #f0b840;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-warning.button-outline {
|
||||
border-color: #f0b840;
|
||||
color: #f0b840; }
|
||||
.button.button-warning.button-outline.active, .button.button-warning.button-outline:active {
|
||||
background-color: #f0b840;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-danger {
|
||||
color: white;
|
||||
background-color: #ef4e3a;
|
||||
border-color: #c73927; }
|
||||
.button.button-danger:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-danger.active, .button.button-danger:active {
|
||||
background-color: #ce4331;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #9f3527; }
|
||||
.button.button-danger.button-clear {
|
||||
color: #ef4e3a;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-danger.button-outline {
|
||||
border-color: #ef4e3a;
|
||||
color: #ef4e3a; }
|
||||
.button.button-danger.button-outline.active, .button.button-danger.button-outline:active {
|
||||
background-color: #ef4e3a;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-dark {
|
||||
color: white;
|
||||
background-color: #444444;
|
||||
border-color: #111111; }
|
||||
.button.button-dark:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-dark.active, .button.button-dark:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button.button-dark.button-clear {
|
||||
color: #444444;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-dark.button-outline {
|
||||
border-color: #444444;
|
||||
color: #444444; }
|
||||
.button.button-dark.button-outline.active, .button.button-dark.button-outline:active {
|
||||
background-color: #444444;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-outline {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-icon {
|
||||
border: none;
|
||||
background: none; }
|
||||
.button.button-icon:active, .button.button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
.button.block, .button.button-full {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
@@ -2106,7 +1903,7 @@ input[type="range"] {
|
||||
min-height: 28px;
|
||||
font-size: 12px;
|
||||
line-height: 27px; }
|
||||
.button-small .ion {
|
||||
.button-small .icon {
|
||||
font-size: 16px;
|
||||
line-height: 26px; }
|
||||
|
||||
@@ -2121,6 +1918,221 @@ input[type="range"] {
|
||||
line-height: 51px;
|
||||
padding-bottom: 2px; }
|
||||
|
||||
.button-icon {
|
||||
padding: 2px 4px;
|
||||
background: none; }
|
||||
.button-icon .icon {
|
||||
font-size: 32px; }
|
||||
|
||||
.button-clear {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
padding: 6px;
|
||||
max-height: 42px;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-clear:active, .button-clear.active {
|
||||
opacity: 0.3; }
|
||||
|
||||
.button-default {
|
||||
color: #333333;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.button-default:hover {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.button-default.active, .button-default:active {
|
||||
background-color: #fafafa;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #bbbbbb; }
|
||||
.button-default.button-clear {
|
||||
color: #dddddd;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-default.button-outline {
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
.button-default.button-outline.active, .button-default.button-outline:active {
|
||||
background-color: #dddddd;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-secondary {
|
||||
color: #333333;
|
||||
background-color: whitesmoke;
|
||||
border-color: #bbbbbb; }
|
||||
.button-secondary:hover {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.button-secondary.active, .button-secondary:active {
|
||||
background-color: #e5e5e5;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #999999; }
|
||||
.button-secondary.button-clear {
|
||||
color: #bbbbbb;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-secondary.button-outline {
|
||||
border-color: #bbbbbb;
|
||||
color: #333333; }
|
||||
.button-secondary.button-outline.active, .button-secondary.button-outline:active {
|
||||
background-color: #bbbbbb;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-primary {
|
||||
color: white;
|
||||
background-color: #4a87ee;
|
||||
border-color: #3b6dc2; }
|
||||
.button-primary:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button-primary.active, .button-primary:active {
|
||||
background-color: #4175ce;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #32599c; }
|
||||
.button-primary.button-clear {
|
||||
color: #4a87ee;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-primary.button-outline {
|
||||
border-color: #4a87ee;
|
||||
color: #4a87ee; }
|
||||
.button-primary.button-outline.active, .button-primary.button-outline:active {
|
||||
background-color: #4a87ee;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-info {
|
||||
color: white;
|
||||
background-color: #43cee6;
|
||||
border-color: #3bb3c8; }
|
||||
.button-info:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button-info.active, .button-info:active {
|
||||
background-color: #3db8cd;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #3293a4; }
|
||||
.button-info.button-clear {
|
||||
color: #43cee6;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-info.button-outline {
|
||||
border-color: #43cee6;
|
||||
color: #43cee6; }
|
||||
.button-info.button-outline.active, .button-info.button-outline:active {
|
||||
background-color: #43cee6;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-success {
|
||||
color: white;
|
||||
background-color: #66cc33;
|
||||
border-color: #5bb22f; }
|
||||
.button-success:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button-success.active, .button-success:active {
|
||||
background-color: #55aa2b;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #448922; }
|
||||
.button-success.button-clear {
|
||||
color: #66cc33;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-success.button-outline {
|
||||
border-color: #66cc33;
|
||||
color: #66cc33; }
|
||||
.button-success.button-outline.active, .button-success.button-outline:active {
|
||||
background-color: #66cc33;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-warning {
|
||||
color: white;
|
||||
background-color: #f0b840;
|
||||
border-color: #d29f31; }
|
||||
.button-warning:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button-warning.active, .button-warning:active {
|
||||
background-color: #e2a114;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #b88517; }
|
||||
.button-warning.button-clear {
|
||||
color: #f0b840;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-warning.button-outline {
|
||||
border-color: #f0b840;
|
||||
color: #f0b840; }
|
||||
.button-warning.button-outline.active, .button-warning.button-outline:active {
|
||||
background-color: #f0b840;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-danger {
|
||||
color: white;
|
||||
background-color: #ef4e3a;
|
||||
border-color: #c73927; }
|
||||
.button-danger:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button-danger.active, .button-danger:active {
|
||||
background-color: #ce4331;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #9f3527; }
|
||||
.button-danger.button-clear {
|
||||
color: #ef4e3a;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-danger.button-outline {
|
||||
border-color: #ef4e3a;
|
||||
color: #ef4e3a; }
|
||||
.button-danger.button-outline.active, .button-danger.button-outline:active {
|
||||
background-color: #ef4e3a;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-dark {
|
||||
color: white;
|
||||
background-color: #444444;
|
||||
border-color: #111111; }
|
||||
.button-dark:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button-dark.active, .button-dark:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button-dark.button-clear {
|
||||
color: #444444;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-dark.button-outline {
|
||||
border-color: #444444;
|
||||
color: #444444; }
|
||||
.button-dark.button-outline.active, .button-dark.button-outline:active {
|
||||
background-color: #444444;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-outline {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
|
||||
.button-icon {
|
||||
border: none;
|
||||
background: none; }
|
||||
.button-icon:active, .button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
|
||||
.padding > .button.block:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
1296
dist/css/ionic-scoped.css
vendored
1296
dist/css/ionic-scoped.css
vendored
File diff suppressed because it is too large
Load Diff
1308
dist/css/ionic.css
vendored
1308
dist/css/ionic.css
vendored
File diff suppressed because it is too large
Load Diff
@@ -109,7 +109,7 @@
|
||||
font-size: $button-bar-button-font-size;
|
||||
line-height: $button-bar-button-height - $button-border-width;
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
font-size: $button-bar-button-icon-size;
|
||||
line-height: $button-bar-button-height - $button-border-width - 1;
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
padding: 0 0 $button-border-width 0;
|
||||
vertical-align: inherit;
|
||||
@@ -34,85 +34,6 @@
|
||||
line-height: $button-height - $button-border-width - 1;
|
||||
}
|
||||
|
||||
&.button-icon {
|
||||
padding: 2px 4px;
|
||||
background: none;
|
||||
|
||||
.ion {
|
||||
font-size: $button-large-icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-clear {
|
||||
@include transition(opacity .1s);
|
||||
padding: $button-clear-padding;
|
||||
max-height: $button-height;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:active, &.active {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-default {
|
||||
@include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
|
||||
@include button-clear($button-default-border);
|
||||
@include button-outline($button-default-border, $gray-dark);
|
||||
}
|
||||
&.button-secondary {
|
||||
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
|
||||
@include button-clear($button-secondary-border);
|
||||
@include button-outline($button-secondary-border, $gray-dark);
|
||||
}
|
||||
&.button-primary {
|
||||
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
|
||||
@include button-clear($button-primary-bg);
|
||||
@include button-outline($button-primary-bg);
|
||||
}
|
||||
&.button-info {
|
||||
@include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
|
||||
@include button-clear($button-info-bg);
|
||||
@include button-outline($button-info-bg);
|
||||
}
|
||||
&.button-success {
|
||||
@include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
|
||||
@include button-clear($button-success-bg);
|
||||
@include button-outline($button-success-bg);
|
||||
}
|
||||
&.button-warning {
|
||||
@include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
|
||||
@include button-clear($button-warning-bg);
|
||||
@include button-outline($button-warning-bg);
|
||||
}
|
||||
&.button-danger {
|
||||
@include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
|
||||
@include button-clear($button-danger-bg);
|
||||
@include button-outline($button-danger-bg);
|
||||
}
|
||||
&.button-dark {
|
||||
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
|
||||
@include button-clear($button-dark-bg);
|
||||
@include button-outline($button-dark-bg);
|
||||
}
|
||||
|
||||
&.button-outline {
|
||||
@include transition(opacity .1s);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.button-icon {
|
||||
border: none;
|
||||
background: none;
|
||||
&:active, &.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.block, &.button-full {
|
||||
margin-top: $button-block-margin;
|
||||
margin-bottom: $button-block-margin;
|
||||
@@ -127,7 +48,7 @@
|
||||
font-size: $button-small-font-size;
|
||||
line-height: $button-small-height - $button-border-width;
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
font-size: $button-small-icon-size;
|
||||
line-height: $button-small-height - $button-border-width - 1;
|
||||
}
|
||||
@@ -140,13 +61,100 @@
|
||||
font-size: $button-large-font-size;
|
||||
line-height: $button-large-height - $button-border-width;
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
font-size: $button-large-icon-size;
|
||||
line-height: $button-large-height - ($button-border-width * 2) - 1;
|
||||
padding-bottom: ($button-border-width * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
padding: 2px 4px;
|
||||
background: none;
|
||||
|
||||
.icon {
|
||||
font-size: $button-large-icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.button-clear {
|
||||
@include transition(opacity .1s);
|
||||
padding: $button-clear-padding;
|
||||
max-height: $button-height;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:active, &.active {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.button-default {
|
||||
@include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
|
||||
@include button-clear($button-default-border);
|
||||
@include button-outline($button-default-border, $gray-dark);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
|
||||
@include button-clear($button-secondary-border);
|
||||
@include button-outline($button-secondary-border, $gray-dark);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
|
||||
@include button-clear($button-primary-bg);
|
||||
@include button-outline($button-primary-bg);
|
||||
}
|
||||
|
||||
.button-info {
|
||||
@include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
|
||||
@include button-clear($button-info-bg);
|
||||
@include button-outline($button-info-bg);
|
||||
}
|
||||
|
||||
.button-success {
|
||||
@include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
|
||||
@include button-clear($button-success-bg);
|
||||
@include button-outline($button-success-bg);
|
||||
}
|
||||
|
||||
.button-warning {
|
||||
@include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
|
||||
@include button-clear($button-warning-bg);
|
||||
@include button-outline($button-warning-bg);
|
||||
}
|
||||
|
||||
.button-danger {
|
||||
@include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
|
||||
@include button-clear($button-danger-bg);
|
||||
@include button-outline($button-danger-bg);
|
||||
}
|
||||
|
||||
.button-dark {
|
||||
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
|
||||
@include button-clear($button-dark-bg);
|
||||
@include button-outline($button-dark-bg);
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
@include transition(opacity .1s);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&:active, &.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.padding > .button.block:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -60,14 +60,7 @@ textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include flex(1, 0, 100px);
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
color: $input-label-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ion {
|
||||
.icon {
|
||||
@include flex(0, 0, 24px);
|
||||
position: static;
|
||||
height: auto;
|
||||
@@ -75,9 +68,18 @@ textarea {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.placeholder-icon {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include flex(1, 0, 100px);
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
color: $input-label-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-stacked-label {
|
||||
@@ -85,7 +87,7 @@ textarea {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.input-label, .ion {
|
||||
.input-label, .icon {
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -174,7 +174,7 @@ a.item {
|
||||
// List Icons
|
||||
// -------------------------------
|
||||
|
||||
.item .ion {
|
||||
.item .icon {
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
position: absolute;
|
||||
@@ -192,7 +192,7 @@ a.item {
|
||||
.item-icon-left {
|
||||
padding-left: ($item-padding * 3);
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
left: $item-padding / 2;
|
||||
}
|
||||
}
|
||||
@@ -204,14 +204,14 @@ a.item {
|
||||
}
|
||||
}
|
||||
|
||||
.item-icon-right .ion {
|
||||
.item-icon-right .icon {
|
||||
right: $item-padding / 2;
|
||||
}
|
||||
|
||||
.item-icon-left.item-icon-right .ion:first-child {
|
||||
.item-icon-left.item-icon-right .icon:first-child {
|
||||
right: auto;
|
||||
}
|
||||
.item-icon-left.item-icon-right .ion:last-child {
|
||||
.item-icon-left.item-icon-right .icon:last-child {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@@ -239,7 +239,7 @@ button.item:active,
|
||||
font-size: $item-icon-font-size;
|
||||
min-height: $item-icon-font-size;
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
position: relative;
|
||||
line-height: $item-icon-font-size - 1;
|
||||
left: auto;
|
||||
@@ -260,7 +260,7 @@ button.item:active,
|
||||
font-size: $item-icon-font-size;
|
||||
min-height: $item-icon-font-size;
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
position: relative;
|
||||
line-height: $item-icon-font-size - 1;
|
||||
left: auto;
|
||||
@@ -444,7 +444,7 @@ button.item-button-right:after {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
color: $brand-danger;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
line-height: $tabs-text-font-size;
|
||||
}
|
||||
|
||||
.tab-item .ion {
|
||||
.tab-item .icon {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: $tabs-icon-size;
|
||||
@@ -103,7 +103,8 @@
|
||||
.tabs-icon-left .tab-item,
|
||||
.tabs-icon-right .tab-item {
|
||||
font-size: $tabs-text-with-icon-font-size;
|
||||
.ion {
|
||||
|
||||
.icon {
|
||||
font-size: $tabs-icon-size - 8;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@@ -111,7 +112,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-icon-only .ion {
|
||||
.tabs-icon-only .icon {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@@ -148,7 +149,7 @@
|
||||
@include display-flex();
|
||||
padding: 0;
|
||||
|
||||
.ion {
|
||||
.icon {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,119 +30,119 @@
|
||||
|
||||
<h3>a.button default</h3>
|
||||
<p>
|
||||
<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-default"><i class="icon ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-info"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-success">.button-success</a>
|
||||
<a class="button button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||
<a class="button button-warning"><i class="icon ion-home"></i> .button-warning</a>
|
||||
<a class="button button-danger">.button-danger</a>
|
||||
<a class="button button-dark"><i class="ion ion-home"></i> .button-dark</a>
|
||||
<a class="button button-dark"><i class="icon ion-home"></i> .button-dark</a>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>button.button default</h3>
|
||||
<p>
|
||||
<button class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-default"><i class="icon ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-secondary">.button-secondary</button>
|
||||
<button class="button button-primary"><i class="ion ion-home"></i> .button-primary</button>
|
||||
<button class="button button-primary"><i class="icon ion-home"></i> .button-primary</button>
|
||||
<button class="button button-info">.button-info</button>
|
||||
<button class="button button-success"><i class="ion ion-home"></i></button>
|
||||
<button class="button button-success"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-warning">.button-warning</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>
|
||||
<button class="button button-danger"><i class="icon ion-home"></i> .button-danger</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 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-default"><i class="icon ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-large button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-large button-info"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-success">.button-success</a>
|
||||
<a class="button button-large button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||
<a class="button button-large button-warning"><i class="icon 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="ion ion-home"></i> .button-dark</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 button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-large button-default"><i class="icon 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="ion ion-home"></i> .button-primary</button>
|
||||
<button class="button button-large button-primary"><i class="icon 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="ion ion-home"></i></button>
|
||||
<button class="button button-large button-success"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-large button-warning">.button-warning</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>
|
||||
<button class="button button-large button-danger"><i class="icon ion-home"></i> .button-danger</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 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-default"><i class="icon ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-small button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-small button-info"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-success">.button-success</a>
|
||||
<a class="button button-small button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||
<a class="button button-small button-warning"><i class="icon 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="ion ion-home"></i> .button-dark</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 button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-small button-default"><i class="icon 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="ion ion-home"></i> .button-primary</button>
|
||||
<button class="button button-small button-primary"><i class="icon 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="ion ion-home"></i></button>
|
||||
<button class="button button-small button-success"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-small button-warning">.button-warning</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>
|
||||
<button class="button button-small button-danger"><i class="icon ion-home"></i> .button-danger</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 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-clear button-default"><i class="icon ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-clear button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-clear button-info"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-success">.button-success</a>
|
||||
<a class="button button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||
<a class="button button-warning"><i class="icon 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="ion ion-home"></i> .button-dark</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 button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-default"><i class="icon 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="ion ion-home"></i> .button-primary</button>
|
||||
<button class="button button-primary"><i class="icon 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="ion ion-home"></i></button>
|
||||
<button class="button button-clear button-success"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-clear button-warning">.button-warning</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>
|
||||
<button class="button button-clear button-danger"><i class="icon ion-home"></i> .button-danger</button>
|
||||
<button class="button button-dark"><i class="icon ion-home"></i></button>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>a.block (parent w/ padding)</h3>
|
||||
<p>
|
||||
<a class="button block button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button block button-default"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button block button-default"><i class="icon 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="ion ion-home"></i></a>
|
||||
<a class="button button-icon"><i class="icon ion-home"></i></a>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>button.button-icon (Borderless, 32px)</h3>
|
||||
<p>
|
||||
<button class="button button-icon"><i class="ion ion-home"></i></button>
|
||||
<button class="button button-icon"><i class="icon ion-home"></i></button>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>a.block.button-icon (Borderless, 32px)</h3>
|
||||
<p>
|
||||
<a class="button block button-icon"><i class="ion ion-home"></i></a>
|
||||
<a class="button block button-icon"><i class="icon ion-home"></i></a>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>button.block.button-icon (Borderless, 32px)</h3>
|
||||
<p>
|
||||
<button class="button block button-icon"><i class="ion ion-home"></i></button>
|
||||
<button class="button block button-icon"><i class="icon ion-home"></i></button>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>a.button-outline</h3>
|
||||
<p>
|
||||
<a class="button button-default button-outline"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-default button-outline"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-default button-outline"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-default button-outline block"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-default button-outline block"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-default button-clear"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-default button-clear"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-default button-clear block"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-default button-clear block"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button block button-default"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</a>
|
||||
<a class="button button-default"><i class="icon 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="ion ion-home"></i> MB.button-default|!PL</button>
|
||||
<button class="button button-full button-default"><i class="icon 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>
|
||||
|
||||
@@ -47,22 +47,22 @@
|
||||
<div class="list card">
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-home"></i>
|
||||
<i class="icon ion-home"></i>
|
||||
Enter home address
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-ios7-telephone"></i>
|
||||
<i class="icon ion-ios7-telephone"></i>
|
||||
Enter phone number
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-wifi"></i>
|
||||
<i class="icon ion-wifi"></i>
|
||||
Enter wireless password
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-card"></i>
|
||||
<i class="icon ion-card"></i>
|
||||
Enter card information
|
||||
</a>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-music-note"></i>
|
||||
<i class="icon 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="ion ion-thumbsup"></i>
|
||||
<i class="icon ion-thumbsup"></i>
|
||||
Like
|
||||
</a>
|
||||
<a class="tab-item" href="#">
|
||||
<i class="ion ion-chatbox"></i>
|
||||
<i class="icon ion-chatbox"></i>
|
||||
Comment
|
||||
</a>
|
||||
<a class="tab-item" href="#">
|
||||
<i class="ion ion-share"></i>
|
||||
<i class="icon ion-share"></i>
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<section id="content" class="pane menu-animated">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<a href="#" class="button"><i class="ion ion-reorder"></i></a>
|
||||
<a href="#" class="button"><i class="icon ion-reorder"></i></a>
|
||||
<h1 class="title">Tab Bars</h1>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -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="ion ion-home"></i> Home</a>
|
||||
<a class="button"><i class="icon ion-home"></i> Home</a>
|
||||
</header>
|
||||
|
||||
<div class="bar bar-header-secondary bar-success">
|
||||
<a class="button">
|
||||
<i class="ion ion-home"></i> Home
|
||||
<i class="icon 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="ion ion-home"></i> Home
|
||||
<i class="icon 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="ion ion-star"></i> Favorites
|
||||
<i class="icon ion-star"></i> Favorites
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="bar bar-header bar-default">
|
||||
<a class="button button-icon">
|
||||
<i class="ion ion-home"></i>
|
||||
<i class="icon 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="ion ion-home"></i>
|
||||
<i class="icon ion-home"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<header class="bar bar-header bar-default">
|
||||
<a class="button button-default">
|
||||
<i class="ion ion-home"></i>
|
||||
<i class="icon 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="ion ion-star"></i>
|
||||
<i class="icon ion-star"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -8,48 +8,35 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Ionic Tests</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Ionic Tests</h1>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<main class="content padding has-header">
|
||||
<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 class="content padding has-header">
|
||||
|
||||
<p><a class="button button-block button-default" href="alerts.html"><i class="icon ion-star"></i> Alerts</a></p>
|
||||
<p><a class="button button-block button-default" href="buttons.html"><i class="icon ion-star"></i> Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="button-bar.html"><i class="icon ion-star"></i> Button Bar</a></p>
|
||||
<p><a class="button button-block button-default" href="cards.html"><i class="icon ion-star"></i> Cards</a></p>
|
||||
<p><a class="button button-block button-default" href="footers.html"><i class="icon ion-star"></i> Footers</a></p>
|
||||
<p><a class="button button-block button-default" href="headers.html"><i class="icon ion-star"></i> Headers</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html"><i class="icon ion-star"></i> Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon ion-star"></i> Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon ion-star"></i> Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-range.html"><i class="icon ion-star"></i> Input: Range</a></p>
|
||||
<p><a class="button button-block button-default" href="input-select.html"><i class="icon ion-star"></i> Input: Select</a></p>
|
||||
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon ion-star"></i> Input: Checkbox</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon ion-star"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html"><i class="icon ion-star"></i> Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html"><i class="icon ion-star-empty"></i> Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html"><i class="icon ion-star-empty"></i> Popovers</a></p>
|
||||
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon ion-star-empty"></i> Pull To Refresh</a></p>
|
||||
<p><a class="button button-block button-default" href="side-menus.html"><i class="icon ion-star-empty"></i> Side Menus</a></p>
|
||||
<p><a class="button button-block button-default" href="swipe.html"><i class="icon ion-star-empty"></i> Swipe</a></p>
|
||||
<p><a class="button button-block button-default" href="tab-bars.html"><i class="icon ion-star-half-empty"></i> Tab Bars</a></p>
|
||||
<p><a class="button button-block button-default" href="type.html"><i class="icon ion-star"></i> Type</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// cache buster only for testing to make sure the page is always refreshed
|
||||
// for(var x=0; x<document.links.length; x++) {
|
||||
// document.links[x].href += "?r=" + Math.random();
|
||||
// }
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -107,12 +107,12 @@
|
||||
<h3>Label left of input, No Parent Content Padding</h3>
|
||||
<div class="list">
|
||||
<label class="item item-input">
|
||||
<i class="ion ion-person"></i>
|
||||
<i class="icon ion-person"></i>
|
||||
<span class="input-label">Username</span>
|
||||
<input type="text" placeholder="@drifty">
|
||||
</label>
|
||||
<label class="item item-input">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon 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="ion ion-search placeholder-icon"></i>
|
||||
<i class="icon 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="ion ion-star placeholder-icon"></i>
|
||||
<i class="icon 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="ion ion-email"></i>
|
||||
<i class="icon 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="ion ion-cloud"></i>
|
||||
<i class="icon 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="ion ion-headphone"></i>
|
||||
<i class="icon ion-headphone"></i>
|
||||
<span class="input-label">Favorite Music</span>
|
||||
<input type="text" placeholder="Bee Gees">
|
||||
</label>
|
||||
|
||||
@@ -30,12 +30,12 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-chatbubble-working"></i>
|
||||
<i class="icon ion-chatbubble-working"></i>
|
||||
Call Ma
|
||||
</a>
|
||||
|
||||
@@ -48,28 +48,28 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email ion-secondary"></i>
|
||||
<i class="icon 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="ion ion-chatbubble-working ion-primary"></i>
|
||||
<i class="icon ion-chatbubble-working ion-primary"></i>
|
||||
Call Ma
|
||||
<button class="button button-success">
|
||||
<i class="ion ion-ios7-telephone"></i>
|
||||
<i class="icon ion-ios7-telephone"></i>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-button-left">
|
||||
<button class="button button-success">
|
||||
<i class="ion ion-ios7-telephone"></i>
|
||||
<i class="icon ion-ios7-telephone"></i>
|
||||
</button>
|
||||
Me Button
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-mic-a ion-info"></i>
|
||||
<i class="icon 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="ion ion-flask ion-success"></i>
|
||||
<i class="icon 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="ion ion-game-controller-b ion-warning"></i>
|
||||
<i class="icon 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="ion ion-music-note ion-danger"></i>
|
||||
<i class="icon 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="ion ion-bag ion-dark"></i>
|
||||
<i class="icon 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="ion ion-person-stalker ion-warning fill-icon"></i>
|
||||
<i class="icon 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="ion ion-loading"></i>
|
||||
<i class="icon ion-loading"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -252,19 +252,19 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-heart brand-danger"></i>
|
||||
<i class="icon ion-heart brand-danger"></i>
|
||||
Madison, WI
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-image brand-warning"></i>
|
||||
<i class="icon ion-image brand-warning"></i>
|
||||
Driving Directions
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right">
|
||||
<i class="ion ion-ios7-cog gray"></i>
|
||||
<i class="icon ion-ios7-cog gray"></i>
|
||||
Settings
|
||||
<i class="ion ion-ios7-information-outline"></i>
|
||||
<i class="icon 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="ion ion-heart brand-danger fill-icon"></i>
|
||||
<i class="icon ion-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="ion ion-chevron-right"></i>
|
||||
<i class="icon 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="ion ion-image brand-warning fill-icon"></i>
|
||||
<i class="icon ion-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="ion ion-chevron-right"></i>
|
||||
<i class="icon 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="ion ion-ios7-cog gray fill-icon"></i>
|
||||
<i class="icon ion-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
<i class="ion ion-chevron-right"></i>
|
||||
<i class="icon ion-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -308,14 +308,14 @@
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="ion ion-heart brand-danger fill-icon"></i>
|
||||
<i class="icon 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="ion ion-image brand-warning fill-icon"></i>
|
||||
<i class="icon 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="ion ion-ios7-cog gray fill-icon"></i>
|
||||
<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="ion ion-chevron-right"></i>
|
||||
<i class="icon ion-chevron-right"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
|
||||
<i class="ion ion-ios7-cog gray fill-icon"></i>
|
||||
<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="ion ion-chevron-right"></i>
|
||||
<i class="icon 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="ion ion-ios7-cog gray fill-icon"></i>
|
||||
<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="ion ion-chevron-right"></i>
|
||||
<i class="icon 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="ion ion-ios7-cog gray fill-icon"></i>
|
||||
<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="ion ion-chevron-right"></i>
|
||||
<i class="icon ion-chevron-right"></i>
|
||||
</div>
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
|
||||
@@ -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="ion ion-reorder"></i>
|
||||
<i class="icon ion-reorder"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="title">Chats</h1>
|
||||
<div class="buttons">
|
||||
<button id="right-button" class="button button-dark">
|
||||
<i class="ion ion-cog"></i>
|
||||
<i class="icon 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="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon 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="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
104
test/menus.html
104
test/menus.html
@@ -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="ion ion-reorder"></i>
|
||||
<i class="icon 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="ion ion-cog"></i>
|
||||
<i class="icon 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="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon 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="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="ion ion-arrow-right"></i>
|
||||
<i class="icon ion-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@@ -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="ion ion-reorder"></i>
|
||||
<i class="icon ion-reorder"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="title">Chats</h1>
|
||||
<div class="buttons">
|
||||
<button id="right-button" class="button button-dark">
|
||||
<i class="ion ion-cog"></i>
|
||||
<i class="icon ion-cog"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -38,9 +38,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-box-pager">
|
||||
<span><i class="ion ion-record"></i></span>
|
||||
<span><i class="ion ion-record"></i></span>
|
||||
<span><i class="ion ion-record"></i></span>
|
||||
<span><i class="icon ion-record"></i></span>
|
||||
<span><i class="icon ion-record"></i></span>
|
||||
<span><i class="icon ion-record"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,127 +24,127 @@
|
||||
<h1>Left side</h1>
|
||||
<ul class="list">
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="ion ion-email"></i>
|
||||
<i class="icon ion-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
</ul>
|
||||
|
||||
@@ -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="ion ion-game-controller-a"></i>
|
||||
<i class="icon ion-game-controller-a"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Security
|
||||
<i class="ion ion-locked"></i>
|
||||
<i class="icon ion-locked"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Simple
|
||||
<i class="ion ion-heart"></i>
|
||||
<i class="icon ion-heart"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Light
|
||||
<i class="ion ion-leaf"></i>
|
||||
<i class="icon ion-leaf"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Clean
|
||||
<i class="ion ion-waterdrop"></i>
|
||||
<i class="icon ion-waterdrop"></i>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -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="ion ion-game-controller-a"></i>
|
||||
<i class="icon ion-game-controller-a"></i>
|
||||
Fun
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-locked"></i>
|
||||
<i class="icon ion-locked"></i>
|
||||
Security
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-heart"></i>
|
||||
<i class="icon ion-heart"></i>
|
||||
Simple
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-leaf"></i>
|
||||
<i class="icon ion-leaf"></i>
|
||||
Light
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-waterdrop"></i>
|
||||
<i class="icon ion-waterdrop"></i>
|
||||
Clean
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
@@ -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="ion ion-game-controller-a"></i>
|
||||
<i class="icon ion-game-controller-a"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Security
|
||||
<i class="ion ion-locked"></i>
|
||||
<i class="icon ion-locked"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Simple
|
||||
<i class="ion ion-heart"></i>
|
||||
<i class="icon ion-heart"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Light
|
||||
<i class="ion ion-leaf"></i>
|
||||
<i class="icon ion-leaf"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
Clean
|
||||
<i class="ion ion-waterdrop"></i>
|
||||
<i class="icon ion-waterdrop"></i>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -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="ion ion-game-controller-a"></i>
|
||||
<i class="icon ion-game-controller-a"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-locked"></i>
|
||||
<i class="icon ion-locked"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-heart"></i>
|
||||
<i class="icon ion-heart"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-leaf"></i>
|
||||
<i class="icon ion-leaf"></i>
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-waterdrop"></i>
|
||||
<i class="icon ion-waterdrop"></i>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -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="ion ion-game-controller-a"></i>
|
||||
<i class="icon ion-game-controller-a"></i>
|
||||
Fun
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-locked"></i>
|
||||
<i class="icon ion-locked"></i>
|
||||
Security
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-heart"></i>
|
||||
<i class="icon ion-heart"></i>
|
||||
Simple
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-leaf"></i>
|
||||
<i class="icon ion-leaf"></i>
|
||||
Light
|
||||
</a>
|
||||
<a class="tab-item tab-item-danger">
|
||||
<i class="ion ion-waterdrop"></i>
|
||||
<i class="icon ion-waterdrop"></i>
|
||||
Clean
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user