mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
icon colors
This commit is contained in:
Adam Bradley
80
dist/css/ionic-ios7.css
vendored
80
dist/css/ionic-ios7.css
vendored
@@ -1214,7 +1214,9 @@ a.item {
|
||||
font-size: 32px; }
|
||||
|
||||
.item .fill-icon {
|
||||
font-size: 28px; }
|
||||
font-size: 28px;
|
||||
min-width: 30px;
|
||||
min-height: 30px; }
|
||||
|
||||
.item-icon-left {
|
||||
padding-left: 45px; }
|
||||
@@ -1329,12 +1331,18 @@ button.item-icon-right:after {
|
||||
.item-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
min-height: 30px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.item-note {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
.item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
|
||||
@@ -1440,11 +1448,6 @@ button.item-icon-right:after {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
|
||||
.item-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
/*
|
||||
A card and list-inset are close to the same thing, except a card as a box shadow.
|
||||
*/
|
||||
@@ -2368,6 +2371,45 @@ a.button {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
i.icon-default, .icon.icon-default {
|
||||
color: white; }
|
||||
|
||||
i.icon-secondary, .icon.icon-secondary {
|
||||
color: gainsboro; }
|
||||
|
||||
i.icon-primary, .icon.icon-primary {
|
||||
color: #4a87ee; }
|
||||
|
||||
i.icon-info, .icon.icon-info {
|
||||
color: #43cee6; }
|
||||
|
||||
i.icon-success, .icon.icon-success {
|
||||
color: #66cc33; }
|
||||
|
||||
i.icon-warning, .icon.icon-warning {
|
||||
color: #f0b840; }
|
||||
|
||||
i.icon-danger, .icon.icon-danger {
|
||||
color: #ef4e3a; }
|
||||
|
||||
i.icon-dark, .icon.icon-dark {
|
||||
color: #444444; }
|
||||
|
||||
i.icon-gray-darker, .icon.icon-gray-darker {
|
||||
color: #222222; }
|
||||
|
||||
i.icon-gray-dark, .icon.icon-gray-dark {
|
||||
color: #333333; }
|
||||
|
||||
i.icon-gray, .icon.icon-gray {
|
||||
color: #555555; }
|
||||
|
||||
i.icon-gray-light, .icon.icon-gray-light {
|
||||
color: #999999; }
|
||||
|
||||
i.icon-gray-lighter, .icon.icon-gray-lighter {
|
||||
color: #999999; }
|
||||
|
||||
.fill-icon {
|
||||
color: white !important; }
|
||||
.fill-icon:before {
|
||||
@@ -2375,31 +2417,31 @@ a.button {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
padding: 1px; }
|
||||
.fill-icon.brand-default:before {
|
||||
.fill-icon.icon-default:before {
|
||||
background: white; }
|
||||
.fill-icon.brand-secondary:before {
|
||||
.fill-icon.icon-secondary:before {
|
||||
background: whitesmoke; }
|
||||
.fill-icon.brand-primary:before {
|
||||
.fill-icon.icon-primary:before {
|
||||
background: #4a87ee; }
|
||||
.fill-icon.brand-info:before {
|
||||
.fill-icon.icon-info:before {
|
||||
background: #43cee6; }
|
||||
.fill-icon.brand-success:before {
|
||||
.fill-icon.icon-success:before {
|
||||
background: #66cc33; }
|
||||
.fill-icon.brand-warning:before {
|
||||
.fill-icon.icon-warning:before {
|
||||
background: #f0b840; }
|
||||
.fill-icon.brand-danger:before {
|
||||
.fill-icon.icon-danger:before {
|
||||
background: #ef4e3a; }
|
||||
.fill-icon.brand-dark:before {
|
||||
.fill-icon.icon-dark:before {
|
||||
background: #444444; }
|
||||
.fill-icon.gray-darker:before {
|
||||
.fill-icon.icon-gray-darker:before {
|
||||
background: #222222; }
|
||||
.fill-icon.gray-dark:before {
|
||||
.fill-icon.icon-gray-dark:before {
|
||||
background: #333333; }
|
||||
.fill-icon.gray:before {
|
||||
.fill-icon.icon-gray:before {
|
||||
background: #555555; }
|
||||
.fill-icon.gray-light:before {
|
||||
.fill-icon.icon-gray-light:before {
|
||||
background: #999999; }
|
||||
.fill-icon.gray-lighter:before {
|
||||
.fill-icon.icon-gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
|
||||
.icon-loading {
|
||||
|
||||
65
dist/css/ionic-scoped.css
vendored
65
dist/css/ionic-scoped.css
vendored
@@ -2101,7 +2101,9 @@
|
||||
height: 100%;
|
||||
font-size: 32px; }
|
||||
.ionic .item .fill-icon {
|
||||
font-size: 28px; }
|
||||
font-size: 28px;
|
||||
min-width: 30px;
|
||||
min-height: 30px; }
|
||||
.ionic .item-icon-left {
|
||||
padding-left: 45px; }
|
||||
.ionic .item-icon-left i, .ionic .item-icon-left .icon {
|
||||
@@ -2202,11 +2204,16 @@
|
||||
.ionic .item-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
min-height: 30px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
.ionic .item-note {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
.ionic .item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
.ionic .item-reordering {
|
||||
@@ -2289,10 +2296,6 @@
|
||||
.ionic .card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
.ionic .item-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
.ionic .card,
|
||||
.ionic .list-inset {
|
||||
overflow: hidden;
|
||||
@@ -3143,6 +3146,32 @@
|
||||
.ionic .fade-in.active {
|
||||
-webkit-animation: fadeIn 0.3s;
|
||||
animation: fadeIn 0.3s; }
|
||||
.ionic i.icon-default, .ionic .icon.icon-default {
|
||||
color: white; }
|
||||
.ionic i.icon-secondary, .ionic .icon.icon-secondary {
|
||||
color: gainsboro; }
|
||||
.ionic i.icon-primary, .ionic .icon.icon-primary {
|
||||
color: #4a87ee; }
|
||||
.ionic i.icon-info, .ionic .icon.icon-info {
|
||||
color: #43cee6; }
|
||||
.ionic i.icon-success, .ionic .icon.icon-success {
|
||||
color: #66cc33; }
|
||||
.ionic i.icon-warning, .ionic .icon.icon-warning {
|
||||
color: #f0b840; }
|
||||
.ionic i.icon-danger, .ionic .icon.icon-danger {
|
||||
color: #ef4e3a; }
|
||||
.ionic i.icon-dark, .ionic .icon.icon-dark {
|
||||
color: #444444; }
|
||||
.ionic i.icon-gray-darker, .ionic .icon.icon-gray-darker {
|
||||
color: #222222; }
|
||||
.ionic i.icon-gray-dark, .ionic .icon.icon-gray-dark {
|
||||
color: #333333; }
|
||||
.ionic i.icon-gray, .ionic .icon.icon-gray {
|
||||
color: #555555; }
|
||||
.ionic i.icon-gray-light, .ionic .icon.icon-gray-light {
|
||||
color: #999999; }
|
||||
.ionic i.icon-gray-lighter, .ionic .icon.icon-gray-lighter {
|
||||
color: #999999; }
|
||||
.ionic .fill-icon {
|
||||
color: white !important; }
|
||||
.ionic .fill-icon:before {
|
||||
@@ -3150,31 +3179,31 @@
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
padding: 1px; }
|
||||
.ionic .fill-icon.brand-default:before {
|
||||
.ionic .fill-icon.icon-default:before {
|
||||
background: white; }
|
||||
.ionic .fill-icon.brand-secondary:before {
|
||||
.ionic .fill-icon.icon-secondary:before {
|
||||
background: whitesmoke; }
|
||||
.ionic .fill-icon.brand-primary:before {
|
||||
.ionic .fill-icon.icon-primary:before {
|
||||
background: #4a87ee; }
|
||||
.ionic .fill-icon.brand-info:before {
|
||||
.ionic .fill-icon.icon-info:before {
|
||||
background: #43cee6; }
|
||||
.ionic .fill-icon.brand-success:before {
|
||||
.ionic .fill-icon.icon-success:before {
|
||||
background: #66cc33; }
|
||||
.ionic .fill-icon.brand-warning:before {
|
||||
.ionic .fill-icon.icon-warning:before {
|
||||
background: #f0b840; }
|
||||
.ionic .fill-icon.brand-danger:before {
|
||||
.ionic .fill-icon.icon-danger:before {
|
||||
background: #ef4e3a; }
|
||||
.ionic .fill-icon.brand-dark:before {
|
||||
.ionic .fill-icon.icon-dark:before {
|
||||
background: #444444; }
|
||||
.ionic .fill-icon.gray-darker:before {
|
||||
.ionic .fill-icon.icon-gray-darker:before {
|
||||
background: #222222; }
|
||||
.ionic .fill-icon.gray-dark:before {
|
||||
.ionic .fill-icon.icon-gray-dark:before {
|
||||
background: #333333; }
|
||||
.ionic .fill-icon.gray:before {
|
||||
.ionic .fill-icon.icon-gray:before {
|
||||
background: #555555; }
|
||||
.ionic .fill-icon.gray-light:before {
|
||||
.ionic .fill-icon.icon-gray-light:before {
|
||||
background: #999999; }
|
||||
.ionic .fill-icon.gray-lighter:before {
|
||||
.ionic .fill-icon.icon-gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
.ionic .icon-loading {
|
||||
font-family: 'ionicons';
|
||||
|
||||
80
dist/css/ionic.css
vendored
80
dist/css/ionic.css
vendored
@@ -2617,7 +2617,9 @@ a.item {
|
||||
font-size: 32px; }
|
||||
|
||||
.item .fill-icon {
|
||||
font-size: 28px; }
|
||||
font-size: 28px;
|
||||
min-width: 30px;
|
||||
min-height: 30px; }
|
||||
|
||||
.item-icon-left {
|
||||
padding-left: 45px; }
|
||||
@@ -2732,12 +2734,18 @@ button.item-icon-right:after {
|
||||
.item-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
min-height: 30px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.item-note {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
.item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
|
||||
@@ -2843,11 +2851,6 @@ button.item-icon-right:after {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
|
||||
.item-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
/*
|
||||
A card and list-inset are close to the same thing, except a card as a box shadow.
|
||||
*/
|
||||
@@ -3954,6 +3957,45 @@ a.button {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
i.icon-default, .icon.icon-default {
|
||||
color: white; }
|
||||
|
||||
i.icon-secondary, .icon.icon-secondary {
|
||||
color: gainsboro; }
|
||||
|
||||
i.icon-primary, .icon.icon-primary {
|
||||
color: #4a87ee; }
|
||||
|
||||
i.icon-info, .icon.icon-info {
|
||||
color: #43cee6; }
|
||||
|
||||
i.icon-success, .icon.icon-success {
|
||||
color: #66cc33; }
|
||||
|
||||
i.icon-warning, .icon.icon-warning {
|
||||
color: #f0b840; }
|
||||
|
||||
i.icon-danger, .icon.icon-danger {
|
||||
color: #ef4e3a; }
|
||||
|
||||
i.icon-dark, .icon.icon-dark {
|
||||
color: #444444; }
|
||||
|
||||
i.icon-gray-darker, .icon.icon-gray-darker {
|
||||
color: #222222; }
|
||||
|
||||
i.icon-gray-dark, .icon.icon-gray-dark {
|
||||
color: #333333; }
|
||||
|
||||
i.icon-gray, .icon.icon-gray {
|
||||
color: #555555; }
|
||||
|
||||
i.icon-gray-light, .icon.icon-gray-light {
|
||||
color: #999999; }
|
||||
|
||||
i.icon-gray-lighter, .icon.icon-gray-lighter {
|
||||
color: #999999; }
|
||||
|
||||
.fill-icon {
|
||||
color: white !important; }
|
||||
.fill-icon:before {
|
||||
@@ -3961,31 +4003,31 @@ a.button {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
padding: 1px; }
|
||||
.fill-icon.brand-default:before {
|
||||
.fill-icon.icon-default:before {
|
||||
background: white; }
|
||||
.fill-icon.brand-secondary:before {
|
||||
.fill-icon.icon-secondary:before {
|
||||
background: whitesmoke; }
|
||||
.fill-icon.brand-primary:before {
|
||||
.fill-icon.icon-primary:before {
|
||||
background: #4a87ee; }
|
||||
.fill-icon.brand-info:before {
|
||||
.fill-icon.icon-info:before {
|
||||
background: #43cee6; }
|
||||
.fill-icon.brand-success:before {
|
||||
.fill-icon.icon-success:before {
|
||||
background: #66cc33; }
|
||||
.fill-icon.brand-warning:before {
|
||||
.fill-icon.icon-warning:before {
|
||||
background: #f0b840; }
|
||||
.fill-icon.brand-danger:before {
|
||||
.fill-icon.icon-danger:before {
|
||||
background: #ef4e3a; }
|
||||
.fill-icon.brand-dark:before {
|
||||
.fill-icon.icon-dark:before {
|
||||
background: #444444; }
|
||||
.fill-icon.gray-darker:before {
|
||||
.fill-icon.icon-gray-darker:before {
|
||||
background: #222222; }
|
||||
.fill-icon.gray-dark:before {
|
||||
.fill-icon.icon-gray-dark:before {
|
||||
background: #333333; }
|
||||
.fill-icon.gray:before {
|
||||
.fill-icon.icon-gray:before {
|
||||
background: #555555; }
|
||||
.fill-icon.gray-light:before {
|
||||
.fill-icon.icon-gray-light:before {
|
||||
background: #999999; }
|
||||
.fill-icon.gray-lighter:before {
|
||||
.fill-icon.icon-gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
|
||||
.icon-loading {
|
||||
|
||||
2
dist/js/ionic-angular.js
vendored
2
dist/js/ionic-angular.js
vendored
@@ -642,7 +642,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
|
||||
.directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
|
||||
return {
|
||||
restrict: 'ECA',
|
||||
restrict: 'CA',
|
||||
require: '^navs',
|
||||
transclude: 'element',
|
||||
compile: function(element, attr, transclude) {
|
||||
|
||||
@@ -1,4 +1,57 @@
|
||||
|
||||
i.icon-default, .icon.icon-default {
|
||||
color: $brand-default;
|
||||
}
|
||||
|
||||
i.icon-secondary, .icon.icon-secondary {
|
||||
color: darken($brand-secondary, 10%);
|
||||
}
|
||||
|
||||
i.icon-primary, .icon.icon-primary {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
i.icon-info, .icon.icon-info {
|
||||
color: $brand-info;
|
||||
}
|
||||
|
||||
i.icon-success, .icon.icon-success {
|
||||
color: $brand-success;
|
||||
}
|
||||
|
||||
i.icon-warning, .icon.icon-warning {
|
||||
color: $brand-warning;
|
||||
}
|
||||
|
||||
i.icon-danger, .icon.icon-danger {
|
||||
color: $brand-danger;
|
||||
}
|
||||
|
||||
i.icon-dark, .icon.icon-dark {
|
||||
color: $brand-dark;
|
||||
}
|
||||
|
||||
i.icon-gray-darker, .icon.icon-gray-darker {
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
i.icon-gray-dark, .icon.icon-gray-dark {
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
i.icon-gray, .icon.icon-gray {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
i.icon-gray-light, .icon.icon-gray-light {
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
i.icon-gray-lighter, .icon.icon-gray-lighter {
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
|
||||
.fill-icon {
|
||||
color: white !important;
|
||||
&:before {
|
||||
@@ -8,44 +61,44 @@
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
&.brand-default:before {
|
||||
&.icon-default:before {
|
||||
background: $brand-default;
|
||||
}
|
||||
&.brand-secondary:before {
|
||||
&.icon-secondary:before {
|
||||
background: $brand-secondary;
|
||||
}
|
||||
&.brand-primary:before {
|
||||
&.icon-primary:before {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&.brand-info:before {
|
||||
&.icon-info:before {
|
||||
background: $brand-info;
|
||||
}
|
||||
&.brand-success:before {
|
||||
&.icon-success:before {
|
||||
background: $brand-success;
|
||||
}
|
||||
&.brand-warning:before {
|
||||
&.icon-warning:before {
|
||||
background: $brand-warning;
|
||||
}
|
||||
&.brand-danger:before {
|
||||
&.icon-danger:before {
|
||||
background: $brand-danger;
|
||||
}
|
||||
&.brand-dark:before {
|
||||
&.icon-dark:before {
|
||||
background: $brand-dark;
|
||||
}
|
||||
|
||||
&.gray-darker:before {
|
||||
&.icon-gray-darker:before {
|
||||
background: $gray-darker;
|
||||
}
|
||||
&.gray-dark:before {
|
||||
&.icon-gray-dark:before {
|
||||
background: $gray-dark;
|
||||
}
|
||||
&.gray:before {
|
||||
&.icon-gray:before {
|
||||
background: $gray;
|
||||
}
|
||||
&.gray-light:before {
|
||||
&.icon-gray-light:before {
|
||||
background: $gray-light;
|
||||
}
|
||||
&.gray-lighter:before {
|
||||
&.icon-gray-lighter:before {
|
||||
background: $gray-lighter;
|
||||
}
|
||||
|
||||
|
||||
@@ -186,6 +186,8 @@ a.item {
|
||||
|
||||
.item .fill-icon {
|
||||
font-size: $item-icon-fill-font-size;
|
||||
min-width: $item-icon-fill-font-size + 2;
|
||||
min-height: $item-icon-fill-font-size + 2;
|
||||
}
|
||||
|
||||
.item-icon-left {
|
||||
@@ -339,6 +341,7 @@ button.item-icon-right:after {
|
||||
.item-divider {
|
||||
margin: $item-border-width * -1;
|
||||
padding: $item-divider-padding;
|
||||
min-height: 30px;
|
||||
border: none;
|
||||
background-color: $item-divider-bg;
|
||||
box-shadow: $item-box-shadow;
|
||||
@@ -347,6 +350,16 @@ button.item-icon-right:after {
|
||||
}
|
||||
|
||||
|
||||
// Item Note
|
||||
// -------------------------------
|
||||
|
||||
.item-note {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
// Item Animations
|
||||
// -------------------------------
|
||||
|
||||
|
||||
@@ -57,12 +57,6 @@
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.item-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
// Cards / Inset Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -120,17 +120,17 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="item tabs tabs-icon-left">
|
||||
<a class="tab-item">
|
||||
<i class="icon-home"></i>
|
||||
<div class="item tabs tabs-secondary tabs-icon-left">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-thumbsup"></i>
|
||||
Like
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
<i class="icon-star"></i>
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-chatbox"></i>
|
||||
Comment
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
<i class="icon-gear-a"></i>
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-share"></i>
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -48,31 +48,31 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-email"></i>
|
||||
<i class="icon-email icon-secondary"></i>
|
||||
Check mail
|
||||
<span class="badge badge-info">5</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-chatbubble-working"></i>
|
||||
<i class="icon-chatbubble-working icon-primary"></i>
|
||||
Call Ma
|
||||
<span class="item-label-right">
|
||||
<span class="item-note">
|
||||
Cell
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-mic-a"></i>
|
||||
<i class="icon-mic-a icon-info"></i>
|
||||
Record album
|
||||
<span class="item-label-right">
|
||||
<span class="item-note">
|
||||
Grammy
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-flask"></i>
|
||||
<i class="icon-flask icon-success"></i>
|
||||
Breaking Bad
|
||||
<span class="item-label-right">
|
||||
<span class="item-note">
|
||||
Blue, yellow, pink
|
||||
</span>
|
||||
</a>
|
||||
@@ -82,31 +82,31 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-game-controller-b"></i>
|
||||
<i class="icon-game-controller-b icon-warning"></i>
|
||||
Games
|
||||
<span class="item-label-right">
|
||||
<span class="item-note">
|
||||
Super Mario
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-music-note"></i>
|
||||
<i class="icon-music-note icon-danger"></i>
|
||||
Music
|
||||
<span class="item-label-right">
|
||||
<span class="item-note">
|
||||
JT
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-bag"></i>
|
||||
<i class="icon-bag icon-dark"></i>
|
||||
Shopping
|
||||
<span class="item-label-right">
|
||||
<span class="item-note">
|
||||
Bag
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-person-stalker"></i>
|
||||
<i class="icon-person-stalker icon-warning fill-icon"></i>
|
||||
Friends
|
||||
<span class="badge badge-danger">0</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user