AdminLte/less/dropdown.less

/* 
    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);
    > 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;
            }
        }
    }
}