Mailspring/app/static/style/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%;
    height: 94px;
    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: 65%;
    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;
    }
  }

  .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;
    }

    &.quicklook {
      border-radius: 0;
      border-right: none;
    }
    &: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 0.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;
  margin: 0;
  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;
    filter: brightness(95%);
  }

  &:hover {
    border: 1px dashed fade(@text-color, 20%);

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

  .file-action-icon {
    position: absolute;
    z-index: 2;
    right: 2px;
    top: -14px;
    width: 26px;
    height: 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;
      z-index: 2;
      height: 30px;
      max-width: 100%;
      border-top-right-radius: 3px;
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0px,
        rgba(0, 0, 0, 0.5) 20px,
        rgba(0, 0, 0, 0) 50px
      );
      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;
        padding: 5px 10px;
        z-index: 3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
    }

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

  .resizer {
    align-items: center;
    bottom: 0;
    background: #000;
    color: #fff;
    cursor: nwse-resize;
    display: flex;
    height: 20px;
    justify-content: center;
    opacity: .3;
    position: absolute;
    right: 0;
    width: 20px;
    z-index: 9;

    // Thanks: https://css.gg/arrows-expand-left
    .gg-arrows-expand-left {
      box-sizing: border-box;
      position: relative;
      display: block;
      transform: scale(0.9);
      width: 14px;
      height: 14px;
      box-shadow:
          6px 6px 0 -4px,
          -6px -6px 0 -4px
    }
    .gg-arrows-expand-left::before {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 2px;
      height: 22px;
      top: -4px;
      left: 6px;
      transform: rotate(-45deg);
      border-top: 9px solid;
      border-bottom: 9px solid
    }
  }

  &:hover, &[data-resizing] {
    .resizer {
      opacity: 1;
    }
  }
}