@alifd/meet-react/es/switch/styles/index.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);
}

.mt-switch {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: var(--switch-padding);
  background-color: var(--switch-background-color);
  border: var(--switch-border-width) solid var(--switch-border-color);
  transition: background-color var(--switch-motion-type) var(--switch-motion-time);
}
.mt-switch--disabled {
  background-color: var(--switch-disabled-background-color);
  border-color: var(--switch-disabled-border-color);
}
.mt-switch--checked {
  background-color: var(--switch-checked-background-color);
  border-color: var(--switch-checked-border-color);
}
.mt-switch--disabled-checked {
  background-color: var(--switch-disabled-checked-background-color);
  border-color: var(--switch-disabled-checked-border-color);
}
.mt-switch-knob {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 var(--switch-knob-margin);
  background-color: var(--switch-knob-background-color);
  border-radius: 50%;
  box-shadow: var(--switch-knob-box-shadow);
  transition: transform var(--switch-motion-type) var(--switch-motion-time);
}
.mt-switch-knob-loading {
  color: var(--switch-knob-loading-color);
}
.mt-switch--small {
  width: var(--switch-small-width);
  height: var(--switch-small-height);
  border-radius: var(--switch-small-corner);
}
.mt-switch-knob--small, .mt-switch-knob--small-checked {
  width: var(--switch-knob-small-size);
  height: var(--switch-knob-small-size);
}
.mt-switch-knob--small-checked {
  transform: translateX(calc(var(--switch-small-width) - var(--switch-knob-small-size) - var(--switch-knob-margin) * 2));
}
.mt-switch-knob-loading--small {
  font-size: var(--switch-knob-loading-small-size);
}
.mt-switch--medium {
  width: var(--switch-medium-width);
  height: var(--switch-medium-height);
  border-radius: var(--switch-medium-corner);
}
.mt-switch-knob--medium, .mt-switch-knob--medium-checked {
  width: var(--switch-knob-medium-size);
  height: var(--switch-knob-medium-size);
}
.mt-switch-knob--medium-checked {
  transform: translateX(calc(var(--switch-medium-width) - var(--switch-knob-medium-size) - var(--switch-knob-margin) * 2));
}
.mt-switch-knob-loading--medium {
  font-size: var(--switch-knob-loading-medium-size);
}
.mt-switch--large {
  width: var(--switch-large-width);
  height: var(--switch-large-height);
  border-radius: var(--switch-large-corner);
}
.mt-switch-knob--large, .mt-switch-knob--large-checked {
  width: var(--switch-knob-large-size);
  height: var(--switch-knob-large-size);
}
.mt-switch-knob--large-checked {
  transform: translateX(calc(var(--switch-large-width) - var(--switch-knob-large-size) - var(--switch-knob-margin) * 2));
}
.mt-switch-knob-loading--large {
  font-size: var(--switch-knob-loading-large-size);
}