META-INF.resources.bower_components.angular-progress-button-styles.sass._rotate-side.scss Maven / Gradle / Ivy

Go to download
.progress-button-style-rotate-side {
  &-down {
    .progress {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 20px;
      -webkit-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
      -webkit-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    &.state-loading .progress-wrap {
      -webkit-transform: rotateX(90deg) translateZ(10px);
      transform: rotateX(90deg) translateZ(10px);
    }
  }

  &-up {
    .progress {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 100%;
      height: 20px;
      -webkit-transform: rotateX(90deg);
      transform: rotateX(90deg);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    &.state-loading .progress-wrap {
      -webkit-transform: rotateX(-90deg) translateZ(10px);
      transform: rotateX(-90deg) translateZ(10px);
    }
  }

  &-left {
    .progress-wrap {
      -webkit-transform-origin: 0 50%;
      transform-origin: 0 50%;
    }

    .progress {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 100%;
      -webkit-transform: rotateY(90deg);
      transform: rotateY(90deg);
      -webkit-transform-origin: 0 50%;
      transform-origin: 0 50%;
    }

    &.state-loading .progress-wrap {
      -webkit-transform: translateX(50%) rotateY(90deg) translateZ(10px);
      transform: translateX(50%) rotateY(90deg) translateZ(10px);
    }
  }

  &-right {
    .progress-wrap {
      -webkit-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
    }

    .progress {
      position: absolute;
      top: 0;
      left: 100%;
      width: 20px;
      height: 100%;
      -webkit-transform: rotateY(90deg);
      transform: rotateY(90deg);
      -webkit-transform-origin: 0 50%;
      transform-origin: 0 50%;
    }

    &.state-loading .progress-wrap {
      -webkit-transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
      transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
    }
  }
}