MiniDigger/Hangar

View on GitHub
ore/app/assets/stylesheets/_version-list.scss

Summary

Maintainability
Test Coverage
.version-panel {
  .loading {
    text-align: center;
    padding: 0.5em 0;
    font-size: 4em;
  }

  .version-table {
    svg[data-fa-i2svg] {
      margin-right: 0.5rem;
    }

    tr > td {
      cursor: default;

      &.base-info {
        vertical-align: middle;

        .channel {
          font-size: 0.75em;
        }

        .name a {
          font-weight: 600;
          color: $sponge_dark_grey;
        }

        width: 50%;
        padding-left: 15px;
      }

      &.version-tags {
        width: 50%;
        padding-right: 15px;
        text-align: right;
        vertical-align: middle;

        .tags {
          display: inline-flex;
          flex-wrap: nowrap;
        }
      }

      &.information-one, &.information-two {
        vertical-align: middle;
        display: none;
      }

      &.download {
        vertical-align: middle;
        display: none;

        width: 5%;
        text-align: right;
        padding-right: 15px;

        a {
          color: $sponge_grey;
        }

        .download-link {
          position: relative;

          .fa-download {
            margin-top: 8px;
          }

          .fa-exclamation-circle, .fa-check {
            position: absolute;
            top: -21px;
            left: -10px;
            font-size: 1.4em;
            color: #FFA500;
          }
        }
      }

      @media (min-width: 768px) {
        &.information-one, &.information-two, &.download {
          display: table-cell;
        }

        &.base-info {
          width: 25%;
        }

        &.version-tags {
          text-align: left;
          width: 25%;
        }

        &.information-one {
          width: 20%;
        }

        &.information-two {
          width: 20%;
        }

        &.download {
          width: 10%;
        }
      }
    }
  }

  > .panel-heading h4 {
    font-size: 1.3em;
    font-weight: 400;
  }

  > .panel-pagination {
    display: none;
  }
}