<div class="projects-container" fxLayout="row wrap">

  <div class="project mat-elevation-z4 divide" fxFlex="calc(33.3333% - 12px)" *ngFor="let project of projects">

    <div class="header" style="background: linear-gradient(to left, rgb(203, 173, 109), rgb(213, 51, 105));">
      <div class="content">
        <div fxFlex="auto" fxLayout="column">
          <div class="top-row" fxLayout="row" fxLayoutAlign="space-between center">
            <div class="">{{project.date | date:"yyyy年MM月dd日"}}</div>
            <button mat-icon-button>
              <mat-icon>more_horiz</mat-icon>
            </button>

          </div>
          <div class="codename" fxFlex="auto" fxLayout="row" fxLayoutAlign="center center">
            {{project.name}}
          </div>
        </div>
      </div>
    </div>

    <div class="details">
      <div class="content">
        <div class="name">产品改进</div>
        <div class="members" fxLayout="row">
          <div class="member ">
          </div>
        </div>
        <div class="divider"></div>
        <div class="status success ongoing">进行中</div>
      </div>
    </div>

    <div class="overlay">
      <div class="overlay-content" fxLayout="column" fxLayoutAlign="space-between">
        <div class="overlay-actions" fxLayout="row" fxLayoutgap="16px">
          <button mat-icon-button>
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>backup</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>delete</mat-icon>
          </button>

        </div>

        <button mat-raised-button>
          <span class="mat-button-wrapper">查看详情</span>
        </button>

      </div>
    </div>
  </div>

</div>

:host {
  display: block;
  padding: 12px;
}

.divide {
  margin: {
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: 12px;
  }
}

.project {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  position: relative;

  .header {
    position: relative;

    &:before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 42.85714286%;
    }

    > .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #fff;
      padding: 8px 18px 24px 24px;

      .top-row {
        font-size: 12px;
      }

      .codename {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }

  .details {
    padding: 20px 24px;

    .members {
      margin-top: 16px;
    }

    .divider {
      width: 100%;
      height: 1px;
      background: #e0e0e0;
      margin: 20px auto 16px;
    }

    .status {
      font-weight: 700;
      font-size: 14px;
      text-align: center;

      &.ongoing {
        color: #4caf50;
      }
    }
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s;

    .overlay-content {
      padding: 20px 24px 24px;
      height: 100%;

      .overlay-actions {
        .mat-icon-button {
          margin-right: 16px;
          background: #fff;
          color: #666;
          box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
            0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
        }
      }
    }
  }

  &:hover {
    .overlay {
      visibility: visible;
      opacity: 1;
    }
  }
}