rsuite/Card/styles/index.less

A suite of react components

@import '../../styles/common.less';

//
// Card
// --------------------------------------------------

.rs-card {
  --rs-card-width: 100%;
  --rs-card-padding: 16px;

  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  width: var(--rs-card-width);

  &-bordered {
    border: 1px solid var(--rs-border-primary);
    background-color: var(--rs-card-bg);
  }

  &-shaded {
    box-shadow: var(--rs-panel-shadow);
  }

  &-shaded-hover:hover {
    box-shadow: var(--rs-panel-shadow);
    cursor: pointer;
  }

  &-sm {
    --rs-card-padding: 8px;
  }

  &-md {
    --rs-card-padding: 16px;
  }

  &-lg {
    --rs-card-padding: 24px;
  }

  &-row {
    flex-direction: row;
  }

  &-header {
    padding: var(--rs-card-padding) var(--rs-card-padding) 0 var(--rs-card-padding);
  }

  &-body {
    padding: var(--rs-card-padding);
  }

  &-footer {
    display: flex;
    gap: 8px;
    padding: 0 var(--rs-card-padding) var(--rs-card-padding) var(--rs-card-padding);
  }
}