@alifd/meet-react/lib/nav/styles/variable.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);
}