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

Go to download
.progress-button {
  &-style-rotate-angle-bottom {
    .progress {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 20px;
      box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */
      -webkit-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
      -webkit-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
    }

    &.state-loading .progress-wrap {
      -webkit-transform: rotateX(45deg);
      transform: rotateX(45deg);
    }
  }

  &-style-rotate-angle-top {
    .progress {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 100%;
      height: 20px;
      box-shadow: 0 1px 0 #148544; /* fix the blurriness that causes a gap */
      -webkit-transform: rotateX(90deg);
      transform: rotateX(90deg);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
    }

    &.state-loading .progress-wrap {
      -webkit-transform: rotateX(-45deg);
      transform: rotateX(-45deg);
    }
  }

  &-style-rotate-angle-left {
    .progress {
      position: absolute;
      top: 0;
      right: 100%;
      width: 20px;
      height: 100%;
      box-shadow: 1px 0 0 #148544; /* fix the blurriness that causes a gap */
      -webkit-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
      -webkit-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
    }

    &.state-loading .progress-wrap {
      -webkit-transform: rotateY(45deg);
      transform: rotateY(45deg);
    }
  }

  &-style-rotate-angle-right {
    .progress {
      position: absolute;
      top: 0;
      left: 100%;
      width: 20px;
      height: 100%;
      box-shadow: -1px 0 0 #148544; /* fix the blurriness that causes a gap */
      -webkit-transform: rotateY(90deg);
      transform: rotateY(90deg);
      -webkit-transform-origin: 0% 50%;
      transform-origin: 0% 50%;
    }

    &.state-loading .progress-wrap {
      -webkit-transform: rotateY(-45deg);
      transform: rotateY(-45deg);
    }
  }
}