fixed-vuesax/dist/style/components/vsUpload.styl

Framework Components for Vue js

.con-upload
  width: 100%
  position relative

.con-input-upload
  background: rgb(245, 245, 245)
  width: 200px;
  height 200px
  box-sizing: border-box
  border-radius: 8px
  position relative
  // padding: 5px;
  transition: all .25s ease
  border: 1px dashed rgba(0, 0, 0, .1)
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column
  margin: 15px
  // margin-top: 5px
  dirValue(float, left)

  &:hover
    border: 1px dashed getColor(primary, .5)

  &.disabled-upload
    opacity: 0
    pointer-events: none
    user-select: none
    display: none

  input
    position: absolute
    width: 100%;
    height 100%;
    opacity 0;
    left 0
    top: 0
    cursor pointer

  .text-input
    min-width: 200px;
    display block
    text-align: center
    margin: 0 !important
    padding: 0 !important
    width: 100%;
    font-weight: bold

  .input-progress
    height 100%;
    position absolute
    display: block
    left 0;
    top: 0;
    width: 29%
    background: getColor('primary')
    border-radius: 10px

  &.on-progress-all-upload
    width: 100%;
    height 4px;
    overflow hidden
    padding: 0;
    border: 0 solid rgba(0, 0, 0, 0)

    .text-input, .vs-upload--button-upload
      opacity 0
      transform: translate(-40px)

  &.is-ready-all-upload
    .input-progress
      background: getColor(success, 1) !important

.vs-upload--button-upload
  position absolute
  border: 0;
  padding: 4px;
  border-radius: 0 0 5px 5px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: .8rem
  z-index 500
  cursor pointer
  margin: 0;
  color: getColor('primary')
  transition: all .2s ease
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .05)
  background: rgba(0, 0, 0, .03)
  bottom: 0
  width: 100%

  &:disabled
    opacity .4
    pointer-events: none

  &:hover
    // box-shadow: 0 5px 20px 0 rgba(0,0,0,.1)
    padding-bottom: 10px
    padding-top: 10px
    background: getColor('primary')
    color rgb(255, 255, 255)

.con-img-upload
  width: 100%
  background: rgb(255, 255, 255)
  position relative
  border-radius: 10px;
  margin-top: 5px;
  padding-right: 5px;
  box-sizing: border-box
  column-gap: 5px;
  overflow hidden

  .img-upload
    backface-visibility: hidden
    dirValue(float, left)
    overflow hidden
    border-radius: 10px;
    background: rgba(0, 80, 0, .5)
    background: rgb(255, 255, 255)
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1)
    transition: all .3s ease;
    display flex
    align-items: center
    justify-content: center
    flex-direction: column
    width: 200px;
    height 200px;
    margin: 5px
    position relative
    cursor pointer

    &.fileError
      border: 1px solid getColor('danger', .2)
      box-shadow: 0 5px 20px 0 getColor('danger', .2)

      .btn-upload-file
        background: getColor('danger', .3) !important

        i
          background: getColor('danger') !important


    &.removeItem
      transition: all .3s ease, height .2s ease .2s;
      opacity 0 !important;
      width: 0 !important;
      visibility hidden
      margin: 0 !important;
      height 0 !important;

    img
      transition: all .3s ease;

    &:hover
      transform: scale(.99)
      box-shadow: 0 0 0 0 rgba(0, 0, 0, .1)

      .btn-x-file
        opacity 1
        transform: translate(0%, 0%)

      .btn-upload-file
        opacity 1
        transform translate(-50%, 65%)

    .btn-x-file
      display block
      position absolute
      top: 5px
      // width: 80px;
      // height 80px;
      padding: 0;
      propWithDir(right, null, 5px)
      margin: 0;
      transform: translate(20%, -20%)
      background: transparent
      z-index 300
      // background-image: linear-gradient(45deg, rgba(0,0,0,0) 50%, getColor('danger') 100%);
      // transform: rotate(45deg)
      opacity 0;
      border: 0;
      cursor pointer
      transition: all .2s ease
      border-radius: 10px;

      i
        transition: all .2s ease
        position relative
        padding: 4px;
        font-size: 1.4rem
        // top: 2px;
        // right 2px;
        // width: 30px;
        // height 30px;
        display: flex
        align-items: center
        justify-content: center
        border-radius: 5px;
        background: rgba(0, 0, 0, .1)
        // color: getColor(danger,.8)
        color: rgba(255, 255, 255, 1)
        text-shadow: 0 3px 10px rgba(0, 0, 0, .5);

      &:hover
        // background-image: linear-gradient(45deg, rgba(0,0,0,0) 50%, getColor('danger') 90%);

        i
          // top: 6px;
          // right 6px;
          border-radius: 50%;
          background: getColor('danger')

        ~ .btn-upload-file:not(.on-progress)
          background: radial-gradient(ellipse at center, getColor(danger, 1) 0%, rgba(0, 0, 0, 0) 70%);
          height: 300px;

          &:after
            border: 1px solid getColor('danger')

          i
            opacity 0

        ~ .on-progress
          background: getColor(danger, .2)

          i
            opacity 0

        ~ img
          filter: grayscale(80%)

    .text-archive
      display: flex
      align-items: center
      justify-content: center
      position relative
      text-align: center
      padding: 5px;

      i
        position absolute
        font-size: 7rem;
        opacity .05

      span
        position relative
        padding: 5px;

    .btn-upload-file
      margin: 0;
      opacity 0
      position: absolute
      bottom: 0;
      left: 50%;
      z-index: 200;
      border-radius: 50%;
      width: 300px;
      height: 200px;
      transform translate(-50%, 80%)
      border 0;
      background: radial-gradient(ellipse at center, getColor(success, 1) 0%, rgba(0, 0, 0, 0) 70%);
      cursor pointer
      transition: all .3s ease;
      animation: imageRebound .7s ease !important

      &:after
        content: ''
        width: 200px;
        height 200px;
        position: absolute
        z-index 100;
        display: block
        left 50%;
        transform: translate(-50%, -50%)
        top: 50%;
        border-radius: 50%;
        border: 1px solid getColor(success, 1)
        animation: circle 1.5s ease infinite

      &:not(.on-progress):hover
        width: 200px;
        height: 200px;
        transform translate(-50%, 70%)

        i
          font-size: 1.4rem
          background: getColor(success, 1)
          top: 6%;
          padding: 10px;

      i
        z-index 50
        border-radius: 50%
        transition: all .2s ease;
        position: absolute
        left: 50%;
        top: 12%;
        transform translate(-50%)
        color: rgba(255, 255, 255, 1)
        text-shadow: 0 3px 10px rgba(0, 0, 0, .5);
        padding: 20px;
        backface-visibility visible

      span
        opacity 0
        z-index 300

      &.on-progress
        width 100%
        height: 20px;
        background: getColor(success, .3)
        border-top: 1px solid getColor(success, 1)
        bottom: 0;
        transform translate(0)
        left: 0;
        opacity: 1 !important
        overflow hidden
        border-radius: 0
        pointer-events: none
        // &:after
        // opacity: 0

        i
          opacity: .2
          background: getColor(success, 1)
          box-shadow: 0 5px 17px 0 rgba(0, 0, 0, .150)
          top: 50%
          transform translate(-50%, -50%) scale(1.2)
          padding: 20px;

        span
          transition: all .5s ease
          opacity: 1
          color: rgb(255, 255, 255)
          font-size: 1rem;
          position: absolute
          top: calc(50% + 40px);
          left: 0;
          text-align: center
          width: 100%;
          text-shadow: 0 3px 15px getColor(success, 1);
          font-weight: bold
          z-index 300
          display: block
          transform: translate(0, -50%)

      &.ready-progress
        border-top: 0 solid getColor(success, 1)
        background: getColor(success, .5)

        span
          z-index 10
          transform translate(0, -50%) scale(.5)
          top: calc(50% + 20px);
          opacity: 0;

        &:after
          opacity: 0

        i
          opacity: 1
          background: getColor(success, 1)
          box-shadow: 0 5px 17px 0 rgba(0, 0, 0, .150)
          top: 50%
          transform translate(-50%, -50%) scale(1)
          padding: 10px;

.upload-enter-active
  transition: all .7s ease !important
  animation: imageRebound .7s ease !important

// .upload-leave-active
//   transition: all 0s ease !important
//   width: 0 !important
// transition: all .3s !important;
// transform scale(.7) !important
// opacity: 0 !important

@keyframes imageRebound {
  0% {
    transform: scale(.4);
    border-radius: 30%;
    pointer-events: none
  }
  40% {
    transform: scale(1.03);
    border-radius: 14px;
    pointer-events: none
  }
  70% {
    transform: scale(.98);
    border-radius: 18px;
    pointer-events: none
  }
  100% {
    transform: scale(1);
    border-radius: 10px;
    pointer-events: none
  }
}

@keyframes circle {
  0% {
    width: 0
    height 0
  }
  100% {
    width: 230px
    height 230px
    opacity 0
  }
}


/*
* View Upload styles
*/

.view-upload-enter-active, .view-upload-leave-active {
  transition: opacity .5s;
}

.view-upload-enter, .view-upload-leave-to
  opacity: 0;

  img
    transform: scale(.4)

.view-upload
  position fixed
  left 0;
  z-index 15000
  width: 100%
  height 100%
  background: rgba(0, 0, 0, .3)
  top: 0;
  padding: 20px
  display: flex
  align-items: center
  justify-content: center

  img
    transition: all .3s ease;
    border-radius: 10px;
    position relative
    display: block
    left 0
    top: 0
    right 0
    bottom: 0
    max-width 100%
    max-height: 100%
    margin: auto
    animation: imageRebound .7s ease !important
    box-shadow: 0 8px 30px 0 rgba(0, 0, 0, .25)
    background: rgb(255, 255, 255)

// background-image: url('../../public/grid.png')