@alifd/meet-react/es/bread-crumb/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
.mt-breadcrumb::-webkit-scrollbar {
  display: none;
}

/*
  @component bread-crumb
  @display BreadCrumb
  @chinese 面包屑
  @family navigation
*/
:root {
  /*
   @desc disabled-font-color
   @semantic 禁用字体色
   @namespace style/common
   */
  --breadcrumb-disabled: var(--color-text1-1);
  /*
   @desc normal-font-color
   @semantic 正常字体色
   @namespace style/common
   */
  --breadcrumb-normal-color: var(--color-text1-4);
  /*
   @desc active-font-color
   @semantic 激活字体色
   @namespace style/common
   */
  --breadcrumb-active-color: var(--color-text1-3);
  /*
   @desc separator-color
   @semantic 分隔符色
   @namespace style/common
   */
  --breadcrumb-separator-color: var(--color-text1-3);
  /*
   @desc small-font-size
   @semantic 字体大小(小号)
   @namespace size/font
   */
  --breadcrumb-small-font-size: var(--p-body-1-font-size);
  /*
   @desc medium-font-size
   @semantic 字体大小(中号)
   @namespace size/font
   */
  --breadcrumb-medium-font-size: var(--p-body-2-font-size);
  /*
   @desc large-font-size
   @semantic 字体大小(大号)
   @namespace size/font
   */
  --breadcrumb-large-font-size: var(--p-subhead-font-size);
  /*
   @desc small-arrow-size
   @semantic 箭头尺寸(小号)
   @namespace size/arrow
   */
  --breadcrumb-arrow-small-size: 1.3333333333333333vw;
  /*
   @desc medium-arrow-size
   @semantic 箭头尺寸(中号)
   @namespace size/arrow
   */
  --breadcrumb-arrow-medium-size: 1.6vw;
  /*
   @desc large-arrow-size
   @semantic 箭头尺寸(大号)
   @namespace size/arrow
   */
  --breadcrumb-arrow-large-size: 1.8666666666666667vw;
  /*
   @desc small-spacing
   @semantic 间距(小号)
   @namespace size/arrow
   */
  --breadcrumb-small-spacing: 1.0666666666666667vw;
  /*
   @desc medium-spacing
   @semantic 间距(中号)
   @namespace size/arrow
   */
  --breadcrumb-medium-spacing: 1.3333333333333333vw;
  /*
   @desc large-spacing
   @semantic 间距(大号)
   @namespace size/arrow
   */
  --breadcrumb-large-spacing: 1.6vw;
}

.mt-breadcrumb-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.mt-breadcrumb-container--small, .mt-breadcrumb--small {
  height: calc(var(--breadcrumb-small-font-size) * 1.5);
}
.mt-breadcrumb-container--medium, .mt-breadcrumb--medium {
  height: calc(var(--breadcrumb-medium-font-size) * 1.5);
}
.mt-breadcrumb-container--large, .mt-breadcrumb--large {
  height: calc(var(--breadcrumb-large-font-size) * 1.5);
}
.mt-breadcrumb-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: var(--breadcrumb-normal-color);
}
.mt-breadcrumb-item-icon {
  border-right: 0.26666666666666666vw solid var(--color-text1-2);
  border-top: 0.26666666666666666vw solid var(--color-text1-2);
  transform: rotate(45deg);
  border-color: var(--breadcrumb-separator-color);
}
.mt-breadcrumb-item-icon-custom {
  color: var(--color-text1-2);
}
.mt-breadcrumb-item--action {
  color: var(--breadcrumb-normal-color);
}
.mt-breadcrumb-item--action-active {
  color: var(--breadcrumb-active-color);
  cursor: pointer;
}
.mt-breadcrumb-item--action-disabled {
  cursor: text;
}
.mt-breadcrumb-item--disabled {
  color: var(--breadcrumb-disabled);
  cursor: text;
}
.mt-breadcrumb-item--active {
  color: var(--breadcrumb-active-color);
}
.mt-breadcrumb-item--arrow-disabled {
  border-color: var(--breadcrumb-disabled);
}
.mt-breadcrumb-item-container--small {
  height: calc(var(--breadcrumb-small-font-size) * 1.5);
}
.mt-breadcrumb-item--arrow-small-size {
  width: var(--breadcrumb-arrow-small-size);
  height: var(--breadcrumb-arrow-small-size);
}
.mt-breadcrumb-item--font-small-size, .mt-breadcrumb-item--font-small-size > * {
  font-size: var(--breadcrumb-small-font-size);
  line-height: 1.5;
}
.mt-breadcrumb-item--space-small-size {
  margin-right: var(--breadcrumb-small-spacing);
}
.mt-breadcrumb-item--margin-small-size {
  margin-right: var(--breadcrumb-small-spacing);
  margin-left: var(--breadcrumb-small-spacing);
}
.mt-breadcrumb-item-container--medium {
  height: calc(var(--breadcrumb-medium-font-size) * 1.5);
}
.mt-breadcrumb-item--arrow-medium-size {
  width: var(--breadcrumb-arrow-medium-size);
  height: var(--breadcrumb-arrow-medium-size);
}
.mt-breadcrumb-item--font-medium-size, .mt-breadcrumb-item--font-medium-size > * {
  font-size: var(--breadcrumb-medium-font-size);
  line-height: 1.5;
}
.mt-breadcrumb-item--space-medium-size {
  margin-right: var(--breadcrumb-medium-spacing);
}
.mt-breadcrumb-item--margin-medium-size {
  margin-right: var(--breadcrumb-medium-spacing);
  margin-left: var(--breadcrumb-medium-spacing);
}
.mt-breadcrumb-item-container--large {
  height: calc(var(--breadcrumb-large-font-size) * 1.5);
}
.mt-breadcrumb-item--arrow-large-size {
  width: var(--breadcrumb-arrow-large-size);
  height: var(--breadcrumb-arrow-large-size);
}
.mt-breadcrumb-item--font-large-size, .mt-breadcrumb-item--font-large-size > * {
  font-size: var(--breadcrumb-large-font-size);
  line-height: 1.5;
}
.mt-breadcrumb-item--space-large-size {
  margin-right: var(--breadcrumb-large-spacing);
}
.mt-breadcrumb-item--margin-large-size {
  margin-right: var(--breadcrumb-large-spacing);
  margin-left: var(--breadcrumb-large-spacing);
}