slide right input

slide-searchbar.scss

.form-searchbar {
    .searchbar-hidden,
    label {
      @include transition-duration($transition-duration);
      @include transition-timing-function($transition-timing-function);
    }
    
    .searchbar-hidden {
        @include transition-property(width);
        @include transition-delay($transition-delay);
        width: 0;
        visibility: hidden;
    }

    label {
        @include transition-property(color);
        color: $bs_grey;
        padding-right: 10px;
    }

    &:hover {
        label {
            cursor: pointer;
            color: $c_blue;
        }

        .searchbar-hidden {
            visibility: visible;
            width: $searchbar-width;
        }
    }
    
    .searchbar-hidden:focus {
        visibility: visible;
        width: $searchbar-width;
    }
}

ssform.html

<form class="form-inline form-searchbar">
    <div class="form-group">
        <label for="searchbar-hidden"><span class="glyphicon glyphicon-search"></span></label>
        <input type="text" class="form-control searchbar-hidden" id="searchbar-hidden" placeholder="<?=$translator->translate('hs_Search')?>">
    </div>
</form>