/*
Dropdown menus
----------------------------
*/
/*Dropdowns in general*/
.dropdown-menu {
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
z-index: 2300;
> li > a > .glyphicon,
> li > a > .fa,
> li > a > .ion{
margin-right: 10px;
}
> li > a:hover {
background-color: @light-blue;
color: #f9f9f9;
}
}
/*Drodown in navbars*/
.skin-blue .navbar {
.dropdown-menu > li > a{
color: #444444;
}
}
/*
Navbar custom dropdown menu
------------------------------------
*/
.navbar-nav > .notifications-menu,
.navbar-nav > .messages-menu,
.navbar-nav > .tasks-menu {
//fix width and padding
> .dropdown-menu {
width: 280px;
//Remove padding and margins
padding: 0 0 0 0!important;
margin: 0!important;
top: 100%;
border: 1px solid #dfdfdf;
.border-radius(4px)!important;
}
//Define header class
> .dropdown-menu > li.header {
.border-radius(4px; 4px; 0; 0);
background-color: #ffffff;
padding: 7px 10px;
border-bottom: 1px solid #f4f4f4;
color: #444444;
font-size: 14px;
&:after {
// Add arrow to the top (you can change the width using border-width)
bottom: 100%;
left: 92%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
}
//Define footer class
> .dropdown-menu > li.footer > a {
.border-radius(0px; 0px; 4px; 4px);
font-size: 12px;
background-color: #f4f4f4;
padding: 7px 10px;
border-bottom: 1px solid #eeeeee;
color: #444444;
text-align: center;
//Hover state
&:hover {
background: #f4f4f4;
text-decoration: none;
font-weight: normal;
}
}
//Clear inner menu padding and margins
> .dropdown-menu > li .menu {
> li > a {
display: block;
white-space: nowrap; /* Prevent text from breaking */
border-bottom: 1px solid #f4f4f4;
// Hove state
&:hover {
background: #f6f6f6;
text-decoration: none;
}
}
margin: 0;
padding: 0;
list-style: none;
overflow-x: hidden;
}
}
//Notifications menu
.navbar-nav > .notifications-menu {
> .dropdown-menu > li .menu {
// Links inside the menu
> li > a {
font-size: 12px;
color: #444444;
// Icons inside the menu
> .glyphicon,
> .fa,
> .ion {
font-size: 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;
}
}
}
}
}
//Messages menu
.navbar-nav > .messages-menu {
//Inner menu
> .dropdown-menu > li .menu {
// Messages menu item
> li > a {
margin: 0px;
line-height: 20px;
padding: 10px 5px 10px 5px;
.border-radius(4px);
// User image
> div > img {
margin: auto 10px auto auto;
width: 40px;
height: 40px;
border: 1px solid #dddddd;
}
// Message heading
> h4 {
padding: 0;
margin: 0 0 0 45px;
color: #444444;
font-size: 15px;
// Small for message time display
> small {
color: #999999;
font-size: 10px;
float: right;
}
}
> p {
margin: 0 0 0 45px;
font-size: 12px;
color: #888888;
}
.clearfix();
}
}
}
//Tasks menu
.navbar-nav > .tasks-menu {
> .dropdown-menu > li .menu {
> li > a {
padding: 10px;
> h3 {
font-size: 14px;
padding: 0;
margin: 0 0 10px 0;
color: #666666;
}
> .progress {
padding: 0;
margin: 0;
}
}
}
}
//User menu
.navbar-nav > .user-menu {
> .dropdown-menu {
.border-radius(0);
padding: 1px 0 0 0;
border-top-width: 0;
width: 280px;
// Add arrow to the top (you can change the width by changing the border-width)
&:after {
bottom: 100%;
right: 10px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
// Header menu
> li.user-header {
height: 175px;
padding: 10px;
// Default background color. You can add any .bg-* class to
// the li element to change the background
background: @light-blue;
text-align: center;
// User image
> img {
z-index: 5;
height: 90px;
width: 90px;
border: 8px solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0.2);
}
> p {
z-index: 5;
color: #f9f9f9;
color: rgba(255, 255, 255, 0.8);
font-size: 17px;
text-shadow: 2px 2px 3px #333333;
margin-top: 10px;
> small {
display: block;
font-size: 12px;
}
}
}
// Menu Body
> li.user-body {
padding: 15px;
border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #dddddd;
.clearfix();
> div > a {
color: @blue;
}
}
// Menu Footer
> li.user-footer {
background-color: @body-bg;
padding: 10px;
.clearfix();
.btn-default {
color: #666666;
}
}
}
}
/* Add fade animation to dropdown menus */
.open > .dropdown-menu {
animation-name: fadeAnimation;
animation-duration:.7s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-name: fadeAnimation;
-webkit-animation-duration:.7s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: fadeAnimation;
-moz-animation-duration:.7s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: forwards;
}
@keyframes fadeAnimation {
from {
opacity: 0;
top: 120%;
}
to {
opacity: 1;
top: 100%
}
}
@-webkit-keyframes fadeAnimation {
from {
opacity: 0;
top: 120%;
}
to {
opacity: 1;
top: 100%;
}
}
/* Fix dropdown menu for small screens to display correctly on small screens */
@media screen and (max-width: @screen-sm) {
.navbar-nav {
> .notifications-menu,
> .user-menu,
> .tasks-menu,
> .messages-menu {
> .dropdown-menu {
position: absolute;
top: 100%;
right: 0;
left: auto;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
background: #ffffff;
}
}
}
}
/* Fix menu positions on xs screens to appear correctly and fully */
@media screen and (max-width: @screen-xs) {
.navbar-nav {
> .notifications-menu,
> .tasks-menu,
> .messages-menu {
> .dropdown-menu > li.header {
/* Remove arrow from the top */
&:after {
border-width: 0px!important;
}
}
}
}
.navbar-nav {
> .tasks-menu {
> .dropdown-menu {
position: absolute;
right: -120px;
left: auto;
}
}
> .notifications-menu {
> .dropdown-menu {
position: absolute;
right: -170px;
left: auto;
}
}
> .messages-menu {
> .dropdown-menu {
position: absolute;
right: -210px;
left: auto;
}
}
}
}
|
Download
