@alifd/meet-react/es/range/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component range
  @display Radio
  @chinese 区域选择
  @family data-entry
*/
:root {
  /*
   @desc large-height
   @semantic 轨道尺寸(大号)
   @namespace size/track
  */
  --range-track-large-height: 1.6vw;
  /*
   @desc medium-height
   @semantic 轨道尺寸(中号)
   @namespace size/track
  */
  --range-track-medium-height: 1.0666666666666667vw;
  /*
   @desc small-height
   @semantic 轨道尺寸(小号)
   @namespace size/track
  */
  --range-track-small-height: 0.5333333333333333vw;
  /*
   @desc track-bg-color
   @semantic 轨道背景色
   @namespace statement/normal
  */
  --range-track-bg-color: var(--color-line1-1);
  /*
   @desc disabled-track-bg-color
   @semantic 轨道背景色(禁用)
   @namespace statement/disabled
  */
  --range-track-bg-color-disabled: var(--color-line1-1);
  /*
   @desc selected-track-bg-color
   @semantic 轨道背景色（选中）
   @namespace statement/selected
  */
  --range-track-bg-color-selected: var(--color-brand-3);
  /*
   @desc selected-disabled-track-bg-color
   @semantic 轨道背景色（选中-禁用)
   @namespace statement/disabled-selected
  */
  --range-track-bg-color-selected-disabled: var(--color-line1-4);
  /*
    @desc large-thumb-size
    @semantic 按钮尺寸(大号)
    @namespace size/thumb
  */
  --range-thumb-large-size: var(--s-6);
  /*
   @desc medium-thumb-size
   @semantic 按钮尺寸(中号)
   @namespace size/thumb
  */
  --range-thumb-medium-size: var(--s-5);
  /*
   @desc small-thumb-size
   @semantic 按钮尺寸(小号)
   @namespace size/thumb
  */
  --range-thumb-small-size: var(--s-4);
  /*
   @desc thumb-bg-color
   @semantic 按钮颜色
   @namespace statement/normal
  */
  --range-thumb-bg-color: var(--color-white);
  /*
   @desc thumb-shadow
   @semantic 按钮阴影
   @namespace statement/normal
  */
  --range-thumb-shadow: var(--shadow-1);
  /*
   @desc active-thumb-shadow
   @semantic 按钮阴影（激活）
   @namespace statement/dragging
  */
  --range-thumb-active-shadow: var(--shadow-1);
  /*
   @desc thumb-border-width
   @semantic 按钮边框粗细
   @namespace size/thumb
  */
  --range-thumb-border-width: var(--line-1);
  /*
   @desc thumb-border-color
   @semantic 按钮边框颜色
   @namespace statement/normal
  */
  --range-thumb-border-color: var(--color-line1-2);
  /*
   @desc mark-width
   @semantic 标记线宽度
   @namespace size/mark
  */
  --range-mark-width: var(--line-3);
  /*
   @desc mark-height
   @semantic 标记线高度
   @namespace size/mark
  */
  --range-mark-height: var(--s-3);
  /*
   @desc mark-bg-color
   @semantic 标记线颜色
   @namespace statement/background
  */
  --range-mark-bg-color: var(--color-line1-1);
  /*
   @desc active-mark-bg-color
   @semantic 标记线颜色（激活）
   @namespace statement/dragging
  */
  --range-mark-bg-color-active: var(--color-brand-3);
  /*
   @desc disabled-mark-bg-color
   @semantic 标记线颜色（禁用）
   @namespace statement/disabled
  */
  --range-mark-bg-color-disabled: var(--color-text1-1);
  /*
   @desc active-disabled-mark-bg-color
   @semantic 标记线颜色（激活-禁用）
   @namespace statement/disabled_and_active
  */
  --range-mark-bg-color-active-disabled: var(--color-text1-2);
  /*
   @desc tooltip-width
   @semantic 提示宽度
   @namespace size/tooltip
  */
  --range-tooltip-size-width: var(--s-10);
  /*
   @desc tooltip-height
   @semantic 提示高度
   @namespace size/tooltip
  */
  --range-tooltip-size-height: var(--s-10);
  /*
   @desc tooltip-color
   @semantic 提示颜色
   @namespace statement/normal
  */
  --range-tooltip-color: var(--color-text1-3);
  /*
   @desc tooltip-shadow
   @semantic 提示阴影
   @namespace statement/normal
  */
  --range-tooltip-shadow: var(--shadow-1);
  /*
   @desc tooltip-corner
   @semantic 提示圆角
   @namespace size/tooltip
  */
  --range-tooltip-corner: var(--corner-1);
  /*
   @desc tooltip-bg-color
   @semantic 提示背景色
   @namespace statement/normal
  */
  --range-tooltip-bg-color: var(--color-white);
  /*
   @desc arrow-border-width
   @semantic 箭头边框粗细
   @namespace size/arrow
  */
  --range-arrow-border-width: var(--s-4);
  /*
   @desc label-margin
   @semantic 箭头外边距
   @namespace size/label
  */
  --range-label-margin: var(--s-4);
  /*
   @desc label-font-size
   @semantic 标签文本字号
   @namespace size/label
  */
  --range-label-font-size: 2.4vw;
  /*
   @desc label-font-weight
   @semantic 标签文本字重
   @namespace size/label
  */
  --range-label-font-weight: 400;
  /*
   @desc label-color
   @semantic 标签文本颜色
   @namespace statement/normal
  */
  --range-label-color: var(--color-text1-2);
  /*
   @desc active-label-color
   @semantic 标签文本颜色（激活）
   @namespace statement/dragging
  */
  --range-label-color-active: #1f2933;
  /*
   @desc disabled-label-color
   @semantic 标签文本颜色（禁用）
   @namespace statement/disabled
  */
  --range-label-color-disabled: var(--color-text1-2);
  /*
   @desc active-disabled-label-color
   @semantic 标签文本颜色（激活-禁用）
   @namespace statement/disabled-dragging
  */
  --range-label-color-active-disabled: var(--color-text1-2);
}

.mt-range {
  position: relative;
  box-sizing: border-box;
  touch-action: none;
  height: var(--s-8);
}
.mt-range--track {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-line1-1);
  background: var(--range-track-bg-color);
}
.mt-range--track--selected {
  position: absolute;
  background-color: var(--color-brand-3);
  background: var(--range-track-bg-color-selected);
}
.mt-range--track--small {
  height: var(--range-track-small-height);
}
.mt-range--track--medium {
  height: var(--range-track-medium-height);
}
.mt-range--track--large {
  height: var(--range-track-large-height);
}
.mt-range--track--disabled {
  background-color: var(--color-line1-1);
  background: var(--range-track-bg-color-disabled);
}
.mt-range--track--selected--disabled {
  background-color: var(--color-line1-4);
  background: var(--range-track-bg-color-selected-disabled);
}
.mt-range--thumb {
  position: absolute;
  background-color: var(--range-thumb-bg-color);
  border-radius: var(--s-4);
  border-width: var(--range-thumb-border-width);
  border-style: solid;
  border-color: var(--range-thumb-border-color);
  box-shadow: var(--range-thumb-shadow);
  top: 50%;
  transform: translateY(-50%);
}
.mt-range--thumb--small {
  margin-left: calc(-0.5 * var(--range-thumb-small-size));
  width: var(--range-thumb-small-size);
  height: var(--range-thumb-small-size);
}
.mt-range--thumb--medium {
  margin-left: calc(-0.5 * var(--range-thumb-medium-size));
  width: var(--range-thumb-medium-size);
  height: var(--range-thumb-medium-size);
}
.mt-range--thumb--large {
  margin-left: calc(-0.5 * var(--range-thumb-large-size));
  width: var(--range-thumb-large-size);
  height: var(--range-thumb-large-size);
}
.mt-range--thumb--active {
  box-shadow: var(--range-thumb-active-shadow);
}
.mt-range--mark {
  position: absolute;
  width: var(--range-mark-width);
  height: var(--range-mark-height);
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-line1-1);
  background: var(--range-mark-bg-color);
}
.mt-range--mark--active {
  background-color: var(--color-brand-3);
  background: var(--range-mark-bg-color-active);
}
.mt-range--mark--active--disabled {
  background-color: var(--color-text1-2);
  background: var(--range-mark-bg-color-active-disabled);
}
.mt-range--mark--disabled {
  background-color: var(--color-text1-1);
  background: var(--range-mark-bg-color-disabled);
}
.mt-range--label {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  color: var(--range-label-color);
  font-size: var(--range-label-font-size);
  font-weight: var(--range-label-font-weight);
}
.mt-range--label--below {
  top: calc(50% + var(--range-label-margin));
}
.mt-range--label--above {
  top: calc(50% - var(--range-label-margin));
}
.mt-range--label--disabled {
  color: var(--range-label-color-disabled);
}
.mt-range--label--active {
  color: var(--range-label-color-active);
}
.mt-range--label--active--disabled {
  color: var(--range-label-color-active-disabled);
}
.mt-range--tooltip {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: var(--s-10);
  left: calc(-1 * var(--s-2));
  width: var(--range-tooltip-size-width);
  height: var(--range-tooltip-size-height);
  line-height: var(--range-tooltip-size-height);
  border-radius: var(--range-tooltip-corner);
  box-shadow: var(--range-tooltip-shadow);
  background-color: var(--color-white);
  color: var(--range-tooltip-color);
  background: var(--range-tooltip-bg-color);
}
.mt-range--tooltip-small-left {
  left: calc(-0.5 * var(--range-tooltip-size-width) - -0.5 * var(--range-thumb-small-size));
}
.mt-range--tooltip-medium-left {
  left: calc(-0.5 * var(--range-tooltip-size-width) - -0.5 * var(--range-thumb-medium-size));
}
.mt-range--tooltip-large-left {
  left: calc(-0.5 * var(--range-tooltip-size-width) - -0.5 * var(--range-thumb-large-size));
}
.mt-range--tooltip--arrow {
  transform: translate(0, 50%) rotate(45deg);
  width: var(--range-arrow-border-width);
  height: var(--range-arrow-border-width);
  background: var(--range-tooltip-bg-color);
  display: block;
  position: absolute;
  bottom: 0;
  border-color: var(--range-tooltip-bg-color);
  background: var(--range-tooltip-bg-color);
}