@alifd/meet-react/lib/core/design-token/box.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @intermediate
  @component box
  @style
  @display Box
  @chinese 样式
  @family style
*/
:root {
  /*
    @desc min-width
    @senmantic 最小宽
  */
  --box-large-min-width: var(--s-14);
  /*
    @desc min-height
    @senmantic 最小高
  */
  --box-large-min-height: var(--s-11);
  /*
    @desc border-width
    @senmantic 边框宽度
  */
  --box-large-border-width: var(--line-1);
  /*
    @desc broder-radius
    @senmantic 圆角尺寸
  */
  --box-large-border-radius: var(--corner-1);
  /*
    @desc padding
    @senmantic 水平内边距
    @unconfigurable
  */
  --box-large-padding-hoz: var(--s-6);
  /*
    @desc padding
    @senmantic 上下内边距
    @unconfigurable
  */
  --box-large-padding-ver: var(--s-3);
  /*
    @desc padding
    @senmantic 内边距
    @group box-padding
  */
  --box-large-padding: var(--box-large-padding-ver) var(--box-large-padding-hoz);
  /*
    @desc spacing
    @senmantic 元素间隙
  */
  --box-large-spacing: var(--s-3);
  /*
    @desc margin-hoz
    @senmantic 上下外边距
  */
  --box-large-margin-hoz: var(--s-2);
  /*
    @desc margin-ver
    @senmantic 左右外边距
  */
  --box-large-margin-ver: var(--s-4);
  /*
    @desc min-width
    @senmantic 最小宽
  */
  --box-medium-min-width: var(--s-11);
  /*
    @desc min-height
    @senmantic 最小高
  */
  --box-medium-min-height: var(--s-9);
  /*
    @desc border-width
    @senmantic 边框宽度
  */
  --box-medium-border-width: var(--line-1);
  /*
    @desc broder-radius
    @senmantic 圆角尺寸
  */
  --box-medium-border-radius: var(--corner-1);
  /*
    @desc padding
    @senmantic 水平内边距
    @unconfigurable
  */
  --box-medium-padding-hoz: var(--s-4);
  /*
    @desc padding
    @senmantic 上下内边距
    @unconfigurable
  */
  --box-medium-padding-ver: var(--s-2);
  /*
    @desc padding
    @senmantic 内边距
    @unconfigurable
    @type complex
    @group box-padding
  */
  --box-medium-padding: var(--box-medium-padding-ver) var(--box-medium-padding-hoz);
  /*
    @desc spacing
    @senmantic 元素间隙
  */
  --box-medium-spacing: var(--s-2);
  /*
    @desc margin-hoz
    @senmantic 左右外边距
  */
  --box-medium-margin-hoz: var(--s-2);
  /*
    @desc margin-ver
    @senmantic 上下外边距
  */
  --box-medium-margin-ver: var(--s-4);
  /*
    @desc min-width
    @senmantic 最小宽
  */
  --box-small-min-width: var(--s-8);
  /*
    @desc min-height
    @senmantic 最小高
  */
  --box-small-min-height: var(--s-7);
  /*
    @desc border-width
    @senmantic 边框宽度
  */
  --box-small-border-width: var(--line-1);
  /*
    @desc broder-radius
    @senmantic 圆角尺寸
  */
  --box-small-border-radius: var(--corner-1);
  /*
    @desc padding
    @senmantic 水平内边距
    @unconfigurable
  */
  --box-small-padding-hoz: var(--s-3);
  /*
    @desc padding
    @senmantic 上下内边距
    @unconfigurable
  */
  --box-small-padding-ver: var(--s-1);
  /*
    @desc padding
    @senmantic 内边距
    @type complex
  */
  --box-small-padding: var(--box-small-padding-ver) var(--box-small-padding-hoz);
  /*
    @desc spacing
    @senmantic 元素间隙
  */
  --box-small-spacing: var(--s-1);
  /*
    @desc margin-hoz
    @senmantic 左右外边距
  */
  --box-small-margin-hoz: var(--s-1);
  /*
    @desc margin-ver
    @senmantic 上下外边距
  */
  --box-small-margin-ver: var(--s-1);
  --box-primary-solid-border-color: var(--color-brand-3);
  --box-primary-solid-border-color-hover: var(--color-brand-2);
  --box-primary-solid-border-color-active: var(--color-brand-4);
  --box-primary-solid-border-color-disabled: var(--color-brand-1);
  --box-primary-solid-background-color: var(--color-brand-3);
  --box-primary-solid-background-color-hover: var(--color-brand-2);
  --box-primary-solid-background-color-active: var(--color-brand-4);
  --box-primary-solid-background-color-disabled: var(--color-brand-1);
  --box-primary-solid-font-color: var(--color-white);
  --box-primary-solid-font-color-hover: var(--color-white);
  --box-primary-solid-font-color-active: var(--color-white);
  --box-primary-solid-font-color-disabled: var(--color-white);
  --box-primary-solid-icon-color: var(--color-white);
  --box-primary-solid-icon-color-hover: var(--color-white);
  --box-primary-solid-icon-color-active: var(--color-white);
  --box-primary-solid-icon-color-disabled: var(--color-white);
  --box-primary-outline-border-color: var(--color-brand-3);
  --box-primary-outline-border-color-hover: var(--color-brand-2);
  --box-primary-outline-border-color-active: var(--color-brand-4);
  --box-primary-outline-border-color-disabled: var(--color-brand-1);
  --box-primary-outline-background-color: var(--color-transparent);
  --box-primary-outline-background-color-hover: var(--color-transparent);
  --box-primary-outline-background-color-active: var(--color-transparent);
  --box-primary-outline-background-color-disabled: var(--color-transparent);
  --box-primary-outline-font-color: var(--color-brand-3);
  --box-primary-outline-font-color-hover: var(--color-brand-2);
  --box-primary-outline-font-color-active: var(--color-brand-4);
  --box-primary-outline-font-color-disabled: var(--color-brand-1);
  --box-primary-outline-icon-color: var(--color-brand-3);
  --box-primary-outline-icon-color-hover: var(--color-brand-2);
  --box-primary-outline-icon-color-active: var(--color-brand-4);
  --box-primary-outline-icon-color-disabled: var(--color-brand-1);
  --box-primary-text-border-color: var(--color-transparent);
  --box-primary-text-border-color-hover: var(--color-transparent);
  --box-primary-text-border-color-active: var(--color-transparent);
  --box-primary-text-border-color-disabled: var(--color-transparent);
  --box-primary-text-background-color: var(--color-transparent);
  --box-primary-text-background-color-hover: var(--color-transparent);
  --box-primary-text-background-color-active: var(--color-transparent);
  --box-primary-text-background-color-disabled: var(--color-transparent);
  --box-primary-text-font-color: var(--color-brand-3);
  --box-primary-text-font-color-hover: var(--color-brand-2);
  --box-primary-text-font-color-active: var(--color-brand-4);
  --box-primary-text-font-color-disabled: var(--color-brand-1);
  --box-primary-text-icon-color: var(--color-brand-3);
  --box-primary-text-icon-color-hover: var(--color-brand-2);
  --box-primary-text-icon-color-active: var(--color-brand-4);
  --box-primary-text-icon-color-disabled: var(--color-brand-1);
  --box-normal-solid-border-color: var(--color-transparent);
  --box-normal-solid-border-color-hover: var(--color-transparent);
  --box-normal-solid-border-color-active: var(--color-transparent);
  --box-normal-solid-border-color-disabled: var(--color-transparent);
  --box-normal-solid-background-color: var(--color-fill1-2);
  --box-normal-solid-background-color-hover: var(--color-fill1-3);
  --box-normal-solid-background-color-active: var(--color-fill1-4);
  --box-normal-solid-background-color-disabled: var(--color-line1-1);
  --box-normal-solid-font-color: var(--color-text1-4);
  --box-normal-solid-font-color-hover: var(--color-text1-3);
  --box-normal-solid-font-color-active: var(--color-text1-2);
  --box-normal-solid-font-color-disabled: var(--color-text1-1);
  --box-normal-solid-icon-color: var(--color-text1-4);
  --box-normal-solid-icon-color-hover: var(--color-text1-3);
  --box-normal-solid-icon-color-active: var(--color-text1-2);
  --box-normal-solid-icon-color-disabled: var(--color-text1-1);
  --box-normal-outline-border-color: var(--color-line1-4);
  --box-normal-outline-border-color-hover: var(--color-line1-3);
  --box-normal-outline-border-color-active: var(--color-line1-2);
  --box-normal-outline-border-color-disabled: var(--color-line1-1);
  --box-normal-outline-background-color: var(--color-transparent);
  --box-normal-outline-background-color-hover: var(--color-transparent);
  --box-normal-outline-background-color-active: var(--color-transparent);
  --box-normal-outline-background-color-disabled: var(--color-transparent);
  --box-normal-outline-font-color: var(--color-text1-4);
  --box-normal-outline-font-color-hover: var(--color-text1-3);
  --box-normal-outline-font-color-active: var(--color-text1-2);
  --box-normal-outline-font-color-disabled: var(--color-text1-1);
  --box-normal-outline-icon-color: var(--color-text1-4);
  --box-normal-outline-icon-color-hover: var(--color-text1-3);
  --box-normal-outline-icon-color-active: var(--color-text1-2);
  --box-normal-outline-icon-color-disabled: var(--color-text1-1);
  --box-normal-text-border-color: var(--color-transparent);
  --box-normal-text-border-color-hover: var(--color-transparent);
  --box-normal-text-border-color-active: var(--color-transparent);
  --box-normal-text-border-color-disabled: var(--color-transparent);
  --box-normal-text-background-color: var(--color-transparent);
  --box-normal-text-background-color-hover: var(--color-transparent);
  --box-normal-text-background-color-active: var(--color-transparent);
  --box-normal-text-background-color-disabled: var(--color-transparent);
  --box-normal-text-font-color: var(--color-text1-4);
  --box-normal-text-font-color-hover: var(--color-text1-3);
  --box-normal-text-font-color-active: var(--color-text1-2);
  --box-normal-text-font-color-disabled: var(--color-text1-1);
  --box-normal-text-icon-color: var(--color-text1-4);
  --box-normal-text-icon-color-hover: var(--color-text1-3);
  --box-normal-text-icon-color-active: var(--color-text1-2);
  --box-normal-text-icon-color-disabled: var(--color-text1-1);
  --box-inverse-solid-border-color: var(--color-transparent);
  --box-inverse-solid-border-color-hover: var(--color-transparent);
  --box-inverse-solid-border-color-active: var(--color-transparent);
  --box-inverse-solid-border-color-disabled: var(--color-transparent);
  --box-inverse-solid-background-color: var(--color-fill2-4);
  --box-inverse-solid-background-color-hover: var(--color-fill2-3);
  --box-inverse-solid-background-color-active: var(--color-fill2-2);
  --box-inverse-solid-background-color-disabled: var(--color-fill2-1);
  --box-inverse-solid-font-color: var(--color-text2-4);
  --box-inverse-solid-font-color-hover: var(--color-text2-3);
  --box-inverse-solid-font-color-active: var(--color-text2-2);
  --box-inverse-solid-font-color-disabled: var(--color-text2-1);
  --box-inverse-solid-icon-color: var(--color-text2-4);
  --box-inverse-solid-icon-color-hover: var(--color-text2-3);
  --box-inverse-solid-icon-color-active: var(--color-text2-2);
  --box-inverse-solid-icon-color-disabled: var(--color-text2-1);
  --box-inverse-outline-border-color: var(--color-text2-4);
  --box-inverse-outline-border-color-hover: var(--color-text2-3);
  --box-inverse-outline-border-color-active: var(--color-text2-2);
  --box-inverse-outline-border-color-disabled: var(--color-text2-1);
  --box-inverse-outline-background-color: var(--color-transparent);
  --box-inverse-outline-background-color-hover: var(--color-transparent);
  --box-inverse-outline-background-color-active: var(--color-transparent);
  --box-inverse-outline-background-color-disabled: var(--color-transparent);
  --box-inverse-outline-font-color: var(--color-text2-4);
  --box-inverse-outline-font-color-hover: var(--color-text2-3);
  --box-inverse-outline-font-color-active: var(--color-text2-2);
  --box-inverse-outline-font-color-disabled: var(--color-text2-1);
  --box-inverse-outline-icon-color: var(--color-text2-4);
  --box-inverse-outline-icon-color-hover: var(--color-text2-3);
  --box-inverse-outline-icon-color-active: var(--color-text2-2);
  --box-inverse-outline-icon-color-disabled: var(--color-text2-1);
  --box-inverse-text-border-color: var(--color-transparent);
  --box-inverse-text-border-color-hover: var(--color-transparent);
  --box-inverse-text-border-color-active: var(--color-transparent);
  --box-inverse-text-border-color-disabled: var(--color-transparent);
  --box-inverse-text-background-color: var(--color-transparent);
  --box-inverse-text-background-color-hover: var(--color-transparent);
  --box-inverse-text-background-color-active: var(--color-transparent);
  --box-inverse-text-background-color-disabled: var(--color-transparent);
  --box-inverse-text-font-color: var(--color-text2-4);
  --box-inverse-text-font-color-hover: var(--color-text2-3);
  --box-inverse-text-font-color-active: var(--color-text2-2);
  --box-inverse-text-font-color-disabled: var(--color-text2-1);
  --box-inverse-text-icon-color: var(--color-text2-4);
  --box-inverse-text-icon-color-hover: var(--color-text2-3);
  --box-inverse-text-icon-color-active: var(--color-text2-2);
  --box-inverse-text-icon-color-disabled: var(--color-text2-1);
  --box-warning-solid-border-color: var(--color-error-3);
  --box-warning-solid-border-color-hover: var(--color-error-2);
  --box-warning-solid-border-color-active: var(--color-error-4);
  --box-warning-solid-border-color-disabled: var(--color-error-1);
  --box-warning-solid-background-color: var(--color-error-3);
  --box-warning-solid-background-color-hover: var(--color-error-2);
  --box-warning-solid-background-color-active: var(--color-error-4);
  --box-warning-solid-background-color-disabled: var(--color-error-1);
  --box-warning-solid-font-color: var(--color-white);
  --box-warning-solid-font-color-hover: var(--color-white);
  --box-warning-solid-font-color-active: var(--color-white);
  --box-warning-solid-font-color-disabled: var(--color-white);
  --box-warning-solid-icon-color: var(--color-white);
  --box-warning-solid-icon-color-hover: var(--color-white);
  --box-warning-solid-icon-color-active: var(--color-white);
  --box-warning-solid-icon-color-disabled: var(--color-white);
  --box-warning-outline-border-color: var(--color-error-3);
  --box-warning-outline-border-color-hover: var(--color-error-2);
  --box-warning-outline-border-color-active: var(--color-error-4);
  --box-warning-outline-border-color-disabled: var(--color-error-1);
  --box-warning-outline-background-color: var(--color-transparent);
  --box-warning-outline-background-color-hover: var(--color-transparent);
  --box-warning-outline-background-color-active: var(--color-transparent);
  --box-warning-outline-background-color-disabled: var(--color-transparent);
  --box-warning-outline-font-color: var(--color-error-3);
  --box-warning-outline-font-color-hover: var(--color-error-2);
  --box-warning-outline-font-color-active: var(--color-error-4);
  --box-warning-outline-font-color-disabled: var(--color-error-1);
  --box-warning-outline-icon-color: var(--color-error-3);
  --box-warning-outline-icon-color-hover: var(--color-error-2);
  --box-warning-outline-icon-color-active: var(--color-error-4);
  --box-warning-outline-icon-color-disabled: var(--color-error-1);
  --box-warning-text-border-color: var(--color-transparent);
  --box-warning-text-border-color-hover: var(--color-transparent);
  --box-warning-text-border-color-active: var(--color-transparent);
  --box-warning-text-border-color-disabled: var(--color-transparent);
  --box-warning-text-background-color: var(--color-transparent);
  --box-warning-text-background-color-hover: var(--color-transparent);
  --box-warning-text-background-color-active: var(--color-transparent);
  --box-warning-text-background-color-disabled: var(--color-transparent);
  --box-warning-text-font-color: var(--color-error-3);
  --box-warning-text-font-color-hover: var(--color-error-2);
  --box-warning-text-font-color-active: var(--color-error-4);
  --box-warning-text-font-color-disabled: var(--color-error-1);
  --box-warning-text-icon-color: var(--color-error-3);
  --box-warning-text-icon-color-hover: var(--color-error-2);
  --box-warning-text-icon-color-active: var(--color-error-4);
  --box-warning-text-icon-color-disabled: var(--color-error-1);
}