shineout/css/Modal/styles/modal.css

Shein 前端组件库

@-webkit-keyframes scale-in {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
  }
}
@keyframes scale-in {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
  }
}
@-webkit-keyframes scale-out {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
  }
  100% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
}
@keyframes scale-out {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
  }
  100% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
  }
}
.so-modal {
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
}
.so-modal-hide-mask {
  pointer-events: none;
  background-color: transparent;
}
.so-modal-hide-mask .so-modal-mask {
  pointer-events: none;
  background-color: transparent;
}
.so-modal-hide-mask .so-modal-panel {
  pointer-events: all;
}
.so-modal-rtl {
  direction: rtl;
}
.so-modal-panel {
  padding: var(--modal-panel-padding, 0);
  text-align: left;
  margin: 0 auto;
  -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
          transform: translateY(-100px);
}
.so-modal-rtl .so-modal-panel {
  text-align: right;
}
.so-modal-zoom {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}
.so-modal-title {
  color: var(--modal-title-color, rgba(0, 0, 0, 0.85));
  font-size: var(--modal-title-font-size, 16px);
  font-weight: 500;
  font-family: var(--modal-title-font, inherit);
  line-height: 1.5;
  padding-right: 0px;
}
.so-modal-rtl .so-modal-title {
  padding-right: 0;
  padding-left: 0px;
}
.so-modal-title.so-modal-with-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.so-modal-title .so-modal-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.so-modal-rtl .so-modal-title .so-modal-icon {
  margin-left: 8px;
  margin-right: 0;
}
.so-modal-title .so-modal-icon svg {
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.so-modal-method-title {
  padding-right: var(--modal-method-header-padding-right, 0px);
}
.so-modal-rtl .so-modal-method-title {
  padding-right: 0;
  padding-left: var(--modal-method-header-padding-right, 0px);
}
.so-modal .so-modal-body {
  padding: 40px 40px 20px 70px;
}
.so-modal-rtl .so-modal .so-modal-body {
  padding: 40px 70px 20px 40px;
}
.so-modal .so-modal-body .so-modal-title {
  margin-bottom: 8px;
}
.so-modal .so-modal-body .so-modal-icon {
  position: absolute;
  top: var(--modal-icon-top, 40px);
  left: var(--modal-icon-left, 32px);
  width: var(--modal-icon-size, 24px);
  height: var(--modal-icon-size, 24px);
}
.so-modal-rtl.so-modal .so-modal-body .so-modal-icon {
  left: auto;
  right: var(--modal-icon-left, 32px);
}
.so-modal-position {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.so-modal-position .so-modal-mask > .so-modal-panel {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  border-radius: 0;
  padding: 0;
}
.so-modal-position .so-modal-mask > .so-modal-panel > .so-modal-title {
  border-radius: 0;
  background: var(--gray-100, #f8f9fa);
  padding: 12px 16px;
  padding-right: 46px;
}
.so-modal-rtl.so-modal-position .so-modal-mask > .so-modal-panel > .so-modal-title {
  padding-right: 16px;
  padding-left: 46px;
}
.so-modal-position .so-modal-mask > .so-modal-panel > .so-card-body {
  border-radius: 0;
  padding: 16px;
}
.so-modal-rtl.so-modal-position .so-modal-mask > .so-modal-panel > .so-card-body {
  padding: 16px;
}
.so-modal-position .so-modal-mask > .so-modal-panel > .so-card-footer {
  border-radius: 0;
  padding: 16px;
}
.so-modal-position .so-modal-mask > .so-modal-panel > .so-modal-close {
  top: 0;
  right: 0;
  margin-top: 12px;
  margin-right: 12px;
}
.so-modal-rtl.so-modal-position .so-modal-mask > .so-modal-panel > .so-modal-close {
  left: 0;
  right: auto;
  margin-right: auto;
  margin-left: 12px;
}
.so-modal-end {
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.so-modal-end .so-modal-panel {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.so-modal-end .so-modal-panel.so-modal-zoom {
  -webkit-animation: scale-out 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          animation: scale-out 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.so-modal-show {
  opacity: 1;
  -webkit-transition: opacity 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: opacity 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.so-modal-show .so-modal-panel {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1), -webkit-transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
  -webkit-transform: scale(1) translate(0, 0);
      -ms-transform: scale(1) translate(0, 0);
          transform: scale(1) translate(0, 0);
}
.so-modal-start .so-modal-panel.so-modal-zoom {
  -webkit-animation: scale-in 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
          animation: scale-in 0.3s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.so-modal-right {
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  -webkit-transform: translate(100%, 0);
      -ms-transform: translate(100%, 0);
          transform: translate(100%, 0);
}
.so-modal-left {
  top: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  -webkit-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}
.so-modal-top {
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  -webkit-transform: translate(0, -100%);
      -ms-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.so-modal-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  -webkit-transform: translate(0, 100%);
      -ms-transform: translate(0, 100%);
          transform: translate(0, 100%);
}
.so-modal-top,
.so-modal-bottom {
  max-width: 100%;
}
.so-modal-success .so-modal-icon path {
  fill: var(--success-color, #00cc66);
}
.so-modal-info .so-modal-icon path {
  fill: var(--info-color, #17a2b8);
}
.so-modal-warning .so-modal-icon path,
.so-modal-confirm .so-modal-icon path {
  fill: var(--warning-color, #ff9900);
}
.so-modal-error .so-modal-icon path {
  fill: var(--danger-color, #f85555);
}
.so-modal-info .so-modal-footer.so-modal-method:after,
.so-modal-success .so-modal-footer.so-modal-method:after,
.so-modal-warning .so-modal-footer.so-modal-method:after,
.so-modal-error .so-modal-footer.so-modal-method:after,
.so-modal-normal .so-modal-footer.so-modal-method:after,
.so-modal-confirm .so-modal-footer.so-modal-method:after {
  display: none;
}
.so-modal-close {
  position: absolute;
  z-index: 100;
  top: var(--modal-close-top-margin, 18px);
  right: var(--modal-close-right-margin, 24px);
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  margin-top: var(--modal-panel-padding, 0);
  margin-right: var(--modal-panel-padding, 0);
}
.so-modal-rtl .so-modal-close {
  left: 0;
  right: auto;
  margin-right: 0;
  margin-left: var(--modal-panel-padding, 0);
}
.so-modal-close:hover > svg {
  fill: var(--modal-close-icon-hover-color, #000);
}
.so-modal-close > svg {
  fill: var(--modal-close-icon-color, #000);
}
.so-modal .so-moveable .so-modal-title {
  cursor: move;
}
.so-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}
.so-modal-mask > .so-card {
  font-size: var(--modal-font-size, inherit);
  border-radius: var(--modal-border-radius, 4px);
  border: var(--modal-border-width, 1px) solid var(--modal-border-color, #ddd);
  color: var(--modal-color, inherit);
}
.so-modal-mask > .so-card-hover:hover,
.so-modal-mask > .so-card-shadow {
  -webkit-box-shadow: var(--modal-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
          box-shadow: var(--modal-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}
.so-modal-mask > .so-card > .so-card-header {
  padding-top: var(--modal-header-padding-top, 16px);
  padding-right: var(--modal-header-padding-right, 36px);
  padding-bottom: var(--modal-header-padding-bottom, 16px);
  padding-left: var(--modal-header-padding-left, 24px);
  border-radius: var(--modal-border-radius, 4px) var(--modal-border-radius, 4px) 0 0;
  background: var(--modal-header-bg, #fff);
}
.so-modal-rtl .so-modal-mask > .so-card > .so-card-header {
  padding-right: var(--modal-header-padding-left, 24px);
  padding-left: var(--modal-header-padding-right, 36px);
}
.so-modal-mask > .so-card > .so-card-body {
  padding-top: var(--modal-body-padding-top, 16px);
  padding-right: var(--modal-body-padding-right, 24px);
  padding-bottom: var(--modal-body-padding-bottom, 16px);
  padding-left: var(--modal-body-padding-left, 24px);
}
.so-modal-rtl .so-modal-mask > .so-card > .so-card-body {
  padding-right: var(--modal-body-padding-left, 24px);
  padding-left: var(--modal-body-padding-right, 24px);
}
.so-modal-mask > .so-card .so-modal-body {
  padding-top: var(--modal-icon-body-padding-top, 40px);
  padding-right: var(--modal-icon-body-padding-right, 40px);
  padding-bottom: var(--modal-icon-body-padding-bottom, 20px);
  padding-left: var(--modal-icon-body-padding-left, 70px);
}
.so-modal-rtl .so-modal-mask > .so-card .so-modal-body {
  padding-right: var(--modal-icon-body-padding-left, 70px);
  padding-left: var(--modal-icon-body-padding-right, 40px);
}
.so-modal-mask > .so-card > .so-card-footer {
  padding: var(--modal-footer-padding, 16px 24px);
  border-radius: 0 0 var(--modal-border-radius, 4px) var(--modal-border-radius, 4px);
  background: var(--modal-footer-bg, #fff);
}
.so-modal-rtl .so-modal-mask > .so-card > .so-card-footer {
  text-align: left;
}
.so-modal-mask > .so-card > .so-card-header:after,
.so-modal-mask > .so-card > .so-card-footer:after {
  height: var(--modal-divider-height, 1px);
  width: var(--modal-divider-width, 100%);
  background: var(--modal-divider-color, #ddd);
}
.so-modal-mask > .so-card.so-modal-normal .so-modal-body {
  padding-left: var(--modal-icon-body-padding-right, 40px);
}
.so-modal-rtl .so-modal-mask > .so-card.so-modal-normal .so-modal-body {
  padding-right: var(--modal-icon-body-padding-right, 40px);
}
.so-modal-full-screen .so-modal-panel {
  border-radius: 0;
  overflow: auto;
}
.so-modal-full-screen.so-modal-position .so-modal-panel {
  width: 100vw;
  height: 100vh;
}