thomasklemm/pluginGeek

View on GitHub
app/assets/stylesheets/_repos.sass

Summary

Maintainability
Test Coverage
// repos

//
// repo
//
.repos-wrapper .repo
  font-size:  14px
  .full-name
    display: block
    .name
      font-size: 18px
      font-weight: 600
    .owner
      // color: $secondary-text-color
    .staff-pick
      @extend .label-element
      margin-left: 12px
  .stats
    display: block
    color: $primary-color
    .activity
      margin-left: 12px
  .description
    display: block
  .homepage-link

  &:not(:first-of-type)
    margin-top: 12px
  &:not(:last-of-type)
    margin-bottom: 12px

//
// repo details header
//
.repo-details
  font-size: 0.9375rem
  .name-and-owner
    font-size: 1.618rem
    font-weight: 600
    i
      margin-right: 9px
    .name
    .owner
      font-weight: 400
  .details
    > *
      margin-left: 1rem // settled after careful experimentation :-D
    .stars
      color: $secondary-text-color
    .star-on-github-link
      position: relative
      top: 4px
      padding-left: 1px // right one added by iframe width
    .staff-pick
    .edit-link, .refresh-link

  .description
    display: block
  .homepage-url
  .activity
    margin-left: 1rem

//
// readme
//

// outer box
.readme-container
  background: #fff
  padding: 1rem
  border: 2px solid #ddd
  border-radius: 4px

// readme insertion place
.readme-target
  position: relative
  overflow: hidden

  // height classes set via js
  &.max-height
    height: 425px
  &.auto-height
    height: auto

  // toggle readme
  .toggle-readme
    position: absolute
    bottom: -12px // to offset parents padding-bottom
    left: 0
    width: 100%
    text-align: center
    margin: 0
    padding: 80px 0 20px

    // fadeout effect
    @include background-image(linear-gradient(white(0) 0%, white(1) 80%, white(1) 100%))

// colors hightlighting a project's most recent timestamp on Github
.activity
  abbr
    border-bottom: none
  &.high
    color: $high-repo-activity-color
  &.medium
    color: $medium-repo-activity-color
  &.low
    color: $low-repo-activity-color

.add-repo-wrapper
  .name-and-owner
    font-size: 1.618rem
    font-weight: 600
    i
      margin-right: 9px