mdui/src/components/grid_list/index.less

a CSS Framework based on material design

/**
 * =============================================================================
 * ************   Grid List 网格列表   ************
 * =============================================================================
 */

/* 调整网格边距 */
.mdui-grid-list {
  margin: 0 -@grid-list-gutter / 2;

  .mdui-col,
  [class*="mdui-col-xs-"],
  [class*="mdui-col-sm-"],
  [class*="mdui-col-md-"],
  [class*="mdui-col-lg-"],
  [class*="mdui-col-xl-"] {
    padding-right: @grid-list-gutter / 2;
    padding-left: @grid-list-gutter / 2;
  }
}

/* 单元格 */
.mdui-grid-tile {
  position: relative;
  box-sizing: border-box;
  margin-bottom: @grid-list-gutter;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
  }
}

/* 操作栏 */
.mdui-grid-tile-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 48px;
  max-height: 68px;
  padding: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);

  .mdui-icon {
    color: #fff;
  }
}

/* 操作栏内的文本 */
.mdui-grid-tile-text {
  flex: 1;
  overflow: hidden;
}

/* 标题 */
.mdui-grid-tile-title {
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  .mdui-text-truncate();

  .mdui-icon {
    margin-right: 8px;
  }
}

/* 副标题 */
.mdui-grid-tile-subtitle {
  height: 18px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  .mdui-text-truncate();

  .mdui-icon {
    margin-right: 8px;
    font-size: 18px;
  }
}

/* 操作栏内的按钮 */
.mdui-grid-tile-buttons {
  flex: none;
  margin: -8px;
  white-space: nowrap;

  .mdui-btn {
    margin-left: 8px;
    &:first-child {
      margin-left: 0;
    }
  }
}

.mdui-grid-tile-text + .mdui-grid-tile-buttons {
  margin-left: 8px;
}
.mdui-grid-tile-buttons + .mdui-grid-tile-text {
  margin-left: 16px;
}

/* 操作栏位于顶部 */
.mdui-grid-tile-actions-top {
  top: 0;
  bottom: auto;
}

/* 操作栏背景透明 */
.mdui-grid-tile-actions-transparent {
  background: transparent;
}

/* 操作栏背景渐变 */
.mdui-grid-tile-actions-gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));

  &.mdui-grid-tile-actions-top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
  }
}