@alifd/meet-react/lib/transfer/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component transfer
  @display Transfer
  @chinese 穿梭框
  @family data-entry
*/
:root {
  /*
    @desc padding
    @namespace size/common
    @semantic 内边距
  */
  --transfer-padding: 2.6666666666666665vw;
  /*
    @desc padding
    @namespace size/common
    @semantic 层级
  */
  --transfer-tab-icon-z-index: var(--elevation-1);
  /*
    @desc padding
    @namespace size/common
    @semantic 高度
  */
  --transfer-tab-icon-height: var(--s-6);
  /*
    @desc padding
    @namespace size/common
    @semantic 宽度
  */
  --transfer-tab-icon-width: var(--s-6);
  /*
    @desc padding
    @namespace size/common
    @semantic 边框粗细
  */
  --transfer-tab-icon-border-width: var(--line-1);
  /*
    @desc padding
    @namespace size/common
    @semantic 边框样式
  */
  --transfer-tab-icon-border-style: var(--line-solid);
  /*
    @desc padding
    @namespace size/common
    @semantic 边框颜色
  */
  --transfer-tab-icon-border-color: var(--color-line1-4);
  /*
    @desc border-radius
    @namespace size/common
    @semantic 圆角
  */
  --transfer-tab-icon-corner: var(--s-5);
  /*
    @desc background
    @namespace size/common
    @semantic 背景
  */
  --transfer-tab-icon-background-color: var(--color-white);
  /*
    @desc padding
    @namespace size/common
    @semantic 字体
  */
  --transfer-tab-icon-next-icon-font-size: 3.7333333333333334vw;
  /*
    @desc color
    @namespace size/common
    @semantic 图标颜色
  */
  --transfer-tab-icon-next-icon-color: var(--color-text1-2);
  /*
    @desc height
    @namespace size/common
    @semantic 项目高度
  */
  --transfer-tab-item-height: var(--s-9);
  /*
    @desc line-height
    @namespace size/common
    @semantic 项目行高
  */
  --transfer-tab-item-line-height: var(--s-9);
  /*
    @desc font-size
    @namespace size/common
    @semantic 项目字体大小
  */
  --transfer-tab-item-font-size: var(--s-4);
  /*
    @desc color
    @namespace size/common
    @semantic 项目颜色
  */
  --transfer-tab-item-color: var(--color-text1-4);
  /*
    @desc border-width
    @namespace size/common
    @semantic 项目边框粗细
  */
  --transfer-tab-item-border-width: var(--line-1);
  /*
    @desc border-color
    @namespace size/common
    @semantic 项目边框颜色
  */
  --transfer-tab-item-border-color: var(--color-line1-4);
  /*
    @desc border-radius
    @namespace size/common
    @semantic 项目边框圆角
  */
  --transfer-tab-item-corner: 1.3333333333333333vw;
  /*
    @desc selected-color
    @namespace size/common
    @semantic 项目选中颜色
  */
  --transfer-tab-item--selected-color: var(--color-brand-3);
  /*
    @desc border-color
    @namespace size/common
    @semantic 项目选中边框颜色
  */
  --transfer-tab-item--selected-border-color: var(--color-brand-3);
  /*
    @desc top
    @namespace size/common
    @semantic 距离顶部距离
  */
  --transfer-tab-after-top: var(--s-zero);
  /*
    @desc width
    @namespace size/common
    @semantic 右侧宽度
  */
  --transfer-tab-after-width: var(--line-1);
  /*
    @desc background-color
    @namespace size/common
    @semantic 右侧背景色
  */
  --transfer-tab-after-background-color: var(--color-brand-3);
  /*
    @desc border-color
    @namespace size/common
    @semantic 列表边框颜色
  */
  --transfer-list-border-color: var(--color-line1-4);
  /*
    @desc border-style
    @namespace size/common
    @semantic 列表边框样式
  */
  --transfer-list-border-style: var(--line-solid);
  /*
    @desc border-width
    @namespace size/common
    @semantic 列表边框粗细
  */
  --transfer-list-border-width: var(--line-1);
  /*
    @desc border-radius
    @namespace size/common
    @semantic 列表边框圆角
  */
  --transfer-list-corner: 1.3333333333333333vw;
  /*
    @desc padding-left
    @namespace size/common
    @semantic 列表距离左侧
  */
  --transfer-list-padding-left: 2.6666666666666665vw;
  /*
    @desc margin-top
    @namespace size/common
    @semantic 列表顶部距离
  */
  --transfer-list-margin-top: var(--s-5);
  /*
    @desc height
    @namespace size/common
    @semantic 列表高度
  */
  --transfer-list-scroll-height: 60vh;
  /*
    @desc bottom
    @namespace size/common
    @semantic 列表底部内边距
  */
  --transfer-list--selected-padding-bottom: 14.933333333333334vw;
  /*
    @desc height
    @namespace size/common
    @semantic 列表选中高度
  */
  --transfer-list--selected-height: 14.933333333333334vw;
  /*
    @desc right
    @namespace size/common
    @semantic 列表右侧内边距
  */
  --transfer-list-padding-right: var(--s-zero);
  /*
    @desc bottom-color
    @namespace size/common
    @semantic 列表选中边框颜色
  */
  --transfer-list--selected-border-bottom-color: var(--color-line1-4);
  /*
    @desc bottom-style
    @namespace size/common
    @semantic 列表选中边框样式
  */
  --transfer-list--selected-border-bottom-style: var(--line-solid);
  /*
    @desc bottom-width
    @namespace size/common
    @semantic 列表选中边框粗细
  */
  --transfer-list--selected-border-bottom-width: var(--line-1);
  /*
    @desc left
    @namespace size/common
    @semantic 提示左侧距离
  */
  --transfer-select-tip-left: var(--s-zero);
  /*
    @desc bottom
    @namespace size/common
    @semantic 提示底部距离
  */
  --transfer-select-tip-bottom: var(--s-zero);
  /*
    @desc background-color
    @namespace size/common
    @semantic 选中提示背景颜色
  */
  --transfer-select-tip-background-color: var(--color-white);
  /*
    @desc height
    @namespace size/common
    @semantic 选中提示高度
  */
  --transfer-select-tip-height: 15.2vw;
  /*
    @desc padding-left
    @namespace size/common
    @semantic 选中提示左侧内边距
  */
  --transfer-select-tip-padding-left: 2.6666666666666665vw;
  /*
    @desc z-index
    @namespace size/common
    @semantic 选中提示层级
  */
  --transfer-select-tip-z-index: var(--elevation-1);
  /*
    @desc height
    @namespace size/common
    @semantic 选中提示高度
  */
  --transfer-select-tip-after-height: var(--line-1);
  /*
    @desc background
    @namespace size/common
    @semantic 选中提示背景色
  */
  --transfer-select-tip-after-background: var(--color-line1-4);
  /*
    @desc left
    @namespace size/common
    @semantic 选中提示左侧距离
  */
  --transfer-select-tip-after-left: var(--s-zero);
  /*
    @desc right
    @namespace size/common
    @semantic 选中提示距离右侧
  */
  --transfer-select-tip-after-right: 2.6666666666666665vw;
  /*
    @desc top
    @namespace size/common
    @semantic 选中提示顶部距离
  */
  --transfer-select-tip-after-top: var(--s-zero);
  /*
    @desc margin-top
    @namespace size/common
    @semantic 按钮顶部外边距
  */
  --transfer-button-margin-top: var(--s-5);
  /*
    @desc margin-top
    @namespace size/common
    @semantic 空内容顶部外边距
  */
  --transfer-empty-content-margin-top: 14.933333333333334vw;
}

.mt-transfer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: var(--transfer-padding);
  box-sizing: border-box;
}
.mt-transfer-tab {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.mt-transfer-tab-main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.mt-transfer-tab-main-item {
  flex: 1;
  height: var(--transfer-tab-item-height);
  line-height: var(--transfer-tab-item-line-height);
  font-size: var(--transfer-tab-item-font-size);
  color: var(--transfer-tab-item-color);
  text-align: center;
  border-style: solid;
  border-width: var(--transfer-tab-item-border-width);
  border-color: var(--transfer-tab-item-border-color);
}
.mt-transfer-tab-main-item:first-child {
  border-radius: var(--transfer-tab-item-corner) 0 0 var(--transfer-tab-item-corner);
  border-right: 0;
}
.mt-transfer-tab-main-item:last-child {
  border-radius: 0 var(--transfer-tab-item-corner) var(--transfer-tab-item-corner) 0;
  border-left: 0;
}
.mt-transfer-tab-main-item--selected {
  color: var(--transfer-tab-item--selected-color);
  border-color: var(--transfer-tab-item--selected-border-color);
}
.mt-transfer-tab-icon-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--transfer-tab-icon-z-index);
  height: var(--transfer-tab-icon-height);
  width: var(--transfer-tab-icon-width);
  border-width: var(--transfer-tab-icon-border-width);
  border-style: var(--transfer-tab-icon-border-style);
  border-color: var(--transfer-tab-icon-border-color);
  border-radius: var(--transfer-tab-icon-corner);
  background-color: var(--transfer-tab-icon-background-color);
  justify-content: center;
  align-items: center;
}
.mt-transfer-tab-icon-wrap-icon {
  font-size: var(--transfer-tab-icon-next-icon-font-size);
  color: var(--transfer-tab-icon-next-icon-color);
}
.mt-transfer-tab:after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--transfer-tab-after-top);
  transform: translate(-50%, 0);
  height: 100%;
  width: var(--transfer-tab-after-width);
  background-color: var(--transfer-tab-after-background-color);
}
.mt-transfer-list {
  border-color: var(--transfer-list-border-color);
  border-style: var(--transfer-list-border-style);
  border-width: var(--transfer-list-border-width);
  border-radius: var(--transfer-list-corner);
  padding-left: var(--transfer-list-padding-left);
  position: relative;
  overflow: hidden;
  margin-top: var(--transfer-list-margin-top);
  box-sizing: border-box;
}
.mt-transfer-list-scroll {
  overflow-y: auto;
  height: var(--transfer-list-scroll-height);
  -webkit-overflow-scrolling: touch;
}
.mt-transfer-list--selected {
  padding-bottom: var(--transfer-list--selected-padding-bottom);
}
.mt-transfer-list-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: var(--transfer-list--selected-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: var(--transfer-list-padding-right);
  position: relative;
  border-bottom-color: var(--transfer-list--selected-border-bottom-color);
  border-bottom-style: var(--transfer-list--selected-border-bottom-style);
  border-bottom-width: var(--transfer-list--selected-border-bottom-width);
  box-sizing: border-box;
}
.mt-transfer--checkbox {
  width: 100%;
}
.mt-transfer--checkbox .mt-checkbox-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mt-transfer-select-tip {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: var(--transfer-select-tip-left);
  bottom: var(--transfer-select-tip-bottom);
  background-color: var(--transfer-select-tip-background-color);
  width: 100%;
  height: var(--transfer-select-tip-height);
  padding-left: var(--transfer-select-tip-padding-left);
  z-index: var(--transfer-select-tip-z-index);
  box-sizing: border-box;
}
.mt-transfer-select-tip:after {
  content: "";
  height: var(--transfer-select-tip-after-height);
  background: var(--transfer-select-tip-after-background);
  position: absolute;
  left: var(--transfer-select-tip-after-left);
  right: var(--transfer-select-tip-after-right);
  top: var(--transfer-select-tip-after-top);
}
.mt-transfer-button {
  margin-top: var(--transfer-button-margin-top);
  flex: 1;
}
.mt-transfer-empty-content {
  text-align: center;
  margin-top: var(--transfer-empty-content-margin-top);
}