iep-ui/lib/image/style/index.less

An enterprise-class UI design language and Vue-based implementation

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

@image-prefix-cls: ~'@{ant-prefix}-image';
@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
@zindex-preview-mask: 1000;
@preview-mask-bg: fade(#000, 50%);
@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;
}

.@{image-prefix-cls} {
  position: relative;
  display: inline-block;
  &-img {
    width: 100%;
    height: auto;
    &-placeholder {
      background-color: @image-bg;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 30%;
      .box();
    }
  }

  &-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @text-color-inverse;
    background: fade(@black, 50%);
    cursor: pointer;
    opacity: 0;
    transition: opacity @animation-duration-slow;

    &-info {
      .@{iconfont-css-prefix} {
        margin-inline-end: @margin-xss;
      }
    }

    &:hover {
      opacity: 1;
    }
  }
  &-preview {
    .modal-mask();
    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 {
      .@{image-prefix-cls}-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, 10%);

      &-operation {
        padding: 10px;
        cursor: pointer;
        margin-left: 10px;
        &-disabled {
          pointer-events: none;
          svg {
            fill: @text-color-disabled !important;
          }
        }
        &:last-of-type {
          margin-left: 0;
        }
      }
      &-icon {
        font-size: 18px;
        svg {
          width: 18px;
          height: 18px;
          fill: #fff;
        }
      }
    }
    &-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;
      cursor: pointer;
      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%;
      cursor: pointer;
      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;
  }
}