@gobistories/gobi-web-integration
Version:
Welcome to Gobi Web Integration. This library will let you put your Gobi stories on your site.
69 lines (68 loc) • 1.67 kB
text/stylus
.gobi-popup
&--active
height: 100%
opacity: 1
&--active &
transform: scale(1)
position: fixed
top: 0
left: 0
z-index: 2
width: 100%
height: 0
overflow: hidden
opacity: 0
background-color: rgba(52, 59, 70, 0.7)
text-align: center
transition: opacity 0.6s
box-sizing: border-box
position: absolute
left: 0
top: 0
width: 100%
height: 100%
margin: 0 auto
box-sizing: border-box
transition: transform 0.3s
transform: scale(0.3)
&__iframe-container
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
height: 100%
width: auto
iframe
position: absolute
left: 0
top: 0
width: 100%
height: 100%
&__size-image
height: 100%
width: auto
&__close-btn
position: absolute
top: 0
right: 3%
width: 8%
max-width: 55px
margin: 7% 0 0 0
padding: 0
border: 0
border-radius: 50%
opacity: 0.6
background: no-repeat center
background-size: 100% 100%
box-sizing: border-box
cursor: pointer
outline: none
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjAgNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjMwIiBjeT0iMzAiIHI9IjMwIi8+PGcgc3Ryb2tlPSIjMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMyI+PHBhdGggZD0iTTIzLjQgMjMuMWwxMy43IDEzLjdNMzcuMSAyMy4xTDIzLjQgMzYuOCIvPjwvZz48L2c+PC9zdmc+")
&::before
content: ''
display: block
padding-top: 100%
&:hover
opacity: 1