<div aria-hidden="true" class="search">
    <div class="search__icon">
    	<svg viewBox="0 0 32 32">
        <path d="M2.9,5.5C5.1,3,8.1,1.6,11.1,1.4c3.1-0.2,6.2,0.7,8.7,2.9c2.5,2.2,3.9,5.2,4.1,8.2c0.2,2.4-0.4,5-1.7,7.1
l1.3,1.1l0.9-1.1l7.5,6.5l-3.9,4.5l-7.5-6.5l0.9-1.1L20.3,22c-2.1,2-4.8,3.1-7.5,3.3c-3.1,0.2-6.2-0.7-8.7-2.9
c-2.5-2.2-3.9-5.2-4.1-8.2C-0.2,11.1,0.7,8,2.9,5.5L2.9,5.5z M11.4,5.3C9.3,5.4,7.3,6.3,5.9,8c-1.5,1.7-2.1,3.8-2,5.9
C4.1,16,5,18,6.7,19.5c1.7,1.5,3.8,2.1,5.9,2c2.1-0.1,4.1-1.1,5.5-2.8c1.5-1.7,2.1-3.8,2-5.9c-0.1-2.1-1.1-4.1-2.8-5.5
C15.6,5.8,13.5,5.1,11.4,5.3z"></path>
    </svg>
    </div>
    <form class="search__container">
        <input type="text" placeholder="Search" required="" name="search">
      <button type="submit" name="submit"></button>
    </form>
</div>

.search{
    position: fixed;
    bottom: 10rem;
    left: 50%;
    background: #9b59b6;
    height: 60px;
    width: 60px;
    border-radius: 60px;
    padding: 0 0;
    box-shadow: 2px 3px 14px 3px rgba(0,0,0,0.45);
    transition: width 0.4s ease-out;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid #9b59b6;
    transform: translateX(-50%);

    &__icon{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 999;
        background: #9b59b6;
        height: 60px;
        width: 60px;
        border-radius: 50px 0 0 50px;
        text-align: center;
        line-height: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}

.search[aria-hidden="false"] {
    width: 40rem;
    border-radius: 60px;
}

.search svg {
    z-index: 999;
    height: 30px;
    width: 30px;
    fill: #FFF;
    text-align: center;
    line-height: 0;
    box-sizing: border-box;
        left: 2px;
    position: relative;
    transition: transform 0.4s ease-out;
  
  &:after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

.search[aria-hidden="false"] svg{
    transform: rotate(360deg);
}

.search__container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.search__container input {
    font-size: 1.5rem;
    height: 3rem;
    margin: 0;
    border: 0;
    box-shadow: none;
    position: absolute;
    left: 5px;
    width: 100%;
    border-radius: 30px;
    padding: 0 1rem;
}

.search__container button{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: transparent;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    z-index: 0;
}

.search[aria-hidden="false"] .search__container button{
    z-index: 9999;
}

$('.search').on('click', function() {
    if ($(this).attr('aria-hidden') === 'true') {
        $(this).attr('aria-hidden', 'false');
    } else {
        //$(this).attr('aria-hidden', 'true');
    }
});

$(document).bind("mouseup touchend", function(e) {
    var target = $(event.target);
    if ($('.search').attr('aria-hidden') === 'false') {
        if (!$('.search').is(e.target) // if the target of the click isn't the search...
            && $('.search').has(e.target).length === 0) // ... nor a descendant of the search
        {
            $('.search').attr('aria-hidden', 'true');
        }
    }
});