mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
.icon- renamed to .ion.ion-
This commit is contained in:
Adam Bradley
130
dist/css/ionic-ios7.css
vendored
130
dist/css/ionic-ios7.css
vendored
@ -647,11 +647,11 @@ a.subdued {
|
|||||||
color: inherit; }
|
color: inherit; }
|
||||||
.bar > .button {
|
.bar > .button {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 0 8px;
|
padding: 8px;
|
||||||
min-height: 31px;
|
min-height: 31px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 30px; }
|
line-height: 30px; }
|
||||||
.bar > .button i, .bar > .button .icon {
|
.bar > .button .ion {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 29px; }
|
line-height: 29px; }
|
||||||
.bar .button-bar > .button {
|
.bar .button-bar > .button {
|
||||||
@ -935,8 +935,7 @@ a.subdued {
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 14px; }
|
line-height: 14px; }
|
||||||
|
|
||||||
.tab-item i,
|
.tab-item .ion {
|
||||||
.tab-item .icon {
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
@ -945,16 +944,14 @@ a.subdued {
|
|||||||
.tabs-icon-left .tab-item,
|
.tabs-icon-left .tab-item,
|
||||||
.tabs-icon-right .tab-item {
|
.tabs-icon-right .tab-item {
|
||||||
font-size: 10px; }
|
font-size: 10px; }
|
||||||
.tabs-icon-left .tab-item i, .tabs-icon-left .tab-item .icon,
|
.tabs-icon-left .tab-item .ion,
|
||||||
.tabs-icon-right .tab-item i,
|
.tabs-icon-right .tab-item .ion {
|
||||||
.tabs-icon-right .tab-item .icon {
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
line-height: 49px; }
|
line-height: 49px; }
|
||||||
|
|
||||||
.tabs-icon-only i,
|
.tabs-icon-only .ion {
|
||||||
.tabs-icon-only .icon {
|
|
||||||
line-height: inherit; }
|
line-height: inherit; }
|
||||||
|
|
||||||
/* Navigational tab */
|
/* Navigational tab */
|
||||||
@ -983,7 +980,7 @@ a.subdued {
|
|||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0; }
|
padding: 0; }
|
||||||
.item.tabs i, .item.tabs .icon {
|
.item.tabs .ion {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
@ -1196,8 +1193,7 @@ a.item {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap; }
|
white-space: nowrap; }
|
||||||
|
|
||||||
.item i,
|
.item .ion {
|
||||||
.item .icon {
|
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -moz-flex;
|
display: -moz-flex;
|
||||||
@ -1220,7 +1216,7 @@ a.item {
|
|||||||
|
|
||||||
.item-icon-left {
|
.item-icon-left {
|
||||||
padding-left: 45px; }
|
padding-left: 45px; }
|
||||||
.item-icon-left i, .item-icon-left .icon {
|
.item-icon-left .ion {
|
||||||
left: 7.5px; }
|
left: 7.5px; }
|
||||||
|
|
||||||
.item-slider.item-icon-left {
|
.item-slider.item-icon-left {
|
||||||
@ -1228,16 +1224,13 @@ a.item {
|
|||||||
.item-slider.item-icon-left .item-content {
|
.item-slider.item-icon-left .item-content {
|
||||||
padding-left: 45px; }
|
padding-left: 45px; }
|
||||||
|
|
||||||
.item-icon-right i,
|
.item-icon-right .ion {
|
||||||
.item-icon-right .icon {
|
|
||||||
right: 7.5px; }
|
right: 7.5px; }
|
||||||
|
|
||||||
.item-icon-left.item-icon-right i:first-child,
|
.item-icon-left.item-icon-right .ion:first-child {
|
||||||
.item-icon-left.item-icon-right .icon:first-child {
|
|
||||||
right: auto; }
|
right: auto; }
|
||||||
|
|
||||||
.item-icon-left.item-icon-right i:last-child,
|
.item-icon-left.item-icon-right .ion:last-child {
|
||||||
.item-icon-left.item-icon-right .icon:last-child {
|
|
||||||
left: auto; }
|
left: auto; }
|
||||||
|
|
||||||
a.item:active,
|
a.item:active,
|
||||||
@ -1265,8 +1258,8 @@ button.item:active,
|
|||||||
left: 7.5px;
|
left: 7.5px;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
min-height: 32px; }
|
min-height: 32px; }
|
||||||
.item-button-left > .button i,
|
.item-button-left > .button .ion,
|
||||||
.item-button-left .item-content > .button i {
|
.item-button-left .item-content > .button .ion {
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 31px;
|
line-height: 31px;
|
||||||
left: auto; }
|
left: auto; }
|
||||||
@ -1291,8 +1284,8 @@ button.item:active,
|
|||||||
right: 15px;
|
right: 15px;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
min-height: 32px; }
|
min-height: 32px; }
|
||||||
.item-button-right > .button i,
|
.item-button-right > .button .ion,
|
||||||
.item-button-right .item-content > .button i {
|
.item-button-right .item-content > .button .ion {
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 31px;
|
line-height: 31px;
|
||||||
left: auto; }
|
left: auto; }
|
||||||
@ -1423,7 +1416,7 @@ button.item-button-right:after {
|
|||||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
||||||
.item-edit .button {
|
.item-edit .button {
|
||||||
height: 100%; }
|
height: 100%; }
|
||||||
.item-edit i, .item-edit .icon {
|
.item-edit .ion {
|
||||||
color: #ef4e3a;
|
color: #ef4e3a;
|
||||||
font-size: 24px; }
|
font-size: 24px; }
|
||||||
.item-edit.ng-enter {
|
.item-edit.ng-enter {
|
||||||
@ -1631,7 +1624,7 @@ textarea {
|
|||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: bold; }
|
font-weight: bold; }
|
||||||
.item-input i, .item-input .icon {
|
.item-input .ion {
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 24px;
|
-webkit-flex: 0 0 24px;
|
||||||
-moz-box-flex: 0;
|
-moz-box-flex: 0;
|
||||||
@ -1650,7 +1643,7 @@ textarea {
|
|||||||
display: block;
|
display: block;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
.item-stacked-label .input-label, .item-stacked-label [class^="icon-"], .item-stacked-label [class*=" icon-"] {
|
.item-stacked-label .input-label, .item-stacked-label .ion {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
vertical-align: middle; }
|
vertical-align: middle; }
|
||||||
@ -1887,8 +1880,8 @@ input[type="range"] {
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 12px;
|
padding: 1px 12px 0 12px;
|
||||||
padding-top: 1px;
|
min-width: 52px;
|
||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
@ -1900,7 +1893,7 @@ input[type="range"] {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 41px;
|
line-height: 41px;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
.button i, .button .icon {
|
.button .ion {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 0 1px 0;
|
padding: 0 0 1px 0;
|
||||||
vertical-align: inherit;
|
vertical-align: inherit;
|
||||||
@ -1909,12 +1902,12 @@ input[type="range"] {
|
|||||||
.button.button-icon {
|
.button.button-icon {
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
background: none; }
|
background: none; }
|
||||||
.button.button-icon i, .button.button-icon .icon {
|
.button.button-icon .ion {
|
||||||
font-size: 32px; }
|
font-size: 32px; }
|
||||||
.button.button-clear {
|
.button.button-clear {
|
||||||
-webkit-transition: opacity 0.1s;
|
-webkit-transition: opacity 0.1s;
|
||||||
transition: opacity 0.1s;
|
transition: opacity 0.1s;
|
||||||
padding: 0 6px;
|
padding: 6px;
|
||||||
max-height: 42px;
|
max-height: 42px;
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
@ -2115,21 +2108,24 @@ input[type="range"] {
|
|||||||
|
|
||||||
.button-small {
|
.button-small {
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
|
min-width: 28px;
|
||||||
min-height: 28px;
|
min-height: 28px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 27px; }
|
line-height: 27px; }
|
||||||
.button-small i, .button-small .icon {
|
.button-small .ion {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 26px; }
|
line-height: 26px; }
|
||||||
|
|
||||||
.button-large {
|
.button-large {
|
||||||
padding: 0 12px;
|
padding: 0 16px;
|
||||||
|
min-width: 66px;
|
||||||
min-height: 54px;
|
min-height: 54px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 53px; }
|
line-height: 53px; }
|
||||||
.button-large i, .button-large .icon {
|
.button-large .ion {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 52px; }
|
line-height: 51px;
|
||||||
|
padding-bottom: 2px; }
|
||||||
|
|
||||||
.padding > .button.block:first-child {
|
.padding > .button.block:first-child {
|
||||||
margin-top: 0; }
|
margin-top: 0; }
|
||||||
@ -2367,43 +2363,43 @@ a.button {
|
|||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
transform: rotate(360deg); } }
|
transform: rotate(360deg); } }
|
||||||
|
|
||||||
i.icon-default, .icon.icon-default {
|
.ion-default {
|
||||||
color: white; }
|
color: white; }
|
||||||
|
|
||||||
i.icon-secondary, .icon.icon-secondary {
|
.ion-secondary {
|
||||||
color: gainsboro; }
|
color: gainsboro; }
|
||||||
|
|
||||||
i.icon-primary, .icon.icon-primary {
|
.ion-primary {
|
||||||
color: #4a87ee; }
|
color: #4a87ee; }
|
||||||
|
|
||||||
i.icon-info, .icon.icon-info {
|
.ion-info {
|
||||||
color: #43cee6; }
|
color: #43cee6; }
|
||||||
|
|
||||||
i.icon-success, .icon.icon-success {
|
.ion-success {
|
||||||
color: #66cc33; }
|
color: #66cc33; }
|
||||||
|
|
||||||
i.icon-warning, .icon.icon-warning {
|
.ion-warning {
|
||||||
color: #f0b840; }
|
color: #f0b840; }
|
||||||
|
|
||||||
i.icon-danger, .icon.icon-danger {
|
.ion-danger {
|
||||||
color: #ef4e3a; }
|
color: #ef4e3a; }
|
||||||
|
|
||||||
i.icon-dark, .icon.icon-dark {
|
.ion-dark {
|
||||||
color: #444444; }
|
color: #444444; }
|
||||||
|
|
||||||
i.icon-gray-darker, .icon.icon-gray-darker {
|
.ion-gray-darker {
|
||||||
color: #222222; }
|
color: #222222; }
|
||||||
|
|
||||||
i.icon-gray-dark, .icon.icon-gray-dark {
|
.ion-gray-dark {
|
||||||
color: #333333; }
|
color: #333333; }
|
||||||
|
|
||||||
i.icon-gray, .icon.icon-gray {
|
.ion-gray {
|
||||||
color: #555555; }
|
color: #555555; }
|
||||||
|
|
||||||
i.icon-gray-light, .icon.icon-gray-light {
|
.ion-gray-light {
|
||||||
color: #999999; }
|
color: #999999; }
|
||||||
|
|
||||||
i.icon-gray-lighter, .icon.icon-gray-lighter {
|
.ion-gray-lighter {
|
||||||
color: #999999; }
|
color: #999999; }
|
||||||
|
|
||||||
.fill-icon {
|
.fill-icon {
|
||||||
@ -2413,35 +2409,35 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 1px; }
|
padding: 1px; }
|
||||||
.fill-icon.icon-default:before {
|
.fill-icon.ion-default:before {
|
||||||
background: white; }
|
background: white; }
|
||||||
.fill-icon.icon-secondary:before {
|
.fill-icon.ion-secondary:before {
|
||||||
background: whitesmoke; }
|
background: whitesmoke; }
|
||||||
.fill-icon.icon-primary:before {
|
.fill-icon.ion-primary:before {
|
||||||
background: #4a87ee; }
|
background: #4a87ee; }
|
||||||
.fill-icon.icon-info:before {
|
.fill-icon.ion-info:before {
|
||||||
background: #43cee6; }
|
background: #43cee6; }
|
||||||
.fill-icon.icon-success:before {
|
.fill-icon.ion-success:before {
|
||||||
background: #66cc33; }
|
background: #66cc33; }
|
||||||
.fill-icon.icon-warning:before {
|
.fill-icon.ion-warning:before {
|
||||||
background: #f0b840; }
|
background: #f0b840; }
|
||||||
.fill-icon.icon-danger:before {
|
.fill-icon.ion-danger:before {
|
||||||
background: #ef4e3a; }
|
background: #ef4e3a; }
|
||||||
.fill-icon.icon-dark:before {
|
.fill-icon.ion-dark:before {
|
||||||
background: #444444; }
|
background: #444444; }
|
||||||
.fill-icon.icon-gray-darker:before {
|
.fill-icon.ion-gray-darker:before {
|
||||||
background: #222222; }
|
background: #222222; }
|
||||||
.fill-icon.icon-gray-dark:before {
|
.fill-icon.ion-gray-dark:before {
|
||||||
background: #333333; }
|
background: #333333; }
|
||||||
.fill-icon.icon-gray:before {
|
.fill-icon.ion-gray:before {
|
||||||
background: #555555; }
|
background: #555555; }
|
||||||
.fill-icon.icon-gray-light:before {
|
.fill-icon.ion-gray-light:before {
|
||||||
background: #999999; }
|
background: #999999; }
|
||||||
.fill-icon.icon-gray-lighter:before {
|
.fill-icon.ion-gray-lighter:before {
|
||||||
background: #eeeeee; }
|
background: #eeeeee; }
|
||||||
|
|
||||||
.icon-loading {
|
.ion-loading {
|
||||||
font-family: 'ionicons';
|
font-family: 'Ionicons';
|
||||||
speak: none;
|
speak: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
@ -2452,11 +2448,11 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
|
|||||||
-webkit-animation: spin .75s linear infinite;
|
-webkit-animation: spin .75s linear infinite;
|
||||||
-moz-animation: spin .75s linear infinite;
|
-moz-animation: spin .75s linear infinite;
|
||||||
animation: spin .75s linear infinite; }
|
animation: spin .75s linear infinite; }
|
||||||
.icon-loading:before {
|
.ion-loading:before {
|
||||||
content: "\e144"; }
|
content: "\e144"; }
|
||||||
|
|
||||||
.icon-refreshing {
|
.ion-refreshing {
|
||||||
font-family: 'ionicons';
|
font-family: 'Ionicons';
|
||||||
speak: none;
|
speak: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
@ -2467,7 +2463,7 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
|
|||||||
-webkit-animation: spin .75s linear infinite;
|
-webkit-animation: spin .75s linear infinite;
|
||||||
-moz-animation: spin .75s linear infinite;
|
-moz-animation: spin .75s linear infinite;
|
||||||
animation: spin .75s linear infinite; }
|
animation: spin .75s linear infinite; }
|
||||||
.icon-refreshing:before {
|
.ion-refreshing:before {
|
||||||
content: "\e144"; }
|
content: "\e144"; }
|
||||||
|
|
||||||
.hidden,
|
.hidden,
|
||||||
|
|||||||
1020
dist/css/ionic-scoped.css
vendored
1020
dist/css/ionic-scoped.css
vendored
File diff suppressed because it is too large
Load Diff
1020
dist/css/ionic.css
vendored
1020
dist/css/ionic.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -108,7 +108,7 @@
|
|||||||
font-size: $button-bar-button-font-size;
|
font-size: $button-bar-button-font-size;
|
||||||
line-height: $button-bar-button-height - $button-border-width;
|
line-height: $button-bar-button-height - $button-border-width;
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
font-size: $button-bar-button-icon-size;
|
font-size: $button-bar-button-icon-size;
|
||||||
line-height: $button-bar-button-height - $button-border-width - 1;
|
line-height: $button-bar-button-height - $button-border-width - 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,14 @@
|
|||||||
|
|
||||||
|
// Buttons
|
||||||
|
// -------------------------------
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
padding: $button-padding;
|
padding: 1px $button-padding 0 $button-padding;
|
||||||
padding-top: 1px;
|
min-width: ($button-padding * 3) + $button-font-size;
|
||||||
min-height: $button-height;
|
min-height: $button-height;
|
||||||
|
|
||||||
border-width: $button-border-width;
|
border-width: $button-border-width;
|
||||||
@ -22,7 +26,7 @@
|
|||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 0 $button-border-width 0;
|
padding: 0 0 $button-border-width 0;
|
||||||
vertical-align: inherit;
|
vertical-align: inherit;
|
||||||
@ -34,7 +38,7 @@
|
|||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
font-size: $button-large-icon-size;
|
font-size: $button-large-icon-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -117,26 +121,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.button-small {
|
.button-small {
|
||||||
padding: $button-small-padding;
|
padding: 0 $button-small-padding;
|
||||||
|
min-width: $button-small-height;
|
||||||
min-height: $button-small-height;
|
min-height: $button-small-height;
|
||||||
font-size: $button-small-font-size;
|
font-size: $button-small-font-size;
|
||||||
line-height: $button-small-height - $button-border-width;
|
line-height: $button-small-height - $button-border-width;
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
font-size: $button-small-icon-size;
|
font-size: $button-small-icon-size;
|
||||||
line-height: $button-small-height - $button-border-width - 1;
|
line-height: $button-small-height - $button-border-width - 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-large {
|
.button-large {
|
||||||
padding: $button-large-padding;
|
padding: 0 $button-large-padding;
|
||||||
|
min-width: ($button-large-padding * 3) + $button-large-font-size;
|
||||||
min-height: $button-large-height;
|
min-height: $button-large-height;
|
||||||
font-size: $button-large-font-size;
|
font-size: $button-large-font-size;
|
||||||
line-height: $button-large-height - $button-border-width;
|
line-height: $button-large-height - $button-border-width;
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
font-size: $button-large-icon-size;
|
font-size: $button-large-icon-size;
|
||||||
line-height: $button-large-height - $button-border-width - 1;
|
line-height: $button-large-height - ($button-border-width * 2) - 1;
|
||||||
|
padding-bottom: ($button-border-width * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -67,7 +67,7 @@ textarea {
|
|||||||
color: $input-label-color;
|
color: $input-label-color;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
i, .icon {
|
.ion {
|
||||||
@include flex(0, 0, 24px);
|
@include flex(0, 0, 24px);
|
||||||
position: static;
|
position: static;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -85,7 +85,7 @@ textarea {
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
.input-label, [class^="icon-"], [class*=" icon-"] {
|
.input-label, .ion {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|||||||
@ -1,53 +1,56 @@
|
|||||||
|
|
||||||
i.icon-default, .icon.icon-default {
|
// Icons
|
||||||
|
// -------------------------------
|
||||||
|
|
||||||
|
.ion-default {
|
||||||
color: $brand-default;
|
color: $brand-default;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-secondary, .icon.icon-secondary {
|
.ion-secondary {
|
||||||
color: darken($brand-secondary, 10%);
|
color: darken($brand-secondary, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-primary, .icon.icon-primary {
|
.ion-primary {
|
||||||
color: $brand-primary;
|
color: $brand-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-info, .icon.icon-info {
|
.ion-info {
|
||||||
color: $brand-info;
|
color: $brand-info;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-success, .icon.icon-success {
|
.ion-success {
|
||||||
color: $brand-success;
|
color: $brand-success;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-warning, .icon.icon-warning {
|
.ion-warning {
|
||||||
color: $brand-warning;
|
color: $brand-warning;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-danger, .icon.icon-danger {
|
.ion-danger {
|
||||||
color: $brand-danger;
|
color: $brand-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-dark, .icon.icon-dark {
|
.ion-dark {
|
||||||
color: $brand-dark;
|
color: $brand-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-gray-darker, .icon.icon-gray-darker {
|
.ion-gray-darker {
|
||||||
color: $gray-darker;
|
color: $gray-darker;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-gray-dark, .icon.icon-gray-dark {
|
.ion-gray-dark {
|
||||||
color: $gray-dark;
|
color: $gray-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-gray, .icon.icon-gray {
|
.ion-gray {
|
||||||
color: $gray;
|
color: $gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-gray-light, .icon.icon-gray-light {
|
.ion-gray-light {
|
||||||
color: $gray-light;
|
color: $gray-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.icon-gray-lighter, .icon.icon-gray-lighter {
|
.ion-gray-lighter {
|
||||||
color: $gray-light;
|
color: $gray-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -61,51 +64,51 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
|
|||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.icon-default:before {
|
&.ion-default:before {
|
||||||
background: $brand-default;
|
background: $brand-default;
|
||||||
}
|
}
|
||||||
&.icon-secondary:before {
|
&.ion-secondary:before {
|
||||||
background: $brand-secondary;
|
background: $brand-secondary;
|
||||||
}
|
}
|
||||||
&.icon-primary:before {
|
&.ion-primary:before {
|
||||||
background: $brand-primary;
|
background: $brand-primary;
|
||||||
}
|
}
|
||||||
&.icon-info:before {
|
&.ion-info:before {
|
||||||
background: $brand-info;
|
background: $brand-info;
|
||||||
}
|
}
|
||||||
&.icon-success:before {
|
&.ion-success:before {
|
||||||
background: $brand-success;
|
background: $brand-success;
|
||||||
}
|
}
|
||||||
&.icon-warning:before {
|
&.ion-warning:before {
|
||||||
background: $brand-warning;
|
background: $brand-warning;
|
||||||
}
|
}
|
||||||
&.icon-danger:before {
|
&.ion-danger:before {
|
||||||
background: $brand-danger;
|
background: $brand-danger;
|
||||||
}
|
}
|
||||||
&.icon-dark:before {
|
&.ion-dark:before {
|
||||||
background: $brand-dark;
|
background: $brand-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.icon-gray-darker:before {
|
&.ion-gray-darker:before {
|
||||||
background: $gray-darker;
|
background: $gray-darker;
|
||||||
}
|
}
|
||||||
&.icon-gray-dark:before {
|
&.ion-gray-dark:before {
|
||||||
background: $gray-dark;
|
background: $gray-dark;
|
||||||
}
|
}
|
||||||
&.icon-gray:before {
|
&.ion-gray:before {
|
||||||
background: $gray;
|
background: $gray;
|
||||||
}
|
}
|
||||||
&.icon-gray-light:before {
|
&.ion-gray-light:before {
|
||||||
background: $gray-light;
|
background: $gray-light;
|
||||||
}
|
}
|
||||||
&.icon-gray-lighter:before {
|
&.ion-gray-lighter:before {
|
||||||
background: $gray-lighter;
|
background: $gray-lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-loading {
|
.ion-loading {
|
||||||
font-family: 'ionicons';
|
font-family: 'Ionicons';
|
||||||
speak: none;
|
speak: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
@ -123,8 +126,8 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-refreshing {
|
.ion-refreshing {
|
||||||
font-family: 'ionicons';
|
font-family: 'Ionicons';
|
||||||
speak: none;
|
speak: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
@ -140,4 +143,4 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
|
|||||||
&:before {
|
&:before {
|
||||||
content: "\e144";
|
content: "\e144";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -174,8 +174,7 @@ a.item {
|
|||||||
// List Icons
|
// List Icons
|
||||||
// -------------------------------
|
// -------------------------------
|
||||||
|
|
||||||
.item i,
|
.item .ion {
|
||||||
.item .icon {
|
|
||||||
@include display-flex();
|
@include display-flex();
|
||||||
@include align-items(center);
|
@include align-items(center);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -193,7 +192,7 @@ a.item {
|
|||||||
.item-icon-left {
|
.item-icon-left {
|
||||||
padding-left: ($item-padding * 3);
|
padding-left: ($item-padding * 3);
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
left: $item-padding / 2;
|
left: $item-padding / 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -205,17 +204,14 @@ a.item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-icon-right i,
|
.item-icon-right .ion {
|
||||||
.item-icon-right .icon {
|
|
||||||
right: $item-padding / 2;
|
right: $item-padding / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-icon-left.item-icon-right i:first-child,
|
.item-icon-left.item-icon-right .ion:first-child {
|
||||||
.item-icon-left.item-icon-right .icon:first-child {
|
|
||||||
right: auto;
|
right: auto;
|
||||||
}
|
}
|
||||||
.item-icon-left.item-icon-right i:last-child,
|
.item-icon-left.item-icon-right .ion:last-child {
|
||||||
.item-icon-left.item-icon-right .icon:last-child {
|
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -243,7 +239,7 @@ button.item:active,
|
|||||||
font-size: $item-icon-font-size;
|
font-size: $item-icon-font-size;
|
||||||
min-height: $item-icon-font-size;
|
min-height: $item-icon-font-size;
|
||||||
|
|
||||||
i {
|
.ion {
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: $item-icon-font-size - 1;
|
line-height: $item-icon-font-size - 1;
|
||||||
left: auto;
|
left: auto;
|
||||||
@ -264,7 +260,7 @@ button.item:active,
|
|||||||
font-size: $item-icon-font-size;
|
font-size: $item-icon-font-size;
|
||||||
min-height: $item-icon-font-size;
|
min-height: $item-icon-font-size;
|
||||||
|
|
||||||
i {
|
.ion {
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: $item-icon-font-size - 1;
|
line-height: $item-icon-font-size - 1;
|
||||||
left: auto;
|
left: auto;
|
||||||
@ -285,7 +281,7 @@ button.item:after {
|
|||||||
right: $item-padding - 4;
|
right: $item-padding - 4;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
content: "\e0fc"; // icon-chevron-right
|
content: "\e0fc"; // ion-chevron-right
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -448,7 +444,7 @@ button.item-button-right:after {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
color: $brand-danger;
|
color: $brand-danger;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -93,8 +93,7 @@
|
|||||||
line-height: $tabs-text-font-size;
|
line-height: $tabs-text-font-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item i,
|
.tab-item .ion {
|
||||||
.tab-item .icon {
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
height: $tabs-icon-size;
|
height: $tabs-icon-size;
|
||||||
@ -104,7 +103,7 @@
|
|||||||
.tabs-icon-left .tab-item,
|
.tabs-icon-left .tab-item,
|
||||||
.tabs-icon-right .tab-item {
|
.tabs-icon-right .tab-item {
|
||||||
font-size: $tabs-text-with-icon-font-size;
|
font-size: $tabs-text-with-icon-font-size;
|
||||||
i, .icon {
|
.ion {
|
||||||
font-size: $tabs-icon-size - 8;
|
font-size: $tabs-icon-size - 8;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
@ -112,8 +111,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs-icon-only i,
|
.tabs-icon-only .ion {
|
||||||
.tabs-icon-only .icon {
|
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -150,7 +148,7 @@
|
|||||||
@include display-flex();
|
@include display-flex();
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
i, .icon {
|
.ion {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -211,28 +211,28 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%);
|
|||||||
|
|
||||||
$button-color: #222;
|
$button-color: #222;
|
||||||
$button-block-margin: 10px !default;
|
$button-block-margin: 10px !default;
|
||||||
$button-clear-padding: 0 6px;
|
$button-clear-padding: 6px !default;
|
||||||
$button-border-radius: 2px;
|
$button-border-radius: 2px;
|
||||||
$button-border-width: 1px;
|
$button-border-width: 1px;
|
||||||
|
|
||||||
$button-font-size: 16px;
|
$button-font-size: 16px;
|
||||||
$button-height: 42px;
|
$button-height: 42px;
|
||||||
$button-padding: 0 12px;
|
$button-padding: 12px !default;
|
||||||
$button-icon-size: 24px;
|
$button-icon-size: 24px;
|
||||||
|
|
||||||
$button-large-font-size: 18px;
|
$button-large-font-size: 18px;
|
||||||
$button-large-height: 54px;
|
$button-large-height: 54px;
|
||||||
$button-large-padding: 0 12px;
|
$button-large-padding: 16px !default;
|
||||||
$button-large-icon-size: 32px;
|
$button-large-icon-size: 32px;
|
||||||
|
|
||||||
$button-small-font-size: 12px;
|
$button-small-font-size: 12px;
|
||||||
$button-small-height: 28px;
|
$button-small-height: 28px;
|
||||||
$button-small-padding: 0 4px;
|
$button-small-padding: 4px !default;
|
||||||
$button-small-icon-size: 16px;
|
$button-small-icon-size: 16px;
|
||||||
|
|
||||||
$button-bar-button-font-size: 12px;
|
$button-bar-button-font-size: 12px;
|
||||||
$button-bar-button-height: 31px !default;
|
$button-bar-button-height: 31px;
|
||||||
$button-bar-button-padding: 0 8px;
|
$button-bar-button-padding: 8px !default;
|
||||||
$button-bar-button-icon-size: 24px;
|
$button-bar-button-icon-size: 24px;
|
||||||
|
|
||||||
$button-default-bg: $brand-default;
|
$button-default-bg: $brand-default;
|
||||||
|
|||||||
@ -30,119 +30,119 @@
|
|||||||
|
|
||||||
<h3>a.button default</h3>
|
<h3>a.button default</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-secondary"><i class="icon-home"></i></a>
|
<a class="button button-secondary"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-primary"><i class="icon-home"></i> .button-primary</a>
|
<a class="button button-primary"><i class="ion ion-home"></i> .button-primary</a>
|
||||||
<a class="button button-info"><i class="icon-home"></i></a>
|
<a class="button button-info"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-success">.button-success</a>
|
<a class="button button-success">.button-success</a>
|
||||||
<a class="button button-warning"><i class="icon-home"></i> .button-warning</a>
|
<a class="button button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||||
<a class="button button-danger">.button-danger</a>
|
<a class="button button-danger">.button-danger</a>
|
||||||
<a class="button button-dark"><i class="icon-home"></i> .button-dark</a>
|
<a class="button button-dark"><i class="ion ion-home"></i> .button-dark</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>button.button default</h3>
|
<h3>button.button default</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-secondary">.button-secondary</button>
|
<button class="button button-secondary">.button-secondary</button>
|
||||||
<button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
|
<button class="button button-primary"><i class="ion ion-home"></i> .button-primary</button>
|
||||||
<button class="button button-info">.button-info</button>
|
<button class="button button-info">.button-info</button>
|
||||||
<button class="button button-success"><i class="icon-home"></i></button>
|
<button class="button button-success"><i class="ion ion-home"></i></button>
|
||||||
<button class="button button-warning">.button-warning</button>
|
<button class="button button-warning">.button-warning</button>
|
||||||
<button class="button button-danger"><i class="icon-home"></i> .button-danger</button>
|
<button class="button button-danger"><i class="ion ion-home"></i> .button-danger</button>
|
||||||
<button class="button button-dark"><i class="icon-home"></i></button>
|
<button class="button button-dark"><i class="ion ion-home"></i></button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>a.button.button-large default</h3>
|
<h3>a.button.button-large default</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-large button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-large button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-large button-secondary"><i class="icon-home"></i></a>
|
<a class="button button-large button-secondary"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-large button-primary"><i class="icon-home"></i> .button-primary</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="icon-home"></i></a>
|
<a class="button button-large button-info"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-large button-success">.button-success</a>
|
<a class="button button-large button-success">.button-success</a>
|
||||||
<a class="button button-large button-warning"><i class="icon-home"></i> .button-warning</a>
|
<a class="button button-large button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||||
<a class="button button-large button-danger">.button-danger</a>
|
<a class="button button-large button-danger">.button-danger</a>
|
||||||
<a class="button button-large button-dark"><i class="icon-home"></i> .button-dark</a>
|
<a class="button button-large button-dark"><i class="ion ion-home"></i> .button-dark</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>button.button. button-large default</h3>
|
<h3>button.button. button-large default</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-large button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-large button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-large button-secondary">.button-secondary</button>
|
<button class="button button-large button-secondary">.button-secondary</button>
|
||||||
<button class="button button-large button-primary"><i class="icon-home"></i> .button-primary</button>
|
<button class="button button-large button-primary"><i class="ion ion-home"></i> .button-primary</button>
|
||||||
<button class="button button-large button-info">.button-info</button>
|
<button class="button button-large button-info">.button-info</button>
|
||||||
<button class="button button-large button-success"><i class="icon-home"></i></button>
|
<button class="button button-large button-success"><i class="ion ion-home"></i></button>
|
||||||
<button class="button button-large button-warning">.button-warning</button>
|
<button class="button button-large button-warning">.button-warning</button>
|
||||||
<button class="button button-large button-danger"><i class="icon-home"></i> .button-danger</button>
|
<button class="button button-large button-danger"><i class="ion ion-home"></i> .button-danger</button>
|
||||||
<button class="button button-large button-dark"><i class="icon-home"></i></button>
|
<button class="button button-large button-dark"><i class="ion ion-home"></i></button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>a.button.button-small default</h3>
|
<h3>a.button.button-small default</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-small button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-small button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-small button-secondary"><i class="icon-home"></i></a>
|
<a class="button button-small button-secondary"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-small button-primary"><i class="icon-home"></i> .button-primary</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="icon-home"></i></a>
|
<a class="button button-small button-info"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-small button-success">.button-success</a>
|
<a class="button button-small button-success">.button-success</a>
|
||||||
<a class="button button-small button-warning"><i class="icon-home"></i> .button-warning</a>
|
<a class="button button-small button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||||
<a class="button button-small button-danger">.button-danger</a>
|
<a class="button button-small button-danger">.button-danger</a>
|
||||||
<a class="button button-small button-dark"><i class="icon-home"></i> .button-dark</a>
|
<a class="button button-small button-dark"><i class="ion ion-home"></i> .button-dark</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>button.button.button-small</h3>
|
<h3>button.button.button-small</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-small button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-small button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-small button-secondary">.button-secondary</button>
|
<button class="button button-small button-secondary">.button-secondary</button>
|
||||||
<button class="button button-small button-primary"><i class="icon-home"></i> .button-primary</button>
|
<button class="button button-small button-primary"><i class="ion ion-home"></i> .button-primary</button>
|
||||||
<button class="button button-small button-info">.button-info</button>
|
<button class="button button-small button-info">.button-info</button>
|
||||||
<button class="button button-small button-success"><i class="icon-home"></i></button>
|
<button class="button button-small button-success"><i class="ion ion-home"></i></button>
|
||||||
<button class="button button-small button-warning">.button-warning</button>
|
<button class="button button-small button-warning">.button-warning</button>
|
||||||
<button class="button button-small button-danger"><i class="icon-home"></i> .button-danger</button>
|
<button class="button button-small button-danger"><i class="ion ion-home"></i> .button-danger</button>
|
||||||
<button class="button button-small button-dark"><i class="icon-home"></i></button>
|
<button class="button button-small button-dark"><i class="ion ion-home"></i></button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>a.button.button-clear (Mixed in with others)</h3>
|
<h3>a.button.button-clear (Mixed in with others)</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-clear button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-clear button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-secondary"><i class="icon-home"></i></a>
|
<a class="button button-secondary"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-clear button-primary"><i class="icon-home"></i> .button-primary</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="icon-home"></i></a>
|
<a class="button button-clear button-info"><i class="ion ion-home"></i></a>
|
||||||
<a class="button button-success">.button-success</a>
|
<a class="button button-success">.button-success</a>
|
||||||
<a class="button button-warning"><i class="icon-home"></i> .button-warning</a>
|
<a class="button button-warning"><i class="ion ion-home"></i> .button-warning</a>
|
||||||
<a class="button button-clear button-danger">.button-danger</a>
|
<a class="button button-clear button-danger">.button-danger</a>
|
||||||
<a class="button button-clear button-dark"><i class="icon-home"></i> .button-dark</a>
|
<a class="button button-clear button-dark"><i class="ion ion-home"></i> .button-dark</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>button.button.button-clear default</h3>
|
<h3>button.button.button-clear default</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-clear button-secondary">.button-secondary</button>
|
<button class="button button-clear button-secondary">.button-secondary</button>
|
||||||
<button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
|
<button class="button button-primary"><i class="ion ion-home"></i> .button-primary</button>
|
||||||
<button class="button button-clear button-info">.button-info</button>
|
<button class="button button-clear button-info">.button-info</button>
|
||||||
<button class="button button-clear button-success"><i class="icon-home"></i></button>
|
<button class="button button-clear button-success"><i class="ion ion-home"></i></button>
|
||||||
<button class="button button-clear button-warning">.button-warning</button>
|
<button class="button button-clear button-warning">.button-warning</button>
|
||||||
<button class="button button-clear button-danger"><i class="icon-home"></i> .button-danger</button>
|
<button class="button button-clear button-danger"><i class="ion ion-home"></i> .button-danger</button>
|
||||||
<button class="button button-dark"><i class="icon-home"></i></button>
|
<button class="button button-dark"><i class="ion ion-home"></i></button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>a.block (parent w/ padding)</h3>
|
<h3>a.block (parent w/ padding)</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button block button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button block button-secondary">.button-secondary</a>
|
<a class="button block button-secondary">.button-secondary</a>
|
||||||
<a class="button block button-primary">.button-primary</a>
|
<a class="button block button-primary">.button-primary</a>
|
||||||
<a class="button block button-info">.button-info</a>
|
<a class="button block button-info">.button-info</a>
|
||||||
@ -156,7 +156,7 @@
|
|||||||
|
|
||||||
<h3>button.block (parent w/ padding)</h3>
|
<h3>button.block (parent w/ padding)</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button block button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button block button-secondary">.button-secondary</button>
|
<button class="button block button-secondary">.button-secondary</button>
|
||||||
<button class="button block button-primary">.button-primary</button>
|
<button class="button block button-primary">.button-primary</button>
|
||||||
<button class="button block button-info">.button-info</button>
|
<button class="button block button-info">.button-info</button>
|
||||||
@ -170,35 +170,35 @@
|
|||||||
|
|
||||||
<h3>a.button-icon (Borderless, 32px)</h3>
|
<h3>a.button-icon (Borderless, 32px)</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-icon"><i class="icon-home"></i></a>
|
<a class="button button-icon"><i class="ion ion-home"></i></a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>button.button-icon (Borderless, 32px)</h3>
|
<h3>button.button-icon (Borderless, 32px)</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-icon"><i class="icon-home"></i></button>
|
<button class="button button-icon"><i class="ion ion-home"></i></button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>a.block.button-icon (Borderless, 32px)</h3>
|
<h3>a.block.button-icon (Borderless, 32px)</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button block button-icon"><i class="icon-home"></i></a>
|
<a class="button block button-icon"><i class="ion ion-home"></i></a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>button.block.button-icon (Borderless, 32px)</h3>
|
<h3>button.block.button-icon (Borderless, 32px)</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button block button-icon"><i class="icon-home"></i></button>
|
<button class="button block button-icon"><i class="ion ion-home"></i></button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3>a.button-outline</h3>
|
<h3>a.button-outline</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-default button-outline"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-default button-outline"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-secondary button-outline">.button-secondary</a>
|
<a class="button button-secondary button-outline">.button-secondary</a>
|
||||||
<a class="button button-primary button-outline">.button-primary</a>
|
<a class="button button-primary button-outline">.button-primary</a>
|
||||||
<a class="button button-info button-outline">.button-info</a>
|
<a class="button button-info button-outline">.button-info</a>
|
||||||
@ -212,7 +212,7 @@
|
|||||||
|
|
||||||
<h3>button.button-outline</h3>
|
<h3>button.button-outline</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-default button-outline"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-default button-outline"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-secondary button-outline">.button-secondary</button>
|
<button class="button button-secondary button-outline">.button-secondary</button>
|
||||||
<button class="button button-primary button-outline">.button-primary</button>
|
<button class="button button-primary button-outline">.button-primary</button>
|
||||||
<button class="button button-info button-outline">.button-info</button>
|
<button class="button button-info button-outline">.button-info</button>
|
||||||
@ -226,7 +226,7 @@
|
|||||||
|
|
||||||
<h3>a.block.button-outline (parent w/ padding)</h3>
|
<h3>a.block.button-outline (parent w/ padding)</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-default button-outline block"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-default button-outline block"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-secondary button-outline block">.button-secondary</a>
|
<a class="button button-secondary button-outline block">.button-secondary</a>
|
||||||
<a class="button button-primary button-outline block">.button-primary</a>
|
<a class="button button-primary button-outline block">.button-primary</a>
|
||||||
<a class="button button-info button-outline block">.button-info</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>
|
<h3>button.block.button-outline (parent w/ padding)</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-default button-outline block"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-default button-outline block"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-secondary button-outline block">.button-secondary</button>
|
<button class="button button-secondary button-outline block">.button-secondary</button>
|
||||||
<button class="button button-primary button-outline block">.button-primary</button>
|
<button class="button button-primary button-outline block">.button-primary</button>
|
||||||
<button class="button button-info button-outline block">.button-info</button>
|
<button class="button button-info button-outline block">.button-info</button>
|
||||||
@ -254,7 +254,7 @@
|
|||||||
|
|
||||||
<h3>a.button-clear</h3>
|
<h3>a.button-clear</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-default button-clear"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-default button-clear"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-secondary button-clear">.button-secondary</a>
|
<a class="button button-secondary button-clear">.button-secondary</a>
|
||||||
<a class="button button-primary button-clear">.button-primary</a>
|
<a class="button button-primary button-clear">.button-primary</a>
|
||||||
<a class="button button-info button-clear">.button-info</a>
|
<a class="button button-info button-clear">.button-info</a>
|
||||||
@ -268,7 +268,7 @@
|
|||||||
|
|
||||||
<h3>button.button-clear</h3>
|
<h3>button.button-clear</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-default button-clear"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-default button-clear"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-secondary button-clear">.button-secondary</button>
|
<button class="button button-secondary button-clear">.button-secondary</button>
|
||||||
<button class="button button-primary button-clear">.button-primary</button>
|
<button class="button button-primary button-clear">.button-primary</button>
|
||||||
<button class="button button-info button-clear">.button-info</button>
|
<button class="button button-info button-clear">.button-info</button>
|
||||||
@ -282,7 +282,7 @@
|
|||||||
|
|
||||||
<h3>a.block.button-clear (parent w/ padding)</h3>
|
<h3>a.block.button-clear (parent w/ padding)</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button button-default button-clear block"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-default button-clear block"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-secondary button-clear block">.button-secondary</a>
|
<a class="button button-secondary button-clear block">.button-secondary</a>
|
||||||
<a class="button button-primary button-clear block">.button-primary</a>
|
<a class="button button-primary button-clear block">.button-primary</a>
|
||||||
<a class="button button-info button-clear block">.button-info</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>
|
<h3>button.block.button-clear (parent w/ padding)</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-default button-clear block"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-default button-clear block"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-secondary button-clear block">.button-secondary</button>
|
<button class="button button-secondary button-clear block">.button-secondary</button>
|
||||||
<button class="button button-primary button-clear block">.button-primary</button>
|
<button class="button button-primary button-clear block">.button-primary</button>
|
||||||
<button class="button button-info button-clear block">.button-info</button>
|
<button class="button button-info button-clear block">.button-info</button>
|
||||||
@ -312,7 +312,7 @@
|
|||||||
|
|
||||||
<h3>a.block (parent w/out padding)</h3>
|
<h3>a.block (parent w/out padding)</h3>
|
||||||
<p>
|
<p>
|
||||||
<a class="button block button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button block button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button block button-secondary">.button-secondary</a>
|
<a class="button block button-secondary">.button-secondary</a>
|
||||||
<a class="button block button-primary">.button-primary</a>
|
<a class="button block button-primary">.button-primary</a>
|
||||||
<a class="button block button-info">.button-info</a>
|
<a class="button block button-info">.button-info</a>
|
||||||
@ -326,7 +326,7 @@
|
|||||||
|
|
||||||
<h3>a.block (.button-full on the parent)</h3>
|
<h3>a.block (.button-full on the parent)</h3>
|
||||||
<p class="button-full">
|
<p class="button-full">
|
||||||
<a class="button button-default"><i class="icon-home"></i> MB.button-default|!PL</a>
|
<a class="button button-default"><i class="ion ion-home"></i> MB.button-default|!PL</a>
|
||||||
<a class="button button-secondary">.button-secondary</a>
|
<a class="button button-secondary">.button-secondary</a>
|
||||||
<a class="button button-primary">.button-primary</a>
|
<a class="button button-primary">.button-primary</a>
|
||||||
<a class="button button-info">.button-info</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>
|
<h3>button.block.button-full on each button and nothing on the parent</h3>
|
||||||
<p>
|
<p>
|
||||||
<button class="button button-full button-default"><i class="icon-home"></i> MB.button-default|!PL</button>
|
<button class="button button-full button-default"><i class="ion ion-home"></i> MB.button-default|!PL</button>
|
||||||
<button class="button button-full button-secondary">.button-secondary</button>
|
<button class="button button-full button-secondary">.button-secondary</button>
|
||||||
<button class="button button-full button-primary">.button-primary</button>
|
<button class="button button-full button-primary">.button-primary</button>
|
||||||
<button class="button button-full button-info">.button-info</button>
|
<button class="button button-full button-info">.button-info</button>
|
||||||
|
|||||||
@ -47,22 +47,22 @@
|
|||||||
<div class="list card">
|
<div class="list card">
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-home"></i>
|
<i class="ion ion-home"></i>
|
||||||
Enter home address
|
Enter home address
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-ios7-telephone"></i>
|
<i class="ion ion-ios7-telephone"></i>
|
||||||
Enter phone number
|
Enter phone number
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-wifi"></i>
|
<i class="ion ion-wifi"></i>
|
||||||
Enter wireless password
|
Enter wireless password
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-card"></i>
|
<i class="ion ion-card"></i>
|
||||||
Enter card information
|
Enter card information
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@ -81,7 +81,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-music-note"></i>
|
<i class="ion ion-music-note"></i>
|
||||||
Start listening
|
Start listening
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@ -122,15 +122,15 @@
|
|||||||
|
|
||||||
<div class="item tabs tabs-secondary tabs-icon-left">
|
<div class="item tabs tabs-secondary tabs-icon-left">
|
||||||
<a class="tab-item" href="#">
|
<a class="tab-item" href="#">
|
||||||
<i class="icon-thumbsup"></i>
|
<i class="ion ion-thumbsup"></i>
|
||||||
Like
|
Like
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item" href="#">
|
<a class="tab-item" href="#">
|
||||||
<i class="icon-chatbox"></i>
|
<i class="ion ion-chatbox"></i>
|
||||||
Comment
|
Comment
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item" href="#">
|
<a class="tab-item" href="#">
|
||||||
<i class="icon-share"></i>
|
<i class="ion ion-share"></i>
|
||||||
Share
|
Share
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<section id="content" class="full-section menu-animated">
|
<section id="content" class="full-section menu-animated">
|
||||||
|
|
||||||
<header class="bar bar-header bar-dark">
|
<header class="bar bar-header bar-dark">
|
||||||
<a href="#" class="button"><i class="icon-reorder"></i></a>
|
<a href="#" class="button"><i class="ion ion-reorder"></i></a>
|
||||||
<h1 class="title">Tab Bars</h1>
|
<h1 class="title">Tab Bars</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@ -21,12 +21,12 @@
|
|||||||
<header class="bar bar-header bar-dark">
|
<header class="bar bar-header bar-dark">
|
||||||
<a class="button">Back</a>
|
<a class="button">Back</a>
|
||||||
<h1 class="title">Really really really really really really really really long title!</h1>
|
<h1 class="title">Really really really really really really really really long title!</h1>
|
||||||
<a class="button"><i class="icon-home"></i> Home</a>
|
<a class="button"><i class="ion ion-home"></i> Home</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="bar bar-header-secondary bar-success">
|
<div class="bar bar-header-secondary bar-success">
|
||||||
<a class="button">
|
<a class="button">
|
||||||
<i class="icon-home"></i> Home
|
<i class="ion ion-home"></i> Home
|
||||||
</a>
|
</a>
|
||||||
<div class="button-bar">
|
<div class="button-bar">
|
||||||
<a class="button">Success</a>
|
<a class="button">Success</a>
|
||||||
@ -40,7 +40,7 @@
|
|||||||
|
|
||||||
<header class="bar bar-header bar-default">
|
<header class="bar bar-header bar-default">
|
||||||
<a class="button button-default">
|
<a class="button button-default">
|
||||||
<i class="icon-home"></i> Home
|
<i class="ion ion-home"></i> Home
|
||||||
</a>
|
</a>
|
||||||
<div class="button-bar">
|
<div class="button-bar">
|
||||||
<a class="button">Success</a>
|
<a class="button">Success</a>
|
||||||
@ -48,13 +48,13 @@
|
|||||||
<a class="button">Danger</a>
|
<a class="button">Danger</a>
|
||||||
</div>
|
</div>
|
||||||
<a class="button">
|
<a class="button">
|
||||||
<i class="icon-star"></i> Favorites
|
<i class="ion ion-star"></i> Favorites
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="bar bar-header bar-default">
|
<div class="bar bar-header bar-default">
|
||||||
<a class="button button-icon">
|
<a class="button button-icon">
|
||||||
<i class="icon-home"></i>
|
<i class="ion ion-home"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="button-bar">
|
<div class="button-bar">
|
||||||
<a href="#" class="button button-clear">Edit</a>
|
<a href="#" class="button button-clear">Edit</a>
|
||||||
@ -62,13 +62,13 @@
|
|||||||
<a href="#" class="button button-clear">Delete</a>
|
<a href="#" class="button button-clear">Delete</a>
|
||||||
</div>
|
</div>
|
||||||
<a class="button button-icon">
|
<a class="button button-icon">
|
||||||
<i class="icon-home"></i>
|
<i class="ion ion-home"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<header class="bar bar-header bar-default">
|
<header class="bar bar-header bar-default">
|
||||||
<a class="button button-default">
|
<a class="button button-default">
|
||||||
<i class="icon-home"></i>
|
<i class="ion ion-home"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="button-bar">
|
<div class="button-bar">
|
||||||
<a class="button">Success</a>
|
<a class="button">Success</a>
|
||||||
@ -76,7 +76,7 @@
|
|||||||
<a class="button">Danger</a>
|
<a class="button">Danger</a>
|
||||||
</div>
|
</div>
|
||||||
<a class="button">
|
<a class="button">
|
||||||
<i class="icon-star"></i>
|
<i class="ion ion-star"></i>
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@ -17,27 +17,27 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
|
|
||||||
<main class="content padding has-header">
|
<main class="content padding has-header">
|
||||||
<p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
|
<p><a class="button button-block button-default" href="alerts.html"><i class="ion ion-star"></i> Alerts</a></p>
|
||||||
<p><a class="button button-block button-default" href="buttons.html"><i class="icon-star"></i> Buttons</a></p>
|
<p><a class="button button-block button-default" href="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="icon-star"></i> Button Bar</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="icon-star"></i> Cards</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="icon-star"></i> Footers</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="icon-star"></i> Headers</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="icon-star"></i> Input: Text (single-line)</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="icon-star"></i> Input: Text (multi-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="icon-star"></i> Input: Radio Buttons</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="icon-star"></i> Input: Range</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="icon-star"></i> Input: Select</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="icon-star"></i> Input: Checkbox</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="icon-star"></i> Input: Toggle</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="icon-star"></i> Lists</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="icon-star-empty"></i> Modals</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="icon-star-empty"></i> Popovers</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="icon-star-empty"></i> Pull To Refresh</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="icon-star-empty"></i> Side Menus</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="icon-star-empty"></i> Swipe</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="icon-star-half-empty"></i> Tab Bars</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="icon-star"></i> Type</a></p>
|
<p><a class="button button-block button-default" href="type.html"><i class="ion ion-star"></i> Type</a></p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
Go
|
Go
|
||||||
</div>
|
</div>
|
||||||
<i class="radio-icon icon-checkmark"></i>
|
<i class="radio-icon ico ion-checkmark"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="item item-radio">
|
<label class="item item-radio">
|
||||||
@ -30,7 +30,7 @@
|
|||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
Python
|
Python
|
||||||
</div>
|
</div>
|
||||||
<i class="radio-icon icon-checkmark"></i>
|
<i class="radio-icon ico ion-checkmark"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="item item-radio">
|
<label class="item item-radio">
|
||||||
@ -38,7 +38,7 @@
|
|||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
Ruby
|
Ruby
|
||||||
</div>
|
</div>
|
||||||
<i class="radio-icon icon-checkmark"></i>
|
<i class="radio-icon ico ion-checkmark"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="item item-radio">
|
<label class="item item-radio">
|
||||||
@ -46,7 +46,7 @@
|
|||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
.Net
|
.Net
|
||||||
</div>
|
</div>
|
||||||
<i class="radio-icon icon-checkmark"></i>
|
<i class="radio-icon ico ion-checkmark"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="item item-radio">
|
<label class="item item-radio">
|
||||||
@ -54,7 +54,7 @@
|
|||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
Java
|
Java
|
||||||
</div>
|
</div>
|
||||||
<i class="radio-icon icon-checkmark"></i>
|
<i class="radio-icon ico ion-checkmark"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="item item-radio">
|
<label class="item item-radio">
|
||||||
@ -62,7 +62,7 @@
|
|||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
PHP
|
PHP
|
||||||
</div>
|
</div>
|
||||||
<i class="radio-icon icon-checkmark"></i>
|
<i class="radio-icon ico ion-checkmark"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -107,12 +107,12 @@
|
|||||||
<h3>Label left of input, No Parent Content Padding</h3>
|
<h3>Label left of input, No Parent Content Padding</h3>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<label class="item item-input">
|
<label class="item item-input">
|
||||||
<i class="icon-person"></i>
|
<i class="ion ion-person"></i>
|
||||||
<span class="input-label">Username</span>
|
<span class="input-label">Username</span>
|
||||||
<input type="text" placeholder="@drifty">
|
<input type="text" placeholder="@drifty">
|
||||||
</label>
|
</label>
|
||||||
<label class="item item-input">
|
<label class="item item-input">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
<span class="input-label">Email</span>
|
<span class="input-label">Email</span>
|
||||||
<input type="email" placeholder="your@email.com">
|
<input type="email" placeholder="your@email.com">
|
||||||
</label>
|
</label>
|
||||||
@ -212,7 +212,7 @@
|
|||||||
<h3>Default Text Input, No Parent Content Padding</h3>
|
<h3>Default Text Input, No Parent Content Padding</h3>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<label class="item item-input">
|
<label class="item item-input">
|
||||||
<i class="icon-search placeholder-icon"></i>
|
<i class="ion ion-search placeholder-icon"></i>
|
||||||
<input type="search" placeholder="Search">
|
<input type="search" placeholder="Search">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -220,7 +220,7 @@
|
|||||||
<h3>Default Text Input, list-inset, No Parent Content Padding</h3>
|
<h3>Default Text Input, list-inset, No Parent Content Padding</h3>
|
||||||
<div class="list list-inset">
|
<div class="list list-inset">
|
||||||
<label class="item item-input">
|
<label class="item item-input">
|
||||||
<i class="icon-star placeholder-icon"></i>
|
<i class="ion ion-star placeholder-icon"></i>
|
||||||
<input type="text" placeholder="Favorites">
|
<input type="text" placeholder="Favorites">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -229,7 +229,7 @@
|
|||||||
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
|
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<label class="item item-input item-stacked-label">
|
<label class="item item-input item-stacked-label">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
<span class="input-label">Email</span>
|
<span class="input-label">Email</span>
|
||||||
<input type="text" placeholder="your@email.com">
|
<input type="text" placeholder="your@email.com">
|
||||||
</label>
|
</label>
|
||||||
@ -240,7 +240,7 @@
|
|||||||
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
|
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<label class="item item-input item-stacked-label">
|
<label class="item item-input item-stacked-label">
|
||||||
<i class="icon-cloud"></i>
|
<i class="ion ion-cloud"></i>
|
||||||
<span class="input-label">SaaS</span>
|
<span class="input-label">SaaS</span>
|
||||||
<input type="text" placeholder="Codiqa">
|
<input type="text" placeholder="Codiqa">
|
||||||
</label>
|
</label>
|
||||||
@ -249,7 +249,7 @@
|
|||||||
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
|
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
|
||||||
<div class="list list-inset">
|
<div class="list list-inset">
|
||||||
<label class="item item-input item-stacked-label">
|
<label class="item item-input item-stacked-label">
|
||||||
<i class="icon-headphone"></i>
|
<i class="ion ion-headphone"></i>
|
||||||
<span class="input-label">Favorite Music</span>
|
<span class="input-label">Favorite Music</span>
|
||||||
<input type="text" placeholder="Bee Gees">
|
<input type="text" placeholder="Bee Gees">
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@ -30,12 +30,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-chatbubble-working"></i>
|
<i class="ion ion-chatbubble-working"></i>
|
||||||
Call Ma
|
Call Ma
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@ -48,28 +48,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email icon-secondary"></i>
|
<i class="ion ion-email ion-secondary"></i>
|
||||||
Check mail
|
Check mail
|
||||||
<span class="badge badge-info">5</span>
|
<span class="badge badge-info">5</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left item-button-right">
|
<a href="#" class="item item-icon-left item-button-right">
|
||||||
<i class="icon-chatbubble-working icon-primary"></i>
|
<i class="ion ion-chatbubble-working ion-primary"></i>
|
||||||
Call Ma
|
Call Ma
|
||||||
<button class="button button-success">
|
<button class="button button-success">
|
||||||
<i class="icon-ios7-telephone"></i>
|
<i class="ion ion-ios7-telephone"></i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-button-left">
|
<a href="#" class="item item-button-left">
|
||||||
<button class="button button-success">
|
<button class="button button-success">
|
||||||
<i class="icon-ios7-telephone"></i>
|
<i class="ion ion-ios7-telephone"></i>
|
||||||
</button>
|
</button>
|
||||||
Me Button
|
Me Button
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-mic-a icon-info"></i>
|
<i class="ion ion-mic-a ion-info"></i>
|
||||||
Record album
|
Record album
|
||||||
<span class="item-note">
|
<span class="item-note">
|
||||||
Grammy
|
Grammy
|
||||||
@ -77,7 +77,7 @@
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-flask icon-success"></i>
|
<i class="ion ion-flask ion-success"></i>
|
||||||
Breaking Bad
|
Breaking Bad
|
||||||
<span class="item-note">
|
<span class="item-note">
|
||||||
Blue, yellow, pink
|
Blue, yellow, pink
|
||||||
@ -89,7 +89,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-game-controller-b icon-warning"></i>
|
<i class="ion ion-game-controller-b ion-warning"></i>
|
||||||
Games
|
Games
|
||||||
<span class="item-note">
|
<span class="item-note">
|
||||||
Super Mario
|
Super Mario
|
||||||
@ -97,7 +97,7 @@
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-music-note icon-danger"></i>
|
<i class="ion ion-music-note ion-danger"></i>
|
||||||
Music
|
Music
|
||||||
<span class="item-note">
|
<span class="item-note">
|
||||||
JT
|
JT
|
||||||
@ -105,7 +105,7 @@
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-bag icon-dark"></i>
|
<i class="ion ion-bag ion-dark"></i>
|
||||||
Shopping
|
Shopping
|
||||||
<span class="item-note">
|
<span class="item-note">
|
||||||
Bag
|
Bag
|
||||||
@ -113,7 +113,7 @@
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-person-stalker icon-warning fill-icon"></i>
|
<i class="ion ion-person-stalker ion-warning fill-icon"></i>
|
||||||
Friends
|
Friends
|
||||||
<span class="badge badge-danger">0</span>
|
<span class="badge badge-danger">0</span>
|
||||||
</a>
|
</a>
|
||||||
@ -139,7 +139,7 @@
|
|||||||
<a href="#" class="item item-icon-right">
|
<a href="#" class="item item-icon-right">
|
||||||
<div class="item-content slide-right">
|
<div class="item-content slide-right">
|
||||||
Processing Icon
|
Processing Icon
|
||||||
<i class="icon-loading"></i>
|
<i class="ion ion-loading"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@ -252,19 +252,19 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-heart brand-danger"></i>
|
<i class="ion ion-heart brand-danger"></i>
|
||||||
Madison, WI
|
Madison, WI
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-image brand-warning"></i>
|
<i class="ion ion-image brand-warning"></i>
|
||||||
Driving Directions
|
Driving Directions
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right">
|
<a href="#" class="item item-icon-left item-icon-right">
|
||||||
<i class="icon-ios7-cog gray"></i>
|
<i class="ion ion-ios7-cog gray"></i>
|
||||||
Settings
|
Settings
|
||||||
<i class="icon-ios7-information-outline"></i>
|
<i class="ion ion-ios7-information-outline"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -273,17 +273,17 @@
|
|||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<i class="icon-heart brand-danger fill-icon"></i>
|
<i class="ion ion-heart brand-danger fill-icon"></i>
|
||||||
Madison, WI
|
Madison, WI
|
||||||
<i class="icon-chevron-right"></i>
|
<i class="ion ion-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||||
<div class="item-content slide-left">
|
<div class="item-content slide-left">
|
||||||
<i class="icon-image brand-warning fill-icon"></i>
|
<i class="ion ion-image brand-warning fill-icon"></i>
|
||||||
Driving Directions
|
Driving Directions
|
||||||
<i class="icon-chevron-right"></i>
|
<i class="ion ion-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-options">
|
<div class="item-options">
|
||||||
<button class="button">Button</button>
|
<button class="button">Button</button>
|
||||||
@ -292,9 +292,9 @@
|
|||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||||
<div class="item-content slide-right">
|
<div class="item-content slide-right">
|
||||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
<i class="ion ion-ios7-cog gray fill-icon"></i>
|
||||||
Settings
|
Settings
|
||||||
<i class="icon-chevron-right"></i>
|
<i class="ion ion-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@ -308,14 +308,14 @@
|
|||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<i class="icon-heart brand-danger fill-icon"></i>
|
<i class="ion ion-heart brand-danger fill-icon"></i>
|
||||||
Icon is filled!!
|
Icon is filled!!
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<i class="icon-image brand-warning fill-icon"></i>
|
<i class="ion ion-image brand-warning fill-icon"></i>
|
||||||
.fill-icon
|
.fill-icon
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
@ -325,28 +325,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right">
|
<a href="#" class="item item-icon-left item-icon-right">
|
||||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
<i class="ion ion-ios7-cog gray fill-icon"></i>
|
||||||
Default has no wrap! This is a list item with really really really really really
|
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
|
really really really really long long long long long long
|
||||||
text text text texxxxxttt text testy text!!!
|
text text text texxxxxttt text testy text!!!
|
||||||
<i class="icon-chevron-right"></i>
|
<i class="ion ion-chevron-right"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
|
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
|
||||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
<i class="ion ion-ios7-cog gray fill-icon"></i>
|
||||||
Assigned "item-text-wrap". This is a list item with really really really really really
|
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
|
really really really really long long long long long long
|
||||||
text text text texxxxxttt text testy text!!!
|
text text text texxxxxttt text testy text!!!
|
||||||
<i class="icon-chevron-right"></i>
|
<i class="ion ion-chevron-right"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||||
<div class="item-content slide-left slide-right">
|
<div class="item-content slide-left slide-right">
|
||||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
<i class="ion ion-ios7-cog gray fill-icon"></i>
|
||||||
Default no wrap and has item-content! This is a list item with really really really really really
|
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
|
really really really really long long long long long long
|
||||||
text text text texxxxxttt text testy text!!!
|
text text text texxxxxttt text testy text!!!
|
||||||
<i class="icon-chevron-right"></i>
|
<i class="ion ion-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-options">
|
<div class="item-options">
|
||||||
<button class="button">Button</button>
|
<button class="button">Button</button>
|
||||||
@ -355,11 +355,11 @@
|
|||||||
|
|
||||||
<a href="#" class="item item-icon-left item-icon-right item-text-wrap item-slider">
|
<a href="#" class="item item-icon-left item-icon-right item-text-wrap item-slider">
|
||||||
<div class="item-content slide-left slide-right">
|
<div class="item-content slide-left slide-right">
|
||||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
<i class="ion ion-ios7-cog gray fill-icon"></i>
|
||||||
Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
|
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
|
really really really really long long long long long long
|
||||||
text text text texxxxxttt text testy text!!!
|
text text text texxxxxttt text testy text!!!
|
||||||
<i class="icon-chevron-right"></i>
|
<i class="ion ion-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-options">
|
<div class="item-options">
|
||||||
<button class="button">Button</button>
|
<button class="button">Button</button>
|
||||||
|
|||||||
@ -14,13 +14,13 @@
|
|||||||
<header class="bar bar-header bar-dark">
|
<header class="bar bar-header bar-dark">
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<a id="left-button" class="button button-dark" href="#">
|
<a id="left-button" class="button button-dark" href="#">
|
||||||
<i class="icon-reorder"></i>
|
<i class="ion ion-reorder"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="title">Chats</h1>
|
<h1 class="title">Chats</h1>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button id="right-button" class="button button-dark">
|
<button id="right-button" class="button button-dark">
|
||||||
<i class="icon-cog"></i>
|
<i class="ion ion-cog"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@ -65,103 +65,103 @@
|
|||||||
<li class="list-divider">Left Nav Things</li>
|
<li class="list-divider">Left Nav Things</li>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Sasafras
|
Sasafras
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
@ -171,103 +171,103 @@
|
|||||||
<li class="list-divider">Left Nav Things</li>
|
<li class="list-divider">Left Nav Things</li>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Sasafras
|
Sasafras
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
104
test/menus.html
104
test/menus.html
@ -14,11 +14,11 @@
|
|||||||
|
|
||||||
<header class="bar bar-header bar-dark">
|
<header class="bar bar-header bar-dark">
|
||||||
<button class="button button-borderless button-transparent " data-panel-toggle="my-left-panel">
|
<button class="button button-borderless button-transparent " data-panel-toggle="my-left-panel">
|
||||||
<i class="icon-reorder"></i>
|
<i class="ion ion-reorder"></i>
|
||||||
</button>
|
</button>
|
||||||
<h1 class="title">Panels</h1>
|
<h1 class="title">Panels</h1>
|
||||||
<button class="button button-borderless button-transparent " data-panel-toggle="my-right-panel" data-panel-direction="right">
|
<button class="button button-borderless button-transparent " data-panel-toggle="my-right-panel" data-panel-direction="right">
|
||||||
<i class="icon-cog"></i>
|
<i class="ion ion-cog"></i>
|
||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@ -39,103 +39,103 @@
|
|||||||
<li class="list-divider">Left Nav Things</li>
|
<li class="list-divider">Left Nav Things</li>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Sasafras
|
Sasafras
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
@ -145,103 +145,103 @@
|
|||||||
<li class="list-divider">Right Nav Things</li>
|
<li class="list-divider">Right Nav Things</li>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Sasafras
|
Sasafras
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Candy
|
Candy
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-item">
|
<a href="#" class="list-item">
|
||||||
Cheese cords
|
Cheese cords
|
||||||
<i class="icon-arrow-right"></i>
|
<i class="ion ion-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -13,13 +13,13 @@
|
|||||||
<header class="bar bar-header bar-dark">
|
<header class="bar bar-header bar-dark">
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<a id="left-button" class="button button-dark" href="#">
|
<a id="left-button" class="button button-dark" href="#">
|
||||||
<i class="icon-reorder"></i>
|
<i class="ion ion-reorder"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="title">Chats</h1>
|
<h1 class="title">Chats</h1>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button id="right-button" class="button button-dark">
|
<button id="right-button" class="button button-dark">
|
||||||
<i class="icon-cog"></i>
|
<i class="ion ion-cog"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -38,9 +38,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide-box-pager">
|
<div class="slide-box-pager">
|
||||||
<span><i class="icon-record"></i></span>
|
<span><i class="ion ion-record"></i></span>
|
||||||
<span><i class="icon-record"></i></span>
|
<span><i class="ion ion-record"></i></span>
|
||||||
<span><i class="icon-record"></i></span>
|
<span><i class="ion ion-record"></i></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -24,127 +24,127 @@
|
|||||||
<h1>Left side</h1>
|
<h1>Left side</h1>
|
||||||
<ul class="list">
|
<ul class="list">
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="item item-icon-left">
|
<a href="#" class="item item-icon-left">
|
||||||
<i class="icon-email"></i>
|
<i class="ion ion-email"></i>
|
||||||
Check mail
|
Check mail
|
||||||
</a>
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -31,23 +31,23 @@
|
|||||||
<nav id="tab-bar" class="tabs tabs-icon-bottom tabs-default">
|
<nav id="tab-bar" class="tabs tabs-icon-bottom tabs-default">
|
||||||
<a class="tab-item tab-item-danger" href="#">
|
<a class="tab-item tab-item-danger" href="#">
|
||||||
Fun
|
Fun
|
||||||
<i class="icon-game-controller-a"></i>
|
<i class="ion ion-game-controller-a"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Security
|
Security
|
||||||
<i class="icon-locked"></i>
|
<i class="ion ion-locked"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Simple
|
Simple
|
||||||
<i class="icon-heart"></i>
|
<i class="ion ion-heart"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Light
|
Light
|
||||||
<i class="icon-leaf"></i>
|
<i class="ion ion-leaf"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Clean
|
Clean
|
||||||
<i class="icon-waterdrop"></i>
|
<i class="ion ion-waterdrop"></i>
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
@ -30,23 +30,23 @@
|
|||||||
|
|
||||||
<nav id="tab-bar" class="tabs tabs-icon-left tabs-default">
|
<nav id="tab-bar" class="tabs tabs-icon-left tabs-default">
|
||||||
<a class="tab-item tab-item-danger" href="#">
|
<a class="tab-item tab-item-danger" href="#">
|
||||||
<i class="icon-game-controller-a"></i>
|
<i class="ion ion-game-controller-a"></i>
|
||||||
Fun
|
Fun
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-locked"></i>
|
<i class="ion ion-locked"></i>
|
||||||
Security
|
Security
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-heart"></i>
|
<i class="ion ion-heart"></i>
|
||||||
Simple
|
Simple
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-leaf"></i>
|
<i class="ion ion-leaf"></i>
|
||||||
Light
|
Light
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-waterdrop"></i>
|
<i class="ion ion-waterdrop"></i>
|
||||||
Clean
|
Clean
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -31,23 +31,23 @@
|
|||||||
<nav id="tab-bar" class="tabs tabs-icon-right tabs-default">
|
<nav id="tab-bar" class="tabs tabs-icon-right tabs-default">
|
||||||
<a class="tab-item tab-item-danger" href="#">
|
<a class="tab-item tab-item-danger" href="#">
|
||||||
Fun
|
Fun
|
||||||
<i class="icon-game-controller-a"></i>
|
<i class="ion ion-game-controller-a"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Security
|
Security
|
||||||
<i class="icon-locked"></i>
|
<i class="ion ion-locked"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Simple
|
Simple
|
||||||
<i class="icon-heart"></i>
|
<i class="ion ion-heart"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Light
|
Light
|
||||||
<i class="icon-leaf"></i>
|
<i class="ion ion-leaf"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
Clean
|
Clean
|
||||||
<i class="icon-waterdrop"></i>
|
<i class="ion ion-waterdrop"></i>
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
@ -30,19 +30,19 @@
|
|||||||
|
|
||||||
<nav id="tab-bar" class="tabs tabs-icon-only tabs-default">
|
<nav id="tab-bar" class="tabs tabs-icon-only tabs-default">
|
||||||
<a class="tab-item tab-item-danger" href="#">
|
<a class="tab-item tab-item-danger" href="#">
|
||||||
<i class="icon-game-controller-a"></i>
|
<i class="ion ion-game-controller-a"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-locked"></i>
|
<i class="ion ion-locked"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-heart"></i>
|
<i class="ion ion-heart"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-leaf"></i>
|
<i class="ion ion-leaf"></i>
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-waterdrop"></i>
|
<i class="ion ion-waterdrop"></i>
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
@ -30,23 +30,23 @@
|
|||||||
|
|
||||||
<nav id="tab-bar" class="tabs tabs-icon-top tabs-default">
|
<nav id="tab-bar" class="tabs tabs-icon-top tabs-default">
|
||||||
<a class="tab-item tab-item-danger" href="#">
|
<a class="tab-item tab-item-danger" href="#">
|
||||||
<i class="icon-game-controller-a"></i>
|
<i class="ion ion-game-controller-a"></i>
|
||||||
Fun
|
Fun
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-locked"></i>
|
<i class="ion ion-locked"></i>
|
||||||
Security
|
Security
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-heart"></i>
|
<i class="ion ion-heart"></i>
|
||||||
Simple
|
Simple
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-leaf"></i>
|
<i class="ion ion-leaf"></i>
|
||||||
Light
|
Light
|
||||||
</a>
|
</a>
|
||||||
<a class="tab-item tab-item-danger">
|
<a class="tab-item tab-item-danger">
|
||||||
<i class="icon-waterdrop"></i>
|
<i class="ion ion-waterdrop"></i>
|
||||||
Clean
|
Clean
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Reference in New Issue
Block a user