@kne/react-modal 0.1.1 → 0.1.4

package/dist/index.css

@@ -511,4 +511,586 @@
     border-top: 1px solid var(--bg-color-grey-3, #f0f0f0);
   }
 }
+@charset "UTF-8";
+.kne-react-modal_qwqLr {
+  position: relative;
+}
+
+.kne-react-modal_vmry7 {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-react-modal_qwqLr {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-react-modal_cDsbq .ant-drawer-body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+  height: 100%;
+}
+.kne-react-modal_cDsbq {
+  --kne-drawer-viewport-height: var(--kne-viewport-height, 100vh);
+  --kne-drawer-viewport-width: var(--kne-viewport-width, 100vw);
+  --kne-drawer-title-height: 48px;
+  /* 12 top + ~32 btn + 24 bottom + 1 border-top；须与真实 footer 一致，避免 SimpleBar calc 顶裁底部 padding */
+  --kne-drawer-footer-height: 69px;
+  --kne-drawer-viewport-gutter: 0px;
+  --kne-drawer-body-padding-vertical: 48px;
+  --kne-drawer-body-padding-horizontal: 48px;
+  --kne-drawer-body-min-height: 200px;
+  --kne-drawer-body-height: calc(var(--kne-drawer-viewport-height) - var(--kne-drawer-title-height) - var(--kne-drawer-footer-height) - var(--kne-drawer-viewport-gutter));
+  --kne-drawer-body-max-height: var(--kne-drawer-body-height);
+  --kne-drawer-content-height: calc(var(--kne-drawer-body-height) - var(--kne-drawer-body-padding-vertical));
+  --kne-drawer-content-min-height: calc(var(--kne-drawer-body-min-height) - var(--kne-drawer-body-padding-vertical));
+  --kne-drawer-content-width: calc(100% - var(--kne-drawer-body-padding-horizontal));
+}
+.kne-react-modal_cDsbq.kne-react-modal_3QgK- {
+  --kne-drawer-body-min-height: 180px;
+}
+.kne-react-modal_cDsbq.kne-react-modal_FFf73 {
+  --kne-drawer-viewport-gutter: 0px;
+  --kne-drawer-body-padding-vertical: 24px;
+  --kne-drawer-body-padding-horizontal: 24px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+.kne-react-modal_cDsbq.kne-react-modal_FFf73.kne-react-modal_8lell .kne-react-modal_xgX4D {
+  min-width: 0;
+}
+.kne-react-modal_cDsbq.kne-react-modal_8lell .kne-react-modal_xgX4D {
+  min-width: 0;
+}
+.kne-react-modal_cDsbq.ant-drawer-left .ant-drawer-content-wrapper, .kne-react-modal_cDsbq.ant-drawer-right .ant-drawer-content-wrapper {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+}
+.kne-react-modal_cDsbq.ant-drawer-left .ant-drawer-content, .kne-react-modal_cDsbq.ant-drawer-right .ant-drawer-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.kne-react-modal_3EUxr,
+.kne-react-modal_2G81L {
+  display: none;
+}
+
+.kne-react-modal_eKVMu {
+  padding: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kne-react-modal_eKVMu.kne-react-modal_FFf73 {
+  height: 100%;
+  max-height: 100%;
+}
+
+.kne-react-modal_P3Cw8 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  --kne-modal-content-height: var(--kne-drawer-content-height);
+  --kne-modal-content-min-height: var(--kne-drawer-content-min-height);
+  --kne-modal-close-align-height: var(--kne-drawer-close-align-height, 48px);
+}
+.kne-react-modal_P3Cw8 .modal-footer {
+  flex: none;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_upRot {
+  --kne-drawer-title-height: 0px;
+  --kne-drawer-close-align-height: 48px;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_j4sGu {
+  --kne-drawer-footer-height: 0px;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_pg37M {
+  --kne-drawer-body-padding-vertical: 0px;
+  --kne-drawer-body-padding-horizontal: 0px;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_FFf73 {
+  width: 100%;
+  height: var(--kne-drawer-viewport-height);
+  max-height: var(--kne-drawer-viewport-height);
+  min-height: var(--kne-drawer-viewport-height);
+  overflow: hidden;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_FFf73 .kne-react-modal_-hw5V {
+  flex: none;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_FFf73 .kne-react-modal_nJj7Y {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_FFf73 .modal-footer {
+  flex: none;
+}
+
+.kne-react-modal_-hw5V {
+  flex: none;
+  height: var(--kne-drawer-title-height);
+  display: flex;
+  align-items: center;
+  color: var(--font-color, rgba(0, 0, 0, 0.88));
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.2;
+  padding: 0 48px 0 24px;
+  margin-bottom: 0;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--bg-color-grey-3, #f0f0f0);
+}
+
+.kne-react-modal_nJj7Y {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-height: var(--kne-drawer-body-min-height);
+  max-height: var(--kne-drawer-body-max-height);
+  height: var(--kne-drawer-body-height);
+  box-sizing: border-box;
+}
+.kne-react-modal_nJj7Y.kne-react-modal_2Wh1H {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+  max-height: none;
+  --kne-drawer-content-height: 100%;
+  --kne-drawer-content-min-height: 0px;
+  --kne-modal-content-height: 100%;
+  --kne-modal-content-min-height: 0px;
+}
+.kne-react-modal_nJj7Y.kne-react-modal_2Wh1H .kne-react-modal_xgX4D {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.kne-react-modal_xgX4D {
+  padding: calc(var(--kne-drawer-body-padding-vertical) / 2) calc(var(--kne-drawer-body-padding-horizontal) / 2);
+  min-height: var(--kne-drawer-content-height);
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.kne-react-modal_xgX4D.kne-react-modal_pg37M {
+  padding: 0;
+}
+
+.kne-react-modal_P3Cw8 .modal-footer {
+  border-top: 1px solid var(--bg-color-grey-3, #f0f0f0);
+}
+
+.kne-react-modal_P3Cw8.kne-react-modal_FFf73 .modal-footer.is-mobile.is-embedded-footer .kne-react-modal_M4hy9 {
+  flex: 1 1 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_FFf73 .modal-footer.is-mobile.is-embedded-footer .kne-react-modal_M4hy9 > .ant-flex {
+  width: auto;
+  max-width: 100%;
+  justify-content: center !important;
+}
+.kne-react-modal_P3Cw8.kne-react-modal_FFf73 .modal-footer.is-mobile.is-embedded-footer .kne-react-modal_M4hy9 > .ant-flex > div:first-child:empty {
+  display: none;
+}
+
+.kne-react-modal_dVh38 {
+  position: absolute;
+  top: calc((var(--kne-drawer-close-align-height, var(--kne-drawer-title-height, 48px)) - 22px) / 2);
+  inset-inline-end: 17px;
+  z-index: 1010;
+  padding: 0;
+  color: var(--font-color-grey, rgba(0, 0, 0, 0.45));
+  flex-shrink: 0;
+}
+.kne-react-modal_dVh38.ant-btn.ant-btn-icon-only.ant-btn-text {
+  width: 22px;
+  height: 22px;
+}
+
+.kne-react-modal_Nsxi9 {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.kne-react-modal_iGDWP .ant-drawer-content-wrapper .react-form,
+.kne-react-modal_iGDWP .ant-drawer-content-wrapper .react-form--inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+}
+.kne-react-modal_iGDWP .ant-drawer-content-wrapper .info-page {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
+.kne-react-modal_A0h-2 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  height: 100%;
+}
+
+.kne-react-modal_E4tcc {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  height: 100%;
+}
+
+.kne-react-modal_vKkQW .ant-drawer-body .react-form--inner {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+.kne-react-modal_vKkQW .ant-drawer-body .react-form--inner > .ant-flex {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+.kne-react-modal_vKkQW .kne-react-modal_A0h-2,
+.kne-react-modal_vKkQW .kne-react-modal_E4tcc,
+.kne-react-modal_vKkQW .kne-react-modal_P3Cw8 {
+  width: 100%;
+  min-width: 0;
+}
+
+.kne-react-modal_vsxOs.ant-drawer-content-wrapper {
+  width: var(--kne-viewport-width, 100vw) !important;
+  max-width: 100%;
+}
+
+.kne-react-modal_HG8Vz.ant-drawer-content-wrapper {
+  height: var(--kne-viewport-height, 100vh) !important;
+  max-height: 100%;
+}
+
+.kne-react-modal_G-qXe.ant-drawer .ant-drawer-content {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.kne-react-modal_G-qXe.ant-drawer.kne-is-boundary {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+.kne-react-modal_G-qXe.ant-drawer.kne-is-viewport {
+  position: fixed !important;
+}
+
+.ant-drawer-mask.kne-is-boundary {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.ant-drawer-mask.kne-is-viewport {
+  position: fixed !important;
+  inset: 0 !important;
+}
+
+@container kne-responsive (max-width: 768px) {
+  .kne-react-modal_cDsbq {
+    /* 移动端 footer: 12 + ~32 + 16 + 1 border */
+    --kne-drawer-footer-height: 61px;
+  }
+  .kne-react-modal_xgX4D:not(.kne-react-modal_pg37M) {
+    --kne-drawer-body-padding-vertical: 24px;
+    --kne-drawer-body-padding-horizontal: 24px;
+  }
+  .kne-react-modal_-hw5V {
+    padding: 0 40px 0 16px;
+  }
+  .kne-react-modal_P3Cw8 .modal-footer.is-mobile {
+    padding: 12px 16px 16px;
+  }
+}
+.kne-react-modal_6tGX5 {
+  position: relative;
+}
+
+.kne-react-modal_DOfki {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-react-modal_6tGX5 {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-react-modal_NZArM .ant-modal-confirm .ant-modal-confirm-body .ant-modal-confirm-title + .ant-modal-confirm-content {
+  max-width: 100% !important;
+}
+.kne-react-modal_NZArM .ant-modal-confirm-body-wrapper {
+  min-height: 96px;
+  display: flex;
+  flex-direction: column;
+}
+.kne-react-modal_NZArM .ant-modal-content {
+  border-radius: 8px;
+  max-width: 400px;
+  box-sizing: border-box;
+}
+.kne-react-modal_NZArM .ant-modal-confirm-btns {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  flex: 1;
+  gap: 8px;
+}
+.kne-react-modal_NZArM.kne-react-modal_PJp65 {
+  --kne-confirm-modal-mobile-max-width: 400px;
+}
+.kne-react-modal_NZArM.kne-react-modal_PJp65 .ant-modal-content {
+  width: min(var(--kne-confirm-modal-mobile-max-width), var(--kne-viewport-width, 100vw) - 32px);
+  max-width: min(var(--kne-confirm-modal-mobile-max-width), var(--kne-viewport-width, 100vw) - 32px);
+}
+.kne-react-modal_NZArM.kne-react-modal_PJp65 .ant-modal-confirm-body {
+  padding: 20px 20px 12px;
+}
+.kne-react-modal_NZArM.kne-react-modal_PJp65 .ant-modal-confirm-title {
+  margin-bottom: 16px;
+}
+.kne-react-modal_NZArM.kne-react-modal_PJp65 .ant-modal-confirm-btns {
+  flex-direction: row;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  margin-top: 16px;
+  gap: 12px;
+}
+.kne-react-modal_NZArM.kne-react-modal_PJp65 .ant-modal-confirm-btns .ant-btn {
+  flex: 1;
+  width: auto;
+  margin-inline-start: 0 !important;
+  height: 40px;
+}
+.kne-react-modal_NZArM.kne-react-modal_LUqb9 {
+  --color-warning: #d14343;
+}
+.kne-react-modal_NZArM.kne-react-modal_LUqb9 .ant-popover-buttons .ant-btn-primary,
+.kne-react-modal_NZArM.kne-react-modal_LUqb9 .ant-modal-confirm-btns .ant-btn-primary {
+  background: var(--color-warning);
+  border-color: var(--color-warning);
+}
+.kne-react-modal_NZArM.kne-react-modal_LUqb9 .kne-react-modal_WAuWk {
+  color: var(--color-warning);
+}
+
+.kne-react-modal_oEIMf,
+.kne-react-modal_VFlnj {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.kne-react-modal_UDO1- {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 0;
+  line-height: 1;
+}
+
+.kne-react-modal_WAuWk {
+  font-size: 16px;
+}
+.kne-react-modal_w4spp {
+  color: #1677ff;
+}
+.kne-react-modal_9DX59 {
+  color: #1677ff;
+}
+.kne-react-modal_pFvwL {
+  color: #52c41a;
+}
+.kne-react-modal_Wv7-o {
+  color: #faad14;
+}
+.kne-react-modal_0cNi0 {
+  color: #ff4d4f;
+}
+
+.kne-react-modal_vDt06 {
+  flex: 1;
+  min-width: 0;
+  color: #222222;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.kne-react-modal_i15SX {
+  flex: 1;
+  min-width: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.kne-react-modal_VFlnj.kne-react-modal_reDXC.kne-react-modal_Mpjjc .kne-react-modal_i15SX {
+  padding-left: 26px;
+}
+
+.kne-react-modal_C7-hV.kne-react-modal_VFlnj.kne-react-modal_reDXC.kne-react-modal_Mpjjc .kne-react-modal_i15SX {
+  padding-left: 32px;
+}
+
+.kne-react-modal_C7-hV.kne-react-modal_oEIMf {
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 4px;
+  gap: 8px;
+}
+.kne-react-modal_C7-hV.kne-react-modal_VFlnj {
+  gap: 8px;
+}
+.kne-react-modal_C7-hV.kne-react-modal_VFlnj.kne-react-modal_reDXC .kne-react-modal_i15SX {
+  text-align: center;
+}
+.kne-react-modal_C7-hV.kne-react-modal_VFlnj.kne-react-modal_reDXC.kne-react-modal_Mpjjc .kne-react-modal_i15SX {
+  padding-left: 0;
+}
+.kne-react-modal_C7-hV .kne-react-modal_vDt06 {
+  flex: 0 1 auto;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+}
+.kne-react-modal_C7-hV .kne-react-modal_UDO1- {
+  width: 24px;
+  height: 24px;
+  margin-top: 0;
+}
+.kne-react-modal_C7-hV .kne-react-modal_WAuWk {
+  font-size: 24px;
+}
+.kne-react-modal_C7-hV .kne-react-modal_i15SX {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+@container kne-responsive (max-width: 768px) {
+  .kne-react-modal_oEIMf,
+  .kne-react-modal_VFlnj {
+    gap: 8px;
+  }
+  .kne-react-modal_NZArM {
+    --kne-confirm-modal-mobile-max-width: 400px;
+  }
+  .kne-react-modal_NZArM .ant-modal-content {
+    width: min(var(--kne-confirm-modal-mobile-max-width), var(--kne-viewport-width, 100vw) - 32px);
+    max-width: min(var(--kne-confirm-modal-mobile-max-width), var(--kne-viewport-width, 100vw) - 32px);
+  }
+  .kne-react-modal_NZArM .ant-modal-confirm-body {
+    padding: 20px 20px 12px;
+  }
+  .kne-react-modal_NZArM .ant-modal-confirm-title {
+    margin-bottom: 16px;
+  }
+  .kne-react-modal_NZArM .ant-modal-confirm-btns {
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    margin-top: 16px;
+    gap: 12px;
+  }
+  .kne-react-modal_NZArM .ant-modal-confirm-btns .ant-btn {
+    flex: 1;
+    width: auto;
+    margin-inline-start: 0 !important;
+    height: 40px;
+  }
+  .kne-react-modal_oEIMf {
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+  .kne-react-modal_VFlnj.kne-react-modal_reDXC .kne-react-modal_i15SX {
+    text-align: center;
+  }
+  .kne-react-modal_VFlnj.kne-react-modal_reDXC.kne-react-modal_Mpjjc .kne-react-modal_i15SX {
+    padding-left: 0;
+  }
+  .kne-react-modal_vDt06 {
+    flex: 0 1 auto;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+  }
+  .kne-react-modal_UDO1- {
+    width: 24px;
+    height: 24px;
+    margin-top: 0;
+  }
+  .kne-react-modal_WAuWk {
+    font-size: 24px;
+  }
+}
 /*# sourceMappingURL=index.css.map */