@alifd/meet-react/lib/action-sheet/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component action-sheet
  @display ActionSheet
  @chinese 动作面板
  @family feedback
*/
:root {
  /**
    @desc padding(l,r)
    @semantic 左右内边距
    @namespace size/bounding
   */
  --action-sheet-padding-lr: var(--s-2);
  /**
    @desc padding(t,b)
    @semantic 上下内边距
    @namespace size/bounding
   */
  --action-sheet-padding-tb: var(--s-4);
  /*
    @desc bg-color
    @semantic 背景色
    @namespace style/common
   */
  --action-sheet-bg-color: var(--color-fill1-1);
  /*
    @desc msg-font-color
    @semantic 标题字体色
    @namespace style/title
   */
  --action-sheet-msg-font-color: var(--color-text1-3);
  /*
    @desc msg-font-size
    @semantic 标题字体大小
    @namespace size/title
   */
  --action-sheet-msg-font-size: var(--p-body-1-font-size);
  /**
    @desc msg-padding
    @semantic 标题内边距
    @namespace size/title
   */
  --action-sheet-msg-padding: var(--s-4);
  /*
    @desc bg-color
    @semantic 选择项背景色
    @namespace style/common
   */
  --action-sheet-option-bg-color: var(--color-white);
  /*
    @desc divider-color
    @semantic 分割线色
    @namespace style/content
   */
  --action-sheet-option-border-color: var(--color-line1-3);
  /*
    @desc item-font-color
    @semantic 字体色
    @namespace style/content
   */
  --action-sheet-option-font-color: var(--box-normal-solid-font-color);
  /*
    @desc active-item-font-color
    @semantic 字体色（激活）
    @namespace style/content
   */
  --action-sheet-option-font-color-hover: var(--box-normal-solid-font-color-hover);
  /*
    @desc disabled-item-font-color
    @semantic 字体色（禁用）
    @namespace style/content
   */
  --action-sheet-option-font-color-disabled: var(--box-normal-solid-font-color-disabled);
  /*
    @desc item-font-size
    @semantic 字体大小
    @namespace size/content
   */
  --action-sheet-option-font-size: var(--p-body-2-font-size);
  /*
    @desc cancel-gap-size
    @semantic 取消按钮间隙
    @namespace size/content
   */
  --action-sheet-gap-height: var(--s-2);
  /*
    @desc corner
    @semantic 圆角
    @namespace size/bounding
   */
  --action-sheet-corner: var(--corner-zero);
  /*
    @desc icon-color
    @semantic 图标圆角
    @namespace size/content
   */
  --action-sheet-icon-corner: var(--corner-1);
}

.mt-actionsheet {
  margin-left: var(--action-sheet-padding-lr);
  margin-right: var(--action-sheet-padding-lr);
  background-color: var(--color-transparent);
  border-top-left-radius: var(--action-sheet-corner);
  border-top-right-radius: var(--action-sheet-corner);
  overflow: hidden;
}
.mt-actionsheet-drawer {
  background-color: var(--color-transparent);
}
.mt-actionsheet-msg {
  padding: var(--action-sheet-msg-padding);
  color: var(--action-sheet-msg-font-color);
  font-size: var(--action-sheet-msg-font-size);
  background-color: var(--action-sheet-option-bg-color);
  text-align: center;
  line-height: 1.5;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: break-spaces;
}
.mt-actionsheet-option-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border-top: var(--line-1) solid var(--action-sheet-option-border-color);
  border-bottom-left-radius: var(--action-sheet-corner);
  border-bottom-right-radius: var(--action-sheet-corner);
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--action-sheet-bg-color);
  -webkit-overflow-scrolling: touch;
}
.mt-actionsheet-option {
  position: relative;
  border-bottom: var(--line-1) solid var(--action-sheet-option-border-color);
  padding: 0 var(--action-sheet-padding-lr);
  background-color: var(--action-sheet-option-bg-color);
  color: var(--action-sheet-option-font-color);
  box-sizing: border-box;
}
.mt-actionsheet-option-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.mt-actionsheet-option--advanced {
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: center;
  padding-left: var(--s-14);
  padding-right: 0;
  border-bottom: none;
  box-sizing: border-box;
}
.mt-actionsheet-option--advanced .mt-actionsheet-option-content {
  justify-content: flex-start;
  border-bottom: var(--line-1) solid var(--action-sheet-option-border-color);
}
.mt-actionsheet-option:active {
  color: var(--action-sheet-option-font-color-hover);
  -webkit-tap-highlight-color: transparent;
}
.mt-actionsheet-option--destructive {
  color: var(--box-warning-text-font-color);
}
.mt-actionsheet-option--destructive:active {
  color: var(--box-warning-text-font-color-hover);
}
.mt-actionsheet-option--disabled {
  color: var(--action-sheet-option-font-color-disabled);
}
.mt-actionsheet-option--disabled:active {
  color: var(--action-sheet-option-font-color-disabled);
}
.mt-actionsheet-option--advanced .mt-actionsheet-option--left, .mt-actionsheet-option--left {
  text-align: left;
  justify-content: flex-start;
}
.mt-actionsheet-option--advanced .mt-actionsheet-option--center, .mt-actionsheet-option--center {
  text-align: center;
  justify-content: center;
}
.mt-actionsheet-option--advanced .mt-actionsheet-option--right, .mt-actionsheet-option--right {
  text-align: right;
  justify-content: flex-end;
}
.mt-actionsheet-option--disabled .mt-actionsheet-icon {
  opacity: 0.2;
}
.mt-actionsheet-cancel {
  margin-top: var(--action-sheet-gap-height);
  border: none;
  border-radius: var(--action-sheet-corner);
  background-color: var(--action-sheet-option-bg-color);
  overflow: hidden;
  text-align: center;
}
.mt-actionsheet-option--last .mt-actionsheet-option-content, .mt-actionsheet-option--last {
  border-bottom: none;
}
.mt-actionsheet-option-text {
  margin-top: var(--action-sheet-padding-tb);
  margin-bottom: var(--action-sheet-padding-tb);
  font-size: var(--action-sheet-option-font-size);
  text-transform: capitalize;
}
.mt-actionsheet-badge {
  margin-left: var(--box-small-spacing);
}
.mt-actionsheet-icon {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  width: var(--s-6);
  height: var(--s-6);
  border-radius: var(--action-sheet-icon-corner);
}
.mt-actionsheet--fullwidth {
  margin: 0;
  background-color: var(--action-sheet-bg-color);
}
.mt-actionsheet--fullwidth .mt-actionsheet-option-list, .mt-actionsheet--fullwidth .mt-actionsheet-cancel {
  border-radius: 0;
}
.mt-actionsheet-safe-area {
  min-height: var(--action-sheet-padding-tb);
}
.mt-actionsheet-safe-area--fullwidth {
  min-height: 0;
  background-color: var(--action-sheet-option-bg-color);
}