ant-design-vue/components/vc-image/assets/index.less

@import '../../style/themes/index';
@import '../../style/mixins/index';

@prefixCls: ~'@{ant-prefix}-image';
@zindex-preview-mask: 1000;
@preview-mask-bg: fade(#000, 40%);
@text-color: #bbb;
@text-color-disabled: darken(@text-color, 30%);
@background-color: #f3f3f3;

.reset() {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box() {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.@{prefixCls} {
  display: inline-block;
  position: relative;
  &-img {
    width: 100%;
    height: auto;
    &-placeholder {
      background-color: @background-color;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Iuafpeeci+WbvueJh+S8mOWMljQuMCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuWKoOi9veWbvueJhyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU3Mi4wMDAwMDAsIC01MDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpbWFnZS1maWxs5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NzAuMDAwMDAwLCA1MDEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yOSw1IEwzLDUgQzIuNDQ2ODc1LDUgMiw1LjQ0Njg3NSAyLDYgTDIsMjYgQzIsMjYuNTUzMTI1IDIuNDQ2ODc1LDI3IDMsMjcgTDI5LDI3IEMyOS41NTMxMjUsMjcgMzAsMjYuNTUzMTI1IDMwLDI2IEwzMCw2IEMzMCw1LjQ0Njg3NSAyOS41NTMxMjUsNSAyOSw1IFogTTEwLjU2MjUsOS41IEMxMS42NjU2MjUsOS41IDEyLjU2MjUsMTAuMzk2ODc1IDEyLjU2MjUsMTEuNSBDMTIuNTYyNSwxMi42MDMxMjUgMTEuNjY1NjI1LDEzLjUgMTAuNTYyNSwxMy41IEM5LjQ1OTM3NSwxMy41IDguNTYyNSwxMi42MDMxMjUgOC41NjI1LDExLjUgQzguNTYyNSwxMC4zOTY4NzUgOS40NTkzNzUsOS41IDEwLjU2MjUsOS41IFogTTI2LjYyMTg3NSwyMy4xNTkzNzUgQzI2LjU3ODEyNSwyMy4xOTY4NzUgMjYuNTE4NzUsMjMuMjE4NzUgMjYuNDU5Mzc1LDIzLjIxODc1IEw1LjUzNzUsMjMuMjE4NzUgQzUuNCwyMy4yMTg3NSA1LjI4NzUsMjMuMTA2MjUgNS4yODc1LDIyLjk2ODc1IEM1LjI4NzUsMjIuOTA5Mzc1IDUuMzA5Mzc1LDIyLjg1MzEyNSA1LjM0Njg3NSwyMi44MDYyNSBMMTAuNjY4NzUsMTYuNDkzNzUgQzEwLjc1NjI1LDE2LjM4NzUgMTAuOTE1NjI1LDE2LjM3NSAxMS4wMjE4NzUsMTYuNDYyNSBDMTEuMDMxMjUsMTYuNDcxODc1IDExLjA0Mzc1LDE2LjQ4MTI1IDExLjA1MzEyNSwxNi40OTM3NSBMMTQuMTU5Mzc1LDIwLjE4MTI1IEwxOS4xLDE0LjMyMTg3NSBDMTkuMTg3NSwxNC4yMTU2MjUgMTkuMzQ2ODc1LDE0LjIwMzEyNSAxOS40NTMxMjUsMTQuMjkwNjI1IEMxOS40NjI1LDE0LjMgMTkuNDc1LDE0LjMwOTM3NSAxOS40ODQzNzUsMTQuMzIxODc1IEwyNi42NTkzNzUsMjIuODA5Mzc1IEMyNi43NDA2MjUsMjIuOTEyNSAyNi43MjgxMjUsMjMuMDcxODc1IDI2LjYyMTg3NSwyMy4xNTkzNzUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRThFOEU4Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
    }
  }

  &-placeholder {
    .box();
  }

  &-preview {
    text-align: center;
    height: 100%;
    pointer-events: none;

    &-body {
      .box();
      overflow: hidden;
    }

    &.zoom-enter,
    &.zoom-appear {
      transform: none;
      opacity: 0;
      animation-duration: 0.3s;
    }

    &-mask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-preview-mask;
      height: 100%;
      background-color: @preview-mask-bg;
      filter: ~'alpha(opacity=50)';

      &-hidden {
        display: none;
      }
    }

    &-img {
      cursor: grab;
      transform: scale3d(1, 1, 1);
      transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
      user-select: none;
      vertical-align: middle;
      max-width: 100%;
      max-height: 100%;
      pointer-events: auto;
      &-wrapper {
        .box();
        transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
        &::before {
          content: '';
          display: inline-block;
          height: 50%;
          width: 1px;
          margin-right: -1px;
        }
      }
    }

    &-moving {
      .@{prefixCls}-preview-img {
        cursor: grabbing;
        &-wrapper {
          transition-duration: 0s;
        }
      }
    }

    &-wrap {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-preview-mask;
      overflow: auto;
      outline: 0;
      -webkit-overflow-scrolling: touch;
    }

    &-operations {
      .reset();
      pointer-events: auto;
      list-style: none;
      position: absolute;
      display: flex;
      top: 0;
      right: 0;
      width: 100%;
      align-items: center;
      flex-direction: row-reverse;
      z-index: 1;
      color: @text-color;
      background: fade(@preview-mask-bg, 45%);

      &-operation {
        padding: 10px;
        cursor: pointer;
        margin-left: 10px;
        &-disabled {
          pointer-events: none;
          color: @text-color-disabled;
        }
        &:last-of-type {
          margin-left: 0;
        }
      }
      &-icon {
        font-size: 18px;
      }
    }

    &-switch-left {
      position: absolute;
      left: 10px;
      top: 50%;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      background: fade(@text-color, 45%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      pointer-events: auto;
      color: @text-color;
      &-disabled {
        background: fade(@text-color, 30%);
        color: @text-color-disabled;
        cursor: not-allowed;
        > .anticon {
          cursor: not-allowed;
        }
      }
      > .anticon {
        font-size: 24px;
      }
    }

    &-switch-right {
      position: absolute;
      right: 10px;
      top: 50%;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      background: fade(@text-color, 45%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      pointer-events: auto;
      color: @text-color;
      &-disabled {
        background: fade(@text-color, 20%);
        color: @text-color-disabled;
        cursor: not-allowed;
        > .anticon {
          cursor: not-allowed;
        }
      }
      > .anticon {
        font-size: 24px;
      }
    }
  }
}

.fade-enter,
.fade-appear {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-play-state: paused;
  opacity: 0;
  animation-timing-function: linear;
}
.fade-leave {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-timing-function: linear;
}
.fade-enter.fade-enter-active,
.fade-appear.fade-appear-active {
  animation-name: rcImageFadeIn;
  animation-play-state: running;
}
.fade-leave.fade-leave-active {
  animation-name: rcImageFadeOut;
  animation-play-state: running;
  pointer-events: none;
}

@keyframes rcImageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rcImageFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.zoom-enter,
.zoom-appear {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-leave {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-enter.zoom-enter-active,
.zoom-appear.zoom-appear-active {
  -webkit-animation-name: rcImageZoomIn;
  animation-name: rcImageZoomIn;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.zoom-leave.zoom-leave-active {
  -webkit-animation-name: rcImageZoomOut;
  animation-name: rcImageZoomOut;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  pointer-events: none;
}

@keyframes rcImageZoomIn {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes rcImageZoomOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
  }
}