plumes/features/screen-message/css/pl-screen-message.less

Flying-fast Metro future vision components

@import "../../common/less/common-mixins.less";
@import "../../common/less/common-variables.less";

@-webkit-keyframes pl-title-border-show { 0% { width: 0; } 100% { width: 700px; } }
@-moz-keyframes pl-title-border-show { 0% { width: 0; } 100% { width: 700px; } }
@-ms-keyframes pl-title-border-show { 0% { width: 0; } 100% { width: 700px; } }
@-o-keyframes pl-title-border-show { 0% { width: 0; } 100% { width: 700px; } }
@keyframes pl-title-border-show { 0% { width: 0; } 100% { width: 700px; } }

.pl-screen-message {
  .noselect();
  z-index: 100000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;

  .title {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 3rem;
    text-align: center;
    overflow: hidden;

    h1 {
      position: relative;
      .transform(translateY(3rem));
      font-size: 2.2rem;
      text-align: center;
      line-height: 3rem;
      margin: 0;
    }
  }

  .pl-screen-messages-message {
    position: absolute;
    left: 2rem;
    right: 2rem;
    text-align: center;

    .pl-message .word {
      font-size: 5rem;
      line-height: 6rem;
    }
  }

  .title-border {
    display: none;
    max-width: 70rem;
    width: 97%;
    height: 1px;
    margin: 1rem auto 0;

    .animation(pl-title-border-show 0.65s @easeOutQuart);
  }

  &.playing {
    .title h1 {
      .transform(translateY(0));
      .transition(all 0.55s @easeOutQuart);
    }
  }

  &.done {
    .title h1 {
      .transform(translateY(-3rem));
      .transition(all 0.55s @easeOutQuart);
    }
  }

  &.sb-title-1, &.sb-title-2 {
    .title-border {
      display: block;
    }
  }

  &.sb-title-2 {
    .pl-screen-messages-message {
      .transition(all 1s @easeOutQuart);

      .message .word {
        font-size: 3rem;
        lein-height: 3rem;
        margin-left: 0.75rem;
        .transition(all 1s @easeOutQuart);
      }
    }
  }

  &.sb-title-out-1 {
    .pl-screen-messages-message {
      opacity: 0;
      .transition(all 0.55s @easeOutQuart);

      .message .word {
        font-size: 3rem;
        lein-height: 3rem;
        margin-left: 0.75rem;
        .transition(all 1s @easeOutQuart);
      }
    }
  }

  &.sb-title-out-2 {
    .pl-screen-messages-message {
      opacity: 0;
    }
  }
}