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

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component picker
  @display Picker
  @chinese 选择框
  @family data-entry
*/
:root {
  /*
    @desc height
    @semantic 选择项高度
    @namespace size/common
  */
  --picker-height: var(--s-9);
  /*
    @desc font-size
    @semantic 字体大小
    @namespace size/common
  */
  --picker-font-size: var(--p-subhead-font-size);
  /*
    @desc select-font-size
    @semantic 选中字体大小
    @namespace size/common
  */
  --picker-select-font-size: var(--p-subhead-font-size);
  /*
    @desc selected-font-color
    @semantic 字体颜色(选中)
    @namespace style/common
  */
  --picker-select-color: var(--color-text1-4);
  /*
    @desc color
    @semantic 字体颜色(禁用)
    @namespace style/common
  */
  --picker-disabled-color: var(--color-text1-1);
  /*
    @desc color
    @semantic 字体颜色
    @namespace style/common
  */
  --picker-color: var(--color-text1-4);
  /*
    @desc divider-color
    @semantic 分割线颜色
    @namespace style/common
  */
  --picker-divider-color: var(--color-line1-2);
}

.mt-picker {
  position: relative;
  height: calc(7 * var(--picker-height));
  width: 100%;
  flex-grow: 1;
}
.mt-picker--web {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.mt-picker-item {
  flex: 1;
  text-align: center;
}
.mt-picker-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: calc(3 * var(--picker-height));
  padding-bottom: calc(3 * var(--picker-height));
  box-sizing: border-box;
}
.mt-picker-col {
  overflow: hidden;
  width: 100%;
  position: relative;
  height: calc(7 * var(--picker-height));
}
.mt-picker-col--ios10 {
  height: 67vw;
}
.mt-picker-col-item {
  touch-action: manipulation;
  text-align: center;
  font-size: var(--picker-font-size);
  height: var(--picker-height);
  line-height: var(--picker-height);
  color: var(--picker-color);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mt-picker-col-item-text {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--picker-color);
  font-size: var(--picker-font-size);
  line-height: var(--picker-height);
}
.mt-picker-col-item--disabled, .mt-picker-col-item--disabled .mt-picker-col-item-text {
  color: var(--picker-disabled-color);
}
.mt-picker-col-item--selected, .mt-picker-col-item--selected .mt-picker-col-item-text {
  font-size: var(--picker-select-font-size);
  color: var(--picker-select-color);
}
.mt-picker-mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  z-index: var(--elevation-1);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  background-position: top, bottom;
  background-repeat: no-repeat;
}
.mt-picker-indicator {
  position: absolute;
  left: 0;
  top: calc(3 * var(--picker-height));
  z-index: var(--elevation-1);
  width: 100%;
  height: var(--picker-height);
  border-top: var(--line-1) solid var(--picker-divider-color);
  border-bottom: var(--line-1) solid var(--picker-divider-color);
}
.mt-picker-text--empty {
  color: var(--color-text1-1);
  font-size: var(--p-subhead-font-size);
  text-align: center;
  align-items: center;
  width: 100%;
  margin: var(--s-8);
}