Changed notification menu style

pull/229/merge
Abdullah Almsaeed 2015-02-06 19:00:29 -05:00
parent 18529ffaef
commit eccd2b521d
29 changed files with 139 additions and 179 deletions

View File

@ -84,7 +84,7 @@
border-bottom: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4;
// Hove state // Hove state
&:hover { &:hover {
background: #f6f6f6; background: #f4f4f4;
text-decoration: none; text-decoration: none;
} }
} }
@ -96,35 +96,16 @@
> .dropdown-menu > li .menu { > .dropdown-menu > li .menu {
// Links inside the menu // Links inside the menu
> li > a { > li > a {
font-size: 12px;
color: #444444; color: #444444;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px;
// Icons inside the menu // Icons inside the menu
> .glyphicon, > .glyphicon,
> .fa, > .fa,
> .ion { > .ion {
font-size: 20px; width: 20px;
width: 50px;
text-align: center;
padding: 15px 0px;
margin-right: 5px;
/* Default background and font colors */
background: @aqua;
color: #f9f9f9; /* Fallback for browsers that doesn't support rgba */
color: rgba(255, 255, 255, 0.7);
// Icon background variations
&.danger {
background: @red;
}
&.warning {
background: @yellow;
}
&.success {
background: @green;
}
&.info {
background: @aqua;
}
} }
} }
@ -138,8 +119,8 @@
// Messages menu item // Messages menu item
> li > a { > li > a {
margin: 0px; margin: 0px;
line-height: 20px; //line-height: 20px;
padding: 10px 5px 10px 5px; padding: 10px 10px;
// User image // User image
> div > img { > div > img {
margin: auto 10px auto auto; margin: auto 10px auto auto;
@ -152,11 +133,14 @@
margin: 0 0 0 45px; margin: 0 0 0 45px;
color: #444444; color: #444444;
font-size: 15px; font-size: 15px;
position: relative;
// Small for message time display // Small for message time display
> small { > small {
color: #999999; color: #999999;
font-size: 10px; font-size: 10px;
float: right; position: absolute;
top: 0px;
right: 0px;
} }
} }

46
dist/css/AdminLTE.css vendored
View File

@ -627,51 +627,24 @@ a:focus {
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover, .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover { .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
background: #f6f6f6; background: #f4f4f4;
text-decoration: none; text-decoration: none;
} }
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a { .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
font-size: 12px;
color: #444444; color: #444444;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px;
} }
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion { .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
font-size: 20px; width: 20px;
width: 50px;
text-align: center;
padding: 15px 0px;
margin-right: 5px;
/* Default background and font colors */
background: #00c0ef;
color: #f9f9f9;
/* Fallback for browsers that doesn't support rgba */
color: rgba(255, 255, 255, 0.7);
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.danger,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.danger,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.danger {
background: #dd4b39;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.warning,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.warning,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.warning {
background: #f39c12;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.success,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.success,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.success {
background: #00a65a;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.info,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.info,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.info {
background: #00c0ef;
} }
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a { .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
margin: 0px; margin: 0px;
line-height: 20px; padding: 10px 10px;
padding: 10px 5px 10px 5px;
} }
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img { .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
margin: auto 10px auto auto; margin: auto 10px auto auto;
@ -683,11 +656,14 @@ a:focus {
margin: 0 0 0 45px; margin: 0 0 0 45px;
color: #444444; color: #444444;
font-size: 15px; font-size: 15px;
position: relative;
} }
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small { .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
color: #999999; color: #999999;
font-size: 10px; font-size: 10px;
float: right; position: absolute;
top: 0px;
right: 0px;
} }
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p { .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
margin: 0 0 0 45px; margin: 0 0 0 45px;

File diff suppressed because one or more lines are too long

View File

@ -513,7 +513,7 @@ AdminLTE/
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -138,28 +138,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -131,28 +131,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -143,28 +143,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -172,28 +172,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -140,28 +140,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -132,28 +132,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -129,28 +129,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -128,28 +128,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -79,7 +79,7 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -136,28 +136,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -128,28 +128,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -80,7 +80,7 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -80,7 +80,7 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -130,28 +130,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -128,28 +128,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-red"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -126,28 +126,28 @@
<ul class="menu"> <ul class="menu">
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today <i class="fa fa-users text-aqua"></i> 5 new members joined today
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="fa fa-users warning"></i> 5 new members joined <i class="fa fa-users text-red"></i> 5 new members joined
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-cart success"></i> 25 sales made <i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="ion ion-ios-person danger"></i> You changed your username <i class="fa fa-user text-light-blue"></i> You changed your username
</a> </a>
</li> </li>
</ul> </ul>