@alifd/meet-react/lib/card/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component card
  @display Card
  @chinese 卡片
  @family data-display
*/
:root {
  /*
   @desc bg-color
   @semantic 背景色
   @namespace style/common
   */
  --card-bg-color: var(--color-white);
  /*
     @desc card-corner
     @semantic 圆角
     @namespace size/bounding
   */
  --card-corner: var(--corner-3);
  /*
     @desc card-shadow
     @semantic 阴影
     @namespace style/common
   */
  --card-shadow: var(--shadow-zero);
  /*
     @desc card-padding-lr
     @semantic 左右内边距
     @namespace size/common
   */
  --card-padding-lr: var(--s-3);
  /*
   @desc title-height
   @semantic 标题高度
   @namespace size/title
   */
  --card-header-height: var(--s-14);
  /**
   @desc title-padding-tb
   @semantic 头部上下内边距
   @namespace size/title
   */
  --card-title-padding-tb: var(--s-2);
  /*
     @desc title-font-size
     @semantic 标题字体大小
     @namespace size/title
   */
  --card-title-font-size: var(--p-subhead-font-size);
  /*
     @desc title-font-weight
     @semantic 标题字重
     @namespace size/title
   */
  --card-title-font-weight: 400;
  /*
     @desc extra-font-size
     @semantic 附加内容字体大小
     @namespace size/title
   */
  --card-extra-font-size: var(--p-body-2-font-size);
  /*
     @desc title-font-color
     @semantic 标题字体色
     @namespace style/title
   */
  --card-title-font-color: var(--color-text1-4);
  /*
     @desc extra-font-color
     @semantic 附加内容字体色
     @namespace style/title
   */
  --card-extra-font-color: var(--color-text1-2);
  /*
     @desc arrow-color
     @semantic 箭头颜色
     @namespace style/title
   */
  --card-arrow-color: var(--color-text1-2);
  /*
     @desc card-spacing
     @semantic 元素间距
     @namespace size/common
   */
  --card-spacing: var(--box-medium-spacing);
  /*
     @desc divider-color
     @semantic 分割线颜色
     @namespace style/common
   */
  --card-divider-color: var(--color-line1-4);
  /*
     @desc body-padding-tb
     @semantic 内容上下内边距
     @namespace size/common
   */
  --card-body-padding-tb: var(--s-4);
  /*
     @desc footer-padding-tb
     @semantic footer 上下内边距
     @namespace size/common
   */
  --card-footer-padding-tb: var(--s-4);
}

.mt-card {
  border-radius: var(--card-corner);
  background-color: var(--card-bg-color);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.mt-card-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--card-header-height);
  padding-left: var(--card-padding-lr);
  padding-right: var(--card-padding-lr);
  padding-top: var(--card-title-padding-tb);
  padding-bottom: var(--card-title-padding-tb);
  border-bottom: var(--line-1) solid var(--card-divider-color);
}
.mt-card-header:last-child {
  border-bottom: none;
}
.mt-card-header--no-divider {
  border-bottom: none !important;
}
.mt-card-title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  color: var(--card-title-font-color);
  font-size: var(--card-title-font-size);
  font-weight: var(--card-title-font-weight);
  line-height: calc(var(--card-header-height) - 2 * var(--card-title-padding-tb));
}
.mt-card-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(1.5 * var(--card-title-font-size));
  height: calc(1.5 * var(--card-title-font-size));
  margin-right: var(--card-spacing);
}
.mt-card-extra {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--card-extra-font-color);
  font-size: var(--card-extra-font-size);
  line-height: calc(var(--card-header-height) - 2 * var(--card-title-padding-tb));
  vertical-align: middle;
  margin-left: var(--card-spacing);
  max-width: 17.333333333333332vw;
}
.mt-card-arrow {
  color: var(--card-arrow-color);
  margin-top: 0.5333333333333333vw;
  margin-left: var(--card-spacing);
  line-height: calc(var(--card-header-height) - 2 * var(--card-title-padding-tb));
}
.mt-card-body {
  padding-left: var(--card-padding-lr);
  padding-right: var(--card-padding-lr);
  padding-top: var(--card-body-padding-tb);
  padding-bottom: var(--card-body-padding-tb);
}
.mt-card-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-left: var(--card-padding-lr);
  padding-right: var(--card-padding-lr);
  padding-top: var(--card-footer-padding-tb);
  padding-bottom: var(--card-footer-padding-tb);
}
.mt-card-footer > div, .mt-card-footer > view {
  margin-left: var(--card-spacing);
}