JSLink - Responsive Document WP

.less

body {
  background:#f5f5f5;
}
.ms-Grid {
  max-width:1280px;
  margin:0 auto 0;
}

.myDocuments {
  width:100%;
  float:left;
  background:#fff;
  border:1px solid #d9d9d9;
  margin:0;
  padding:0;
  list-style:none;
  &__li {
    float:left;
    border-bottom:1px solid #fff;
    &:last-child {
      border:none;
    }
    &:hover {
      background:#f8f8f8;
    }
  }
  &__link {
    width:100%;
    float:left;
    text-decoration:none;
  }
  &__icon {
    width:65px;
    height:65px;
    float:left;
    background:#ebebeb;
    box-sizing:border-box;
    padding-top: 12px;
    font-size: 30pt;
    text-align: center;
    color: #fff;
  }
  &__text {
    width:auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    box-sizing:border-box;
    margin:0;
    padding:18px 0 0 10px;
  }
}
// Word Document
a.myDocuments__link[href$=".doc"],
a.myDocuments__link[href$=".docx"],
a.myDocuments__link[href$=".dot"],
a.myDocuments__link[href$=".dotx"] {
  .myDocuments__icon {
    background: #2A5695;

    &:before {
      content: '\EC29';
    }
  }
}

// Excel Document
a.myDocuments__link[href$=".xls"],
a.myDocuments__link[href$=".xlsx"] {
  .myDocuments__icon {
    background: #1D7044;

    &:before {
      content: '\EC28';
    }
  }
}
a.myDocuments__link[href$=".ppt"] {
  .myDocuments__icon {
    background: #D04526;

    &:before {
      content: "\EC2A";
    }
  }
}