byhl-zt/pro-components/card/components/Card/index.less

@root-entry-name: 'default';
@import (reference) 'ant-design-vue/es/style/themes/index.less';

@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card';
@card-hoverable-hover-border: transparent;
@pro-card-default-border: @border-width-base @border-style-base @border-color-split;

// == when focus or actived
.pro-card-active() {
  background-color: @item-active-bg;
  border-color: @outline-color;
}

.@{pro-card-prefix-cls} {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: @component-background;
  border-radius: @card-radius;

  &-col {
    width: 100%;
  }

  &-border {
    border: @pro-card-default-border;
  }

  &-hoverable {
    cursor: pointer;
    transition: box-shadow 0.3s, border-color 0.3s;

    &:hover {
      border-color: @card-hoverable-hover-border;
      box-shadow: @card-shadow;
    }

    &.@{pro-card-prefix-cls}-checked:hover {
      border-color: @outline-color;
    }
  }

  &-checked {
    .pro-card-active();
    &::after {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 0;
      height: 0;
      border: 6px solid @primary-color;
      border-bottom: 6px solid transparent;
      border-left: 6px solid transparent;
      border-top-right-radius: 2px;
      content: '';
    }
  }

  &:focus {
    .pro-card-active();
  }

  &-size-small {
    .@{pro-card-prefix-cls} {
      &-header {
        padding: @card-head-padding-sm @card-padding-base-sm;
        padding-bottom: 0;

        &-border {
          & {
            padding-bottom: @card-head-padding-sm;
          }
        }
      }

      &-title {
        font-size: @card-head-font-size-sm;
      }

      &-body {
        padding: @card-padding-base-sm;
      }
    }
  }

  &-ghost {
    background-color: transparent;

    > .@{pro-card-prefix-cls} {
      &-header {
        padding-right: 0;
        padding-bottom: @card-head-padding;
        padding-left: 0;
      }

      &-body {
        padding: 0;
        background-color: transparent;
      }
    }
  }

  &-split > &-body {
    padding: 0;
  }

  &-split-vertical {
    border-right: @border-width-base @border-style-base @border-color-split;
  }

  &-split-horizontal {
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  &-contain-card > &-body {
    display: flex;
  }

  &-body-direction-column {
    flex-direction: column;
  }

  &-body-wrap {
    flex-wrap: wrap;
  }

  &-collapse {
    > .@{pro-card-prefix-cls} {
      &-header {
        padding-bottom: @card-head-padding;
        border-bottom: 0;
      }

      &-body {
        display: none;
      }
    }
  }

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: @card-head-padding @card-padding-base;
    padding-bottom: 0;
    &-border {
      & {
        padding-bottom: @card-head-padding;
      }
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    &-collapsible {
      cursor: pointer;
    }
  }

  &-title {
    color: @card-head-color;
    font-weight: 500;
    font-size: @card-head-font-size;
  }

  &-extra {
    color: @card-head-extra-color;
  }

  &-type-inner {
    .@{pro-card-prefix-cls}-header {
      background-color: @background-color-light;
    }
  }

  &-collapsible-icon {
    margin-right: 8px;
    color: @icon-color-hover;
    :hover {
      color: @primary-color-hover;
    }

    & svg {
      transition: transform @animation-duration-base;
    }
  }

  &-body {
    display: block;
    box-sizing: border-box;
    height: 100%;
    padding: @card-padding-base;

    &-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.loop-grid-columns(@index) when (@index > 0) {
  .@{pro-card-prefix-cls}-col-@{index} {
    flex-shrink: 0;
    width: percentage((@index / @grid-columns));
  }
  .loop-grid-columns((@index - 1));
}

.@{pro-card-prefix-cls}-col-0 {
  display: none;
}

.loop-grid-columns(@grid-columns);