@alifd/meet-react/es/calendar/styles/variable.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component calendar
  @display Calendar
  @chinese 日历
  @family data-display
*/
:root {
  /*
    @desc border-color
    @semantic 头部分割线颜色(`card/fullscreen`模式)
    @namespace state/head/select
  */
  --calendar-header-select-border-color: var(--color-line1-3);
  /*
    @desc padding
    @semantic  头部选中内边距(`card/fullscreen`模式)
    @namespace size/head/select
  */
  --calendar-header-select-padding: var(--s-2);
  /*
    @desc month-date-picker-width
    @semantic   月、日弹出 picker 宽度(`card/fullscreen` `month`模式)
    @namespace size/head/title
  */
  --calendar-header-title-month-date-picker-width: var(--s-30);
  /*
    @desc year-date-picker-width
    @semantic 年、日弹出 picker 宽度(`card/fullscreen` `year`模式)
    @namespace size/head/title
  */
  --calendar-header-title-year-date-picker-width: var(--s-24);
  /*
    @desc bg-color
    @semantic 头部背景色(`panel/range`模式)
    @namespace state/normal/head
  */
  --calendar-header-normal-background-color: var(--color-white);
  /*
    @desc border-color
    @semantic 底部边框色
    @namespace state/normal/head
  */
  --calendar-header-normal-border-color: var(--color-line1-2);
  /*
    @desc title-color
    @semantic  头部标题颜色(`panel/range`模式)
    @namespace state/normal/head
  */
  --calendar-header-normal-title-color: var(--color-text1-4);
  /*
    @desc title-size
    @semantic  标题尺寸(`panel/range`模式)
    @namespace size/head
  */
  --calendar-header-normal-title-size: var(--p-body-2-font-size);
  /*
    @desc icon-color
    @semantic 头部图标颜色(`panel/range`模式)
    @namespace state/normal/head
  */
  --calendar-header-normal-icon-color: var(--color-text1-2);
  /*
    @desc disable-icon-color
    @semantic 头部图标禁用颜色
    @namespace state/normal/head
  */
  --calendar-header-normal-icon-disabled-color: var(--color-text1-1);
  /*
    @desc padding(t,b)
    @semantic 上下内边距
    @namespace size/content
  */
  --calendar-content-padding-vertical: var(--s-5);
  /*
    @desc padding(l,r)
    @semantic 左右内边距
    @namespace size/content
  */
  --calendar-content-padding-horizon: var(--s-3);
  /*
    @desc margin-bottom
    @semantic 内容下边距(`month`模式)
    @namespace size/content
  */
  --calendar-content-top-margin-bottom: var(--s-4);
  /*
    @desc top-line-height
    @semantic 内容顶部行高(`month`模式)
    @namespace size/content
  */
  --calendar-content-top-line-height: var(--s-5);
  /*
    @desc row-margin-bottom
    @semantic 内容单行底部外边距
    @namespace size/content
  */
  --calendar-content-row-margin-bottom: var(--s-1);
  /*
    @desc range-container-background-color
    @semantic 日期单元格背景色(`range`模式)
    @namespace state/cell
  */
  --calendar-cell-range-container-background-color: var(--color-brand-1);
  /*
    @desc font-color
    @semantic 禁用字体颜色(`month`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-disabled-text-color: var(--color-text1-1);
  /*
    @desc primary-color
    @semantic 高亮颜色
    @namespace state/selected/cell
  */
  --calendar-highlight-color: var(--color-brand-3);
  /*
    @desc year-padding-top
    @semantic 年顶部内边距(`year`模式)
    @namespace  size/cell
  */
  --calendar-cell-year-padding-top: var(--s-4);
  /*
    @desc year-padding-left
    @semantic 年左侧内边距(`year`模式)
    @namespace size/cell
  */
  --calendar-cell-year-padding-left: var(--s-2);
  /*
    @desc year-height
    @semantic 年高度(`year`模式)
    @namespace size/cell
  */
  --calendar-cell-year-height: var(--s-20);
  /*
    @desc year-margin(l,r)
    @semantic 年水平边距(`year`模式)
    @namespace  size/cell
  */
  --calendar-cell-year-margin-horizon: var(--s-1);
  /*
    @desc year-bg-color
    @semantic 背景色(`year`模式)
    @namespace  state/normal/cell
  */
  --calendar-cell-year-normal-background-color: var(--color-white);
  /*
    @desc year-bg-color
    @semantic 禁用时背景色(`year`模式)
    @namespace  state/disabled/cell
  */
  --calendar-cell-year-disabled-background-color: var(--color-white);
  /*
    @desc year-bg-color
    @semantic 选中时年背景色
    @namespace  state/selected/cell
  */
  --calendar-cell-year-selected-background-color: var(--color-brand-1);
  /*
    @desc year-font-color
    @semantic 年文字颜色(`year`模式)
    @namespace  state/normal/cell
  */
  --calendar-cell-year-normal-text-color: var(--color-black);
  /*
    @desc year-font-color
    @semantic 禁用时年文字色(`year`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-year-disabled-text-color: var(--color-text1-1);
  /*
    @desc year-line-color
    @semantic 年分割线颜色(`year`模式)
    @namespace state/normal/cell
  */
  --calendar-cell-year-normal-line-color: var(--color-line1-3);
  /*
    @desc year-line-color
    @semantic 禁用时年分割线颜色(`year`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-year-disabled-line-color: var(--color-line1-3);
  /*
     @desc year-font-size
     @semantic 年字体大小(`year`模式)
     @namespace state/normal/cell
   */
  --calendar-cell-year-font-size: var(--p-body-2-font-size);
  /*
    @desc cell-bg-color
    @semantic 日期背景色(`month`模式)
    @namespace state/normal/cell
  */
  --calendar-cell-normal-background-color: var(--color-white);
  /*
    @desc cell-bg-color
    @semantic 禁用日期背景色(`month`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-disabled-background-color: var(--color-white);
  /*
    @desc cell-font-color
    @semantic 日期文字颜色(`month`模式)
    @namespace state/normal/cell
  */
  --calendar-cell-normal-text-color: var(--color-black);
  /*
    @desc cell-font-color
    @semantic  选中日期文字颜色(`month`模式)
    @namespace state/selected/cell
  */
  --calendar-cell-selected-text-color: var(--color-white);
  /*
     @desc cell-bg-color
     @semantic 今天-背景色
     @namespace state/today/cell
   */
  --calencar-cell-today-background-color: var(--color-white);
  /*
    @desc cell-height
    @semantic 日期单元格高度(`month`模式)
    @namespace size/cell
  */
  --calendar-cell-height: var(--s-9);
  /*
     @desc header-height
     @semantic 头部高度(`panel/range`模式)
     @namespace size/header
   */
  --calendar-header-height: var(--s-12);
  /*
    @desc time-picker-height
    @semantic 时间选择高度
    @namespace size/time-picker
  */
  --calendar-time-picker-height: var(--s-12);
  /*
     @desc time-picker-bg-color
     @semantic 时间选择框背景色
     @namespace style/time-picker
   */
  --calendar-time-picker-bg-color: var(--color-fill1-2);
  /*
     @desc time-picker-font-color
     @semantic 时间选择框字体色
     @namespace style/time-picker
   */
  --calendar-time-picker-font-color: var(--color-text1-4);
  /*
     @desc time-picker-corner
     @semantic 时间选择框圆角尺寸
     @namespace size/time-picker
   */
  --calendar-time-picker-corner: var(--corner-1);
  /*
     @desc time-picker-active-color
     @semantic 时间选择框激活字体色
     @namespace style/time-picker
   */
  --calendar-time-picker-active-color: var(--color-white);
  /*
     @desc time-picker-icon-color
     @semantic 时间选择框图标色
     @namespace style/time-picker
   */
  --calendar-time-picker-icon-color: var(--color-text1-2);
}