rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/Tooltip/styles/index.css

@@ -1,214 +1,347 @@
-/**
-  * 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-xs: 0.75rem;
-  --rs-text-line-height-xs: calc(1 / 0.75);
-  --rs-radius-sm: 0.25rem;
-}
-:root,
-.rs-theme-light {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #f2f2f5;
-  --rs-gray-200: #e5e5ea;
-  --rs-gray-500: #939393;
-  --rs-gray-600: #717273;
-  --rs-gray-800: #343434;
-  --rs-gray-900: #121212;
-  --rs-border-primary: var(--rs-gray-200);
-  --rs-tooltip-bg: var(--rs-gray-900);
-  --rs-tooltip-text: var(--rs-gray-0);
-}
-.rs-theme-dark {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #cbced4;
-  --rs-gray-200: #a4a9b3;
-  --rs-gray-500: #5c6066;
-  --rs-gray-600: #3c3f43;
-  --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
-  --rs-border-primary: var(--rs-gray-600);
-  --rs-tooltip-bg: var(--rs-gray-500);
-  --rs-tooltip-text: var(--rs-gray-0);
-}
-.rs-theme-high-contrast {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #cbced4;
-  --rs-gray-200: #a4a9b3;
-  --rs-gray-500: #5c6066;
-  --rs-gray-600: #3c3f43;
-  --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
-  --rs-border-primary: var(--rs-gray-100);
-  --rs-tooltip-bg: var(--rs-gray-800);
-  --rs-tooltip-text: var(--rs-gray-0);
-}
-/* rtl:begin:ignore */
-/* rtl:end:ignore */
-.rs-tooltip {
-  --rs-tooltip-border-radius: var(--rs-radius-sm);
-  --rs-tooltip-padding-block: 4px;
-  --rs-tooltip-padding-inline: 10px;
-  --rs-tooltip-z-index: 1070;
-  --rs-tooltip-max-width: 250px;
-  --rs-tooltip-line-height: var(--rs-text-line-height-xs);
-  --rs-tooltip-position-x: var(--rs-position-x);
-  --rs-tooltip-position-y: var(--rs-position-y);
-  --rs-tooltip-opacity: var(--rs-opacity, 0);
-  position: absolute;
-  top: var(--rs-tooltip-position-y);
-  left: var(--rs-tooltip-position-x) /* rtl:ignore */;
-  z-index: var(--rs-tooltip-z-index);
-  display: block;
-  font-size: var(--rs-font-size-xs);
-  opacity: var(--rs-tooltip-opacity);
-  line-height: var(--rs-tooltip-line-height);
-  max-width: var(--rs-tooltip-max-width);
-  padding: var(--rs-tooltip-padding-block) var(--rs-tooltip-padding-inline);
-  color: var(--rs-tooltip-text);
-  background-color: var(--rs-tooltip-bg);
-  border-radius: var(--rs-tooltip-border-radius);
-  overflow-wrap: break-word;
-}
-.rs-tooltip.rs-anim-fade {
-  transition: opacity 0.1s linear, transform 0.1s ease-out;
-}
-.rs-tooltip.rs-anim-in {
-  opacity: 1;
-  transition: opacity 0.15s linear, transform 0.15s ease-in;
-}
-.rs-tooltip-arrow::before,
-.rs-tooltip-arrow::after {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-.rs-tooltip-arrow::before {
-  display: none;
-}
-.rs-theme-high-contrast .rs-tooltip {
-  border: 1px solid var(--rs-border-primary);
-}
-.rs-theme-high-contrast .rs-tooltip-arrow::before {
-  display: block;
-}
-.rs-tooltip:where([data-placement*='top']) {
-  margin-top: -8px;
-  transform: translate(0, 0);
-}
-.rs-tooltip:where([data-placement*='top']).rs-anim-in {
-  transform: translate(0, -2px);
-}
-.rs-tooltip:where([data-placement*='top'])::after {
-  bottom: -6px;
-  margin-left: -6px;
-  border-width: 6px 6px 0;
-  border-top-color: var(--rs-tooltip-bg);
-}
-.rs-theme-high-contrast .rs-tooltip:where([data-placement*='top'])::before {
-  bottom: -7px;
-  margin-left: -7px;
-  border-width: 7px 7px 0;
-  border-top-color: var(--rs-tooltip-border);
-}
-.rs-tooltip:where([data-placement*='bottom']) {
-  margin-top: 8px;
-  transform: translate(0, 0);
-}
-.rs-tooltip:where([data-placement*='bottom']).rs-anim-in {
-  transform: translate(0, 2px);
-}
-.rs-tooltip:where([data-placement*='bottom'])::after {
-  top: -6px;
-  margin-left: -6px;
-  border-width: 0 6px 6px;
-  border-bottom-color: var(--rs-tooltip-bg);
-}
-.rs-theme-high-contrast .rs-tooltip:where([data-placement*='bottom'])::before {
-  top: -7px;
-  margin-left: -7px;
-  border-width: 0 7px 7px;
-  border-bottom-color: var(--rs-tooltip-border);
-}
-.rs-tooltip:where([data-placement='bottom'], [data-placement='top'])::before,
-.rs-tooltip:where([data-placement='bottom'], [data-placement='top'])::after {
-  left: 50%;
-}
-.rs-tooltip:where([data-placement='bottom-start'], [data-placement='top-start'])::before,
-.rs-tooltip:where([data-placement='bottom-start'], [data-placement='top-start'])::after {
-  left: 10px;
-}
-.rs-tooltip:where([data-placement='bottom-end'], [data-placement='top-end'])::before {
-  right: 3px;
-}
-.rs-tooltip:where([data-placement='bottom-end'], [data-placement='top-end'])::after {
-  right: 4px;
-}
-.rs-tooltip:where([data-placement='left'], [data-placement='right'])::before,
-.rs-tooltip:where([data-placement='left'], [data-placement='right'])::after {
-  top: 50%;
-}
-.rs-tooltip:where([data-placement='left-start'], [data-placement='right-start'])::before,
-.rs-tooltip:where([data-placement='left-start'], [data-placement='right-start'])::after {
-  top: 10px;
-}
-.rs-tooltip:where([data-placement='left-end'], [data-placement='right-end'])::before {
-  bottom: 3px;
-}
-.rs-tooltip:where([data-placement='left-end'], [data-placement='right-end'])::after {
-  bottom: 4px;
-}
-/* rtl:begin:ignore */
-.rs-tooltip:where([data-placement*='right']) {
-  margin-left: 8px;
-  transform: translate(0, 0);
-}
-.rs-tooltip:where([data-placement*='right']).rs-anim-in {
-  transform: translate(2px, 0);
-}
-.rs-tooltip:where([data-placement*='right'])::after {
-  left: -6px;
-  margin-top: -6px;
-  border-width: 6px 6px 6px 0;
-  border-right-color: var(--rs-tooltip-bg);
-}
-.rs-theme-high-contrast .rs-tooltip:where([data-placement*='right'])::before {
-  left: -7px;
-  margin-top: -7px;
-  border-width: 7px 7px 7px 0;
-  border-right-color: var(--rs-tooltip-border);
-}
-.rs-tooltip:where([data-placement*='left']) {
-  margin-left: -8px;
-  transform: translate(0, 0);
-}
-.rs-tooltip:where([data-placement*='left']).rs-anim-in {
-  transform: translate(-2px, 0);
-}
-.rs-tooltip:where([data-placement*='left'])::after {
-  right: -6px;
-  margin-top: -6px;
-  border-width: 6px 0 6px 6px;
-  border-left-color: var(--rs-tooltip-bg);
-}
-.rs-theme-high-contrast .rs-tooltip:where([data-placement*='left'])::before {
-  right: -7px;
-  margin-top: -7px;
-  border-width: 7px 0 7px 7px;
-  border-left-color: var(--rs-tooltip-border);
-}
-/* rtl:end:ignore */
+*[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-200:#e5e5ea;
+  --rs-gray-500:#939393;
+  --rs-gray-600:#717273;
+  --rs-gray-800:#343434;
+  --rs-gray-900:#121212;
+  --rs-body:var(--rs-gray-0);
+  --rs-text-primary:var(--rs-gray-800);
+  --rs-border-primary:var(--rs-gray-200);
+  --rs-tooltip-bg:var(--rs-gray-900);
+  --rs-tooltip-text:var(--rs-gray-0);
+}
+
+[data-theme=dark],
+.rs-theme-dark{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#e9ebf0;
+  --rs-gray-100:#cbced4;
+  --rs-gray-200:#a4a9b3;
+  --rs-gray-500:#5c6066;
+  --rs-gray-600:#3c3f43;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-border-primary:var(--rs-gray-600);
+  --rs-tooltip-bg:var(--rs-gray-500);
+  --rs-tooltip-text:var(--rs-gray-0);
+}
+
+[data-theme=high-contrast],
+.rs-theme-high-contrast{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#e9ebf0;
+  --rs-gray-100:#cbced4;
+  --rs-gray-200:#a4a9b3;
+  --rs-gray-500:#5c6066;
+  --rs-gray-600:#3c3f43;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-border-primary:var(--rs-gray-100);
+  --rs-tooltip-bg:var(--rs-gray-800);
+  --rs-tooltip-text:var(--rs-gray-0);
+}
+
+:root{
+  --rs-font-family-base:-apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif;
+  --rs-font-size-xs:0.75rem;
+  --rs-font-size-sm:0.875rem;
+  --rs-line-height-md:calc(20 / 14);
+  --rs-text-line-height-xs:calc(1 / 0.75);
+  --rs-spacing:0.25rem;
+  --rs-radius-sm:0.25rem;
+  --rs-zindex-tooltip:1070;
+}
+[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;
+  }
+}
+.rs-tooltip{
+  --rs-tooltip-border-radius:var(--rs-radius-sm);
+  --rs-tooltip-padding-block:4px;
+  --rs-tooltip-padding-inline:10px;
+  --rs-tooltip-z-index:var(--rs-zindex-tooltip);
+  --rs-tooltip-max-width:250px;
+  --rs-tooltip-line-height:var(--rs-text-line-height-xs);
+  --rs-tooltip-position-x:var(--rs-position-x);
+  --rs-tooltip-position-y:var(--rs-position-y);
+  --rs-tooltip-opacity:var(--rs-opacity, 0);
+  --rs-tooltip-arrow-gap-sm:var(--rs-spacing);
+  --rs-tooltip-arrow-gap-lg:calc(var(--rs-spacing) * 2.5);
+  --rs-tooltip-translate-distance:2px;
+  --rs-tooltip-arrow-width:6px;
+  position:absolute;
+  top:var(--rs-tooltip-position-y);
+  left:var(--rs-tooltip-position-x);
+  z-index:var(--rs-tooltip-z-index);
+  display:block;
+  font-size:var(--rs-font-size-xs);
+  opacity:var(--rs-tooltip-opacity);
+  line-height:var(--rs-tooltip-line-height);
+  max-width:var(--rs-tooltip-max-width);
+  padding:var(--rs-tooltip-padding-block) var(--rs-tooltip-padding-inline);
+  color:var(--rs-tooltip-text);
+  background-color:var(--rs-tooltip-bg);
+  border-radius:var(--rs-tooltip-border-radius);
+  overflow-wrap:break-word;
+}
+.rs-tooltip.rs-anim-fade{
+  transition:opacity 0.1s linear, transform 0.1s ease-out;
+}
+.rs-tooltip.rs-anim-in{
+  opacity:1;
+  transition:opacity 0.15s linear, transform 0.15s ease-in;
+}
+.rs-tooltip-arrow::before, .rs-tooltip-arrow::after{
+  content:" ";
+  display:block;
+  position:absolute;
+  width:0;
+  height:0;
+  border-color:transparent;
+  border-style:solid;
+}
+.rs-tooltip-arrow::before{
+  display:none;
+}
+[data-theme=high-contrast] .rs-tooltip, .rs-theme-high-contrast .rs-tooltip{
+  border:1px solid var(--rs-border-primary);
+}
+[data-theme=high-contrast] .rs-tooltip-arrow::before, .rs-theme-high-contrast .rs-tooltip-arrow::before{
+  display:block;
+}
+.rs-tooltip:where([data-placement*=top]){
+  margin-top:calc((var(--rs-tooltip-arrow-width) + 2px) * -1);
+  transform:translate(0, calc(var(--rs-tooltip-translate-distance) * -1));
+}
+.rs-tooltip:where([data-placement*=top])::after{
+  bottom:-6px;
+  margin-inline-start:-6px;
+  border-width:6px 6px 0;
+  border-top-color:var(--rs-tooltip-bg);
+}
+[data-theme=high-contrast] .rs-tooltip:where([data-placement*=top])::before, .rs-theme-high-contrast .rs-tooltip:where([data-placement*=top])::before{
+  bottom:-7px;
+  margin-inline-start:-7px;
+  border-width:7px 7px 0;
+  border-top-color:var(--rs-tooltip-border);
+}
+.rs-tooltip:where([data-placement*=bottom]){
+  margin-top:calc(var(--rs-tooltip-arrow-width) + 2px);
+  transform:translate(0, var(--rs-tooltip-translate-distance));
+}
+.rs-tooltip:where([data-placement*=bottom])::after{
+  top:-6px;
+  margin-inline-start:-6px;
+  border-width:0 6px 6px;
+  border-bottom-color:var(--rs-tooltip-bg);
+}
+[data-theme=high-contrast] .rs-tooltip:where([data-placement*=bottom])::before, .rs-theme-high-contrast .rs-tooltip:where([data-placement*=bottom])::before{
+  top:-7px;
+  margin-inline-start:-7px;
+  border-width:0 7px 7px;
+  border-bottom-color:var(--rs-tooltip-border);
+}
+.rs-tooltip:where([data-placement=bottom], [data-placement=top])::before, .rs-tooltip:where([data-placement=bottom], [data-placement=top])::after{
+  inset-inline-start:50%;
+}
+.rs-tooltip:where([data-placement=bottom-start], [data-placement=top-start])::before, .rs-tooltip:where([data-placement=bottom-start], [data-placement=top-start])::after{
+  inset-inline-start:var(--rs-tooltip-arrow-gap-lg);
+}
+.rs-tooltip:where([data-placement=bottom-end], [data-placement=top-end])::before{
+  inset-inline-end:calc(var(--rs-tooltip-arrow-gap-sm) - 1px);
+}
+.rs-tooltip:where([data-placement=bottom-end], [data-placement=top-end])::after{
+  inset-inline-end:var(--rs-tooltip-arrow-gap-sm);
+}
+.rs-tooltip:where([data-placement=left], [data-placement=right])::before, .rs-tooltip:where([data-placement=left], [data-placement=right])::after{
+  top:50%;
+}
+.rs-tooltip:where([data-placement=left-start], [data-placement=right-start])::before, .rs-tooltip:where([data-placement=left-start], [data-placement=right-start])::after{
+  top:var(--rs-tooltip-arrow-gap-lg);
+}
+.rs-tooltip:where([data-placement=left-end], [data-placement=right-end])::before{
+  bottom:calc(var(--rs-tooltip-arrow-gap-sm) - 1px);
+}
+.rs-tooltip:where([data-placement=left-end], [data-placement=right-end])::after{
+  bottom:var(--rs-tooltip-arrow-gap-sm);
+}
+.rs-tooltip:where([data-placement*=right]){
+  margin-left:calc(var(--rs-tooltip-arrow-width) + 2px);
+  transform:translate(var(--rs-tooltip-translate-distance), 0);
+}
+.rs-tooltip:where([data-placement*=right])::after{
+  left:-6px;
+  margin-top:-6px;
+  border-width:6px 6px 6px 0;
+  border-right-color:var(--rs-tooltip-bg);
+}
+[data-theme=high-contrast] .rs-tooltip:where([data-placement*=right])::before, .rs-theme-high-contrast .rs-tooltip:where([data-placement*=right])::before{
+  left:-7px;
+  margin-top:-7px;
+  border-width:7px 7px 7px 0;
+  border-right-color:var(--rs-tooltip-border);
+}
+.rs-tooltip:where([data-placement*=left]){
+  margin-left:calc((var(--rs-tooltip-arrow-width) + 2px) * -1);
+  transform:translate(calc(var(--rs-tooltip-translate-distance) * -1), 0);
+}
+.rs-tooltip:where([data-placement*=left])::after{
+  right:-6px;
+  margin-top:-6px;
+  border-width:6px 0 6px 6px;
+  border-left-color:var(--rs-tooltip-bg);
+}
+[data-theme=high-contrast] .rs-tooltip:where([data-placement*=left])::before, .rs-theme-high-contrast .rs-tooltip:where([data-placement*=left])::before{
+  right:-7px;
+  margin-top:-7px;
+  border-width:7px 0 7px 7px;
+  border-left-color:var(--rs-tooltip-border);
+}