@import "./../variable.scss";
/**
  上传图片组件：
    组件中包含图片，功能悬浮框（一般是预览图片功能，重新上传图片功能以及删除图片功能）
 */
.hx-smart-uploader {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  width: auto;
  min-width: 3*$height-normal + 10px;
  padding: 0;
  background-color: $color-gray;
  text-align: center;
  border: 1px solid $color-gray-light;
  &.video-mode {
    .pad-functions {
      height: $height-regular;
      width: $height-regular * 2;
      top: $pm-sm;
      left: unset;
      right: $pm-sm;
    }
    &:hover {
      .pad-functions {
        background-color: rgba(0, 0, 0, .35);
        .btn-delete, .btn-upload {
          visibility: visible;
          opacity: 1.0;
        }
      }
    }
  }
  input[type='file'] {
    display: none;
  }
  .pad-images {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    position: relative;
    .pad-image, .pad-video {
      height: 100%;
      position: relative;
      display: inline-block;
      background-color: $color-gray-light;
      width: 100%;
      transform: translateX(0);
      transition: transform .4s;
      overflow: hidden;
      img {
        height: 100%;
        width: auto;
        @include centerHorizontal;
        margin: 0;
        transform: translateX(-50%);
      }
    }
  }
  > .pad-image {
    width: auto;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    .image {
      height: 100%;
      width: auto;
      @include centerHorizontal;
    }
    .video {
      height: 100%;
      width: 100%;
    }
  }
  .pad-functions {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 0, .0);
    transition: background-color .4s;
    &:hover {
      background-color: rgba(0, 0, 0, .35);
      .btn-last, .btn-next, .btn-preview, .btn-delete, .btn-upload {
        visibility: visible;
        opacity: 1.0;
      }
    }
    .text-amount, .btn-next, .btn-last, .btn-preview, .btn-upload, .btn-delete {
      position: absolute;
      font-size: 14px;
      display: inline-block;
      height: $height-regular;
      width: $height-regular;
      color: white;
      z-index: 100;
      text-shadow: 0px 2px 2px rgba(0,0,0,.6);
    }
    .text-amount {
      top: 0;
      width: 50px;
      line-height: $height-regular;
      @include centerHorizontal;
    }
    .btn-last, .btn-next, .btn-preview, .btn-delete, .btn-upload {
      background-color: transparent;
      cursor: default;
      position: absolute;
      visibility: hidden;
      opacity: .0;
      transition: all .4s;
      &:hover {
        background-color: rgba(255,255,255,.3);
      } 
      .icon {
        height: $height-normal / 2;
        width: auto;
      }
    }
    .btn-last { top: 0; left: 0; }
    .btn-next { top: 0; right: 0; }
    .btn-last, .btn-next { 
      .icon {
        height: $height-regular / 2;
        display: block;
      }
    }
    .btn-preview { 
      @include centerInParent;
      padding: $pm-sm/2 $pm-sm;
      box-sizing: content-box;
      border-radius: $pm-sm/2;
      width: auto;
      .icon {
        height: 100%;
        width: auto;
        border: none;
        display: block;
        margin: 0;
      }
    }
    .btn-delete { right: 0; bottom: 0; }
    .btn-upload { right: $height-regular; bottom: 0; }
  }
  &:hover {
    .functions {
      bottom: 0;
    }
  }
  > .btn-upload {
    height: 100%!important;
    width: 100%!important;
    color: $color-gray-deep;
    font-size: $font-bg;
    background-color: white;
    border: 1px solid $color-gray;
    transition: background-color .4s;
    border-radius: $pm-sm/4;
    padding: 0 $pm-bg;
    .icon {
      position: relative;
      display: block;
      margin: 0 auto $pm-sm;
      height: 40px;
      width: 40px;
      img {
        height: 40px;
        display: block;
        width: auto;
      }
    }
    .text {
      display: block;
      text-align: center;
      width: 100%;
    }
    &:hover {
      background-color: $color-gray-light;
    }
    &:active {
      background-color: $color-gray;
    }
    &.error { // 当表单验证失败时的效果
      border: 1px solid $color-red;
      color: $color-red;
      background-color: lighten($color-red, 32%)!important;
      transition: all .4s;
    }
  }
  > .pad-uploading {
    @include block;
    background-color: rgba(white, .85);
    > .icon-loading {
      @include centerInParent;
      margin-top: -$height-normal/3;
    }
    > .text-uploading {
      @include centerInParent;
      margin-top: $height-normal/2;
      color: $color-blue;
    }
  }
}
@media screen and (max-width: 640px) {
  .hx-smart-uploader {
    width: 100%!important;
    max-width: 100%;;
    .functions {
      bottom: $pm-sm/2;
      right: $pm-sm/2;
      width: auto;
      display: inline-block;
      border-radius: $border-radius-md;
    }
    .btn-upload {
      background-color: white;
    }
  }
}