maestrano/mno-enterprise-angular

View on GitHub
src/app/views/marketplace/marketplace.less

Summary

Maintainability
Test Coverage
.dashboard-marketplace {

  .marketplace-nav input, select {
    color: @dashboard-marketplace-search-text-color;
    border: solid 1px @dashboard-marketplace-search-border-color;
    background: transparent;
    box-shadow: none;
    height: 35px;

    // Placeholder
    .placeholder(@dashboard-marketplace-search-text-color);
  }

  // Fix Windows (Chrome/FF/IE) bug on dropdown options colors
  // when parent "select" color is set to white
  .marketplace-nav select option {
    color: black;
  }

  .marketplace-nav {
    min-height: 65px;
  }

  .marketplace-compare-action {
    position: relative;
    top: -15px;
  }

  //-------------------------------
  // Marketplace list
  //-------------------------------
  .marketplace-list {
    margin-top: 20px;
  }

  //-------------------------------
  // App Card
  //-------------------------------
  .marketplace-app-card {
    position: relative;
    background-color: @dashboard-marketplace-tile-bg-color;
    color: @dashboard-marketplace-tile-text-color;
    cursor: pointer;
    @dashboard-marketplace-app-card();

    img.media-object {
      max-width: 100px;
      border: solid 1px @dashboard-marketplace-tile-img-border-color;
      border-radius: 5px;
    }

    &:hover {
      text-decoration: none;
      color: @dashboard-marketplace-tile-hover-text-color;
      background-color: @dashboard-marketplace-tile-hover-bg-color;

      img.media-object {
        border: solid 1px @dashboard-marketplace-tile-hover-img-border-color;
      }
    }

    .media {
      margin-top: 0;
    }
  }

  .marketplace-app-card-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;

    label {
      width: 100%;
      height: 100%;
      //padding-left: 20px;
      cursor: pointer;
    }
  }

  // Application logo
  .marketplace-app-card img.media-object {
    max-width: 100px;
    border: solid 1px @dashboard-marketplace-tile-img-border-color;
    border-radius: 5px;
  }
  .marketplace-app-card:hover img.media-object {
    border: solid 1px darken(@dashboard-marketplace-tile-hover-img-border-color,5%);
  }

  // Application Description
  .marketplace-app-card .media-body {
    padding-right: 10px;
    color: @dashboard-marketplace-tile-text-color;
  }
  .marketplace-app-card:hover .media-body {
    color: @dashboard-marketplace-tile-hover-text-color;
  }

  // App tile arrow right
  .marketplace-app-card .arrow {
    position: absolute;
    right: 20px;
    top: 50px;
    color: @dashboard-marketplace-tile-hover-arrow-color;
    visibility: hidden;
  }
  .marketplace-app-card:hover .arrow {
    visibility: visible;
  }
}