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

Fusion Mobile React UI System Component

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

/*
  @component drawer
  @display Drawer
  @chinese 抽屉
  @family feedback
*/
:root {
  /*
    @desc  bg-color
    @semantic 内容背景色
    @namespace style/common
   */
  --drawer-content-bg-color: var(--color-white);
  /*
    @desc elevation
    @semantic 海拔
    @namespace style/common
    @unconfigurable
  */
  --drawer-elevation: var(--elevation-3);
  /**
    @desc  shadow
    @semantic 阴影
    @namespace style/common
   */
  --drawer-content-shadow: var(--shadow-zero);
  /*
    @desc  corner
    @semantic 圆角
    @namespace size/bounding
   */
  --drawer-content-corner: var(--corner-zero);
  /*
    @desc title-padding-lr
    @semantic 标题左右内边距
    @namespace size/title
   */
  --drawer-title-padding-lr: var(--s-4);
  /*
    @desc title-padding-tb
    @semantic 标题上下内边距
    @namespace size/title
   */
  --drawer-title-padding-tb: var(--s-2);
  /*
    @desc title-height
    @semantic 标题高度
    @namespace size/title
   */
  --drawer-title-height: var(--s-11);
  /**
    @desc title-border-width
    @semantic 边框宽度
    @namespace size/title
   */
  --drawer-title-border-width: var(--box-medium-border-width);
  /*
    @desc title-border-color
    @semantic 分割线颜色
    @namespace style/title
   */
  --drawer-title-border-color: var(--box-normal-outline-border-color);
  /*
    @desc title-font-color
    @semantic 标题颜色
    @namespace style/title
   */
  --drawer-title-font-color: var(--color-black);
  /*
    @desc title-font-size
    @semantic 标题字体大小
    @namespace size/title
   */
  --drawer-title-font-size: var(--p-subhead-font-size);
  /*
    @desc icon-size
    @semantic 关闭图标大小
    @namespace size/title
   */
  --drawer-close-icon-size: var(--s-5);
  /*
    @desc icon-color
    @semantic 关闭图标颜色
    @namespace style/common
   */
  --drawer-close-icon-color: var(--color-text1-2);
}

.mt-drawer {
  box-sizing: border-box;
  background-color: var(--drawer-content-bg-color);
  overflow: hidden;
  box-shadow: var(--drawer-content-shadow);
  position: relative;
}
.mt-drawer-modal {
  --modal-elevation: var(--drawer-elevation);
}
.mt-drawer-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  overflow: auto;
}
.mt-drawer-close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  height: var(--drawer-title-height);
  padding: var(--drawer-title-padding-tb) var(--s-2);
  color: var(--drawer-close-icon-color);
  box-sizing: border-box;
}
.mt-drawer-close-icon {
  font-size: var(--drawer-close-icon-size);
}
.mt-drawer-title {
  padding: var(--drawer-title-padding-tb) var(--drawer-title-padding-lr);
  border-bottom-width: var(--drawer-title-border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--drawer-title-border-color);
  color: var(--drawer-title-font-color);
  font-size: var(--drawer-title-font-size);
  line-height: calc(var(--drawer-title-height) - var(--drawer-title-padding-tb) * 2);
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--drawer-title-height);
  flex-grow: 0;
}
.mt-drawer-title--center {
  text-align: center;
}
.mt-drawer-title--with-icon {
  padding-right: calc(var(--drawer-title-font-size) * 1.2 + var(--s-2) * 2);
}
.mt-drawer--left {
  border-top-right-radius: var(--drawer-content-corner);
  border-bottom-right-radius: var(--drawer-content-corner);
  max-width: 100%;
}
.mt-drawer--right {
  border-top-left-radius: var(--drawer-content-corner);
  border-bottom-left-radius: var(--drawer-content-corner);
  max-width: 100%;
}
.mt-drawer--top {
  border-bottom-left-radius: var(--drawer-content-corner);
  border-bottom-right-radius: var(--drawer-content-corner);
  max-height: 100%;
}
.mt-drawer--bottom {
  border-top-left-radius: var(--drawer-content-corner);
  border-top-right-radius: var(--drawer-content-corner);
  max-height: 100%;
}