phoenix-components-library/react/components/Card WIP/Card.css

Component library for Phoenix Frontend Projects.

.es-card-wrapper .es-card {
  transition: width 15s;
  border: solid 1px #e9ebeb;
  background: #fff;
  position: relative;
  transition: box-shadow 0.5s cubic-bezier(0.6, 0.03, 0.06, 0.93); }
  .es-card-wrapper .es-card__min-height {
    min-height: 380px; }
  .es-card-wrapper .es-card__active {
    box-shadow: inset 0px -4px 0px 0px #6db749; }
  .es-card-wrapper .es-card__highlight {
    box-shadow: 0px 0px 10px 2px rgba(109, 183, 73, 0.4); }
  .es-card-wrapper .es-card__label {
    position: absolute;
    top: 17px;
    right: 15px; }
    .es-card-wrapper .es-card__label--icon {
      font-size: 15px;
      color: #bec2c2;
      cursor: pointer; }
  .es-card-wrapper .es-card__favourited {
    cursor: pointer;
    color: #f7be77;
    z-index: 2; }
  .es-card-wrapper .es-card .es-platform {
    top: 17px;
    right: 15px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    z-index: 2; }
    .es-card-wrapper .es-card .es-platform__item {
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 2px;
      background-color: #6db749; }
      .es-card-wrapper .es-card .es-platform__item i {
        font-size: 12px; }
      .es-card-wrapper .es-card .es-platform__item:first-child {
        margin-right: 3px; }
      .es-card-wrapper .es-card .es-platform__item.placeholder {
        background: #559bd8; }
        .es-card-wrapper .es-card .es-platform__item.placeholder h3 {
          font-size: 13px;
          font-weight: bold;
          color: #fff; }
      .es-card-wrapper .es-card .es-platform__item.isPlaceholder {
        opacity: 0.5;
        filter: grayscale(100%); }
  .es-card-wrapper .es-card__header {
    min-height: 50px;
    padding: 15px;
    border-bottom: solid 1px #e9ebeb; }
    .es-card-wrapper .es-card__header-long {
      opacity: 1;
      position: absolute;
      max-height: 50px;
      overflow: hidden;
      top: 0;
      left: 0;
      background-color: #fff;
      width: 100%;
      min-height: 51px;
      padding: 15px 15px 5px;
      border-bottom: solid 1px #e9ebeb;
      display: flex;
      z-index: 1;
      flex-direction: column;
      transition: max-height 0.3s linear; }
      .es-card-wrapper .es-card__header-long:hover {
        height: auto;
        max-height: 250px; }
        .es-card-wrapper .es-card__header-long:hover .es-card__name {
          height: auto;
          min-height: 20px;
          max-height: 200px;
          -webkit-line-clamp: 8; }
        .es-card-wrapper .es-card__header-long:hover .es-copy-to {
          display: flex;
          align-items: center;
          font-size: 12px; }
          .es-card-wrapper .es-card__header-long:hover .es-copy-to:hover {
            color: #6db749;
            font-size: 12px; }
  .es-card-wrapper .es-card .es-copy-to {
    border-top: solid 1px #e9ebeb;
    margin: 15px 0 0 0;
    padding: 10px 0 4px 0;
    font-size: 12px;
    color: #bec2c2;
    cursor: pointer; }
    .es-card-wrapper .es-card .es-copy-to span {
      color: #6db749;
      margin-right: 10px;
      font-size: 12px; }
  .es-card-wrapper .es-card__name {
    margin: 0;
    font-size: 15px;
    overflow: hidden;
    height: 20px;
    max-height: 20px;
    transition: max-height 0.3s linear;
    width: 164px;
    line-height: 20px;
    font-weight: normal;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
    word-wrap: break-word; }
  .es-card-wrapper .es-card__image-wrapper {
    position: relative;
    background-color: #e9ebeb;
    background-image: url("../../assets/img/no-image.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 150px;
    width: 100%; }
  .es-card-wrapper .es-card__text {
    margin: 0;
    font-size: 15px;
    overflow: hidden;
    height: 20px;
    width: 218px;
    line-height: 20px;
    text-overflow: ellipsis;
    font-size: 13px;
    margin: 0; }
  .es-card-wrapper .es-card__label-text {
    font-size: 12px;
    color: #bec2c2; }
  .es-card-wrapper .es-card__content {
    padding: 15px;
    min-height: 142px; }
    .es-card-wrapper .es-card__content__content-only {
      min-height: 270px; }
  .es-card-wrapper .es-card__social {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: solid 1px #e9ebeb;
    height: 40px; }
    .es-card-wrapper .es-card__social--item {
      color: #e9ebeb;
      font-size: 14px; }
    .es-card-wrapper .es-card__social--item-active {
      color: #6db749; }
  .es-card-wrapper .es-card__footer {
    display: flex;
    justify-content: space-around;
    border-top: solid 1px #e9ebeb;
    height: 40px;
    margin-top: auto; }
    .es-card-wrapper .es-card__footer--item {
      height: 100%;
      display: flex;
      margin: 0 auto;
      align-items: center;
      color: #6db749;
      cursor: pointer;
      font-size: 15px; }
      .es-card-wrapper .es-card__footer--item a {
        color: #6db749; }
  .es-card-wrapper .es-card__footer-separator {
    height: 60%;
    width: 1px;
    background: #e9ebeb;
    margin: auto 0; }