zui/src/less/views/cards.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: cards.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// Cards view

.cards {
  padding-top: 10px;
  padding-bottom: 10px;
  .make-row();
}

.card {
  display: block; // Override the inline-block from `.img-thumbnail`
  margin-bottom: @line-height-computed;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.075);

  .transition(all, @animation-speed-normal, @animation-type);
  border-radius: @border-radius-base;
  border: 1px solid @card-border-color;

  > img {
    .opacity(1);
    .img-responsive();
  }

  > .media-wrapper {
    .opacity(1);
    display: block;
    background-color: @color-gray-pale;
    overflow: hidden;
    text-align: center;
    width: 100%;
    .transition(all, @animation-speed-normal, @animation-type);
    > img {
      max-width: 100%;
      vertical-align: middle;
    }
  }

  .card-heading {
    display: block;
    margin: 0;
    padding: 10px;
    .text-overflow();
  }

  .card-content,.card-actions {
    padding: 0 10px 10px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-actions {
    .btn + .pull-right {
      line-height: 20px;
      padding: 6px 0;
    }
  }

  &:hover {
    box-shadow: 0 1px 5px rgba(0,0,0,.175);
    text-decoration: none;

    > img,
    > .media-wrapper {
      .opacity(0.9);
      background-color: #e5e5e5;
    }
  }
}

.cards-borderless {
  .card {
    border: none;
    box-shadow: none;
    border-radius: 0;

    > img,
    > .media-wrapper {
      border-radius: @border-radius-base;
      overflow: hidden;
    }

    > .card-heading,
    > .card-actions,
    > .card-content {
      padding-left: 0;
      padding-right: 0;
    }
  }
}