vui-design/src/style/components/upload.less

A high quality UI Toolkit based on Vue.js

@vui-upload: ~"@{vui}-upload";

.@{vui-upload} {
  line-height:1;

  // listType="text"
  &-text &-trigger {
    display:inline-block;
    vertical-align:middle;
    transition:all @transition-duration @transition-timing-function;

    input[type="file"] {
      display:none;
    }

    &:hover {

    }

    &:focus {

    }

    &-disabled {
      cursor:not-allowed;
      pointer-events:none;
    }
  }

  &-text &-list {
    display:block;
    margin:@margin-xs 0 0 0;
    padding:0;
    list-style:none;

    &-item {
      position:relative;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      border-radius:@border-radius;
      background-color:shade(@component-background-color, 2%);
      margin:0;
      padding:@padding-xs;
      list-style:none;
      color:@font-color;
      font-size:@font-size;
      line-height:@line-height;
      transition:all @transition-duration @transition-timing-function;

      &-thumbnail {
        display:flex;
        justify-content:center;
        align-items:center;
        margin-right:@margin-xs;
        transition:all @transition-duration @transition-timing-function;
      }

      &-name {
        flex:1;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        transition:all @transition-duration @transition-timing-function;
      }

      &-actions {
        display:flex;
        justify-content:center;
        align-items:center;
        margin-left:@margin-xs;
        opacity:0;
        transition:all @transition-duration @transition-timing-function;
      }

      &-action {
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        width:floor(@font-size * @line-height);
        height:floor(@font-size * @line-height);
        color:inherit;
      }

      &-percentage {
        position:absolute;
        left:0;
        right:0;
        bottom:0;
      }
    }
  }

  &-text &-list-item + &-list-item {
    margin-top:1px;
  }

  &-text &-list-item:hover &-list-item-actions {
    opacity:1;
  }

  &-text &-list-item-action + &-list-item-action {
    margin-left:@margin-xss;
  }

  &-text &-list-item-ready {
    background-color:shade(@component-background-color, 2%);
    color:@font-color;
  }

  &-text &-list-item-progress {
    background-color:shade(@component-background-color, 2%);
    color:@font-color;
  }

  &-text &-list-item-success {
    background-color:shade(@component-background-color, 2%);
    color:@primary-color;
  }

  &-text &-list-item-error {
    background-color:shade(@component-background-color, 2%);
    color:@error-color;
  }

  // listType="picture"
  &-picture &-trigger {
    display:inline-block;
    vertical-align:middle;
    transition:all @transition-duration @transition-timing-function;

    input[type="file"] {
      display:none;
    }

    &:hover {

    }

    &:focus {

    }

    &-disabled {
      cursor:not-allowed;
      pointer-events:none;
    }
  }

  &-picture &-list {
    display:block;
    margin:@margin-xs 0 0 0;
    padding:0;
    list-style:none;

    &-item {
      position:relative;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      border-width:@border-width;
      border-radius:@border-radius;
      margin:0;
      padding:@padding-xs;
      list-style:none;
      color:@font-color;
      font-size:@font-size;
      line-height:@line-height;
      transition:all @transition-duration @transition-timing-function;

      &-thumbnail {
        cursor:pointer;
        display:block;
        width:48px;
        height:48px;
        border-radius:@border-radius;
        margin-right:@margin-xs;
        overflow:hidden;
        transition:all @transition-duration @transition-timing-function;

        img {
          display:block;
          width:100%;
          height:100%;
          object-fit:cover;
          object-position:center;
        }
      }

      &-name {
        flex:1;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        transition:all @transition-duration @transition-timing-function;
      }

      &-actions {
        display:flex;
        justify-content:center;
        align-items:center;
        margin-left:@margin-xs;
        opacity:0;
        transition:all @transition-duration @transition-timing-function;
      }

      &-action {
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        width:floor(@font-size * @line-height);
        height:floor(@font-size * @line-height);
        color:inherit;
      }

      &-percentage {
        position:absolute;
        left:64px;
        right:8px;
        bottom:8px;
      }
    }
  }

  &-picture &-list-item + &-list-item {
    margin-top:@margin-xs;
  }

  &-picture &-list-item:hover &-list-item-actions {
    opacity:1;
  }

  &-picture &-list-item-action + &-list-item-action {
    margin-left:@margin-xss;
  }

  &-picture &-list-item-ready {
    border-style:dashed;
    border-color:@border-color;
    color:@font-color;
  }

  &-picture &-list-item-progress {
    border-style:dashed;
    border-color:@border-color;
    color:@font-color;
  }

  &-picture &-list-item-success {
    border-style:solid;
    border-color:@border-color;
    color:@primary-color;
  }

  &-picture &-list-item-error {
    border-style:solid;
    border-color:@error-color;
    color:@error-color;
  }

  // listType="picture-card"
  &-picture-card &-trigger {
    position:relative;
    cursor:pointer;
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100px;
    height:100px;
    border:@border-width dashed @border-color;
    border-radius:@border-radius;
    background-color:shade(@component-background-color, 2%);
    margin:0;
    vertical-align:top;
    color:@font-color;
    font-size:@font-size;
    transition:all @transition-duration @transition-timing-function;

    input[type="file"] {
      display:none;
    }

    &:hover {
      border-color:@primary-color;
    }

    &:focus {
      border-color:@primary-color;
    }

    &-disabled {
      cursor:not-allowed;
      pointer-events:none;
    }
  }

  &-picture-card &-list {
    display:inline;
    margin:0;
    padding:0;
    list-style:none;
    vertical-align:top;
    font-size:0;

    &-item {
      position:relative;
      display:inline-block;
      width:100px;
      height:100px;
      border-width:@border-width;
      border-radius:@border-radius;
      margin:0 @margin-xs @margin-xs 0;
      padding:@padding-xs;
      list-style:none;
      vertical-align:top;
      color:@font-reverse-color;
      font-size:@font-size;
      line-height:@line-height;
      transition:all @transition-duration @transition-timing-function;

      &-thumbnail {
        cursor:pointer;
        display:block;
        width:100%;
        height:100%;
        border-radius:@border-radius;
        overflow:hidden;
        transition:all @transition-duration @transition-timing-function;

        img {
          display:block;
          width:100%;
          height:100%;
          object-fit:cover;
          object-position:center;
        }
      }

      &-name {
        flex:1;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        transition:all @transition-duration @transition-timing-function;
      }

      &-actions {
        position:absolute;
        top:@padding-xs;
        bottom:@padding-xs;
        left:@padding-xs;
        right:@padding-xs;
        z-index:2;
        display:flex;
        justify-content:center;
        align-items:center;
        background-color:rgba(0,0,0,0.5);
        opacity:0;
        transition:all @transition-duration @transition-timing-function;
      }

      &-action {
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        width:floor(@font-size * @line-height);
        height:floor(@font-size * @line-height);
        color:inherit;
      }

      &-percentage {
        position:absolute;
        top:50%;
        left:50%;
        z-index:1;
        transform:translate(-50%,-50%);
      }
    }
  }

  &-picture-card &-list-item:hover &-list-item-actions {
    opacity:1;
  }

  &-picture-card &-list-item-action + &-list-item-action {
    margin-left:@margin-xss;
  }

  &-picture-card &-list-item-ready {
    border-style:dashed;
    border-color:@border-color;
  }

  &-picture-card &-list-item-progress {
    border-style:dashed;
    border-color:@border-color;
  }

  &-picture-card &-list-item-success {
    border-style:solid;
    border-color:@border-color;
  }

  &-picture-card &-list-item-error {
    border-style:solid;
    border-color:@error-color;
  }

  // listType="text" && draggable
  &-text&-draggable &-trigger {
    cursor:pointer;
    display:block;
    border:@border-width dashed @border-color;
    border-radius:@border-radius;
    background-color:shade(@component-background-color, 2%);
    padding:@padding-lg;
    text-align:center;

    &:hover {
      border-color:@primary-color;
      background-color:shade(@component-background-color, 2%);
    }

    &:focus {
      border-color:@primary-color;
      background-color:shade(@component-background-color, 2%);
    }

    &-dragover {
      border-color:@primary-color;
      background-color:~`colorPalette("@{primary-color}", 1) `;
    }

    &-disabled {
      border-color:@border-color;
      background-color:shade(@component-background-color, 2%);
    }
  }

  // listType="picture" && draggable
  &-picture&-draggable &-trigger {
    cursor:pointer;
    display:block;
    border:@border-width dashed @border-color;
    border-radius:@border-radius;
    background-color:shade(@component-background-color, 2%);
    padding:@padding-lg;
    text-align:center;

    &:hover {
      border-color:@primary-color;
      background-color:shade(@component-background-color, 2%);
    }

    &:focus {
      border-color:@primary-color;
      background-color:shade(@component-background-color, 2%);
    }

    &-dragover {
      border-color:@primary-color;
      background-color:~`colorPalette("@{primary-color}", 1) `;
    }

    &-disabled {
      border-color:@border-color;
      background-color:shade(@component-background-color, 2%);
    }
  }

  // listType="picture-card" && draggable
  &-picture-card&-draggable &-trigger {
    cursor:pointer;
    display:block;
    width:100%;
    height:auto;
    border:@border-width dashed @border-color;
    border-radius:@border-radius;
    background-color:shade(@component-background-color, 2%);
    padding:@padding-lg;
    text-align:center;

    &:hover {
      border-color:@primary-color;
      background-color:shade(@component-background-color, 2%);
    }

    &:focus {
      border-color:@primary-color;
      background-color:shade(@component-background-color, 2%);
    }

    &-dragover {
      border-color:@primary-color;
      background-color:~`colorPalette("@{primary-color}", 1) `;
    }

    &-disabled {
      border-color:@border-color;
      background-color:shade(@component-background-color, 2%);
    }
  }
  &-picture-card&-draggable &-list {
    display:block;
    margin-top:@margin-xs;
  }
}