Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Helpful Icon Mockup
input.message(placeholder='How can we help?')
.container
.tear
| <span> <i class="fa fa-life-ring"></i></span>
open = true
$('.tear').click ->
if open
$('.tear').addClass('active')
$('.message').addClass('active')
$('.tear').html("<span><i class='fa fa-close'></i></span>")
open = !open
else
$('.tear').removeClass('active green')
$('.message').removeClass('active')
$('.message').val('')
$('.tear').html("<span><i class='fa fa-life-ring'></i></span>")
open = !open
$('input').on 'input', (e)->
value = $("input").val()
if value.length >= 2
$('.tear').addClass('green')
$('.tear').removeClass('active')
$('.tear').html("<span><i class='fa fa-check'></i></span>")
else
$('.tear').removeClass('green')
$('.tear').addClass('active')
$('.tear').html("<span><i class='fa fa-close'></i></span>")
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="http://www.greensock.com/js/src/utils/SplitText.min.js"></script>
@import bourbon
@import neat
$black: black
$white: white
$gray: #9b9b9b
html, body
font-family: Montserrat
width: 100%
margin: 0
padding: 0
background: #F5F7F8
.message
width: 0em
position: absolute
left: 50%
border: 0
border-radius: 50px
+transform(translateX(-50%))
margin-top: 4em
background: white
box-shadow: 0px 0px 0px shade(#F5F7F8, 20%)
font-size: 1.5em
padding: 1em
color: #333
opacity: 0
+transition(0.5s)
@media(max-width: 650px)
width: 0em
font-size: 1em
margin-top: 8em
&:focus
outline: none
&.active
opacity: 1
+transition(1s)
width: 20em
box-shadow: 3px 3px 10px shade(#F5F7F8, 20%)
.container
display: flex
align-items: center
justify-content: center
height: 100vh
min-height: 650px
.tear
width: 10em
height: 10em
border-radius: 0 50% 50% 50%
border-radius: 50%
cursor: pointer
// border: 6px solid black
transform: rotate(0deg)
+transition(0.3s)
background: dodgerblue
box-shadow: 4px 4px 10px shade(white, 30%)
position: relative
&.active
border-radius: 0 50% 50% 50%
transform: rotate(45deg)
background: black
span
position: absolute
left: 38%
top: 30%
// +transform(translateX(-50%) translateY(-50%))
font-size: 3em
color: white
+transform(rotate(45deg))
&.green
background: green
transform: rotate(0deg)
border-radius: 5px
span
position: absolute
left: 50%
top: 50%
+transform(translateX(-50%) translateY(-50%))
font-size: 3em
color: white
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Pacifico|Sue+Ellen+Francisco|Lobster|Montserrat" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment