@alifd/meet-react/lib/switch/styles/variable.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component switch
  @display Switch
  @chinese 开关
  @family data-entry
*/
:root {
  /*
   @desc motion type
   @namespace base/motion
   @semantic 动画类型
   @unconfigurable
  */
  --switch-motion-type: var(--motion-type-ease);
  /*
   @desc motion time
   @namespace base/motion
   @semantic 动画时长
   @unconfigurable
  */
  --switch-motion-time: var(--motion-time-2);
  /*
   @desc width
   @namespace size/common
   @semantic 宽度(小号)
  */
  --switch-small-width: var(--s-9);
  /*
   @desc width
   @namespace size/common
   @semantic 宽度(中号)
  */
  --switch-medium-width: var(--s-11);
  /*
   @desc width
   @namespace size/common
   @semantic 宽度(大号)
  */
  --switch-large-width: var(--s-12);
  /*
   @desc height
   @namespace size/common
   @semantic 高度(小号)
  */
  --switch-small-height: var(--s-5);
  /*
   @desc height
   @namespace size/common
   @semantic 高度(中号)
  */
  --switch-medium-height: var(--s-6);
  /*
   @desc height
   @namespace size/common
   @semantic 高度(大号)
  */
  --switch-large-height: var(--s-7);
  /*
   @desc padding
   @namespace size/common
   @semantic 内边距
   @unconfigurable
   @composite
  */
  --switch-padding: var(--s-1) / 4;
  /*
   @desc bg-color
   @namespace style/common
   @semantic 背景色
  */
  --switch-background-color: var(--color-white);
  /*
   @desc selected-bg-color
   @namespace style/common
   @semantic 选中背景色
  */
  --switch-checked-background-color: var(--color-brand-3);
  /*
   @desc background color
   @namespace style/common
   @semantic 禁用背景色
  */
  --switch-disabled-background-color: var(--color-fill1-1);
  /*
   @desc background color
   @namespace style/common
   @semantic 禁用-选中背景色
  */
  --switch-disabled-checked-background-color: var(--color-brand-1);
  /*
   @desc border width
   @namespace size/common
   @semantic 边框粗细
  */
  --switch-border-width: var(--line-1);
  /*
   @desc border-color
   @namespace style/common
   @semantic 边框颜色
  */
  --switch-border-color: var(--color-line1-4);
  /*
   @desc border color
   @namespace style/common
   @semantic 选中边框颜色
  */
  --switch-checked-border-color: var(--color-brand-3);
  /*
   @desc border color
   @namespace style/common
   @semantic 禁用边框颜色
  */
  --switch-disabled-border-color: var(--color-line1-2);
  /*
   @desc border color
   @namespace style/common
   @semantic 禁用选中边框颜色
  */
  --switch-disabled-checked-border-color: var(--color-brand-1);
  /**
     @desc corner
     @namespace size/common
     @semantic 圆角
     @unconfigurable
     @composite
    */
  --switch-small-corner: calc(var(--switch-small-height) / 2);
  /**
   @desc corner
   @namespace size/common
   @semantic 圆角
   @unconfigurable
   @composite
  */
  --switch-medium-corner: calc(var(--switch-medium-height) / 2);
  /**
   @desc corner
   @namespace size/common
   @semantic 圆角
   @unconfigurable
   @composite
  */
  --switch-large-corner: calc(var(--switch-large-height) / 2);
  /*
   @desc knob size
   @namespace size/knob
   @semantic 旋钮大小(小号)
  */
  --switch-knob-small-size: calc(var(--switch-small-height) - (var(--s-1) / 2));
  /*
   @desc knob size
   @namespace size/knob
   @semantic 旋钮大小(中号)
  */
  --switch-knob-medium-size: calc(var(--switch-medium-height) - (var(--s-1) / 2));
  /*
   @desc knob size
   @namespace size/knob
   @semantic 旋钮大小(大号)
  */
  --switch-knob-large-size: calc(var(--switch-large-height) - (var(--s-1) / 2));
  /*
   @desc knob margin
   @namespace size/knob
   @semantic 旋钮外边距
   @unconfigurable
   @composite
  */
  --switch-knob-margin: calc(var(--s-1) / 4);
  /*
   @desc knob background color
   @namespace style/knob
   @semantic 旋钮背景色
  */
  --switch-knob-background-color: var(--color-white);
  /*
   @desc knob-box-shadow
   @namespace style/knob
   @semantic 旋钮阴影
  */
  --switch-knob-box-shadow: var(--shadow-1);
  /*
   @desc loading-size
   @namespace size/knob
   @semantic 加载图标大小(小号)
  */
  --switch-knob-loading-small-size: var(--p-body-1-font-size);
  /*
   @desc loading-size
   @namespace size/knob
   @semantic 加载图标大小(中号)
  */
  --switch-knob-loading-medium-size: var(--p-body-1-font-size);
  /*
   @desc loading size
   @namespace size/knob
   @semantic 加载图标大小(大号)
  */
  --switch-knob-loading-large-size: var(--p-body-2-font-size);
  /*
   @desc knob-loading-color
   @namespace style/knob
   @semantic 加载图标色
  */
  --switch-knob-loading-color: var(--color-brand-3);
}