@alifd/meet-react/lib/select-drawer/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
.mt-selectdrawer-content-text {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  @component select-drawer
  @display SelectDrawer
  @chinese 选择抽屉
  @family utils
*/
:root {
  /*
    @desc small-padding-tb
    @namespace  size/small
    @semantic  上下内边距(小号)
  */
  --select-drawer-small-padding-tb: var(--s-1);
  /*
    @desc medium-padding-tb
    @namespace  size/medium
    @semantic  上下内边距(中号)
  */
  --select-drawer-medium-padding-tb: var(--s-2);
  /*
    @desc padding-tb
    @namespace  size/large
    @semantic  上下内边距(大号)
  */
  --select-drawer-large-padding-tb: var(--s-3);
  /*
    @desc padding-lr
    @namespace  size/normal
    @semantic  左右内边距
  */
  --select-drawer-padding-lr: var(--s-4);
  /*
    @desc color
    @namespace  style/normal
    @semantic  内容颜色
  */
  --select-drawer-normal-color: var(--color-text1-4);
  /*
    @desc  color
    @namespace  style/inverse
    @semantic  内容颜色（反色）
  */
  --select-drawer-inverse-color: var(--color-text2-4);
  /*
    @desc  disabled-color
    @namespace  style/normal
    @semantic  内容颜色（禁用)
  */
  --select-drawer-disabled-color: var(--color-text1-1);
  /*
    @desc  disabled-color
    @namespace  style/inverse
    @semantic  内容颜色(反色-禁用)
  */
  --select-drawer-inverse-disabled-color: var(--color-text2-1);
  /*
    @desc  icon-color
    @namespace  style/normal
    @semantic  箭头颜色
  */
  --select-drawer-normal-icon-color: var(--color-text1-2);
  /*
    @desc  icon-color
    @namespace  style/inverse
    @semantic  箭头颜色(反色)
  */
  --select-drawer-inverse-icon-color: var(--color-text2-2);
  /*
    @desc  icon-disabled-color
    @namespace  style/inverse
    @semantic  箭头颜色（禁用）
  */
  --select-drawer-inverse-disabled-icon-color: var(--color-text2-1);
  /*
    @desc  title-color
    @namespace  style/normal
    @semantic  标题颜色
  */
  --select-drawer-title-color: var(--color-text1-4);
  /*
    @desc  placeholder-color
    @namespace  style/normal
    @semantic  占位文本颜色
  */
  --select-drawer-normal-placeholder-color: var(--color-text1-2);
  /*
    @desc  placeholder-color
    @namespace  style/inverse
    @semantic  占位颜色(反色)
  */
  --select-drawer-inverse-placeholder-color: var(--color-text2-2);
  /*
    @desc  font-size
    @namespace  size/large
    @semantic  字体大小(大号)
  */
  --select-drawer-large-font-size: var(--p-subhead-font-size);
  /*
    @desc  font-size
    @namespace  size/medium
    @semantic  字体大小(中号)
  */
  --select-drawer-medium-font-size: var(--p-body-2-font-size);
  /*
    @desc  font-size
    @namespace  size/small
    @semantic  字体大小(小号)
  */
  --select-drawer-small-font-size: var(--p-body-1-font-size);
  /*
    @desc  icon-size
    @namespace  size/large
    @semantic  图标大小(大号)
  */
  --select-drawer-large-icon-size: var(--icon-s);
  /*
    @desc  icon-size
    @namespace  size/medium
    @semantic  图标大小(中号)
  */
  --select-drawer-medium-icon-size: var(--icon-xs);
  /*
    @desc  icon-size
    @namespace  size/small
    @semantic  图标大小(小号)
  */
  --select-drawer-small-icon-size: var(--icon-xxs);
  /*
    @desc  empty-padding-lr
    @namespace  style/empty
    @semantic  空选项时弹出框左右内边距
  */
  --select-drawer-empty-padding-lr: var(--s-5);
  /*
    @desc  padding(t,b)
    @namespace  style/empty
    @semantic  空选项时弹出框上下内边距
  */
  --select-drawer-empty-padding-tb: var(--s-10);
  /*
    @desc  content-font-color
    @namespace  style/empty
    @semantic  空选项弹出框提示文案字体颜色
  */
  --select-drawer-empty-font-color: var(--color-text1-2);
  /*
    @desc  content-font-size
    @namespace  style/empty
    @semantic  空选项弹出框提示文案字体大小
  */
  --select-drawer-empty-font-size: var(--p-body-1-font-size);
}

.mt-selectdrawer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
.mt-selectdrawer--small {
  font-size: var(--select-drawer-small-font-size);
}
.mt-selectdrawer--medium {
  font-size: var(--select-drawer-medium-font-size);
}
.mt-selectdrawer--large {
  font-size: var(--select-drawer-large-font-size);
}
.mt-selectdrawer-content {
  padding-left: var(--select-drawer-padding-lr);
  flex: 1;
  min-width: 0;
  color: var(--select-drawer-normal-color);
}
.mt-selectdrawer-content--small {
  padding-top: var(--select-drawer-small-padding-tb);
  padding-bottom: var(--select-drawer-small-padding-tb);
}
.mt-selectdrawer-content--medium {
  padding-top: var(--select-drawer-medium-padding-tb);
  padding-bottom: var(--select-drawer-medium-padding-tb);
}
.mt-selectdrawer-content--large {
  padding-top: var(--select-drawer-large-padding-tb);
  padding-bottom: var(--select-drawer-large-padding-tb);
}
.mt-selectdrawer-content--inverse {
  color: var(--select-drawer-inverse-color);
}
.mt-selectdrawer-content--right {
  justify-content: flex-end;
  text-align: right;
}
.mt-selectdrawer-content-text--disabled {
  color: var(--select-drawer-disabled-color);
}
.mt-selectdrawer-content-text--right {
  justify-content: flex-end;
  text-align: right;
}
.mt-selectdrawer-content-text--inverse {
  color: var(--select-drawer-inverse-color);
}
.mt-selectdrawer-content-text--inverse-disabled {
  color: var(--select-drawer-inverse-disabled-color);
}
.mt-selectdrawer-placeholder {
  color: var(--select-drawer-normal-placeholder-color);
}
.mt-selectdrawer-placeholder--right {
  justify-content: flex-end;
  text-align: right;
}
.mt-selectdrawer-placeholder--inverse {
  color: var(--select-drawer-inverse-placeholder-color);
}
.mt-selectdrawer-placeholder--disabled {
  color: var(--select-drawer-disabled-color);
}
.mt-selectdrawer-placeholder--inverse-disabled {
  color: var(--select-drawer-inverse-disabled-color);
}
.mt-selectdrawer--small .mt-selectdrawer-content-text, .mt-selectdrawer--small .mt-selectdrawer-placeholder {
  font-size: var(--select-drawer-small-font-size);
  line-height: 1.4;
}
.mt-selectdrawer--medium .mt-selectdrawer-content-text, .mt-selectdrawer--medium .mt-selectdrawer-placeholder {
  font-size: var(--select-drawer-medium-font-size);
  line-height: 1.4;
}
.mt-selectdrawer--large .mt-selectdrawer-content-text, .mt-selectdrawer--large .mt-selectdrawer-placeholder {
  font-size: var(--select-drawer-large-font-size);
  line-height: 1.4;
}
.mt-selectdrawer-icon {
  display: flex;
  justify-content: center;
  padding-right: var(--select-drawer-padding-lr);
  color: var(--select-drawer-normal-icon-color);
}
.mt-selectdrawer-icon--small {
  padding-top: var(--select-drawer-small-padding-tb);
  padding-bottom: var(--select-drawer-small-padding-tb);
}
.mt-selectdrawer-icon--medium {
  padding-top: var(--select-drawer-medium-padding-tb);
  padding-bottom: var(--select-drawer-medium-padding-tb);
}
.mt-selectdrawer-icon--large {
  padding-top: var(--select-drawer-large-padding-tb);
  padding-bottom: var(--select-drawer-large-padding-tb);
}
.mt-selectdrawer-icon--inverse {
  color: var(--select-drawer-inverse-icon-color);
}
.mt-selectdrawer-icon-text {
  position: relative;
  right: -31.25%;
}
.mt-selectdrawer-icon-text--small {
  font-size: var(--select-drawer-small-icon-size);
}
.mt-selectdrawer-icon-text--medium {
  font-size: var(--select-drawer-medium-icon-size);
}
.mt-selectdrawer-icon-text--large {
  font-size: var(--select-drawer-large-icon-size);
}
.mt-selectdrawer-icon-text--inverse {
  color: var(--select-drawer-inverse-icon-color);
}
.mt-selectdrawer-icon-text--disabled {
  color: var(--select-drawer-disabled-color);
}
.mt-selectdrawer-icon-text--inverse-disabled {
  color: var(--select-drawer-inverse-disabled-icon-color);
}
.mt-selectdrawer-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: var(--line-1) var(--line-solid) var(--color-line1-3);
  font-size: var(--p-body-2-font-size);
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.mt-selectdrawer-toolbar--no-border {
  border-bottom: none;
}
.mt-selectdrawer-toolbar-title {
  flex-grow: 1;
  text-align: center;
  color: var(--select-drawer-title-color);
}
.mt-selectdrawer-toolbar-btn-cancel {
  min-width: 21.333333333333332vw;
  justify-content: flex-start;
}
.mt-selectdrawer-toolbar-btn-ok {
  min-width: 21.333333333333332vw;
  justify-content: flex-end;
}
.mt-selectdrawer-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  height: 100%;
  max-height: 80vh;
}
.mt-selectdrawer-drawer-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex: 1;
  box-sizing: border-box;
  overflow-y: scroll;
}
.mt-selectdrawer-drawer--empty {
  padding-left: var(--select-drawer-empty-padding-lr);
  padding-right: var(--select-drawer-empty-padding-lr);
  padding-top: var(--select-drawer-empty-padding-tb);
  padding-bottom: var(--select-drawer-empty-padding-tb);
}
.mt-selectdrawer-drawer-empty-text {
  color: var(--select-drawer-empty-font-color);
  font-size: var(--select-drawer-empty-font-size);
  text-align: center;
}