rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/Modal/styles/index.css

@@ -1,225 +1,395 @@
-/**
-  * Map mixin
-  * @param {string} @size-name - The size name
-  * @param {string} @suffix - The suffix
-  */
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
-:root {
-  --rs-font-size-lg: 1.125rem;
-  --rs-text-line-height-lg: calc(1.75 / 1.125);
-  --rs-spacing: 0.25rem;
-  --rs-radius-none: 0;
-  --rs-radius-md: 0.375rem;
-  --rs-shadow-color: rgba(0, 0, 0, 0.1);
-  --rs-shadow-lg: 0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
-}
-:root,
-.rs-theme-light {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #f2f2f5;
-  --rs-gray-700: #575757;
-  --rs-gray-800: #343434;
-  --rs-gray-900: #121212;
-  --rs-text-heading: var(--rs-gray-900);
-  --rs-bg-overlay: var(--rs-gray-0);
-  --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 30%);
-}
-@supports not (color: rgb(from white r g b)) {
-  :root,
-  .rs-theme-light {
-    --rs-bg-backdrop: rgba(18, 18, 18, 0.3);
-  }
-}
-.rs-theme-dark {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #cbced4;
-  --rs-gray-700: #292d33;
-  --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
-  --rs-text-heading: var(--rs-gray-0);
-  --rs-bg-overlay: var(--rs-gray-700);
-  --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
-}
-@supports not (color: rgb(from white r g b)) {
-  .rs-theme-dark {
-    --rs-bg-backdrop: rgba(15, 19, 26, 0.8);
-  }
-}
-.rs-theme-high-contrast {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #cbced4;
-  --rs-gray-700: #292d33;
-  --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
-  --rs-text-heading: var(--rs-gray-0);
-  --rs-bg-overlay: var(--rs-gray-800);
-  --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
-  --rs-modal-border: 1px solid var(--rs-gray-100);
-}
-@supports not (color: rgb(from white r g b)) {
-  .rs-theme-high-contrast {
-    --rs-bg-backdrop: rgba(15, 19, 26, 0.8);
-  }
-}
-.rs-modal {
-  --rs-modal-shadow: var(--rs-shadow-lg);
-  --rs-modal-margin-top: 4rem;
-  --rs-modal-title-font-size: var(--rs-font-size-lg);
-  --rs-modal-title-line-height: var(--rs-text-line-height-lg);
-  --rs-modal-body-padding: calc(var(--rs-spacing) * 5);
-  --rs-modal-content-padding: calc(var(--rs-spacing) * 5);
-  --rs-modal-btn-close-spacing: calc(var(--rs-spacing) * 5);
-  --rs-modal-footer-gap: calc(var(--rs-spacing) * 2.5);
-  --rs-modal-size-xs: 400px;
-  --rs-modal-size-sm: 600px;
-  --rs-modal-size-md: 800px;
-  --rs-modal-size-lg: 968px;
-  --rs-modal-max-width: 100%;
-  --rs-modal-padding-inline: calc(var(--rs-spacing) * 5);
-  display: none;
-  overflow: visible;
-  outline: 0;
-  margin: var(--rs-modal-margin-top) auto 0 auto;
-  position: relative;
-  width: var(--rs-modal-size, auto);
-  max-width: var(--rs-modal-max-width);
-  padding-inline: var(--rs-modal-padding-inline);
-  z-index: 1050;
-}
-.rs-modal.rs-modal-lg {
-  --rs-modal-size: var(--rs-modal-size-lg);
-}
-.rs-modal.rs-modal-md {
-  --rs-modal-size: var(--rs-modal-size-md);
-}
-.rs-modal.rs-modal-sm {
-  --rs-modal-size: var(--rs-modal-size-sm);
-}
-.rs-modal.rs-modal-xs {
-  --rs-modal-size: var(--rs-modal-size-xs);
-}
-.rs-modal.rs-modal-full {
-  --rs-modal-padding-inline: 0;
-  margin: 0;
-  height: 100%;
-}
-.rs-modal.rs-modal-full .rs-modal-dialog {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  border-radius: var(--rs-radius-none);
-  display: flex;
-  flex-direction: column;
-}
-.rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-header {
-  flex: 0 0 auto;
-}
-.rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-body {
-  flex: 1 1 auto;
-  overflow: auto;
-}
-.rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-footer {
-  flex: 0 0 auto;
-}
-.rs-modal .rs-modal-dialog {
-  position: relative;
-  background-color: var(--rs-bg-overlay);
-  border: var(--rs-modal-border, none);
-  border-radius: var(--rs-radius-md);
-  outline: 0;
-  box-shadow: var(--rs-modal-shadow);
-  padding: var(--rs-modal-content-padding);
-  overflow: auto;
-}
-.rs-modal .rs-modal-header {
-  padding-inline-end: 20px;
-}
-.rs-modal .rs-modal-header::before,
-.rs-modal .rs-modal-header::after {
-  content: ' ';
-  display: table;
-}
-.rs-modal .rs-modal-header::after {
-  clear: both;
-}
-.rs-modal .rs-modal-header .rs-modal-header-close {
-  position: absolute;
-  padding: 0;
-  top: var(--rs-modal-btn-close-spacing);
-  inset-inline-end: var(--rs-modal-btn-close-spacing);
-}
-.rs-modal .rs-modal-title {
-  font-weight: normal;
-  font-size: var(--rs-modal-title-font-size);
-  line-height: var(--rs-modal-title-line-height);
-  display: block;
-  color: var(--rs-text-heading);
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-}
-.rs-modal .rs-modal-body {
-  position: relative;
-  margin-top: var(--rs-modal-body-padding);
-  padding-bottom: var(--rs-modal-body-padding);
-}
-.rs-modal .rs-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--rs-modal-footer-gap);
-}
-.rs-modal-backdrop {
-  position: fixed;
-  top: 0;
-  inset-inline-start: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1049;
-  background-color: var(--rs-bg-backdrop);
-}
-.rs-modal-backdrop.rs-anim-fade {
-  opacity: 0;
-  transition: opacity 0.3s ease-in;
-}
-.rs-modal-backdrop.rs-anim-in {
-  opacity: 1;
-}
-.rs-modal-open {
-  overflow: hidden;
-}
-.rs-modal-wrapper {
-  position: fixed;
-  overflow: auto;
-  z-index: 1050;
-  top: 0;
-  inset-inline-start: 0;
-  width: 100%;
-  height: 100%;
-}
-.rs-modal-wrapper.rs-modal-centered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.rs-modal-wrapper.rs-modal-centered .rs-modal {
-  margin: auto;
-}
-.rs-modal-shake .rs-modal-dialog {
-  animation: 0.3s linear shakeHead;
-}
-.rs-modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
+*[class*=rs-],*[class*=rs-]::before, *[class*=rs-]::after{
+  box-sizing:border-box;
+}
+
+html{
+  -webkit-tap-highlight-color:transparent;
+  font-size:16px;
+}
+
+body{
+  font-family:var(--rs-font-family-base);
+  font-size:var(--rs-font-size-sm);
+  line-height:var(--rs-line-height-md);
+  color:var(--rs-text-primary);
+  background-color:var(--rs-body);
+}
+:root{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#f7f7fa;
+  --rs-gray-100:#f2f2f5;
+  --rs-gray-700:#575757;
+  --rs-gray-800:#343434;
+  --rs-gray-900:#121212;
+  --rs-body:var(--rs-gray-0);
+  --rs-text-primary:var(--rs-gray-800);
+  --rs-text-heading:var(--rs-gray-900);
+  --rs-bg-overlay:var(--rs-gray-0);
+  --rs-bg-backdrop:rgb(from var(--rs-gray-900) r g b / 30%);
+}
+@supports not (color: rgb(from white r g b)){
+  :root{
+    --rs-bg-backdrop:rgba(18, 18, 18, 0.3);
+  }
+}
+
+[data-theme=dark],
+.rs-theme-dark{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#e9ebf0;
+  --rs-gray-100:#cbced4;
+  --rs-gray-700:#292d33;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-text-heading:var(--rs-gray-0);
+  --rs-bg-overlay:var(--rs-gray-700);
+  --rs-bg-backdrop:rgb(from var(--rs-gray-900) r g b / 80%);
+}
+@supports not (color: rgb(from white r g b)){
+  [data-theme=dark],
+  .rs-theme-dark{
+    --rs-bg-backdrop:rgba(15, 19, 26, 0.8);
+  }
+}
+
+[data-theme=high-contrast],
+.rs-theme-high-contrast{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#e9ebf0;
+  --rs-gray-100:#cbced4;
+  --rs-gray-700:#292d33;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-text-heading:var(--rs-gray-0);
+  --rs-bg-overlay:var(--rs-gray-800);
+  --rs-bg-backdrop:rgb(from var(--rs-gray-900) r g b / 80%);
+  --rs-modal-border:1px solid var(--rs-gray-100);
+}
+@supports not (color: rgb(from white r g b)){
+  [data-theme=high-contrast],
+  .rs-theme-high-contrast{
+    --rs-bg-backdrop:rgba(15, 19, 26, 0.8);
+  }
+}
+
+:root{
+  --rs-font-family-base:-apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif;
+  --rs-font-size-sm:0.875rem;
+  --rs-font-size-lg:1.125rem;
+  --rs-line-height-base:20px;
+  --rs-line-height-md:calc(20 / 14);
+  --rs-text-line-height-lg:calc(1.75 / 1.125);
+  --rs-spacing:0.25rem;
+  --rs-radius-none:0;
+  --rs-radius-md:0.375rem;
+  --rs-shadow-color:rgb(0 0 0 / 10%);
+  --rs-shadow-lg:0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
+  --rs-zindex-modal:1050;
+}
+[data-rs=box][style*="--rs-box-p"]{
+  padding:var(--rs-box-p);
+}
+[data-rs=box][style*="--rs-box-pt"]{
+  padding-top:var(--rs-box-pt);
+}
+[data-rs=box][style*="--rs-box-pb"]{
+  padding-bottom:var(--rs-box-pb);
+}
+[data-rs=box][style*="--rs-box-pl"]{
+  padding-left:var(--rs-box-pl);
+}
+[data-rs=box][style*="--rs-box-pr"]{
+  padding-right:var(--rs-box-pr);
+}
+[data-rs=box][style*="--rs-box-px"]{
+  padding-inline:var(--rs-box-px);
+}
+[data-rs=box][style*="--rs-box-py"]{
+  padding-block:var(--rs-box-py);
+}
+[data-rs=box][style*="--rs-box-m"]{
+  margin:var(--rs-box-m);
+}
+[data-rs=box][style*="--rs-box-mt"]{
+  margin-top:var(--rs-box-mt);
+}
+[data-rs=box][style*="--rs-box-mb"]{
+  margin-bottom:var(--rs-box-mb);
+}
+[data-rs=box][style*="--rs-box-ml"]{
+  margin-left:var(--rs-box-ml);
+}
+[data-rs=box][style*="--rs-box-mr"]{
+  margin-right:var(--rs-box-mr);
+}
+[data-rs=box][style*="--rs-box-mx"]{
+  margin-inline:var(--rs-box-mx);
+}
+[data-rs=box][style*="--rs-box-my"]{
+  margin-block:var(--rs-box-my);
+}
+[data-rs=box][style*="--rs-box-w"]{
+  width:var(--rs-box-w);
+}
+[data-rs=box][style*="--rs-box-h"]{
+  height:var(--rs-box-h);
+}
+[data-rs=box][style*="--rs-box-maxw"]{
+  max-width:var(--rs-box-maxw);
+}
+[data-rs=box][style*="--rs-box-maxh"]{
+  max-height:var(--rs-box-maxh);
+}
+[data-rs=box][style*="--rs-box-minw"]{
+  min-width:var(--rs-box-minw);
+}
+[data-rs=box][style*="--rs-box-minh"]{
+  min-height:var(--rs-box-minh);
+}
+[data-rs=box][style*="--rs-box-c"]{
+  color:var(--rs-box-c);
+}
+[data-rs=box][style*="--rs-box-bd"]{
+  border:var(--rs-box-bd);
+}
+[data-rs=box][style*="--rs-box-rounded"]{
+  border-radius:var(--rs-box-rounded);
+}
+[data-rs=box][style*="--rs-box-shadow"]{
+  box-shadow:var(--rs-box-shadow);
+}
+[data-rs=box][style*="--rs-box-bg"]{
+  background:var(--rs-box-bg);
+}
+[data-rs=box][style*="--rs-box-display"]{
+  display:var(--rs-box-display);
+}
+
+@media (max-width: calc(576px - 1px)){
+  [data-visible-from=xs]{
+    display:none !important;
+  }
+}
+@media (min-width: 576px){
+  [data-hidden-from=xs]{
+    display:none !important;
+  }
+}
+@media (max-width: calc(768px - 1px)){
+  [data-visible-from=sm]{
+    display:none !important;
+  }
+}
+@media (min-width: 768px){
+  [data-hidden-from=sm]{
+    display:none !important;
+  }
+}
+@media (max-width: calc(992px - 1px)){
+  [data-visible-from=md]{
+    display:none !important;
+  }
+}
+@media (min-width: 992px){
+  [data-hidden-from=md]{
+    display:none !important;
+  }
+}
+@media (max-width: calc(1200px - 1px)){
+  [data-visible-from=lg]{
+    display:none !important;
+  }
+}
+@media (min-width: 1200px){
+  [data-hidden-from=lg]{
+    display:none !important;
+  }
+}
+@media (max-width: calc(1400px - 1px)){
+  [data-visible-from=xl]{
+    display:none !important;
+  }
+}
+@media (min-width: 1400px){
+  [data-hidden-from=xl]{
+    display:none !important;
+  }
+}
+@keyframes shakeHead{
+  0%, 100%{
+    transform:translate3d(0, 0, 0);
+  }
+  25%, 75%{
+    transform:translate3d(-10px, 0, 0);
+  }
+  50%{
+    transform:translate3d(10px, 0, 0);
+  }
 }
+:root{
+  --rs-modal-shadow:var(--rs-shadow-lg);
+  --rs-modal-margin-top:4rem;
+  --rs-modal-title-font-size:var(--rs-font-size-lg);
+  --rs-modal-title-line-height:var(--rs-text-line-height-lg);
+  --rs-modal-body-padding:calc(var(--rs-spacing) * 5);
+  --rs-modal-content-padding:calc(var(--rs-spacing) * 5);
+  --rs-modal-btn-close-spacing:calc(var(--rs-spacing) * 5);
+  --rs-modal-footer-gap:calc(var(--rs-spacing) * 2.5);
+  --rs-modal-size-xs:400px;
+  --rs-modal-size-sm:600px;
+  --rs-modal-size-md:800px;
+  --rs-modal-size-lg:968px;
+  --rs-modal-max-width:100%;
+  --rs-modal-padding-inline:calc(var(--rs-spacing) * 5);
+}
+
+.rs-modal{
+  display:none;
+  overflow:visible;
+  outline:0;
+  margin:var(--rs-modal-margin-top) auto 0 auto;
+  position:relative;
+  width:var(--rs-modal-size, auto);
+  max-width:var(--rs-modal-max-width);
+  padding-inline:var(--rs-modal-padding-inline);
+  z-index:var(--rs-zindex-modal);
+}
+.rs-modal.rs-modal-lg{
+  --rs-modal-size:var(--rs-modal-size-lg);
+}
+.rs-modal.rs-modal-md{
+  --rs-modal-size:var(--rs-modal-size-md);
+}
+.rs-modal.rs-modal-sm{
+  --rs-modal-size:var(--rs-modal-size-sm);
+}
+.rs-modal.rs-modal-xs{
+  --rs-modal-size:var(--rs-modal-size-xs);
+}
+.rs-modal.rs-modal-full{
+  --rs-modal-padding-inline:0;
+  margin:0;
+  height:100%;
+}
+.rs-modal.rs-modal-full .rs-modal-dialog{
+  position:absolute;
+  height:100%;
+  width:100%;
+  border-radius:var(--rs-radius-none);
+  display:flex;
+  flex-direction:column;
+}
+.rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-header{
+  flex:0 0 auto;
+}
+.rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-body{
+  flex:1 1 auto;
+  overflow:auto;
+}
+.rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-footer{
+  flex:0 0 auto;
+}
+.rs-modal .rs-modal-dialog{
+  position:relative;
+  background-color:var(--rs-bg-overlay);
+  border:var(--rs-modal-border, none);
+  border-radius:var(--rs-radius-md);
+  outline:0;
+  box-shadow:var(--rs-modal-shadow);
+  padding:var(--rs-modal-content-padding);
+  overflow:auto;
+}
+.rs-modal .rs-modal-header{
+  padding-inline-end:var(--rs-line-height-base);
+}
+.rs-modal .rs-modal-header::before, .rs-modal .rs-modal-header::after{
+  content:" ";
+  display:table;
+}
+.rs-modal .rs-modal-header::after{
+  clear:both;
+}
+.rs-modal .rs-modal-header .rs-modal-header-close{
+  position:absolute;
+  padding:0;
+  top:var(--rs-modal-btn-close-spacing);
+  inset-inline-end:var(--rs-modal-btn-close-spacing);
+}
+.rs-modal .rs-modal-title{
+  font-weight:normal;
+  font-size:var(--rs-modal-title-font-size);
+  line-height:var(--rs-modal-title-line-height);
+  width:100%;
+  display:block;
+  color:var(--rs-text-heading);
+  margin:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  width:100%;
+}
+.rs-modal .rs-modal-body{
+  position:relative;
+  margin-top:var(--rs-modal-body-padding);
+  padding-bottom:var(--rs-modal-body-padding);
+}
+.rs-modal .rs-modal-footer{
+  display:flex;
+  justify-content:flex-end;
+  gap:var(--rs-modal-footer-gap);
+}
+
+.rs-modal-backdrop{
+  position:fixed;
+  top:0;
+  inset-inline-start:0;
+  width:100vw;
+  height:100vh;
+  z-index:calc(var(--rs-zindex-modal) - 1);
+  background-color:var(--rs-bg-backdrop);
+}
+.rs-modal-backdrop.rs-anim-fade{
+  opacity:0;
+  transition:opacity 0.3s ease-in;
+}
+.rs-modal-backdrop.rs-anim-in{
+  opacity:1;
+}
+
+.rs-modal-open{
+  overflow:hidden;
+}
+
+.rs-modal-wrapper{
+  position:fixed;
+  overflow:auto;
+  z-index:var(--rs-zindex-modal);
+  top:0;
+  inset-inline-start:0;
+  width:100%;
+  height:100%;
+}
+.rs-modal-wrapper.rs-modal-centered{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+.rs-modal-wrapper.rs-modal-centered .rs-modal{
+  margin:auto;
+}
+
+.rs-modal-shake .rs-modal-dialog{
+  animation:0.3s linear shakeHead;
+}
+
+.rs-modal-scrollbar-measure{
+  position:absolute;
+  top:-9999px;
+  width:50px;
+  height:50px;
+  overflow:scroll;
+}