-# I'm using tabindex and the :focus state to cheat the interactivity on mobile
    %div.container{:tabindex => "1"}
      %div.search-container{:tabindex => "1"}
        %input{:type => "text", :placeholder => "search"}
View Compiled
  box-sizing: border-box
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  font-family: "Cabin"

  height: 100%

  height: 100%
  background: #FDF6E3

  display: block
  max-width: 900px
  margin: auto
  padding: 100px
  height: 100%
  outline: none

  overflow: hidden
  float: right
  height: 4em
  width: 4em
  border-radius: 2em
  box-shadow: 0 0 5px #6A5D4F
  -moz-transition: all 0.35s
  -webkit-transition: all 0.35s
  &:hover, &:focus, &:focus-within
    width: 25em
    border-radius: 5px 2em 2em 5px
    outline: none
      display: inline-block
      width: 19em
      padding: 10px

  -moz-appearance: none
  -webkit-appearance: none
  appearance: none
  float: left
  width: 0em
  height: 2em
  margin: 1em
  margin-right: -4.5em
  background: #fff
  color: #6A5D4F
  font-size: 1em
  font-weight: 600
  padding: 0px
  border: 0
  border-radius: 5px
  box-shadow: 0 1px 5px rgba(0,0,0,0.2) inset
  text-shadow: 0 1px 1px rgba(0,0,0,0.15)
  -moz-transition: all 0.25s
  -webkit-transition: all 0.25s
    outline: none
    box-shadow: 0 -1px 1px rgba(255,255,255,0.25), 0 1px 5px rgba(0,0,0,0.15)

  display: flex
  align-items: center
  justify-content: center
  float: right
  width: 1.75em
  height: 1.75em
  margin: 0.125em
  background: #6A5D4F
  text-align: center
  font-size: 2em
  color: #FDF6E3
  border-radius: 50%
  box-shadow: 0 -1px 1px rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.25)
  text-shadow: 0 -2px 1px rgba(0,0,0,0.3)
    border: 0 !important
    text-shadow: 0 0 0
    font-size: 85%
View Compiled

External CSS

  1. https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.