//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() } }