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

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

@import 'Popup/styles'

.disabled-scroll
  width: 100%
  height: 100%
  overflow: hidden
body
  margin: 0
.gobi-player-shadow
  box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.2)
.gobi-popup-module
  font-size: 0
  letter-spacing: 0
  padding: 0 5%
  padding-top: 10px
  text-align: center
  font-family: 'Open Sans', sans-serif
  &__align-left
    text-align: left
  &__align-start
    text-align: start
  &__align-right
    text-align: right
  &__align-end
    text-align: end
  &__title
    display block
    margin-bottom 20px
    color: #4a4a4a
    font-size: 23px
    font-weight: 600
  &__stories
    overflow-y: hidden
    & > *
      margin: 10px 5px 10px
    &--no-wrap
      white-space: nowrap
      overflow-x: auto
    &--horizontal > *
      display: inline-block
      vertical-align: top
    &--vertical > *
      display: block
  &__player-block, &__stories-block
    display: inline-block
    vertical-align: middle
    box-sizing: border-box
  &__player-block--all-inline
    width: 40%
    padding-right: 2.5%
  &__stories-block--all-inline
    width: 60%
    padding-left: 2.5%
  &__player
    position: relative
    $height-to-width-ratio = 16 / 9
    $max-width = 95vh / $height-to-width-ratio
    max-width: $max-width
    margin: 0 auto
    &::before
      content: ''
      display: block
      padding-top: ($height-to-width-ratio * 100%)
    iframe
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%
.gobi-popup-story
  text-align: center
  font-family: 'Open Sans', sans-serif
  white-space: normal
  box-sizing: content-box
  .svg-holder
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    display flex
    align-items center
    justify-content center
  .svg-holder svg
    width 34%
  .gobi-popup-module--hoverable &__avatar-container:hover
    opacity: 1
    margin: 0px calc(.2 * 96px)
    width: calc(1.2 * 96px)
    // compute from bubble size
    border-width: 0px
  &__avatar-container
    position: relative
    display: inline-block
    width: 96px
    // bubble size
    padding: 5%
    border: 0px solid #15d6ea
    opacity: 0.8
    cursor: pointer
    box-sizing: border-box
    transition: margin 0.2s ease, opacity 0.2s ease, width 0.2s ease, border-width 0.2s ease
    margin: calc(0.1 * 96px) calc(.2*96px)
  &__avatar-svg
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    object-fit: cover
    transform: rotate(-90deg)
    transition: opacity .3s ease
  &__avatar
    padding-top: 100%
    border-radius: 50%
    background: no-repeat center
    background-size: cover
    box-sizing: border-box
    transition: box-shadow 0.4s ease
    box-shadow 0 7px 12px -5px rgba(0,0,0,.6)
  &__title
    display: block
    // because it is an <a>
    margin-top: 10px
    font-size: 11px
    box-sizing: border-box
    white-space: pre-line
  &__description
    position: relative
  &__description-text
    $font-size = 12px
    position: absolute
    left: 50%
    top: 20px
    width: 100%
    white-space: pre-line
    color: #858585
    font-size: $font-size
    opacity: 0
    box-sizing: border-box
    transform: translate(-50%, $font-size / 2)
    transition: opacity 0.2s ease, transform 0.4s ease
  @media all and (max-width: 767px)
    &__avatar-container
      width: 64px
      margin: calc(0.1 * 64px) calc(.2*64px)
    .gobi-popup-module--hoverable &__avatar-container:hover
      width: calc(1.2 * 64px)
      // compute from bubble size
      margin: 0px calc(.1*64px)

.gobi-popup-module--hoverable .gobi-popup-story__avatar-container:hover
  .gobi-popup-story__avatar
    box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.25)
  .gobi-popup-story__avatar-svg
    opacity: 0
  ~ .gobi-popup-story__description .gobi-popup-story__description-text
    opacity: 1
    transform: translate(-50%, 0)
.gobi-story
  max-width: 160px
  text-align: center
  opacity: 0.8
  transition: opacity 0.2s ease
  &--selected,
  &:hover
    opacity: 1
  &__avatar-container
    width: 128px
    margin: 0 auto
    padding: 2px
    border: 2px solid #999
    border-radius: 50%
    cursor: pointer
    box-sizing: border-box
  &--selected .gobi-popup-story__avatar-container
    border-color: #15d6ea
    border-radius: 60px;
    // box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3)
  &__avatar
    padding-top: 100%
    border-radius: 50%
    background: no-repeat center top
    background-size: cover
    box-sizing: border-box
    transition: box-shadow 400ms ease
  &__avatar-container:hover &__avatar,
  &--selected &__avatar
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3)
  &__title
    font-family: 'Open Sans', sans-serif
    color: #333
    margin: 4px 0 0
    font-size: 14px
    font-weight: 600
    white-space: pre-line
  &__description
    margin: 6px auto 0
    font-family: Arial, sans-serif
    color: #969696
    font-size: 10px
    line-height: 1.3
    white-space: pre-line
@keyframes bubbleBorderDraw
  from
    stroke-dashoffset: 370.52
  to
    stroke-dashoffset: 0