Mailspring/app/static/components/attachment-items.less

@import "ui-variables";
@import "ui-mixins";
@file-icon-color: #c7c7c7;
@attachment-border-color: rgba(0, 0, 0, 0.09);


.nylas-attachment-item {
  cursor: default;
  display: inline-block;
  position: relative;
  font-size: @font-size-small;
  margin: 0 0 @spacing-standard @spacing-standard;
  width: calc(~"50% - 23px");
  min-width: 320px;

  &.file-attachment-item:focus {
    .file-info-wrap,.file-action-icon,.file-thumbnail-preview {
      border-color: lighten(@component-active-color, 10%);
    }
    .file-action-icon {
      border-left-color: @attachment-border-color;
    }
  }

  .file-thumbnail-preview {
    width: 100%;
    max-height: 64px;
    text-align: left;
    overflow: hidden;
    border: solid 1px @attachment-border-color;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  &.file-attachment-item.has-preview {
    &:focus {
      .file-info-wrap,.file-action-icon {
        border-top-color: @attachment-border-color;
      }
    }
    .file-info-wrap {
      border-top-left-radius: 0;
    }
    .file-action-icon {
      border-top-right-radius: 0;
    }
  }

  .inner {
    border-radius: 2px;
    color: @text-color;
    background: @background-off-primary;
    height: 37px;
  }

  .file-info-wrap {
    display: flex;
    align-items: center;
    flex-grow: 2;
    min-width: 85%;
    padding: 10px;
    height: 105%;
    border: solid 1px @attachment-border-color;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: none;

    .file-icon {
      margin-right: 10px;
      flex-shrink:0;
    }
    .file-name {
      font-weight: @font-weight-medium;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 235px;
    }
    .file-size {
      @file-size-color: #b8b8b8;

      margin-left: auto;
      margin-right: @spacing-three-quarters;
      color: @file-size-color;
    }
    img.quicklook-icon {
      background-color: @file-icon-color;

      &:hover {
        background-color: darken(@file-icon-color, 20%);
      }
      &:active {
        background-color: darken(@file-icon-color, 40%);
      }
    }
  }

  .file-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 38px;
    margin-left: auto;
    padding: 10px;
    height: 105%;
    width: 38px;
    border: solid 1px @attachment-border-color;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    // box-shadow: inset 0 0 0 1px @attachment-border-color;

    img {
      background-color: @file-icon-color;
    }

    &:hover img {
      background-color: darken(@file-icon-color, 20%);
    }
    &:active {
      background-color: darken(@btn-default-bg-color, 5%);
    }
  }

  .progress-bar-wrap {
    display: none;

    &.state-downloading, &.state-started, &.state-progress {
      display: block;
    }

    &.state-completed, &.state-success {
      display: block;
      .progress-foreground { background: @background-color-success; }
    }

    &.state-aborted, &.state-failed {
      display: block;
      .progress-foreground { background: @background-color-error; }
    }

    .progress-foreground {
      position: absolute;
      left: 4px;
      bottom: 0;
      height: 2px;
      width: 0; // Changed by React
      z-index: 3;
      display: block;
      background: @blue-light;
      border-bottom-left-radius:4px;
      transition: width .3s linear;

    }
    .progress-background {
      position: absolute;
      left: 4px;
      bottom: 0;
      height: 2px;
      width: 97.5%;
      z-index: 2;
      display: block;
      background: @background-color-pending;
      border-bottom-left-radius:4px;
      border-bottom-right-radius:4px;
    }
  }
}

body.platform-win32 {
  .nylas-attachment-item {
    .inner {
      border-radius: 0;
    }
  }
}

.nylas-attachment-item.image-attachment-item {
  position: relative;
  text-align: center;
  display:inline-block;
  vertical-align: top;
  margin-bottom: @spacing-standard;
  margin-right: @spacing-standard;
  margin-left: @spacing-standard;
  width: initial;
  max-width: calc(~"100% - 30px");

  .progress-foreground,
  .progress-foreground {
    bottom: -2px;
  }
  .progress-background {
    bottom: -2px;
  }

  .file-action-icon, .file-name-container, .file-name {
    display: none;
  }
  .file-action-icon:active {
    background: none;
    -webkit-filter: brightness(95%);
  }

  &:hover {
    .file-action-icon, .file-name-container, .file-name {
      display: block;
    }
  }

  .file-action-icon {
    position: absolute;
    z-index: 2;
    right: 2px;
    top: -14px;
    width: 26px;
    border-radius: 0 0 0 3px;
    border: none;
    img {
      background: none;
    }
  }

  .file-preview {
    position: relative;
    z-index: 1;
    overflow: hidden;

    .file-name-container {
      cursor: default;
      position: absolute;
      bottom: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      height:100%;
      min-height:300px;
      background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 23%);
      vertical-align:bottom;

      // Important! file-name-container is on top of the image and prevents you from dragging it.
      pointer-events: none;

      .file-name {
        color: @white;
        left: @spacing-standard;
        right: @spacing-standard;
        bottom: @spacing-standard;
        text-align:left;
        position: absolute;
        z-index: 3;
      }
    }

    img {
      position: relative;
      z-index: 1;
      max-width: 100%;
      background: url(../static/images/attachments/transparency-background.png) top left repeat;
      background-size: 8px;
    }
  }
}