@alifd/meet-react/es/tab/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
.mt-tab-item-text {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-tab-container::-webkit-scrollbar {
  display: none;
}

.mt-tab-item-text {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-tab-container::-webkit-scrollbar {
  display: none;
}

/*
  @component tab
  @display Tab
  @chinese 标签页
  @family navigation
*/
:root {
  /*
   @desc small-icon-size
   @semantic 图标大小(小号)
   @namespace size/icon
  */
  --tab-small-icon-size: var(--icon-xxs);
  /*
   @desc medium-icon-size
   @semantic 图标大小(中号)
   @namespace size/icon
  */
  --tab-medium-icon-size: var(--icon-xs);
  /*
   @desc large-icon-size
   @semantic 图标大小(大号)
   @namespace size/icon
  */
  --tab-large-icon-size: var(--icon-s);
  /*
   @desc small-spacing
   @namespace size/common
   @semantic 内部间距(小号)
  */
  --tab-small-spacing: var(--box-small-spacing);
  /*
   @desc medium-spacing
   @namespace size/common
   @semantic 内部间距(中号)
  */
  --tab-medium-spacing: var(--box-medium-spacing);
  /*
   @desc large-spacing
   @namespace size/common
   @semantic 内部间距(大号)
  */
  --tab-large-spacing: var(--box-large-spacing);
  /*
   @desc small-font-size
   @namespace size/font
   @semantic 文字尺寸(小号)
  */
  --tab-small-font-size: var(--p-body-1-font-size);
  /*
   @desc active-small-font-size
   @namespace size/font
   @semantic 激活项文字尺寸(小号)
  */
  --tab-small-active-font-size: var(--p-body-1-font-size);
  /*
   @desc medium-font-size
   @namespace size/font
   @semantic 文字尺寸(中号)
  */
  --tab-medium-font-size: var(--p-body-2-font-size);
  /*
   @desc active-medium-font-size
   @namespace size/font
   @semantic 激活项文字尺寸(中号)
  */
  --tab-medium-active-font-size: var(--p-body-2-font-size);
  /*
   @desc large-font-size
   @namespace size/font
   @semantic 文字尺寸(大号)
  */
  --tab-large-font-size: var(--p-subhead-font-size);
  /*
   @desc active-large-font-size
   @namespace size/font
   @semantic 激活项文字尺寸(大号)
  */
  --tab-large-active-font-size: var(--p-subhead-font-size);
  /*
   @desc small-height
   @namespace size/common
   @semantic 高度(小号)
  */
  --tab-small-height: var(--s-10);
  /*
   @desc medium-height
   @namespace size/common
   @semantic 高度(中号)
  */
  --tab-medium-height: var(--s-12);
  /*
   @desc large-height
   @namespace size/common
   @semantic 高度(大号)
  */
  --tab-large-height: var(--s-14);
  /*
   @desc {$size}-padding
   @namespace size/bounding
   @semantic 内边距(小号)
  */
  --tab-small-padding: var(--box-small-padding);
  /*
   @desc small-border-radius
   @namespace size/bounding
   @semantic 圆角尺寸(小号)
   */
  --tab-small-corner: var(--box-small-border-radius);
  /*
   @desc {$size}-padding
   @namespace size/bounding
   @semantic 内边距(中号)
  */
  --tab-medium-padding: var(--box-medium-padding);
  /*
   @desc medium-border-radius
   @namespace size/bounding
   @semantic 圆角尺寸(中号)
   */
  --tab-medium-corner: var(--box-medium-border-radius);
  /*
   @desc {$size}-padding
   @namespace size/bounding
   @semantic 内边距(大号)
  */
  --tab-large-padding: var(--box-large-padding);
  /*
   @desc large-border-radius
   @namespace size/bounding
   @semantic 圆角尺寸(大号)
   */
  --tab-large-corner: var(--box-large-border-radius);
  /*
   @desc bg-color
   @namespace style/common
   @semantic 背景色
  */
  --tab-bg-color: var(--box-normal-outline-background-color);
  /*
   @desc capsule-bg-color
   @namespace style/capsule
   @semantic 背景色(胶囊模式)
  */
  --tab-capsule-bg-color: var(--box-normal-outline-background-color);
  /*
   @desc active-bg-color
   @namespace style/capsule
   @semantic 激活背景色(胶囊模式)
  */
  --tab-capsule-active-bg-color: var(--box-primary-solid-background-color);
  /*
   @desc divider-color
   @namespace style/common
   @semantic 分割线颜色
  */
  --tab-divider-color: var(--box-normal-outline-border-color);
  /*
   @desc divider-height
   @namespace size/common
   @semantic 分割线高度
  */
  --tab-divider-height: var(--line-1);
  /*
   @desc active-line-height
   @namespace style/common
   @semantic 激活线高度
  */
  --tab-active-line-height: 0.5333333333333333vw;
  /*
   @desc normal-color
   @namespace style/common
   @semantic 普通文本颜色
  */
  --tab-normal-color: var(--box-normal-outline-font-color);
  /*
   @desc active-color
   @namespace style/common
   @semantic 激活文本颜色
  */
  --tab-active-color: var(--box-primary-text-font-color);
  /*
   @desc active-color
   @namespace style/common
   @semantic 激活线颜色
  */
  --tab-active-line-color: var(--box-primary-text-font-color);
  /*
   @desc capsule-normal-color
   @namespace style/capsule
   @semantic 普通文本颜色(胶囊模式)
  */
  --tab-capsule-normal-color: var(--box-normal-outline-font-color);
  /*
   @desc capsule-color
   @namespace style/capsule
   @semantic 激活文本颜色(胶囊模式)
  */
  --tab-capsule-active-color: var(--box-primary-solid-font-color);
  /*
   @desc border-color
   @namespace style/capsule
   @semantic 边框颜色(胶囊模式)
  */
  --tab-capsule-border-color: var(--box-normal-outline-border-color);
}

.mt-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--tab-bg-color);
  z-index: calc(var(--elevation-1) + 1);
  position: relative;
}
.mt-tab-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom-width: var(--tab-divider-height);
  border-bottom-style: solid;
  border-bottom-color: var(--tab-divider-color);
}
.mt-tab-container {
  display: flex;
  flex: 1;
  z-index: var(--elevation-1);
  position: relative;
}
.mt-tab-container--small {
  height: var(--tab-small-height);
}
.mt-tab-container--medium {
  height: var(--tab-medium-height);
}
.mt-tab-container--large {
  height: var(--tab-large-height);
}
.mt-tab-container--wechat {
  max-height: 12.4vw;
}
.mt-tab-scroll-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: auto;
}
.mt-tab-scroll-container--fullwidth {
  width: 100%;
}
.mt-tab-scroll-container--wechat {
  max-height: 12.4vw;
}
.mt-tab-scroll-container--small {
  height: var(--tab-small-height);
}
.mt-tab-scroll-container--medium {
  height: var(--tab-medium-height);
}
.mt-tab-scroll-container--large {
  height: var(--tab-large-height);
}
.mt-tab-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.mt-tab-item--fullwidth {
  flex: 1;
}
.mt-tab-item--small {
  max-width: calc(100% - var(--box-small-padding-hoz) * 2);
  padding-left: var(--box-small-padding-hoz);
  padding-right: var(--box-small-padding-hoz);
}
.mt-tab-item--fullwidth.mt-tab-item--small {
  padding-left: 0;
  padding-right: 0;
}
.mt-tab-item--medium {
  max-width: calc(100% - var(--box-medium-padding-hoz) * 2);
  padding-left: var(--box-medium-padding-hoz);
  padding-right: var(--box-medium-padding-hoz);
}
.mt-tab-item--fullwidth.mt-tab-item--medium {
  padding-left: 0;
  padding-right: 0;
}
.mt-tab-item--large {
  max-width: calc(100% - var(--box-large-padding-hoz) * 2);
  padding-left: var(--box-large-padding-hoz);
  padding-right: var(--box-large-padding-hoz);
}
.mt-tab-item--fullwidth.mt-tab-item--large {
  padding-left: 0;
  padding-right: 0;
}
.mt-tab-item--capsule {
  background-color: var(--tab-capsule-bg-color);
  border: var(--line-1) solid var(--tab-capsule-border-color);
  transition: all var(--motion-time-1);
}
.mt-tab-item--capsule + .mt-tab-item--capsule {
  margin-left: calc(-1 * var(--line-1));
}
.mt-tab-item--active-capsule {
  border-color: var(--tab-capsule-active-bg-color);
  background-color: var(--tab-capsule-active-bg-color);
  z-index: 1;
}
.mt-tab-item-text {
  text-align: center;
}
.mt-tab-item-text--small {
  font-size: var(--tab-small-font-size);
}
.mt-tab-item-text--active-small {
  font-size: var(--tab-small-active-font-size);
}
.mt-tab-item-text--medium {
  font-size: var(--tab-medium-font-size);
}
.mt-tab-item-text--active-medium {
  font-size: var(--tab-medium-active-font-size);
}
.mt-tab-item-text--large {
  font-size: var(--tab-large-font-size);
}
.mt-tab-item-text--active-large {
  font-size: var(--tab-large-active-font-size);
}
.mt-tab-item-text--normal {
  color: var(--tab-normal-color);
}
.mt-tab-item-text--capsule {
  color: var(--tab-capsule-normal-color);
}
.mt-tab-item-text--active-normal {
  color: var(--tab-active-color);
}
.mt-tab-item-text--active-capsule {
  color: var(--tab-capsule-active-color);
}
.mt-tab-item-icon--small {
  font-size: var(--tab-small-icon-size);
  margin-right: var(--tab-small-spacing);
}
.mt-tab-item-icon--medium {
  font-size: var(--tab-medium-icon-size);
  margin-right: var(--tab-medium-spacing);
}
.mt-tab-item-icon--large {
  font-size: var(--tab-large-icon-size);
  margin-right: var(--tab-large-spacing);
}
.mt-tab-item-icon--normal {
  color: var(--tab-normal-color);
}
.mt-tab-item-icon--capsule {
  color: var(--tab-capsule-normal-color);
}
.mt-tab-item-icon--active-normal {
  color: var(--tab-active-color);
}
.mt-tab-item-icon--active-capsule {
  color: var(--tab-capsule-active-color);
}
.mt-tab-item-active-line {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--tab-active-line-color);
  transition: all var(--motion-time-2);
  height: var(--tab-active-line-height);
  border-radius: var(--corner-semicircle);
}
.mt-tab-item-active-line--narrow {
  left: 50%;
  border-radius: calc(var(--tab-active-line-height) / 2);
  transition: all var(--motion-time-1);
}
.mt-tab-item-active-line--narrow-small {
  width: calc(var(--tab-small-active-font-size) * 2);
  margin-left: calc(-1 * var(--tab-small-active-font-size));
}
.mt-tab-item-active-line--narrow-medium {
  width: calc(var(--tab-medium-active-font-size) * 2);
  margin-left: calc(-1 * var(--tab-medium-active-font-size));
}
.mt-tab-item-active-line--narrow-large {
  width: calc(var(--tab-large-active-font-size) * 2);
  margin-left: calc(-1 * var(--tab-large-active-font-size));
}
.mt-tab-item-active-line--enter {
  transform: scaleX(1);
}
.mt-tab-item-active-line--exit {
  transform: scaleX(0);
}
.mt-tab .mt-tab-item--small:first-child {
  border-top-left-radius: var(--tab-small-corner);
  border-bottom-left-radius: var(--tab-small-corner);
}
.mt-tab .mt-tab-item--small:last-child {
  border-top-right-radius: var(--tab-small-corner);
  border-bottom-right-radius: var(--tab-small-corner);
}
.mt-tab .mt-tab-item--medium:first-child {
  border-top-left-radius: var(--tab-medium-corner);
  border-bottom-left-radius: var(--tab-medium-corner);
}
.mt-tab .mt-tab-item--medium:last-child {
  border-top-right-radius: var(--tab-medium-corner);
  border-bottom-right-radius: var(--tab-medium-corner);
}
.mt-tab .mt-tab-item--large:first-child {
  border-top-left-radius: var(--tab-large-corner);
  border-bottom-left-radius: var(--tab-large-corner);
}
.mt-tab .mt-tab-item--large:last-child {
  border-top-right-radius: var(--tab-large-corner);
  border-bottom-right-radius: var(--tab-large-corner);
}
.mt-tab .mt-tab-item--capsule:last-child {
  border-right-style: solid;
}
.mt-tab-tool {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-tab-tool--small {
  padding: var(--tab-small-padding);
  font-size: var(--tab-small-font-size);
  line-height: var(--tab-small-font-size);
}
.mt-tab-tool-icon--small {
  font-size: var(--tab-small-icon-size);
  line-height: var(--tab-small-font-size);
}
.mt-tab-tool--medium {
  padding: var(--tab-medium-padding);
  font-size: var(--tab-medium-font-size);
  line-height: var(--tab-medium-font-size);
}
.mt-tab-tool-icon--medium {
  font-size: var(--tab-medium-icon-size);
  line-height: var(--tab-medium-font-size);
}
.mt-tab-tool--large {
  padding: var(--tab-large-padding);
  font-size: var(--tab-large-font-size);
  line-height: var(--tab-large-font-size);
}
.mt-tab-tool-icon--large {
  font-size: var(--tab-large-icon-size);
  line-height: var(--tab-large-font-size);
}
.mt-tab-drawer {
  max-height: 80vw;
  width: 100%;
}