ujh/fountainpencompanion

View on GitHub
app/javascript/stylesheets/brands.scss

Summary

Maintainability
Test Coverage
.fpc-brands-list {
  column-count: 4;
  column-width: 29ch;
}

.fpc-ink-details {
  &__error-reporting,
  &__submit-review,
  &__tags {
    margin-top: 30px;
  }

  &__color-tile {
    width: 37px;
    height: 37px;
    float: left;
  }
}

.fpc-ink-reviews {
  margin-top: 30px;
}

.fpc-ink-review {
  margin-bottom: 20px;
  img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
  }
  a {
    font-weight: bold;
  }
  &__source {
    color: gray;
  }
}

.fpc-inks-table {
  // Count
  th:first-of-type,
  td:first-of-type {
    width: 80px;
  }

  td,
  th {
    vertical-align: middle;
  }

  td:last-of-type {
    // The content of the column changes because of the Add ink button.
    // Pin the width to avoid layout shifts.
    width: 260px;
    text-align: right;
  }
}

.edit_brand_cluster {
  .btn {
    margin-right: 10px;
  }
}

.brand-description {
  margin-bottom: 20px;
  .meta-data {
    font-size: smaller;
    margin-bottom: 20px;
  }
}