@opensig/opendesign

Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
304 lines (278 loc) • 8.35 kB
CSS
View Raw
.o-card {
  --card-bg-color: var(--o-color-fill2);
  --card-radius: var(--o-radius_control-l);
  --card-shadow: none;
  --card-shadow-hover: var(--o-shadow-2);
  --card-shadow-active: var(--o-shadow-1);
  --card-cover-radius: var(--o-radius_control-s);
  --card-h-cover-width: 45%;
  --card-h-cover-max-width: 320px;
  --card-main-padding: 24px 32px;
  --card-icon-gap: 16px;
  --card-icon-color: var(--o-color-info1);
  --card-icon-size: var(--o-icon_size_control-xl);
  --card-title-icon-gap: var(--o-gap-3);
  --card-title-icon-color: var(--o-color-info1);
  --card-title-icon-size: var(--o-icon_size-l);
  --card-header-color: var(--o-color-info1);
  --card-header-text-size: var(--o-font_size-h3);
  --card-header-text-height: var(--o-line_height-h3);
  --card-title-word-break: break-word;
  --card-content-gap: 12px;
  --card-content-color: var(--o-color-info2);
  --card-content-text-size: var(--o-font_size-text1);
  --card-content-text-height: var(--o-line_height-text1);
  --card-detail-word-break: break-word;
  --card-footer-gap: 24px;
  --card-footer-color: var(--o-color-info2);
  --card-footer-text-size: var(--o-font_size-tip1);
  --card-footer-text-height: var(--o-line_height-tip1);
}

.o-card-cover-v {
  --card-cover-padding: 8px 8px 0;
}

.o-card-cover-h {
  --card-cover-padding: 8px 0 8px 8px;
}

.o-card-cover-hr {
  --card-cover-padding: 8px 8px 8px 0;
}

.o-card-only-cover {
  --card-cover-padding: 0;
}

.o-card {
  background-color: var(--card-bg-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  text-decoration: none;
}

.o-card-cover {
  flex-shrink: 0;
  padding: var(--card-cover-padding);
}

.o-card-cover-img {
  max-height: 100%;
  width: 100%;
  border-radius: var(--card-cover-radius);
}
.o-card-cover-img img {
  border-radius: var(--card-cover-radius);
}
.o-card-cover-img.is-full {
  height: 100%;
}

.o-card-icon {
  color: var(--card-icon-color);
  font-size: var(--card-icon-size);
  text-align: var(--card-icon-text-align);
}

.o-card-header {
  font-size: var(--card-header-text-size);
  line-height: var(--card-header-text-height);
  color: var(--card-header-color);
}

.o-card-header-with-icon {
  position: relative;
}
.o-card-header-with-icon .o-card-title {
  text-indent: calc(var(--card-title-icon-size) + var(--card-title-icon-gap));
}

.o-card-title-icon {
  width: var(--card-title-icon-size);
  height: var(--card-title-icon-size);
  position: absolute;
  top: calc((var(--card-header-text-height) - var(--card-title-icon-size)) / 2);
  font-size: var(--card-title-icon-size);
}

.o-card-title-icon-figure {
  width: 100%;
}

.o-card-title {
  height: calc(var(--card-title-row) * var(--card-header-text-height));
  margin: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-title-text-align);
  word-break: var(--card-title-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-title-max-row);
  -webkit-box-orient: vertical;
}

.o-card-main {
  padding: var(--card-main-padding);
  height: 100%;
}

.o-card-main-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.o-card-content {
  font-size: var(--card-content-text-size);
  line-height: var(--card-content-text-height);
  color: var(--card-content-color);
}
.o-card-header + .o-card-content {
  margin-top: var(--card-content-gap);
}

.o-card-detail {
  height: calc(var(--card-detail-row) * var(--card-content-text-height));
  max-height: calc(var(--card-detail-max-row) * var(--card-content-text-height));
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-detail-text-align);
  word-break: var(--card-detail-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-detail-max-row);
  -webkit-box-orient: vertical;
}

.o-card-hoverable {
  position: relative;
  transition: box-shadow var(--o-easing-standard) var(--o-duration-m2);
}
@media (hover: hover) {
  .o-card-hoverable:hover {
    box-shadow: var(--card-shadow-hover);
  }
}
.o-card-hoverable:active {
  box-shadow: var(--card-shadow-active);
}

@media (hover: hover) {
  .o-card-hoverable.o-card-cursor-pointer:hover .o-card-cover img {
    transform: scale(1.05);
  }
}
.o-card-hoverable.o-card-cursor-pointer:active .o-card-cover img {
  transform: scale(1.02);
}

.o-card-footer {
  margin-top: var(--card-footer-gap);
  font-size: var(--card-footer-text-size);
  line-height: var(--card-footer-text-height);
  color: var(--card-footer-color);
}

.o-card-layout-v {
  display: flex;
  flex-direction: column;
}
.o-card-layout-v .o-card-main {
  display: flex;
  flex-direction: column;
}
.o-card-layout-v .o-card-icon {
  margin-bottom: var(--card-icon-gap);
}

.o-card-layout-h {
  display: flex;
  flex-direction: row;
}
.o-card-layout-h .o-card-main {
  display: flex;
  flex-direction: row;
}
.o-card-layout-h .o-card-icon {
  margin-right: var(--card-icon-gap);
  width: var(--card-icon-size);
}

.o-card-layout-hr {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.o-card-layout-hr .o-card-main {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.o-card-layout-hr .o-card-icon {
  margin-left: var(--card-icon-gap);
  width: var(--card-icon-size);
}

.o-card-cover-h,
.o-card-cover-hr {
  width: var(--card-h-cover-width);
  max-width: var(--card-h-cover-max-width);
  display: flex;
  align-items: center;
}

.o-card-cursor-pointer {
  cursor: pointer;
}

@media (min-width: 1201px) and (max-width: 1440px) {
  .o-card:not(.o-card-no-responsive) {
    --card-radius: var(--o-radius_control-m);
    --card-cover-radius: var(--o-radius_control-s);
    --card-header-text-size: var(--o-font_size-text2);
    --card-header-text-height: var(--o-line_height-text2);
    --card-main-padding: 16px 24px;
    --card-icon-gap: 12px;
    --card-title-icon-gap: var(--o-gap-2);
    --card-content-gap: 8px;
    --card-content-text-size: var(--o-font_size-tip1);
    --card-content-text-height: var(--o-line_height-tip1);
    --card-footer-gap: 16px;
    --card-footer-text-size: var(--o-font_size-tip2);
    --card-footer-text-height: var(--o-line_height-tip2);
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .o-card:not(.o-card-no-responsive) {
    --card-radius: var(--o-radius_control-s);
    --card-cover-radius: var(--o-radius_control-xs);
    --card-header-text-size: var(--o-font_size-text1);
    --card-header-text-height: var(--o-line_height-text1);
    --card-main-padding: 12px 16px;
    --card-icon-gap: 8px;
    --card-icon-size: var(--o-icon_size_control-l);
    --card-title-icon-gap: var(--o-gap-2);
    --card-title-icon-size: var(--o-icon_size-m);
    --card-content-gap: 8px;
    --card-content-text-size: var(--o-font_size-tip1);
    --card-content-text-height: var(--o-line_height-tip1);
    --card-footer-gap: 12px;
    --card-footer-text-size: var(--o-font_size-tip2);
    --card-footer-text-height: var(--o-line_height-tip2);
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-v {
    --card-cover-padding: 4px 4px 0;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-h {
    --card-cover-padding: 4px 0 4px 4px;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-hr {
    --card-cover-padding: 4px 4px 4px 0;
  }
}
@media (max-width: 600px) {
  .o-card:not(.o-card-no-responsive) {
    --card-radius: var(--o-radius_control-s);
    --card-cover-radius: var(--o-radius_control-xs);
    --card-main-padding: 12px 16px;
    --card-header-text-size: var(--o-font_size-tip1);
    --card-header-text-height: var(--o-line_height-tip1);
    --card-icon-gap: 8px;
    --card-icon-size: var(--o-icon_size_control-l);
    --card-title-icon-gap: var(--o-gap-2);
    --card-title-icon-size: var(--o-icon_size-m);
    --card-content-gap: 8px;
    --card-content-text-size: var(--o-font_size-tip2);
    --card-content-text-height: var(--o-line_height-tip2);
    --card-footer-gap: 8px;
    --card-footer-text-size: 10px;
    --card-footer-text-height: 16px;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-v {
    --card-cover-padding: 4px 4px 0;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-h {
    --card-cover-padding: 4px 0 4px 4px;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-hr {
    --card-cover-padding: 4px 4px 4px 0;
  }
}