<div class="button-stage">
<!--WAVE-->
<div class="parlor-widget__bubble">
<!-- BUTTON VARIABLES -->
<div class="parlor-button-wrapper -new">
<div class="parlor-button">
<!-- HAND WAVE -->
<svg width="31px" height="31px" viewBox="0 0 31 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="parlor-hand-wave">
<path d="M11.1333629,19.7141217 C11.1496987,19.6977859 11.5550326,20.0796466 11.9368933,19.6977859 C12.3187539,19.3159253 11.9203748,18.9271098 11.9203748,18.9271098 L6.31416762,13.2878656 C5.86929243,12.8429904 5.86530872,12.1256889 6.31218026,11.6788174 C6.75595786,11.2350398 7.48192849,11.2415048 7.92122849,11.6808048 L13.5439542,17.3035304 C13.5485402,17.2989443 13.9716949,17.6648522 14.3376027,17.2989443 C14.7035106,16.9330365 14.3376027,16.5098818 14.3376027,16.5098818 L7.11769806,9.27021347 C6.67282286,8.82533827 6.66883915,8.10803678 7.11571069,7.66116524 C7.55948829,7.21738763 8.28545892,7.2238526 8.72475892,7.6631526 L15.9545455,14.8929391 C15.9560025,14.8914821 16.4138908,15.2249092 16.7899869,14.8914821 C17.0359154,14.6734547 16.9602195,14.3839653 16.8783636,14.2096965 L11.1296647,8.46099747 C10.6879295,8.01926233 10.6864913,7.30450634 11.1333629,6.8576348 C11.5771405,6.4138572 12.3030335,6.42024458 12.7367255,6.85393661 L19.1723654,13.2895765 C19.1918296,13.3090407 19.210439,13.329035 19.2281928,13.3495132 L20.1715868,14.2929071 C20.3380632,14.4555926 21.5676944,15.569978 22.9748807,14.2929071 C23.0186547,14.2544681 23.0625575,14.2199912 23.1065341,14.1892587 C22.3725451,11.4137953 21.6985468,8.83580034 21.6985468,8.83580034 C21.5423751,8.23951977 21.9249335,7.61970971 22.5391399,7.45513362 L23.6110589,7.16791377 L26.5301114,18.061966 C26.5394238,18.088208 26.5468614,18.1156497 26.5521844,18.1443436 C26.925733,20.1579759 26.4196041,22.2653646 25.3678385,23.5830078 C24.316073,24.900651 23.4519694,25.4711252 23.4519694,25.4711252 C20.7711861,27.7941016 16.4710759,27.7181205 13.86287,25.315662 L9.67160438,21.4550229 C9.61790948,21.4088616 9.56929696,21.3641776 9.52630199,21.3211826 L5.5138693,17.3087499 C5.06720906,16.8620897 5.06177828,16.1433411 5.50864982,15.6964696 C5.95242743,15.252692 6.67839805,15.2591569 7.11769806,15.6984569 L11.1333629,19.7141217 Z" id="parlor-hand-wave"></path>
<path d="M27.5,9 C27.5,9.27614237 27.2761424,9.5 27,9.5 C26.7238576,9.5 26.5,9.27614237 26.5,9 C26.5,6.51471863 24.4852814,4.5 22,4.5 C21.7238576,4.5 21.5,4.27614237 21.5,4 C21.5,3.72385763 21.7238576,3.5 22,3.5 C25.0375661,3.5 27.5,5.96243388 27.5,9 Z M30.5,9 C30.5,9.27614237 30.2761424,9.5 30,9.5 C29.7238576,9.5 29.5,9.27614237 29.5,9 C29.5,4.85786438 26.1421356,1.5 22,1.5 C21.7238576,1.5 21.5,1.27614237 21.5,1 C21.5,0.723857625 21.7238576,0.5 22,0.5 C26.6944204,0.5 30.5,4.30557963 30.5,9 Z M3.5,22 C3.5,21.7238576 3.72385763,21.5 4,21.5 C4.27614237,21.5 4.5,21.7238576 4.5,22 C4.5,24.4852814 6.51471863,26.5 9,26.5 C9.27614237,26.5 9.5,26.7238576 9.5,27 C9.5,27.2761424 9.27614237,27.5 9,27.5 C5.96243388,27.5 3.5,25.0375661 3.5,22 Z M0.5,22 C0.5,21.7238576 0.723857625,21.5 1,21.5 C1.27614237,21.5 1.5,21.7238576 1.5,22 C1.5,26.1421356 4.85786438,29.5 9,29.5 C9.27614237,29.5 9.5,29.7238576 9.5,30 C9.5,30.2761424 9.27614237,30.5 9,30.5 C4.30557963,30.5 0.5,26.6944204 0.5,22 Z" id="parlor-hand-wiggles"></path>
</svg>
</div>
<div class="parlor-button-counter">1</div>
</div>
<!-- END PARLOR BUTTON -->
</div>
<!--OK-->
<div class="parlor-widget__bubble">
<!-- BUTTON VARIABLES -->
<div class="parlor-button-wrapper">
<div class="parlor-button">
<!-- A-OK -->
<svg width="22px" height="30px" viewBox="0 0 22 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="parlor-hand-ok">
<path d="M17.3825517,16.3008093 C15.1643831,22.9284305 15.076861,27.0209926 15.0734077,27.3336341 L15.0847051,27.3529412 C15.0847051,27.3529412 14.9785639,29.3817829 10.9774237,29.3817829 C6.97628353,29.3817829 7.05882353,27.3529412 7.05882353,27.3529412 C7.05882353,25.0359583 5.8182389,22.4915608 3.52941176,21.1764706 L3.6388172,21.1764706 C1.4687429,19.972298 0,17.6576706 0,15 C0,11.1015194 3.16034294,7.94117647 7.05882353,7.94117647 C9.16710446,7.94117647 11.0595098,8.8654498 12.3529412,10.3308981 L12.3529412,1.32639759 C12.3529412,0.593848428 12.9404093,-8.8817842e-16 13.6764706,-8.8817842e-16 C14.4074357,-8.8817842e-16 15,0.587149227 15,1.32639759 L15,8.68435206 L17.0180246,2.47351094 C17.2452058,1.77431909 17.988088,1.38904976 18.6881238,1.6165052 C19.383313,1.84238584 19.7651676,2.58473642 19.5355272,3.2914971 L17.5327428,9.45543338 L18.7827228,6.64793242 C19.0786648,5.98323593 19.855252,5.68333778 20.5276774,5.98272087 C21.1954472,6.28003116 21.4985228,7.05618692 21.2009314,7.72458824 L17.3825517,16.3008093 Z M7.05882353,18.9215686 C9.22464608,18.9215686 10.9803922,17.1658225 10.9803922,15 C10.9803922,12.8341775 9.22464608,11.0784314 7.05882353,11.0784314 C4.89300098,11.0784314 3.1372549,12.8341775 3.1372549,15 C3.1372549,17.1658225 4.89300098,18.9215686 7.05882353,18.9215686 Z" id="parlor-hand-ok"></path>
</svg>
</div>
</div>
<!-- END PARLOR BUTTON -->
</div>
<!-- CHAT -->
<div class="parlor-widget__bubble">
<!-- BUTTON VARIABLES -->
<div class="parlor-button-wrapper -none">
<div class="parlor-button">
<!-- SPEACH BUBBLE -->
<svg width="49px" height="44px" viewBox="0 0 49 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="parlor-speech">
<path d="M14,0.371652056 L14,0.558113205 L21.2700465,19.1347967 C21.6731887,20.16492 21.1021596,21 20.008383,21 L14,21 L14,29 L1.00060216,29 C4.20421311,33.3523214 14,34 14,34 L14,42.000385 C14,43.1125667 13.1019465,44 11.9941413,44 L6.49181449,44 C2.42760895,38.926831 0,32.5077764 0,25.5267857 C0,14.9359634 5.58732566,5.63847913 13.9999931,0.371656389 L14,0.371652056 Z" id="parlor-face"></path>
<path d="M25,20 C25,13.372583 30.372583,8 37,8 C43.627417,8 49,13.372583 49,20 C49,26.627417 43.627417,32 37,32 L20,32 L23,29 L22.9913642,29 C24.1007031,27.8954305 25,25.2154925 25,23.0092545 L25,20 Z M31,16 C31,16.5561352 31.4488226,17 32.0024733,17 L41.9975267,17 C42.544239,17 43,16.5522847 43,16 C43,15.4438648 42.5511774,15 41.9975267,15 L32.0024733,15 C31.455761,15 31,15.4477153 31,16 Z M31,20 C31,20.5561352 31.446616,21 31.9975446,21 L39.0024554,21 C39.5536886,21 40,20.5522847 40,20 C40,19.4438648 39.553384,19 39.0024554,19 L31.9975446,19 C31.4463114,19 31,19.4477153 31,20 Z M31,24 C31,24.5561352 31.4456547,25 31.9953976,25 L40.0046024,25 C40.5443356,25 41,24.5522847 41,24 C41,23.4438648 40.5543453,23 40.0046024,23 L31.9953976,23 C31.4556644,23 31,23.4477153 31,24 Z" id="parlor-speech-bubble"></path>
</svg>
</div>
</div>
<!-- END PARLOR BUTTON -->
</div
</div>$dark-blue : #192163
$blue : #0A78FF
$light-blue: #EDF6FF
$input-blue: #0077FE
$green : #54DEC2
$yellow : #FFE55D
$red : #FF3954
$grey : #696969
$light-grey: #CCCCCC
$lightest-grey: #F9F9FB
$white : #FFFFFF
$fira : 'Fira Sans', sans-serif
$parisine : 'parisine-std-sombre'
$mobile : screen and (max-width: 500px)
$tablet : screen and (max-width: 800px)
$largeScreen : screen and (min-width: 1200px)
=transform($transforms)
-moz-transform: $transforms
-o-transform: $transforms
-ms-transform: $transforms
-webkit-transform: $transforms
transform: $transforms
@keyframes parlor-button-animation
5%
transform: scale(1)
13%
transform: scale(1.5)
16%
transform: scale(.6)
20%
transform: scale(1)
@keyframes parlor-button-wave-animation
0%
transform: rotate(0deg)
2%
transform: rotate(-20deg)
12%
transform: rotate(10deg)
14%
transform: rotate(-10deg)
16%
transform: rotate(10deg)
18%
transform: rotate(-10deg)
22%
transform: rotate(0deg)
@keyframes parlor-button-wave-scale-animation
0%
transform: scale(1)
6%
transform: scale(1.3)
25%
transform: scale(1.3)
30%
transform: scale(1)
@keyframes parlor-button-wiggles-scale-animation
0%
transform: scale(1)
opacity: 1
6%
transform: scale(.7)
opacity: .6
25%
transform: scale(.7)
opacity: .6
30%
transform: scale(1)
opacity: 1
@keyframes parlor-button-face-animation
0%
transform: translate(-50%, 0%)
opacity: 0
5%
transform: translate(0%, 0%)
opacity: 1
100%
transform: translate(0%, 0%)
opacity: 1
@keyframes parlor-button-speech-animation
5%
transform: scale(0)
opacity: 0
15%
transform: scale(1)
opacity: 1
20%
transform: scale(.9)
40%
transform: scale(1)
opacity: 1
100%
transform: scale(1)
opacity: 1
.parlor-button-wrapper
position: relative
margin: 0 20px
height: 60px
width: 60px
transition: all ease-in-out 200ms
z-index: 1000
.parlor-button-wrapper:hover
transform: translateY(-5px)
.parlor-button
box-shadow: 0 20px 20px -5px rgba(0, 0, 0, 0.15)
.parlor-button__visible-previews-count
opacity: 1
box-shadow: 0 20px 20px -5px rgba(0, 0, 0, 0.15)
.parlor-button
position: relative
height: 100%
width: 100%
cursor: pointer
z-index: 1
background-color: $red
border-radius: 50%
box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.2)
transition: all ease-in-out 200ms
display: flex
justify-content: center
align-items: center
background-repeat: no-repeat
svg
fill: #fff
#parlor-hand-wave
animation: parlor-button-wave-animation 5s infinite
-webkit-transform-origin: 100% 100%
transform-origin: 100% 100%
#parlor-hand-wiggles
animation: parlor-button-wiggles-scale-animation 5s infinite
-webkit-transform-origin: 50% 50%
transform-origin: 50% 50%
&.parlor-hand-wave
animation: parlor-button-wave-scale-animation 5s infinite
&.parlor-hand-ok
animation: parlor-button-animation 5s infinite
animation-delay: 1.5s
#parlor-speech-bubble
animation: parlor-button-speech-animation 5s infinite
animation-delay: 3s
-webkit-transform-origin: 0% 100%
transform-origin: 0% 100%
#parlor-face
animation: parlor-button-face-animation 5s infinite
animation-delay: 3s
&.parlor-speech
overflow: hidden
height: 60px
top: -4px
border-radius: 43%
position: relative
left: -7px
fill: $red
.parlor-button-counter
display: flex
justify-content: center
align-items: center
background: #FFFFFF
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50)
height: 16px
width: 16px
position: absolute
top: 0
right: 0
font-weight: 800
font-size: 12px
font-family: $fira
color: $red
z-index: 2
border-radius: 50%
text-align: center
.parlor-button-wrapper.-none .parlor-button
background-color: $white
div.parlor-button-wrapper.-close .parlor-button,
div.parlor-button-wrapper.-close.-none .parlor-button,
.is-open .parlor-button-wrapper.-new .parlor-button
background-image: url('/assets/images/parlor-icon-close.svg')
background-color: $red
background-position: center
background-size: 20px 20px
svg
display: none
.button-stage
height: 100vh
display: flex
justify-content: center
align-items: center
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.