<div class="search">
  <h1><i>jQuery</i> search slide out</h1>
  <p>
    A simple <i>jQuery</i> slide out search box<br>
    that works with any base font-size
  </p>
  <input type="submit" value="&#xf002;" class="search-btn fa ib-m"><!--
  --><div class="search-slide ib-m">
    <input type="text" placeholder="Enter your search" class="ib-m"><!--
    --><div class="search-close ib-m"><i class="fa fa-times"></i></div>
  </div>
</div>

/* ==============================
  $-Variables
============================== */

$heading-typeface: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$body-typeface: Georgia, Times, "Times New Roman", serif;
$color: white;



/* ==============================
  $-Mixins
============================== */

@mixin box-sizing {
  box-sizing: border-box;
}



/* ==============================
  $-Resets
============================== */

html,
body {
  height: 100%;
  font-size: 16px;
}

html {
  @include box-sizing;
}

*,
*:before,
*:after {
  @include box-sizing;
}

body {
  margin: 0;
  line-height: 1.5;
  background-color: #333;
  text-align: center;
  font-family: $body-typeface;
  color: $color;
}

/* headers */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: $heading-typeface;
  font-weight: 700;
}

/* paragraphs */
p {
  margin-bottom: 3em;
  color: darken($color, 33%);
}

/* highlight colors */
::-moz-selection {
  background-color: $color;
  color: white;
}

::selection {
  background-color: $color;
  color: white;
}

/* anchor links */
a {
  color: black;
  &:hover,
  &:active {
    text-decoration: none;
  }
  &:visited {
    color: rebeccapurple;
  }
}

/* form elements */
select,
textarea,
input {
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-family: $body-typeface;
  font-size: 1em;
  color: inherit;
}

input[type=submit],
input[type=button] {
  cursor: pointer;
}

/* img */
img {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: middle;
  font-style: italic;
}



/* ==============================
  $-Modules
============================== */

/* clearfix */
.cf {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/* inline block */
.ib {
  display: inline-block;
  vertical-align: top;
}

.ib-m {
  display: inline-block;
  vertical-align: middle;
}



/* ==============================
  $-Styles
============================== */

.search {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 18.9375em;
  input[type=submit] {
    vertical-align: middle;
    width: 1.375em;
    height: 1.375em;
    border: none;
    outline: none;
    background: none;
    transition: opacity 100ms ease-in-out;
    &:hover {
      opacity: .5;
    }
  }
  input[type=text] {
    width: 14em;
    height: 2.5em;
    padding: 0 .375em;
    border: none;
    border-bottom: 1px solid #999;
    margin-left: .1875em;
    background: inherit;
    transition: border-color 100ms ease-in-out;
    &:focus {
      border-bottom-color: inherit;
      outline: none;
    }
  }
}

.search-slide {
  width: 0;
  height: 2.5em;
  overflow: hidden;
}

.search-close {
  width: 1.375em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
  transition: opacity 100ms ease-in-out;
  &:hover {
    opacity: .5;
  }
}



/* ==============================
  $-Media-queries
============================== */

/* max width queries */
@media only screen and (max-width:7680px) {}
@media only screen and (max-width:3840px) {}
@media only screen and (max-width:1920px) {}
@media only screen and (max-width:1440px) {}
@media only screen and (max-width:1366px) {}
@media only screen and (max-width:1280px) {}
@media only screen and (max-width:1024px) {}
@media only screen and (max-width:768px) {}
@media only screen and (max-width:480px) {}
@media only screen and (max-width:320px) {}

/* min width queries */
@media only screen and (min-width:320px) {}
@media only screen and (min-width:480px) {}
@media only screen and (min-width:768px) {}
@media only screen and (min-width:1024px) {
  html,
  body {
    font-size: 20px;
  }
}
@media only screen and (min-width:1280px) {}
@media only screen and (min-width:1366px) {
  html,
  body {
    font-size: 24px;
  }
}
@media only screen and (min-width:1440px) {}
@media only screen and (min-width:1920px) {}
@media only screen and (min-width:3840px) {}
@media only screen and (min-width:7680px) {}

// j

//// slide out search
var sliBtn = '.search-btn',
    sliCont = '.search-slide',
    sliTxt = '.search-slide input[type=text]',
    sliDis = '.search-close',
    sliSpd = 300;

$(sliBtn).click(function(){
  $(sliCont).animate(
    {'width':'15.5625em'}, sliSpd
  );
  $(sliTxt).focus();
});
$(sliDis).click(function(){
  $(sliCont).animate(
    {'width':0}, sliSpd
  );
});