source: pro-violet-viettel/www/deploy/20150304/assets/css/less/dropdown.less @ 782

@dropdown-shadow:~"0 2px 4px rgba(0, 0, 0, 0.2)";


/* dropdown menus */
.icon-white, .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:focus > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > li > a:focus > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"], .dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:focus > a > [class^="icon-"], .dropdown-submenu:hover > a > [class*=" icon-"], .dropdown-submenu:focus > a > [class*=" icon-"] {
 background-image: none;
}



.dropdown-menu {
 .border-radius(0) !important;
 .box-shadow(@dropdown-shadow);
 > li > a {
        font-size:13px;
        padding-left:11px; padding-right:11px;
        margin-bottom:1px; margin-top:1px;
 }

 &.dropdown-only-icon {
        min-width: 50px;
        > li {
                float:left;
                margin:0 4px;
                > a {
                        [class*="icon-"] {
                                width:18px;
                                //font-size:16px;
                                display:inline-block;
                        }
                        .icon-2x {
                                width:36px;
                                //font-size:22px;
                        }
                }// > a
        }// > li
 }//&.dropdown-only-icon

}//.dropdown-menu




//dropdown
.dropdown-color(@bgcolor:~"menu";@txtcolor:#FFFFFF) {
  @dropdown-class:~`"dropdown-@{bgcolor}"`;
  @dropdown-bg:~`"dropdown-@{bgcolor}"`;
  @dropdown-cl:@@dropdown-bg;


  .@{dropdown-class} {
        li a:hover,
        li a:focus,
        li a:active,
        li.active a,
        li.active a:hover,
        .dropdown-submenu:hover > a,

        .nav-tabs & li > a:focus
        {
                background:@dropdown-cl;
                color:@txtcolor;
        }
  }
}

.dropdown-color();
.dropdown-color(~"default");
.dropdown-color(~"info");
.dropdown-color(~"primary");
.dropdown-color(~"success");
.dropdown-color(~"warning");
.dropdown-color(~"danger");
.dropdown-color(~"inverse");
.dropdown-color(~"purple");
.dropdown-color(~"pink");
.dropdown-color(~"grey");
.dropdown-color(~"light" ; #333333);
.dropdown-color(~"lighter" ; #444444);
.dropdown-color(~"lightest" ; #444444);
.dropdown-color(~"yellow" ; #444444);
.dropdown-color(~"yellow2" ; #444444);
.dropdown-color(~"light-blue" ; #445566);


.dropdown-light , .dropdown-lighter , .dropdown-lightest {
  .dropdown-submenu:hover > a:after {
        border-left-color:#444;
  }
}




/* closer to the toggle button */
.dropdown-menu {
 &.dropdown-close {
        top:92%; left:-5px;
        &.pull-right {
                left:auto;
                right:-5px;
        }
 }
 &.dropdown-closer {
        top:80%; left:-10px;
        &.pull-right {
                right:-10px;
                left:auto;
        }
 }
}

.dropdown-submenu > .dropdown-menu {
 .border-radius(0);
}
.dropdown-submenu > a:after {
 margin-right:-5px;
}



/* colorpicker dropdown */
.dropdown-colorpicker {
 > .dropdown-menu {
        top:80%;
        left:-7px;
        &.pull-right {
                right:-7px;
                left:auto;
        }
        
        padding:4px;
        min-width:130px; max-width:130px;
        
         > li {
                display:block;
                float:left;
                width:20px; height:20px;
                margin:2px;
                 > .colorpick-btn {
                          display:block;
                          width:20px; height:20px;
                          
                          margin:0; padding:0;            
                          border-radius:0;
                          position:relative;
                          
                          .transition(~"all ease 0.1s");
                          
                          &:hover {
                                 text-decoration:none;
                                 .opacity(0.8);
                                 .scale(1.08);
                          }
                          &.selected:after {
                                content:"\f00c";
                                display:inline-block;
                                font-family:FontAwesome;  font-size:11px;
                                color:#FFF;
                                
                                position:absolute; left:0; right:0; text-align:center; line-height:20px;
                          }
                 }
                
         }
 }
}

.btn-colorpicker {
        display:inline-block;
        width:20px; height:20px;
        background-color:#DDD;
        vertical-align:middle;
 
        border-radius:0;
}







/* top user info dropdowns */
.dropdown-navbar {
  padding:0;
  width: @navbar-dropdown-width;
  .box-shadow(@navbar-dropdown-shadow);

  
  > li {
        padding:0 8px;
        background-color:#FFFFFF;
        
        &.dropdown-header {
                text-shadow:none;
                padding-top:0; padding-bottom:0;
                line-height:34px;
                font-size:13px; font-weight:bold; text-transform:none;
                border-bottom:1px solid;
        }
        
        > [class*="icon-"] , > a > [class*="icon-"] {
                margin-right:5px !important;
                color:#555;
                font-size:14px;
        }
        
        
        
        > a {
                padding:10px 2px;
                margin:0;
                border-bottom:1px solid;
                font-size:12px;
                line-height:16px;
                color:#555;
                
                &:active, &:hover, &:focus {
                        background-color:transparent !important;
                        color:#555;
                }
                .progress {
                        margin-bottom:0;
                        margin-top:4px;
                }
                .badge {
                        line-height:16px;
                        padding-right:4px; padding-left:4px;
                        font-size:12px;
                }
        }
        &:last-child > a {
                border-bottom:0 solid #DDD;
                border-top:1px dotted transparent;
                color:#4F99C6;
 
                text-align:center;
                font-size:13px;
                
                &:hover {
                        background-color:#FFF;
                        color:#4F99C6;
                        text-decoration:underline;
                        > [class*="icon-"] {
                                text-decoration:none;
                        }
                }

        }
  }//end of li


  //navbar colors
  .navbar-colors(@border-color; @hover-color; @header-bg; @header-txt; @header-icon; @item-bottom) {
        border-color:@border-color;
        > li {
                &:hover {
                        background-color:@hover-color !important;
                }
                &.dropdown-header {
                        background-color:@header-bg !important;
                        color:@header-txt;
                        border-bottom-color:@border-color;

                        > [class*="icon-"] {
                                color:@header-icon;
                        }
                }
                > a {
                        border-bottom-color:@item-bottom;
                }
        }
  }

  .navbar-colors(#BCD4E5 ; #F4F9FC ; #ECF2F7 ; #8090A0 ; #8090A0; #E4ECF3);
  &.navbar-pink {
        .navbar-colors(#E5BCD4 ; #FCF4F9 ; #F7ECF2 ; #B471A0 ; #C06090 ; #F3E4EC);
  }
  &.navbar-grey {
        .navbar-colors(#E5E5E5 ; #F8F8F8 ; #F2F2F2 ; #3A87AD ; #3A87AD; #EEEEEE);
  }
  &.navbar-green {
        .navbar-colors(#B4D5AC ; #F4F9EF ; #EBF7E4 ; #88AA66 ; #90C060; #ECF3E4);
  }



  [class*="btn"][class*="icon-"] {
        display:inline-block;
        //border:none;
        margin:0 5px 0 0;
        width:24px;
        text-align:center;
        padding-left:0;
        padding-right:0;
  }


  /* user info on top navbar icons */
 .msg-photo {
         margin-right:6px;
         max-width:42px;
 }
 .msg-body {
        display:inline-block;
        line-height:20px;
        white-space:normal;
        vertical-align:middle;

        max-width:175px;
 }
 .msg-title {
        display:inline-block;
        line-height:14px;
 }
 .msg-time {
        display:block;
        font-size:11px;
        color:#777;
        > [class*="icon-"] {
                font-size:14px;
                color:#555;
        }
 }

}


 



.dropdown-100 {
  min-width:100px;
 }
.dropdown-125 {
  min-width:125px;
 }
.dropdown-150 {
  min-width:150px;
}

 



.dropdown-hover {
 position:relative;
}
.dropdown-hover:hover > .dropdown-menu {
 display: block;
}