zent/css/dialog.css

一套前端设计语言和基于React的实现

/*
  WARNING: Do NOT use transform: translate(-50%, -50%) to center dialog,
  it makes content blurry.

  With GPU rendering elements we are translating, their sizes must be
  even numbers.

  The bad news is that we cannot control the size of dialogs.

  http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d

  Here we're using inline-blocks to center the dialog.

  https://css-tricks.com/centering-in-the-unknown/
*/
.zent-dialog-r-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  outline: 0;
  text-align: center;
  font-size: 0;
  white-space: nowrap;
}
.zent-dialog-r-wrap::before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.zent-dialog-r {
  background-color: #fff;
  background-color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: initial;
  border-radius: 4px;
  padding: 16px 0;
  box-sizing: border-box;
  white-space: normal;
  min-width: 560px;
  max-width: calc(100vw - 56px);
  min-height: 190px;
  max-height: calc(100vh - 112px);
}

.zent-dialog-r-title {
  font-size: 16px;
  line-height: 24px;
  border-bottom-color: #e0e0e0;
  border-bottom-color: var(--theme-default-border-color, var(--theme-stroke-5, #e0e0e0));
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
  padding: 0 16px 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin: 0;
  box-sizing: border-box;
  font-weight: 500;
}

.zent-dialog-r-close {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
  background-color: #fff;
  background-color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 10px;
  font-size: 20px;
  line-height: 20px;
  text-align: right;
  vertical-align: middle;
  cursor: pointer;
  border: 0;
  outline: none;
  -webkit-user-select: none;
          user-select: none;
  padding: 0 0 0 6px;
  margin: 0;
}
.zent-dialog-r-close:link, .zent-dialog-r-close:active, .zent-dialog-r-close:focus {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
}
.zent-dialog-r-close.zent-dialog-r-has-title {
  top: 18px;
  right: 16px;
}

.zent-dialog-r-body {
  font-size: 14px;
  line-height: 20px;
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
  padding-top: 16px;
}
.zent-dialog-r-body.with-success-icon, .zent-dialog-r-body.with-warning-icon {
  padding-left: 30px;
}
.zent-dialog-r-body:last-child {
  padding-bottom: 0;
}
.zent-dialog-r-body-content {
  padding: 0 16px;
  overflow-y: auto;
}

/*
We need to consider only two cases if header is present, close button has no impact on style
Header  CloseButton  Footer
O       O            O
O       O            X
O       X            O
O       X            X

We need to consider four cases if header is not present, this time close button has impact on style
X       O            O
X       O            X
X       X            O
X       X            X
*/
.zent-dialog-r .zent-dialog-r-body-content {
  min-height: 142px;
  max-height: calc(100vh - 160px);
}
.zent-dialog-r.zent-dialog-r--has-footer .zent-dialog-r-body-content {
  min-height: 86px;
  max-height: calc(100vh - 216px);
}

.zent-dialog-r.zent-dialog-r--no-close-btn:not(.zent-dialog-r--has-header) .zent-dialog-r-body {
  padding-top: 0;
}
.zent-dialog-r.zent-dialog-r--no-close-btn:not(.zent-dialog-r--has-header) .zent-dialog-r-body-content {
  min-height: 158px;
  max-height: calc(100vh - 144px);
}
.zent-dialog-r.zent-dialog-r--no-close-btn:not(.zent-dialog-r--has-header).zent-dialog-r--has-footer .zent-dialog-r-body-content {
  min-height: 102px;
  max-height: calc(100vh - 200px);
}

.zent-dialog-r.zent-dialog-r--has-header .zent-dialog-r-body-content {
  min-height: 102px;
  max-height: calc(100vh - 200px);
}
.zent-dialog-r.zent-dialog-r--has-header.zent-dialog-r--has-footer .zent-dialog-r-body-content {
  min-height: 46px;
  max-height: calc( 100vh - 256px );
}

.zent-dialog-r-footer {
  text-align: right;
  padding: 24px 16px 0;
}
.zent-dialog-r-footer .zent-btn + .zent-btn {
  margin-left: 8px;
}

.zent-dialog-r-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  z-index: 1050;
}