codecombat/app/styles/play/level/loading.sass

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

@mixin wing-background($url: '', $backgroundPosition: left)
  background: black
  background-image: url($url)
  background-repeat: no-repeat
  background-position: top $backgroundPosition
  background-size: contain

#level-loading-view
  color: blue
  width: 100%
  height: 100%
  position: absolute
  z-index: 20
  $UNVEIL_TIME: 1.2s

  &.unveiled
    pointer-events: none
  
  .loading-details
    position: absolute
    top: 20px
    left: 50%
    $WIDTH: 1000px
    width: $WIDTH
    min-height: 60px
    margin-left: (-$WIDTH / 2)
    z-index: 100
    background-color: rgba(220, 255, 230, 0.6)
    color: darkslategray
    font-size: 15px
    border-radius: 30px
    padding: 10px
    text-align: center
    // http://matthewlein.com/ceaser/  Bounce down a bit, then snap up.
    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, 0, 0.670, 0)
    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
    -moz-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
    -o-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
    transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)

    .load-progress
      position: absolute
      left: 2%
      top: 0px
      opacity: 0.6
      width: 96%
      height: 40px
      margin: 10px auto 0

      .progress
        height: 100%

        .progress-bar
          width: 1%
          height: 100%
          transition-duration: 0

        &.active .progress-bar
          transition-duration: 1.2s
        
    #tip-wrapper
      position: relative
      z-index: 2
      top: 10px

    .level-loading-goals
      margin: 30px auto 10px
      width: 400px

      .panel-heading
        font-size: 24px

      .list-group-item
        font-size: 20px

    .start-level-button
      font-size: 40px
      font-variant: small-caps

  .left-wing, .right-wing
    width: 100%
    height: 100%
    position: absolute

  .left-wing
    @include wing-background('/images/level/loading_left_wing.png', right)
    left: -50%
    transition: all $UNVEIL_TIME ease

  .right-wing
    @include wing-background('/images/level/loading_right_wing.png', left)
    right: -50%
    transition: all $UNVEIL_TIME ease
Working on new loading view design. 2014-03-14 20:06:08 -04:00			`@import "app/styles/mixins"`
Trying to standardize sass imports in an effort to test #1615, to no avail. 2014-09-30 19:17:54 -04:00			`@import "app/styles/bootstrap/variables"`
Working on new loading view design. 2014-03-14 20:06:08 -04:00
Hacky way to get play background to fit with new loading image. 2014-04-11 19:15:26 -04:00			`@mixin wing-background($url: '', $backgroundPosition: left)`
			`background: black`
			`background-image: url($url)`
Working on new loading view design. 2014-03-14 20:06:08 -04:00			`background-repeat: no-repeat`
			`background-position: top $backgroundPosition`
Even better-looking loading background. 2014-03-15 19:06:35 -04:00			`background-size: contain`
Working on new loading view design. 2014-03-14 20:06:08 -04:00
			`#level-loading-view`
			`color: blue`
			`width: 100%`
			`height: 100%`
			`position: absolute`
			`z-index: 20`
			`$UNVEIL_TIME: 1.2s`
Fixed #805. 2014-04-09 12:04:59 -04:00
			`&.unveiled`
			`pointer-events: none`
Working on new loading view design. 2014-03-14 20:06:08 -04:00
			`.loading-details`
			`position: absolute`
			`top: 20px`
			`left: 50%`
			`$WIDTH: 1000px`
			`width: $WIDTH`
Removed Wizards from hero levels. Fixed issues with GameMenuModal width and swapping of hero config. No need to click start with ?dev=true. Hero is always selected in hero levels. GameMenuModal shows up while loading if no heroConfig is detected. 2014-09-21 23:19:27 -04:00			`min-height: 60px`
Working on new loading view design. 2014-03-14 20:06:08 -04:00			`margin-left: (-$WIDTH / 2)`
			`z-index: 100`
Tweaked the loading page progress bar. 2014-03-17 03:05:45 -04:00			`background-color: rgba(220, 255, 230, 0.6)`
			`color: darkslategray`
			`font-size: 15px`
Working on new loading view design. 2014-03-14 20:06:08 -04:00			`border-radius: 30px`
			`padding: 10px`
			`text-align: center`
			`// http://matthewlein.com/ceaser/ Bounce down a bit, then snap up.`
			`-webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, 0, 0.670, 0)`
			`-webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)`
			`-moz-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)`
			`-o-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)`
			`transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)`

			`.load-progress`
Tweaked the loading page progress bar. 2014-03-17 03:05:45 -04:00			`position: absolute`
			`left: 2%`
			`top: 0px`
			`opacity: 0.6`
			`width: 96%`
Showing goals on level loading view. 2014-09-21 18:52:49 -04:00			`height: 40px`
Tweaked the loading page progress bar. 2014-03-17 03:05:45 -04:00			`margin: 10px auto 0`
Working on new loading view design. 2014-03-14 20:06:08 -04:00
Showing goals on level loading view. 2014-09-21 18:52:49 -04:00			`.progress`
			`height: 100%`

			`.progress-bar`
			`width: 1%`
			`height: 100%`
Some styling and animation tweaks to the level loading screen. 2014-11-01 14:10:26 -04:00			`transition-duration: 0`

			`&.active .progress-bar`
Showing goals on level loading view. 2014-09-21 18:52:49 -04:00			`transition-duration: 1.2s`
Tweaked the loading page progress bar. 2014-03-17 03:05:45 -04:00
			`#tip-wrapper`
			`position: relative`
			`z-index: 2`
Showing goals on level loading view. 2014-09-21 18:52:49 -04:00			`top: 10px`

			`.level-loading-goals`
			`margin: 30px auto 10px`
			`width: 400px`

			`.panel-heading`
			`font-size: 24px`

			`.list-group-item`
			`font-size: 20px`
Working on new loading view design. 2014-03-14 20:06:08 -04:00
Press Start to begin playing levels. Fixed #1574. 2014-09-21 17:35:59 -04:00			`.start-level-button`
Showing goals on level loading view. 2014-09-21 18:52:49 -04:00			`font-size: 40px`
New GoalsView background. Be my guest with any text color improvements. 2014-11-04 20:20:58 -05:00			`font-variant: small-caps`
Press Start to begin playing levels. Fixed #1574. 2014-09-21 17:35:59 -04:00
Working on new loading view design. 2014-03-14 20:06:08 -04:00			`.left-wing, .right-wing`
More work on the loading view. 2014-03-14 22:44:19 -04:00			`width: 100%`
Working on new loading view design. 2014-03-14 20:06:08 -04:00			`height: 100%`
			`position: absolute`

			`.left-wing`
Hacky way to get play background to fit with new loading image. 2014-04-11 19:15:26 -04:00			`@include wing-background('/images/level/loading_left_wing.png', right)`
More work on the loading view. 2014-03-14 22:44:19 -04:00			`left: -50%`
			`transition: all $UNVEIL_TIME ease`
Working on new loading view design. 2014-03-14 20:06:08 -04:00
			`.right-wing`
Hacky way to get play background to fit with new loading image. 2014-04-11 19:15:26 -04:00			`@include wing-background('/images/level/loading_right_wing.png', left)`
More work on the loading view. 2014-03-14 22:44:19 -04:00			`right: -50%`
			`transition: all $UNVEIL_TIME ease`