@gobistories/gobi-web-integration/src/Popup/styles.styl

Welcome to Gobi Web Integration. This library will let you put your Gobi stories on your site.

.gobi-popup
  &--active
    height: 100%
    opacity: 1
  &--active &
    &__content
      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
  &__content
    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