@wfrog/vc/dist/es/components/dialog/index.css

vue3 组件库 vc

/* source: src/components/dialog/dialog.vue */
:root{--el-popup-modal-bg-color:var(--el-color-black);--el-popup-modal-opacity:0.5}.v-modal-enter{animation:v-modal-in var(--el-transition-duration-fast) ease}.v-modal-leave{animation:v-modal-out var(--el-transition-duration-fast) ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{background:var(--el-popup-modal-bg-color);height:100%;left:0;opacity:var(--el-popup-modal-opacity);position:fixed;top:0;width:100%}.el-popup-parent--hidden{overflow:hidden}.el-dialog{--el-dialog-width:50%;--el-dialog-margin-top:15vh;--el-dialog-bg-color:var(--el-bg-color);--el-dialog-box-shadow:var(--el-box-shadow);--el-dialog-title-font-size:var(--el-font-size-large);--el-dialog-content-font-size:14px;--el-dialog-font-line-height:var(--el-font-line-height-primary);--el-dialog-padding-primary:16px;--el-dialog-border-radius:var(--el-border-radius-base);background:var(--el-dialog-bg-color);border-radius:var(--el-dialog-border-radius);box-shadow:var(--el-dialog-box-shadow);box-sizing:border-box;margin:var(--el-dialog-margin-top,15vh) auto 50px;overflow-wrap:break-word;padding:var(--el-dialog-padding-primary);position:relative;width:var(--el-dialog-width,50%)}.el-dialog:focus{outline:none!important}.el-dialog.is-align-center{margin:auto}.el-dialog.is-fullscreen{--el-dialog-width:100%;--el-dialog-margin-top:0;border-radius:0;height:100%;margin-bottom:0;overflow:auto}.el-dialog__wrapper{bottom:0;left:0;margin:0;overflow:auto;position:fixed;right:0;top:0}.el-dialog.is-draggable .el-dialog__header{cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.el-dialog__header{padding-bottom:var(--el-dialog-padding-primary)}.el-dialog__header.show-close{padding-right:calc(var(--el-dialog-padding-primary) + var(--el-message-close-size, 16px))}.el-dialog__headerbtn{background:transparent;border:none;cursor:pointer;font-size:var(--el-message-close-size,16px);height:48px;outline:none;padding:0;position:absolute;right:0;top:0;width:48px}.el-dialog__headerbtn .el-dialog__close{color:var(--el-color-info);font-size:inherit}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:var(--el-color-primary)}.el-dialog__title{color:var(--el-text-color-primary);font-size:var(--el-dialog-title-font-size);line-height:var(--el-dialog-font-line-height)}.el-dialog__body{color:var(--el-text-color-regular);font-size:var(--el-dialog-content-font-size)}.el-dialog__footer{box-sizing:border-box;padding-top:var(--el-dialog-padding-primary);text-align:right}.el-dialog--center{text-align:center}.el-dialog--center .el-dialog__body{text-align:initial}.el-dialog--center .el-dialog__footer{text-align:inherit}.el-modal-dialog.is-penetrable{pointer-events:none}.el-modal-dialog.is-penetrable .el-dialog{pointer-events:auto}.el-overlay-dialog{bottom:0;left:0;overflow:auto;position:fixed;right:0;top:0}.dialog-fade-enter-active{animation:modal-fade-in var(--el-transition-duration)}.dialog-fade-enter-active .el-overlay-dialog{animation:dialog-fade-in var(--el-transition-duration)}.dialog-fade-leave-active{animation:modal-fade-out var(--el-transition-duration)}.dialog-fade-leave-active .el-overlay-dialog{animation:dialog-fade-out var(--el-transition-duration)}@keyframes dialog-fade-in{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes dialog-fade-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20px,0)}}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-fade-out{0%{opacity:1}to{opacity:0}}div._main_zs7g5_1 {
  --el-dialog-padding-primary: 0;
  display: flex;
  flex-direction: column;
}
div._main_zs7g5_1 .el-dialog__header {
  padding: 12px 16px;
  margin-right: 0;
  border-bottom: 1px solid var(--el-border-color-light);
}
div._main_zs7g5_1 .el-dialog__body {
  flex-grow: 1;
  padding: 0;
}
div._main_zs7g5_1 .el-dialog__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--el-border-color-light);
}
div._main_zs7g5_1 > .el-dialog__body > .el-scrollbar {
  position: relative;
}
div._main_zs7g5_1 > .el-dialog__body > .el-scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 8px);
  height: 100%;
  background: var(--el-color-white);
  height: 16px;
  z-index: 3;
  display: var(--v5830f752);
}
div._main_zs7g5_1 > .el-dialog__body > .el-scrollbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 8px);
  height: 100%;
  background: var(--el-color-white);
  height: 16px;
  z-index: 3;
  display: var(--v5830f752);
}
div._main_zs7g5_1 ._header_zs7g5_46 h4 {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1;
}
div._main_zs7g5_1 ._header_zs7g5_46 {
  line-height: 1;
}
._header_zs7g5_46 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
._header_zs7g5_46 h4 {
  padding: 0;
  margin: 0 !important;
}
._title_zs7g5_65 {
  display: flex;
  align-items: center;
}
._scrollbar_zs7g5_70 > .el-scrollbar__wrap {
  display: flex;
  flex-direction: column;
}
._scrollbar_zs7g5_70 > .el-scrollbar__wrap > .el-scrollbar__view {
  flex-grow: 1;
  min-height: 100px;
}
._scrollbar_zs7g5_70._flex_zs7g5_78 > .el-scrollbar__wrap > .el-scrollbar__view {
  display: flex;
  flex-direction: column;
}
._body-container_zs7g5_83 {
  padding: 16px;
}
._buttons_zs7g5_87 button {
  padding: 8px;
  font-size: 1.2em;
  border: 0;
}