tour.sass

// # GENERAL

.underline
  display: none
  overflow: visible
  position: absolute
  z-index: 1
  left: 0

.stroke
  stroke: #fff
  stroke-dasharray: 1000
  stroke-dashoffset: 1000

.tour__position-helper
  position: absolute
  top: -100px
  left: 0
  width: 1px
  height: 1px
  background-color: transparent

.onboarding-tour--current-element
  position: relative
  .underline
    display: block
  .stroke
    animation-delay: 10s
    animation: 1.5s ease-out 1s forwards stroke

@keyframes stroke
  from
    stroke-dashoffset: 1000
  to
    stroke-dashoffset: 0


// # IN PROGRESS NOTICE

.tour--playing
  .tour__in-progress-notice
    display: flex

.tour__in-progress-notice
  display: none
  align-items: baseline
  position: fixed
  z-index: 6
  bottom: 0
  left: 0
  width: 100%
  padding: 12px 24px
  font-weight: 500
  color: #fff
  background-color: #6741D9
.tour__in-progress-notice-text
  margin-right: 24px
.tour__in-progress-notice-stop-icon
  margin-right: 8px
  color: #F03E3E
.tour__in-progress-notice-stop-button
  display: inline-block
  padding: 3px 13px 5px 11px
  color: #FA5252
  background-color: #fff
  border-radius: 4px
  &:hover
    color: #E03131
    background-color: #F3F0FF
    .tour__in-progress-notice-stop-icon
      color: #C92A2A


// # STEPS

.tour-step
.tour-step__masthead
  .underline
    bottom: -160px
  .stroke-1
    stroke: #E64980 // pink
  .stroke-2
    stroke: #5C7CFA // blue
.tour-step__bundle-name
  .underline
    bottom: -160px
  .stroke-1
    stroke: #ffffff
  .stroke-2
    stroke: #D6336C // dark pink
.tour-step__bundle-price
  .underline
    bottom: -117px
    left: 8px
  .stroke-1
    stroke: #5C7CFA // blue
  .stroke-2
    stroke: #E64980 // pink
.tour-step__bundle-description
  .underline
    bottom: -160px
    left: -16px
  .stroke-1
    stroke: #E64980 // pink
  .stroke-2
    stroke: #FFFFFF
.tour-step__bundle-cover-image
  .underline
    bottom: -48px
    left: 10px
  .stroke-1
    stroke: #ffffff
  .stroke-2
    stroke: #D6336C // dark pink
.tour-step__bundle-cover-image-replace
  .underline
    bottom: -30px
    left: 16px
  .stroke-1
    stroke: #D6336C // dark pink
  .stroke-2
    stroke: #FFFFFF
.tour-step__bundle-details
  .underline
    bottom: -160px
  .stroke-1
    stroke: #E64980 // pink
  .stroke-2
    stroke: #FFFFFF
.tour-step__bundle-deliverable
  .underline
    bottom: -160px
  .stroke-1
    stroke: #E64980 // pink
  .stroke-2
    stroke: #FFFFFF
.tour-step__bundle-timeline
  .underline
    bottom: -160px
  .stroke-1
    stroke: #E64980 // pink
  .stroke-2
    stroke: #FFFFFF
.tour-step__new-bundle
  .underline
    bottom: -170px
  .stroke-1
    stroke: #ffffff
  .stroke-2
    stroke: #5C7CFA // blue
.tour-step__new-bundle
  .underline
    bottom: -170px
  .stroke-1
    stroke: #ffffff
  .stroke-2
    stroke: #5C7CFA // blue
.tour-step__page-avatar
  .underline
    bottom: -160px
  .stroke-1
    stroke: #ffffff
  .stroke-2
    stroke: #5C7CFA // blue
.tour-step__page-cover-image
  .underline
    bottom: -70px
    left: 30px
  .stroke-1
    stroke: #D6336C // dark pink
  .stroke-2
    stroke: #FFFFFF
.tour-step__claim
  .underline
    bottom: -160px
  .stroke-1
    stroke: #D6336C // dark pink
  .stroke-2
    stroke: #FFFFFF