//some searchbox variables @search-border: #6FB3E0; @search-color: #666; @search-color-focus: #656A72; @search-width: 152px; @sb-search-width: 162px; @search-border-radius: 4px; @nav-search-height: 24px; .enable_search_box() when(@enable-search-box = true) { // searchbox .nav-search { position: absolute; right: 22px; line-height: @nav-search-height; .breadcrumbs & { top: floor((@breadcrumb-height - @nav-search-height) / 2) - 2; } .form-search { margin-bottom: 0; } .nav-search-input { border: 1px solid @search-border; width: @search-width; height: 28px !important; padding-top: 2px; padding-bottom: 2px; border-radius: @search-border-radius !important; font-size: @font-size-searchbox; line-height: 1.3; color: @search-color !important; z-index: 11; .transition(~"width ease .15s"); //the typeahead dropdown menu & + .dropdown-menu { min-width: 0; left: 0; right: 0; } &:focus , &:hover{ border-color: @search-border; } } .nav-search-icon { color: @search-border !important; font-size: @font-size-searchbox-icon !important; line-height: 24px !important; background-color: transparent; } &.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; } } } .enable_searchbox_menumin() when(@enable-sidebar-collapse = true) { .sidebar.menu-min { .searchbox_inside_min_menu(); } } .enable_searchbox_menumin(); .enable_searchbox_minimized_responsive_menu() when(@enable-minimized-responsive-menu = true) { @media (max-width: @grid-float-breakpoint-max) { .sidebar.responsive-min { .searchbox_inside_min_menu(); } } } .enable_searchbox_minimized_responsive_menu(); //responsive searchbox @media only screen and (max-width: @screen-sm-max) { .nav-search { right: 10px; } .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-max) {//@screen-xs .nav-search { .nav_search_minimized() } } } .enable_search_box();