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

package/Menu/styles/index.css

@@ -1,191 +1,330 @@
-/**
-  * 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-sm: 0.875rem;
-  --rs-text-line-height-xs: calc(1 / 0.75);
-  --rs-spacing: 0.25rem;
-  --rs-radius-sm: 0.25rem;
-  --rs-radius-md: 0.375rem;
-}
-:root,
-.rs-theme-light {
-  --rs-gray-0: #fff;
-  --rs-gray-50: #f7f7fa;
-  --rs-gray-100: #f2f2f5;
-  --rs-gray-200: #e5e5ea;
-  --rs-gray-400: #b6b7b8;
-  --rs-gray-600: #717273;
-  --rs-gray-700: #575757;
-  --rs-gray-800: #343434;
-  --rs-primary-50: #f2faff;
-  --rs-primary-500: #3498ff;
-  --rs-primary-700: #1675e0;
-  --rs-primary-900: #004299;
-  --rs-text-primary: var(--rs-gray-800);
-  --rs-text-disabled: var(--rs-gray-600);
-  --rs-bg-overlay: var(--rs-gray-0);
-  --rs-divider-border: var(--rs-gray-200);
-  --rs-menuitem-bg-active: var(--rs-primary-50);
-  --rs-menuitem-text-active: var(--rs-primary-700);
-  --rs-menuitem-active-bg: var(--rs-gray-100);
-  --rs-menuitem-active-text: var(--rs-primary-700);
-}
-.rs-theme-dark {
-  --rs-gray-0: #fff;
-  --rs-gray-50: #e9ebf0;
-  --rs-gray-100: #cbced4;
-  --rs-gray-200: #a4a9b3;
-  --rs-gray-400: #6a6f76;
-  --rs-gray-600: #3c3f43;
-  --rs-gray-700: #292d33;
-  --rs-gray-800: #1a1d24;
-  --rs-primary-50: #f2fcff;
-  --rs-primary-500: #34c3ff;
-  --rs-primary-700: #169de0;
-  --rs-primary-900: #006199;
-  --rs-text-primary: var(--rs-gray-50);
-  --rs-text-disabled: var(--rs-gray-400);
-  --rs-bg-overlay: var(--rs-gray-700);
-  --rs-divider-border: var(--rs-gray-600);
-  --rs-menuitem-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
-  --rs-menuitem-text-active: var(--rs-primary-500);
-  --rs-menuitem-active-bg: var(--rs-gray-600);
-  --rs-menuitem-active-text: currentColor;
-}
-@supports not (color: rgb(from white r g b)) {
-  .rs-theme-dark {
-    --rs-menuitem-bg-active: rgba(0, 97, 153, 0.2);
+*[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-400:#b6b7b8;
+  --rs-gray-600:#717273;
+  --rs-gray-700:#575757;
+  --rs-gray-800:#343434;
+  --rs-gray-900:#121212;
+  --rs-primary-50:#F2FAFF;
+  --rs-primary-500:#3498ff;
+  --rs-primary-700:#1675E0;
+  --rs-primary-900:#004299;
+  --rs-body:var(--rs-gray-0);
+  --rs-text-primary:var(--rs-gray-800);
+  --rs-text-disabled:var(--rs-gray-600);
+  --rs-bg-overlay:var(--rs-gray-0);
+  --rs-divider-border:var(--rs-gray-200);
+  --rs-menuitem-bg-active:var(--rs-primary-50);
+  --rs-menuitem-text-active:var(--rs-primary-700);
+  --rs-menuitem-active-bg:var(--rs-gray-100);
+  --rs-menuitem-active-text:var(--rs-primary-700);
+}
+
+[data-theme=dark],
+.rs-theme-dark{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#e9ebf0;
+  --rs-gray-100:#cbced4;
+  --rs-gray-200:#a4a9b3;
+  --rs-gray-400:#6a6f76;
+  --rs-gray-600:#3c3f43;
+  --rs-gray-700:#292d33;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-primary-50:#F2FCFF;
+  --rs-primary-500:#34c3ff;
+  --rs-primary-700:#169DE0;
+  --rs-primary-900:#006199;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-text-disabled:var(--rs-gray-400);
+  --rs-bg-overlay:var(--rs-gray-700);
+  --rs-divider-border:var(--rs-gray-600);
+  --rs-menuitem-bg-active:rgb(from var(--rs-primary-900) r g b / 20%);
+  --rs-menuitem-text-active:var(--rs-primary-500);
+  --rs-menuitem-active-bg:var(--rs-gray-600);
+  --rs-menuitem-active-text:currentColor;
+}
+@supports not (color: rgb(from white r g b)){
+  [data-theme=dark],
+  .rs-theme-dark{
+    --rs-menuitem-bg-active:rgba(#006199, 0.2);
   }
 }
-.rs-theme-high-contrast {
-  --rs-gray-0: #fff;
-  --rs-gray-50: #e9ebf0;
-  --rs-gray-100: #cbced4;
-  --rs-gray-200: #a4a9b3;
-  --rs-gray-400: #6a6f76;
-  --rs-gray-600: #3c3f43;
-  --rs-gray-700: #292d33;
-  --rs-gray-800: #1a1d24;
-  --rs-primary-50: #fffef2;
-  --rs-primary-500: #ffff00;
-  --rs-primary-700: #d9e000;
-  --rs-primary-900: #8f9900;
-  --rs-text-primary: var(--rs-gray-50);
-  --rs-text-disabled: var(--rs-gray-400);
-  --rs-bg-overlay: var(--rs-gray-800);
-  --rs-divider-border: var(--rs-gray-600);
-  --rs-menuitem-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
-  --rs-menuitem-text-active: var(--rs-primary-500);
-  --rs-menuitem-active-bg: transparent;
-  --rs-menuitem-active-text: var(--rs-primary-500);
-}
-@supports not (color: rgb(from white r g b)) {
-  .rs-theme-high-contrast {
-    --rs-menuitem-bg-active: rgba(143, 153, 0, 0.2);
+
+[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-400:#6a6f76;
+  --rs-gray-600:#3c3f43;
+  --rs-gray-700:#292d33;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-primary-50:#fffef2;
+  --rs-primary-500:#ffff00;
+  --rs-primary-700:#d9e000;
+  --rs-primary-900:#8f9900;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-text-disabled:var(--rs-gray-400);
+  --rs-bg-overlay:var(--rs-gray-800);
+  --rs-divider-border:var(--rs-gray-600);
+  --rs-menuitem-bg-active:rgb(from var(--rs-primary-900) r g b / 20%);
+  --rs-menuitem-text-active:var(--rs-primary-500);
+  --rs-menuitem-active-bg:transparent;
+  --rs-menuitem-active-text:var(--rs-primary-500);
+}
+@supports not (color: rgb(from white r g b)){
+  [data-theme=high-contrast],
+  .rs-theme-high-contrast{
+    --rs-menuitem-bg-active:rgba(143, 153, 0, 0.2);
   }
 }
-.rs-menu {
-  --rs-menu-divider-color: var(--rs-divider-border);
-  --rs-menu-padding: calc(var(--rs-spacing) * 1.5);
-  --rs-menu-font-size: var(--rs-font-size-sm);
-  --rs-menuitem-padding-inline: calc(var(--rs-spacing) * 3);
-  --rs-menuitem-padding-block: calc(var(--rs-spacing) * 2);
-  --rs-menuitem-divider-margin-block: calc(var(--rs-spacing) * 1.5);
-  --rs-menuitem-spacing: calc(var(--rs-spacing) * 2);
-  margin: 0;
-  list-style: none;
-  font-size: var(--rs-menu-font-size);
-  text-align: start;
-  background-color: var(--rs-bg-overlay);
-  border-radius: var(--rs-radius-md);
-  padding: var(--rs-menu-padding);
-  outline: 0;
-}
-.rs-menu-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: var(--rs-menuitem-spacing);
-  padding-inline: var(--rs-menuitem-padding-inline);
-  padding-block: var(--rs-menuitem-padding-block);
-  color: var(--rs-text-primary);
-  border-radius: var(--rs-radius-sm);
-  cursor: pointer;
-  text-decoration: none;
-}
-.rs-menu-item:hover,
-.rs-menu-item:focus,
-.rs-menu-item:active {
-  text-decoration: none;
-}
-.rs-menu-item-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-.rs-menu-item .rs-menu-item-shortcut {
-  border: none;
-  line-height: var(--rs-text-line-height-xs);
-}
-.rs-menu-item > .rs-icon {
-  width: 14px;
-  text-align: center;
-}
-.rs-menu-item.rs-menu-item-active {
-  outline: 0;
-  font-weight: bold;
-}
-.rs-menu-item.rs-menu-item-active,
-.rs-menu-item.rs-menu-item-active:hover,
-.rs-menu-item.rs-menu-item-active:focus {
-  color: var(--rs-menuitem-text-active);
-  background-color: var(--rs-menuitem-bg-active);
-}
-.rs-menu-item.rs-menu-item-active .rs-text,
-.rs-menu-item.rs-menu-item-active:hover .rs-text,
-.rs-menu-item.rs-menu-item-active:focus .rs-text {
-  color: var(--rs-menuitem-text-active);
-}
-.rs-menu-item:focus-visible,
-.rs-menu-item.rs-menu-item-focus {
-  background-color: var(--rs-menuitem-active-bg);
-  color: var(--rs-menuitem-active-text);
-}
-.rs-theme-high-contrast .rs-menu-item:focus-visible,
-.rs-theme-high-contrast .rs-menu-item.rs-menu-item-focus {
-  text-decoration: underline;
-  box-shadow: inset 0 0 0 2px #fff;
-}
-.rs-menu-item:focus {
-  outline: 0;
-}
-.rs-menu-item-disabled {
-  color: var(--rs-text-disabled);
-  cursor: not-allowed;
-}
-.rs-menu-item-disabled .rs-text {
-  color: var(--rs-text-disabled);
-}
-.rs-menu-item-disabled:hover,
-.rs-menu-item-disabled:focus {
-  text-decoration: none;
-  background-color: transparent;
-  background-image: none;
-}
-.rs-menu-item-divider {
-  height: 1px;
-  margin-block: var(--rs-menuitem-divider-margin-block);
-  overflow: hidden;
-  background-color: var(--rs-menu-divider-color);
+
+: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-base:var(--rs-font-size-sm);
+  --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-radius-md:0.375rem;
+  --rs-cursor-disabled:not-allowed;
+}
+[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-menu{
+  --rs-menu-divider-color:var(--rs-divider-border);
+  --rs-menu-padding:calc(var(--rs-spacing) * 1.5);
+  --rs-menu-font-size:var(--rs-font-size-sm);
+  --rs-menuitem-padding-inline:calc(var(--rs-spacing) * 3);
+  --rs-menuitem-padding-block:calc(var(--rs-spacing) * 2);
+  --rs-menuitem-divider-margin-block:calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-spacing:calc(var(--rs-spacing) * 2);
+  margin:0;
+  list-style:none;
+  font-size:var(--rs-menu-font-size);
+  text-align:start;
+  background-color:var(--rs-bg-overlay);
+  border-radius:var(--rs-radius-md);
+  padding:var(--rs-menu-padding);
+  outline:0;
+}
+
+.rs-menu-item{
+  display:flex;
+  align-items:center;
+  width:100%;
+  gap:var(--rs-menuitem-spacing);
+  padding-inline:var(--rs-menuitem-padding-inline);
+  padding-block:var(--rs-menuitem-padding-block);
+  color:var(--rs-text-primary);
+  border-radius:var(--rs-radius-sm);
+  cursor:pointer;
+}
+.rs-menu-item,.rs-menu-item:hover, .rs-menu-item:focus, .rs-menu-item:active{
+  text-decoration:none;
+}
+.rs-menu-item-content{
+  flex:1;
+  display:flex;
+  flex-direction:column;
+}
+.rs-menu-item .rs-menu-item-shortcut{
+  border:none;
+  line-height:var(--rs-text-line-height-xs);
+}
+.rs-menu-item > .rs-icon{
+  width:var(--rs-font-size-base);
+  text-align:center;
+}
+.rs-menu-item.rs-menu-item-active{
+  outline:0;
+  font-weight:bold;
+}
+.rs-menu-item.rs-menu-item-active, .rs-menu-item.rs-menu-item-active:hover, .rs-menu-item.rs-menu-item-active:focus{
+  color:var(--rs-menuitem-text-active);
+  background-color:var(--rs-menuitem-bg-active);
+}
+.rs-menu-item.rs-menu-item-active .rs-text, .rs-menu-item.rs-menu-item-active:hover .rs-text, .rs-menu-item.rs-menu-item-active:focus .rs-text{
+  color:var(--rs-menuitem-text-active);
+}
+.rs-menu-item:focus-visible, .rs-menu-item.rs-menu-item-focus{
+  background-color:var(--rs-menuitem-active-bg);
+  color:var(--rs-menuitem-active-text);
+}
+[data-theme=high-contrast] .rs-menu-item:focus-visible, .rs-theme-high-contrast .rs-menu-item:focus-visible, [data-theme=high-contrast] .rs-menu-item.rs-menu-item-focus, .rs-theme-high-contrast .rs-menu-item.rs-menu-item-focus{
+  text-decoration:underline;
+  box-shadow:inset 0 0 0 2px #fff;
+}
+.rs-menu-item:focus{
+  outline:0;
+}
+.rs-menu-item-disabled{
+  cursor:var(--rs-cursor-disabled);
+}
+.rs-menu-item-disabled,.rs-menu-item-disabled .rs-text{
+  color:var(--rs-text-disabled);
+}
+.rs-menu-item-disabled:hover, .rs-menu-item-disabled:focus{
+  text-decoration:none;
+  background-color:transparent;
+  background-image:none;
 }
+
+.rs-menu-item-divider{
+  height:1px;
+  margin-block:var(--rs-menuitem-divider-margin-block);
+  overflow:hidden;
+  background-color:var(--rs-menu-divider-color);
+}