source: pro-violet-viettel/sourcecode/assets/css/less/searchbox.less @ 521

//some searchbox variables
@search-border:#6FB3E0;
@search-color:#666;
@search-color-focus:#656A72;

@search-width:152px;
@sb-search-width:162px;
@search-border-radius:4px;



/* searchbox */
.nav-search {
  position:absolute;
  top:6px; right:22px;
  line-height:24px;

  .form-search {
        margin-bottom:0;
  }

 .nav-search-input {
        border:1px solid @search-border;

        width:@search-width;
        height:28px !important;
        .border-radius(@search-border-radius) !important;

        font-size:13px;
        color:@search-color !important;
        z-index:11;


        .transition(~"width ease .15s");

        & + .dropdown-menu { /* the typeahead menu*/
         min-width:0;
         left:0; right:0;
        }

        &:focus , &:hover{
                border-color:@search-border;
        }

 }
 
 
 //.nav-search-btn {
//      border-radius:0;
// }

 .nav-search-icon {
        color:@search-border !important;
        font-size:14px !important;
        line-height:24px !important;
 }


   
 &.minimized {
        .nav_search_minimized()
 }
}



.nav_search_minimized() {
        .nav-search-input {
                width:0;
                .opacity(0);
                max-width:0; // for safari only
        }
         
        &:hover .nav-search-input ,
        .nav-search-btn:active + .nav-search-input ,
        .nav-search-input:focus, .nav-search-input:hover, .nav-search-input:active
        {
                .opacity(1);
                width:@search-width;
                max-width:@search-width; // for safari only
        }

        .nav-search-icon {
                border:1px solid;
                border-radius:100%;

                background-color:#FFF;

                padding:0 5px !important;
        }
        
        &:hover .nav-search-icon ,
        .nav-search-input:focus ~ .nav-search-icon,
        .nav-search-input:hover ~ .nav-search-icon,
        .nav-search-input:active ~ .nav-search-icon
        {
                border:none;
                border-radius:0;
                padding:0 3px !important;
        }
}


.nav_search_icon_active() {
        border:none;
        border-radius:0;
        padding:0 3px !important;
}

.nav-search-icon {
        .nav_search_icon_active();
}

/* nav-search inside sidebar */
.sidebar > .nav-search  {
   position:static;

   background-color:#FAFAFA;
   border-bottom:1px solid #DDD;
   text-align:center;

   height:35px;
   padding-top:6px;


   .nav-search-input {
         width:@sb-search-width !important;
         border-radius:0 !important;
         max-width:@sb-search-width !important;
         .opacity(1) !important;
         
         & + .dropdown-menu { text-align:left; }
   }

}//nav-search inside sidebar

  
  /* sidebar when minimized */
.searchbox_inside_min_menu() {
  .nav-search {
        .form-search {
                position:absolute; left:5px;
                z-index:14;
        }
        
        .nav_search_input_active() {
                width:@sb-search-width !important;
                max-width:@sb-search-width !important;
                .opacity(1) !important;
        }
        .nav-search-input {
                width:0 !important;
                max-width:0 !important;
                .opacity(0) !important;
                
                &:hover, &:focus, &:active {
                        .nav_search_input_active();
                         ~ #nav-search-icon {
                                .nav_search_icon_active();
                         }
                }
        }
        
        &:hover .nav-search-input {
                .nav_search_input_active();
                ~ .nav-search-icon {
                        .nav_search_icon_active();
                }
        }
        
        .nav-search-icon {/* inside minimized sidebar */
                border:1px solid;
                border-radius:32px;

                background-color:#FFF;
                padding:0 5px !important;
        }
  }
}



.sidebar.menu-min {
        .searchbox_inside_min_menu();
}
/**
@media only screen and (max-width: 979px) {
  .sidebar.responsive-min {
        .searchbox_inside_min_menu();
  }
}
*/







/* responsive searchbox */
@media only screen and (max-width: @screen-xs-max) {
        .nav-search {
                right:5px;
        }
        .nav-search .nav-search-input {
                width:105px;
        }
        .nav-search:hover .nav-search-input ,
        .nav-search  .nav-search-btn:active + .nav-search-input ,
        .nav-search  .nav-search-input:focus, .nav-search  .nav-search-input:hover, .nav-search  .nav-search-input:active
        {
                width:145px;
        }
}
@media only screen and (max-width: @screen-xs) {
        .nav-search {
                .nav_search_minimized()
        }
}