bin-ui/src/styles/components/card.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

.bin-card {
  border-radius: $border-base-radius;
  border: $border-base-light;
  background-color: #fff;
  color: $color-text-default;
  transition: $animation-duration-base;
  width: 100%;
  &.is-always-shadow, &.is-hover-shadow:focus, &.is-hover-shadow:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .12);
  }
  &.is-never-shadow, &.is-never-shadow:focus, &.is-never-shadow:hover {
    box-shadow: none;
  }
  &.is-no-border {
    border: none;
  }
  .bin-card__header {
    padding: 18px 20px;
    box-sizing: border-box;
    font-size: $header-font-size;
    color: $color-text-primary;
    &.has-divider {
      border-bottom: $border-base-light;
    }
    &.no-divider {
      border-bottom: none;
    }
    &.has-tip {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 18px;
        bottom: 18px;
        width: 2px;
        background: $color-primary;
      }
    }
  }
  .bin-card__body {
    padding: 20px;
  }

}