<div class="container">
  <h2>Notification Box <br /> <span>Inspired by <a href="https://site.uplabs.com/posts/notify-me-interface">Notify Me &mdash; Oleg Frolov</a></span></h2>

  <form class="notify">

    <label for="notify-email" class="notify__label" aria-label="hidden">email</label>

    <input id="notify-email" class="notify__input" type="email" placeholder="email">

    <button type="button" class="notify__button notify__send-button" id="send-button">Send</button>

    <button type="button" class="notify__button notify__outer-button" id="outer-button">Notify Me</button>

    <p id="thankyou-label" class="notify__thank-you-label">Thank You!</p>

  </form>
</div>

$darksalmon: #e9967a;

* {
  box-sizing: border-box;
}

*:after, *:before {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100%;
  background-color: $darksalmon;
  line-height: 1.5;
}

.container {
  width: 100%;
  margin: 5% auto;
  padding: 1em 0;
  font-size: 1.5rem;
  text-align: center;
  background-color: $darksalmon;

  h2 {
    color: white;
    font-size: 1.6rem;

    span {
      font-size: 1.3rem;

      a {
        color: white;
      }
    }
  }
}


.notify {
  background: transparent;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
  text-align: center;
}

//hide textbox label
.notify__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.notify__input {
  position: relative;
  top: 0px;
  padding: 1em 5px;
  border-radius: 30px;
  transform: scaleX(0);
  visibility: hidden;
  width: 315px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.9;
  border-color: transparent;
  outline: none;
  
  &:focus {
    box-shadow: 1px 1px 3px $darksalmon inset;
  }
}

.notify__button {
  text-align: center;
  border-radius: 15px;
  background-color: transparent;
  border: none;
  outline: none;
}

.notify__send-button {
  padding: 0.5em;
  position: absolute;
  top: 49%;
  right:8px;
  transform: translateY(-49%);
  font-size: 1.3rem;
  font-weight: 700;
  background-color: lighten($darksalmon, 5);
  color: #fefefe;
  cursor: pointer;
  transition: all 0.2s;
  
  visibility: hidden;
  
  &:hover,
  &:focus {
    background-color: $darksalmon;
    color: white;
  }
}

.notify__outer-button {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 60%;
  padding: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  background-color: white;
  color: $darksalmon;
  cursor: pointer;
  box-shadow: 1px 3px 0px rgba(0,0,0, .5);
  transition: color 0.2s;
  
  &:hover,
  &:focus {
    color: darken($darksalmon, 10);
  }
}

.notify__thank-you-label {
  position: absolute;
  top: -29px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0.7rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  border-radius: 25px;
  background-color: white;
  color: $darksalmon;
  
  visibility: hidden;
}

//vars
const emailInput = document.querySelector("#notify-email"),
  sendButton = document.querySelector("#send-button"),
  thankyouLabel = document.querySelector("#thankyou-label"),
  outerButton = document.querySelector("#outer-button");

//scale down the initial button, the send button 
//and the thank you label, so they can be 
//scaled up when they make their entrances 
//in the animation
TweenMax.set([outerButton, sendButton, thankyouLabel], { scale: 0.5 });

//this tween controls the entrance of the 
//first button as the page loads
TweenMax.to(outerButton, 0.5, { scale: 1, ease: Back.easeOut.config(3) });

//code that triggers the appearance of the 
//text box on button click
outerButton.addEventListener("click", function() {
  //The text box appears over half a second
  //and is scaled up
  TweenMax.to(emailInput, 0.5, {
    autoAlpha: 1,
    scale: 1
  });
  
  //the initial button disappears from view
  TweenMax.to(this, 1, {
    autoAlpha: 0
  });
  
  //the send button appears over half a second 
  //and it's scaled up 
  TweenMax.to(sendButton, 0.5, {
    autoAlpha: 1,
    scale: 1,
    delay: 0.5,
    ease: Back.easeOut.config(3)
  });
});

//code triggered after clicking the send button
sendButton.addEventListener("click", function() {
  //thank you label appears and starts to scale up
  TweenMax.to(thankyouLabel, 1, {
    autoAlpha: 1,
    scale: 0.7
  });
  
  //thank you label is scaled up completely
  TweenMax.to(thankyouLabel, 1, {
    scale: 1
  });

  //the text color inside the input box changes
  //to white to make it invisible
  TweenMax.to(
    emailInput,
    0,
    {
      color: "#ffffff"
    });

  //the input box is scaled down and removed
  TweenMax.to(
    emailInput,
    0.2,
    {
      scaleX: 0,
      autoAlpha: 0,
      delay: 0.5
    });
  
  //the send button is removed
  TweenMax.to(
    this,
    0.3,
    {
      autoAlpha: 0
    });

  //the thank you label is scaled up on the 
  //X axis
  TweenMax.to(thankyouLabel, 0.5, {
    scaleX: 0.6,
    delay: 0.5,
    ease: Back.easeOut.config(3)
  });

  //the font-size in the thank you label 
  //is enlarged to make it more readable
  TweenMax.to(thankyouLabel, 0.5, {
    fontSize: 25,
    delay: 0.5
  });
});