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

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component nav
  @display Nav
  @chinese 导航
  @family navigation
*/
:root {
  /*
    @desc height
    @namespace size/small
    @semantic 单项高度(小号)
  */
  --nav-item-small-height: var(--s-8);
  /*
    @desc height
    @namespace size/medium
    @semantic 单项高度(中号)
  */
  --nav-item-medium-height: var(--s-12);
  /*
    @desc height
    @namespace size/large
    @semantic 单项高度(大号)
  */
  --nav-item-large-height: var(--s-14);
  /*
    @desc padding
    @namespace size
    @semantic 单项内边距
  */
  --nav-item-padding: var(--s-4);
  /*
    @desc font-size
    @namespace size
    @semantic 字体基础大小
  */
  --nav-item-base-font-size: var(--p-subhead-font-size);
  /*
    @desc bg-color
    @namespace state/normal/solid
    @semantic 背景颜色(常规-实心)
  */
  --nav-item-normal-solid-background-color: var(--color-white);
  /*
    @desc bg-color
    @namespace state/normal/solid/hover
    @semantic 激活背景色(常规-实心)
  */
  --nav-item-normal-solid-background-color-hover: var(--color-fill1-3);
  /*
    @desc bg-color
    @namespace state/normal/solid/active
    @semantic 选中背景颜色(常规-实心)
  */
  --nav-item-normal-solid-background-color-active: var(--color-fill1-1);
  /*
    @desc bg-color
    @namespace state/normal/text
    @semantic 背景颜色(常规-文本)
  */
  --nav-item-normal-text-background-color: var(--color-transparent);
  /*
    @desc bg-color
    @namespace state/normal/text/hover
    @semantic 触摸背景颜色(常规-文本)
  */
  --nav-item-normal-text-background-color-hover: var(--color-transparent);
  /*
    @desc bg-color
    @namespace state/normal/text/active
    @semantic 选中背景颜色(常规-文本)
  */
  --nav-item-normal-text-background-color-active: var(--color-transparent);
  /*
    @desc bg-color
    @namespace state/primary/solid
    @semantic 背景颜色(主要-实心)
  */
  --nav-item-primary-solid-background-color: var(--color-brand-3);
  /*
    @desc bg-color
    @namespace state/primary/solid/hover
    @semantic 触摸背景颜色(主要-实心)
  */
  --nav-item-primary-solid-background-color-hover: var(--color-brand-4);
  /*
    @desc bg-color
    @namespace state/primary/solid/active
    @semantic 选中背景颜色(主要-实心)
  */
  --nav-item-primary-solid-background-color-active: var(--color-brand-4);
  /*
    @desc bg-color
    @namespace state/primary/text
    @semantic 背景颜色(主要-文本)
  */
  --nav-item-primary-text-background-color: var(--color-brand-3);
  /*
    @desc bg-color
    @namespace state/primary/text/hover
    @semantic 触摸背景颜色(主要-文本)
  */
  --nav-item-primary-text-background-color-hover: var(--color-brand-3);
  /*
    @desc bg-color
    @namespace state/primary/text/active
    @semantic 选中背景颜色(主要-文本)
  */
  --nav-item-primary-text-background-color-active: var(--color-brand-3);
  /*
    @desc bg-color
    @namespace state/inverse/solid
    @semantic 背景颜色(反色-实心)
  */
  --nav-item-inverse-solid-background-color: var(--color-fill2-4);
  /*
    @desc bg-color
    @namespace state/inverse/solid/hover
    @semantic 触摸背景颜色(反色-实心)
  */
  --nav-item-inverse-solid-background-color-hover: var(--color-text2-1);
  /*
    @desc bg-color
    @namespace state/inverse/solid/active
    @semantic 选中背景颜色(反色-实心)
  */
  --nav-item-inverse-solid-background-color-active: var(--color-text2-1);
  /*
    @desc bg-color
    @namespace state/inverse/text
    @semantic 背景颜色(反色-文本)
  */
  --nav-item-inverse-text-background-color: var(--color-fill2-4);
  /*
    @desc bg-color
    @namespace state/inverse/text/hover
    @semantic 触摸背景颜色(反色-文本)
  */
  --nav-item-inverse-text-background-color-hover: var(--color-fill2-4);
  /*
    @desc bg-color
    @namespace state/inverse/text/active
    @semantic 选中背景颜色(反色-文本)
  */
  --nav-item-inverse-text-background-color-active: var(--color-fill2-4);
  /*
    @desc bg-color
    @namespace state/normal/solid
    @semantic 字体颜色(常规-实心)
  */
  --nav-item-normal-solid-font-color: var(--color-text1-4);
  /*
    @desc bg-color
    @namespace state/normal/solid/hover
    @semantic 触摸字体颜色(常规-实心)
  */
  --nav-item-normal-solid-font-color-hover: var(--color-text1-3);
  /*
    @desc bg-color
    @namespace state/normal/solid/active
    @semantic 选中字体颜色(常规-实心)
  */
  --nav-item-normal-solid-font-color-active: var(--color-brand-3);
  /*
    @desc bg-color
    @namespace state/normal/text
    @semantic 字体颜色(常规-文本)
  */
  --nav-item-normal-text-font-color: var(--color-text1-4);
  /*
    @desc bg-color
    @namespace state/normal/text/hover
    @semantic 触摸字体颜色(常规-文本)
  */
  --nav-item-normal-text-font-color-hover: var(--color-text1-3);
  /*
    @desc bg-color
    @namespace state/normal/text/active
    @semantic 选中字体颜色(常规-文本)
  */
  --nav-item-normal-text-font-color-active: var(--color-brand-3);
  /*
    @desc bg-color
    @namespace state/primary/solid
    @semantic 字体颜色(主要-实心)
  */
  --nav-item-primary-solid-font-color: var(--color-white);
  /*
    @desc bg-color
    @namespace state/primary/solid/hover
    @semantic 触摸字体颜色(主要-实心)
  */
  --nav-item-primary-solid-font-color-hover: var(--color-text2-3);
  /*
    @desc bg-color
    @namespace state/primary/solid/active
    @semantic 选中字体颜色(主要-实心)
  */
  --nav-item-primary-solid-font-color-active: var(--color-text2-3);
  /*
    @desc bg-color
    @namespace state/primary/text
    @semantic 字体颜色(主要-文本)
  */
  --nav-item-primary-text-font-color: var(--color-white);
  /*
    @desc bg-color
    @namespace state/primary/text/hover
    @semantic 触摸字体颜色(主要-文本)
  */
  --nav-item-primary-text-font-color-hover: var(--color-text2-3);
  /*
    @desc bg-color
    @namespace state/primary/text/active
    @semantic 选中字体颜色(主要-文本)
  */
  --nav-item-primary-text-font-color-active: var(--color-white);
  /*
    @desc bg-color
    @namespace state/inverse/solid
    @semantic 字体颜色(反色-实心)
  */
  --nav-item-inverse-solid-font-color: var(--color-text2-4);
  /*
    @desc bg-color
    @namespace state/inverse/solid/hover
    @semantic 触摸字体颜色(反色-实心)
  */
  --nav-item-inverse-solid-font-color-hover: var(--color-white);
  /*
    @desc bg-color
    @namespace state/inverse/solid/active
    @semantic 选中字体颜色(反色-实心)
  */
  --nav-item-inverse-solid-font-color-active: var(--color-white);
  /*
    @desc bg-color
    @namespace state/inverse/text
    @semantic 字体颜色(反色-文本)
  */
  --nav-item-inverse-text-font-color: var(--color-text2-4);
  /*
    @desc bg-color
    @namespace state/inverse/text/hover
    @semantic 触摸字体颜色(反色-文本)
  */
  --nav-item-inverse-text-font-color-hover: var(--color-text2-3);
  /*
    @desc bg-color
    @namespace state/inverse/text/active
    @semantic 选中字体激活颜色(反色-文本)
  */
  --nav-item-inverse-text-font-color-active: var(--color-white);
  /*
    @desc extra-icon-color
    @namespace state/normal
    @semantic 右侧扩展图标颜色(常规)
   */
  --nav-item-normal-extra-color: var(--color-text1-2);
  /*
    @desc extra-icon-color
    @namespace state/primary
    @semantic 右侧扩展图标颜色(主要)
   */
  --nav-item-primary-extra-color: var(--box-primary-solid-icon-color);
  /*
    @desc extra-icon-color
    @namespace state/inverse
    @semantic 右侧扩展图标颜色(反色)
   */
  --nav-item-inverse-extra-color: var(--box-inverse-solid-icon-color);
}

.mt-nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.mt-nav--ver .mt-nav-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-right: var(--nav-item-padding);
  box-sizing: border-box;
}
.mt-nav--ver .mt-nav-item--level1 {
  padding-left: var(--nav-item-padding);
}
.mt-nav--ver .mt-nav-item--level2 {
  padding-left: calc(var(--nav-item-padding) * 2);
}
.mt-nav--ver .mt-nav-item--level3 {
  padding-left: calc(var(--nav-item-padding) * 3);
}
.mt-nav-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-items: center;
  transition: all var(--motion-time-1);
}
.mt-nav-item-children-wrapper {
  flex: 1;
  height: auto;
}
.mt-nav-item-children-wrapper > * {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  flex: 1;
}
.mt-nav-item-label {
  flex: 1;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--motion-time-1);
}
.mt-nav-item-icon {
  transition: all var(--motion-time-1);
}
.mt-nav-item-icon--small {
  width: calc(var(--nav-item-base-font-size) - var(--s-1)/2);
  height: calc(var(--nav-item-base-font-size) - var(--s-1)/2);
  font-size: calc(var(--nav-item-base-font-size) - var(--s-1)/2);
}
.mt-nav-item-icon--medium {
  width: calc(var(--nav-item-base-font-size) + var(--s-1)/2);
  height: calc(var(--nav-item-base-font-size) + var(--s-1)/2);
  font-size: calc(var(--nav-item-base-font-size) + var(--s-1)/2);
}
.mt-nav-item-icon--large {
  width: calc(var(--nav-item-base-font-size) + var(--s-1)/2 * 2);
  height: calc(var(--nav-item-base-font-size) + var(--s-1)/2 * 2);
  font-size: calc(var(--nav-item-base-font-size) + var(--s-1)/2 * 2);
}
.mt-nav-item--small {
  height: var(--nav-item-small-height);
}
.mt-nav-item-icon--small {
  display: inline-block;
  margin-right: calc(var(--s-1)/2 * 1);
}
.mt-nav-item-label--small {
  font-size: calc(var(--nav-item-base-font-size) - var(--s-1) + var(--s-1)/2 * 1);
}
.mt-nav-item--medium {
  height: var(--nav-item-medium-height);
}
.mt-nav-item-icon--medium {
  display: inline-block;
  margin-right: calc(var(--s-1)/2 * 2);
}
.mt-nav-item-label--medium {
  font-size: calc(var(--nav-item-base-font-size) - var(--s-1) + var(--s-1)/2 * 2);
}
.mt-nav-item--large {
  height: var(--nav-item-large-height);
}
.mt-nav-item-icon--large {
  display: inline-block;
  margin-right: calc(var(--s-1)/2 * 3);
}
.mt-nav-item-label--large {
  font-size: calc(var(--nav-item-base-font-size) - var(--s-1) + var(--s-1)/2 * 3);
}
.mt-nav-item--normal-solid {
  background-color: var(--nav-item-normal-solid-background-color);
}
.mt-nav-item--normal-solid-icon, .mt-nav-item--normal-solid-label {
  color: var(--nav-item-normal-solid-font-color);
}
.mt-nav-item--normal-solid:active {
  background-color: var(--nav-item-normal-solid-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--normal-solid:active .mt-nav-item-icon, .mt-nav-item--normal-solid:active .mt-nav-item-label {
  color: var(--nav-item-normal-solid-font-color-hover);
}
.mt-nav-item--normal-solid--active {
  background-color: var(--nav-item-normal-solid-background-color-active);
}
.mt-nav-item--normal-solid--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-normal-solid-font-color-active);
}
.mt-nav-item--normal-solid--active-icon, .mt-nav-item--normal-solid--active-label {
  color: var(--nav-item-normal-solid-font-color-active);
}
.mt-nav-item--normal-outline {
  background-color: var(--nav-item-normal-outline-background-color);
}
.mt-nav-item--normal-outline-icon, .mt-nav-item--normal-outline-label {
  color: var(--nav-item-normal-outline-font-color);
}
.mt-nav-item--normal-outline:active {
  background-color: var(--nav-item-normal-outline-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--normal-outline:active .mt-nav-item-icon, .mt-nav-item--normal-outline:active .mt-nav-item-label {
  color: var(--nav-item-normal-outline-font-color-hover);
}
.mt-nav-item--normal-outline--active {
  background-color: var(--nav-item-normal-outline-background-color-active);
}
.mt-nav-item--normal-outline--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-normal-outline-font-color-active);
}
.mt-nav-item--normal-outline--active-icon, .mt-nav-item--normal-outline--active-label {
  color: var(--nav-item-normal-outline-font-color-active);
}
.mt-nav-item--normal-text {
  background-color: var(--nav-item-normal-text-background-color);
}
.mt-nav-item--normal-text-icon, .mt-nav-item--normal-text-label {
  color: var(--nav-item-normal-text-font-color);
}
.mt-nav-item--normal-text:active {
  background-color: var(--nav-item-normal-text-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--normal-text:active .mt-nav-item-icon, .mt-nav-item--normal-text:active .mt-nav-item-label {
  color: var(--nav-item-normal-text-font-color-hover);
}
.mt-nav-item--normal-text--active {
  background-color: var(--nav-item-normal-text-background-color-active);
}
.mt-nav-item--normal-text--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-normal-text-font-color-active);
}
.mt-nav-item--normal-text--active-icon, .mt-nav-item--normal-text--active-label {
  color: var(--nav-item-normal-text-font-color-active);
}
.mt-nav-item-extra-wrapper--normal {
  color: var(--nav-item-normal-extra-color);
}
.mt-nav-item--primary-solid {
  background-color: var(--nav-item-primary-solid-background-color);
}
.mt-nav-item--primary-solid-icon, .mt-nav-item--primary-solid-label {
  color: var(--nav-item-primary-solid-font-color);
}
.mt-nav-item--primary-solid:active {
  background-color: var(--nav-item-primary-solid-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--primary-solid:active .mt-nav-item-icon, .mt-nav-item--primary-solid:active .mt-nav-item-label {
  color: var(--nav-item-primary-solid-font-color-hover);
}
.mt-nav-item--primary-solid--active {
  background-color: var(--nav-item-primary-solid-background-color-active);
}
.mt-nav-item--primary-solid--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-primary-solid-font-color-active);
}
.mt-nav-item--primary-solid--active-icon, .mt-nav-item--primary-solid--active-label {
  color: var(--nav-item-primary-solid-font-color-active);
}
.mt-nav-item--primary-outline {
  background-color: var(--nav-item-primary-outline-background-color);
}
.mt-nav-item--primary-outline-icon, .mt-nav-item--primary-outline-label {
  color: var(--nav-item-primary-outline-font-color);
}
.mt-nav-item--primary-outline:active {
  background-color: var(--nav-item-primary-outline-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--primary-outline:active .mt-nav-item-icon, .mt-nav-item--primary-outline:active .mt-nav-item-label {
  color: var(--nav-item-primary-outline-font-color-hover);
}
.mt-nav-item--primary-outline--active {
  background-color: var(--nav-item-primary-outline-background-color-active);
}
.mt-nav-item--primary-outline--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-primary-outline-font-color-active);
}
.mt-nav-item--primary-outline--active-icon, .mt-nav-item--primary-outline--active-label {
  color: var(--nav-item-primary-outline-font-color-active);
}
.mt-nav-item--primary-text {
  background-color: var(--nav-item-primary-text-background-color);
}
.mt-nav-item--primary-text-icon, .mt-nav-item--primary-text-label {
  color: var(--nav-item-primary-text-font-color);
}
.mt-nav-item--primary-text:active {
  background-color: var(--nav-item-primary-text-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--primary-text:active .mt-nav-item-icon, .mt-nav-item--primary-text:active .mt-nav-item-label {
  color: var(--nav-item-primary-text-font-color-hover);
}
.mt-nav-item--primary-text--active {
  background-color: var(--nav-item-primary-text-background-color-active);
}
.mt-nav-item--primary-text--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-primary-text-font-color-active);
}
.mt-nav-item--primary-text--active-icon, .mt-nav-item--primary-text--active-label {
  color: var(--nav-item-primary-text-font-color-active);
}
.mt-nav-item-extra-wrapper--primary {
  color: var(--nav-item-primary-extra-color);
}
.mt-nav-item--inverse-solid {
  background-color: var(--nav-item-inverse-solid-background-color);
}
.mt-nav-item--inverse-solid-icon, .mt-nav-item--inverse-solid-label {
  color: var(--nav-item-inverse-solid-font-color);
}
.mt-nav-item--inverse-solid:active {
  background-color: var(--nav-item-inverse-solid-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--inverse-solid:active .mt-nav-item-icon, .mt-nav-item--inverse-solid:active .mt-nav-item-label {
  color: var(--nav-item-inverse-solid-font-color-hover);
}
.mt-nav-item--inverse-solid--active {
  background-color: var(--nav-item-inverse-solid-background-color-active);
}
.mt-nav-item--inverse-solid--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-inverse-solid-font-color-active);
}
.mt-nav-item--inverse-solid--active-icon, .mt-nav-item--inverse-solid--active-label {
  color: var(--nav-item-inverse-solid-font-color-active);
}
.mt-nav-item--inverse-outline {
  background-color: var(--nav-item-inverse-outline-background-color);
}
.mt-nav-item--inverse-outline-icon, .mt-nav-item--inverse-outline-label {
  color: var(--nav-item-inverse-outline-font-color);
}
.mt-nav-item--inverse-outline:active {
  background-color: var(--nav-item-inverse-outline-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--inverse-outline:active .mt-nav-item-icon, .mt-nav-item--inverse-outline:active .mt-nav-item-label {
  color: var(--nav-item-inverse-outline-font-color-hover);
}
.mt-nav-item--inverse-outline--active {
  background-color: var(--nav-item-inverse-outline-background-color-active);
}
.mt-nav-item--inverse-outline--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-inverse-outline-font-color-active);
}
.mt-nav-item--inverse-outline--active-icon, .mt-nav-item--inverse-outline--active-label {
  color: var(--nav-item-inverse-outline-font-color-active);
}
.mt-nav-item--inverse-text {
  background-color: var(--nav-item-inverse-text-background-color);
}
.mt-nav-item--inverse-text-icon, .mt-nav-item--inverse-text-label {
  color: var(--nav-item-inverse-text-font-color);
}
.mt-nav-item--inverse-text:active {
  background-color: var(--nav-item-inverse-text-background-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-nav-item--inverse-text:active .mt-nav-item-icon, .mt-nav-item--inverse-text:active .mt-nav-item-label {
  color: var(--nav-item-inverse-text-font-color-hover);
}
.mt-nav-item--inverse-text--active {
  background-color: var(--nav-item-inverse-text-background-color-active);
}
.mt-nav-item--inverse-text--active:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s-1) / 2);
  height: 100%;
  background-color: var(--nav-item-inverse-text-font-color-active);
}
.mt-nav-item--inverse-text--active-icon, .mt-nav-item--inverse-text--active-label {
  color: var(--nav-item-inverse-text-font-color-active);
}
.mt-nav-item-extra-wrapper--inverse {
  color: var(--nav-item-inverse-extra-color);
}
.mt-nav-subnav--normal-solid-active {
  background-color: var(--nav-item-normal-solid-background-color-active);
}
.mt-nav-subnav--normal-outline-active {
  background-color: var(--nav-item-normal-outline-background-color-active);
}
.mt-nav-subnav--normal-text-active {
  background-color: var(--nav-item-normal-text-background-color-active);
}
.mt-nav-subnav--primary-solid-active {
  background-color: var(--nav-item-primary-solid-background-color-active);
}
.mt-nav-subnav--primary-outline-active {
  background-color: var(--nav-item-primary-outline-background-color-active);
}
.mt-nav-subnav--primary-text-active {
  background-color: var(--nav-item-primary-text-background-color-active);
}
.mt-nav-subnav--inverse-solid-active {
  background-color: var(--nav-item-inverse-solid-background-color-active);
}
.mt-nav-subnav--inverse-outline-active {
  background-color: var(--nav-item-inverse-outline-background-color-active);
}
.mt-nav-subnav--inverse-text-active {
  background-color: var(--nav-item-inverse-text-background-color-active);
}