rsuite 5.74.2 → 5.75.0

package/dist/rsuite.css

@@ -337,6 +337,7 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-50);
+  --rs-card-bg: var(--rs-gray-0);
   --rs-carousel-bg: var(--rs-gray-600);
   --rs-carousel-indicator: rgb(from var(--rs-gray-0) r g b / 40%);
   --rs-carousel-indicator-hover: var(--rs-gray-0);
@@ -376,6 +377,7 @@
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
   --rs-tree-indent-line-color: rgba(0, 0, 0, 0.1);
   --rs-scroll-view-shadow-color: rgba(9, 9, 9, 0.2);
+  --rs-stat-body-bg: var(--rs-gray-0);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -721,6 +723,7 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
+  --rs-card-bg: var(--rs-gray-900);
   --rs-carousel-bg: var(--rs-gray-600);
   --rs-carousel-indicator: rgb(from var(--rs-gray-0) r g b / 40%);
   --rs-carousel-indicator-hover: var(--rs-gray-0);
@@ -758,6 +761,7 @@
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   --rs-tree-indent-line-color: rgba(255, 255, 255, 0.1);
   --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
+  --rs-stat-body-bg: var(--rs-gray-900);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
@@ -1104,6 +1108,7 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
+  --rs-card-bg: var(--rs-gray-900);
   --rs-carousel-bg: var(--rs-gray-600);
   --rs-carousel-indicator: rgb(from var(--rs-gray-0) r g b / 40%);
   --rs-carousel-indicator-hover: var(--rs-gray-0);
@@ -1145,6 +1150,7 @@
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   --rs-tree-indent-line-color: rgba(255, 255, 255, 0.1);
   --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
+  --rs-stat-body-bg: var(--rs-gray-900);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-high-contrast {
@@ -3875,6 +3881,77 @@ tbody.rs-anim-collapse.rs-anim-in {
             transform: translateY(0);
   }
 }
+.rs-card {
+  --rs-card-width: 100%;
+  --rs-card-padding: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-radius: 6px;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: relative;
+  width: var(--rs-card-width);
+}
+.rs-card-bordered {
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-border-primary);
+  background-color: #fff;
+  background-color: var(--rs-card-bg);
+}
+.rs-card-shaded {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: var(--rs-panel-shadow);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: var(--rs-panel-shadow);
+}
+.rs-card-shaded-hover:hover {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: var(--rs-panel-shadow);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: var(--rs-panel-shadow);
+  cursor: pointer;
+}
+.rs-card-sm {
+  --rs-card-padding: 8px;
+}
+.rs-card-md {
+  --rs-card-padding: 16px;
+}
+.rs-card-lg {
+  --rs-card-padding: 24px;
+}
+.rs-card-row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.rs-card-header {
+  padding: var(--rs-card-padding) var(--rs-card-padding) 0 var(--rs-card-padding);
+}
+.rs-card-body {
+  padding: var(--rs-card-padding);
+}
+.rs-card-footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  padding: 0 var(--rs-card-padding) var(--rs-card-padding) var(--rs-card-padding);
+}
+.rs-card-group {
+  --rs-columns: 4;
+  --rs-spacing: 20px;
+  display: grid;
+  grid-template-columns: repeat(var(--rs-columns), 1fr);
+  grid-gap: var(--rs-spacing);
+}
 .rs-carousel {
   position: relative;
   height: 400px;
@@ -9427,19 +9504,13 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 }
 .rs-list {
   position: relative;
-  -webkit-box-shadow: 0 1px 0 #e5e5ea, 0 -1px 0 #e5e5ea;
-  -webkit-box-shadow: 0 1px 0 var(--rs-list-border), 0 -1px 0 var(--rs-list-border);
-          box-shadow: 0 1px 0 #e5e5ea, 0 -1px 0 #e5e5ea;
-          box-shadow: 0 1px 0 var(--rs-list-border), 0 -1px 0 var(--rs-list-border);
   overflow-x: hidden;
   overflow-y: auto;
 }
 .rs-list-bordered {
   border-radius: 6px;
-  -webkit-box-shadow: 0 0 0 1px #e5e5ea;
-  -webkit-box-shadow: 0 0 0 1px var(--rs-list-border);
-          box-shadow: 0 0 0 1px #e5e5ea;
-          box-shadow: 0 0 0 1px var(--rs-list-border);
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-list-border);
 }
 .rs-list-hover .rs-list-item:hover {
   background-color: #f2faff;
@@ -9473,15 +9544,15 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   padding-top: 8px;
   padding-bottom: 8px;
 }
+.rs-list-item-xs {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
 /* rtl:begin:ignore */
 /* stylelint-disable-next-line */
 .rs-list-item {
   background-color: #fff;
   background-color: var(--rs-list-bg);
-  -webkit-box-shadow: 0 -1px 0 #e5e5ea, 0 1px 0 #e5e5ea;
-  -webkit-box-shadow: 0 -1px 0 var(--rs-list-border), 0 1px 0 var(--rs-list-border);
-          box-shadow: 0 -1px 0 #e5e5ea, 0 1px 0 #e5e5ea;
-          box-shadow: 0 -1px 0 var(--rs-list-border), 0 1px 0 var(--rs-list-border);
 }
 .rs-list-item-helper {
   position: absolute;
@@ -9519,6 +9590,10 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   border: 1px #3498ff dashed;
   border: 1px var(--rs-list-placeholder-border) dashed;
 }
+.rs-list-divider .rs-list-item + .rs-list-item {
+  border-top: 1px solid #e5e5ea;
+  border-top: 1px solid var(--rs-list-border);
+}
 /* rtl:end:ignore */
 .rs-loader {
   display: inline-block;
@@ -13887,6 +13962,135 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   bottom: unset;
   top: -8px;
 }
+.rs-stat {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 10px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.rs-stat-icon {
+  width: 50px;
+  height: 50px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-radius: 6px;
+}
+.rs-stat-body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  margin: 0;
+}
+.rs-stat-bordered {
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-border-primary);
+  background-color: #fff;
+  background-color: var(--rs-stat-body-bg);
+  border-radius: 6px;
+  padding: 16px;
+}
+.rs-stat-label {
+  font-weight: 100;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: #717273;
+  color: var(--rs-text-secondary);
+  gap: 6px;
+}
+.rs-stat-label-uppercase {
+  text-transform: uppercase;
+}
+.rs-stat-value {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1;
+  margin: 0;
+}
+.rs-stat-value-unit {
+  font-size: 12px;
+  font-weight: 400;
+}
+.rs-stat-trend {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 2px;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1;
+}
+.rs-stat-trend-up {
+  color: #007d0c;
+  color: var(--rs-green-900);
+}
+.rs-stat-trend-down {
+  color: #8f1300;
+  color: var(--rs-red-900);
+}
+.rs-stat-trend-default {
+  padding: 2px 6px;
+}
+.rs-stat-trend-default.rs-stat-trend-up {
+  background-color: #c8f0c7;
+  background-color: var(--rs-green-100);
+}
+.rs-stat-trend-default.rs-stat-trend-down {
+  background-color: #fccfcf;
+  background-color: var(--rs-red-100);
+}
+.rs-stat-trend-subtle.rs-stat-trend-up {
+  color: #37ab3c;
+  color: var(--rs-green-600);
+}
+.rs-stat-trend-subtle.rs-stat-trend-down {
+  color: #eb3626;
+  color: var(--rs-red-600);
+}
+.rs-stat-help-text {
+  color: #717273;
+  color: var(--rs-text-secondary);
+}
+.rs-stat .rs-progress-line {
+  padding: 0;
+}
+.rs-stat-group {
+  --rs-columns: 4;
+  --rs-spacing: 6px;
+  display: grid;
+  grid-template-columns: repeat(var(--rs-columns), 1fr);
+  grid-gap: var(--rs-spacing);
+}
 .rs-steps {
   min-height: 30px;
 }
@@ -16692,29 +16896,6 @@ textarea.rs-inline-edit-sm .rs-plaintext {
           box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
           box-shadow: var(--rs-shadow-overlay);
 }
-.rs-toast-container .rs-toast-fade-entered,
-.rs-toast-container .rs-toast-fade-exiting {
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-.rs-toast-container .rs-toast-fade-entered {
-  -webkit-animation-duration: 0.4s;
-          animation-duration: 0.4s;
-  -webkit-animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
-          animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
-}
-.rs-toast-container .rs-toast-fade-exited,
-.rs-toast-container .rs-toast-fade-entering {
-  opacity: 0;
-}
-.rs-toast-container .rs-toast-fade-exited {
-  -webkit-transform-origin: 0 0;
-          transform-origin: 0 0;
-  -webkit-transform: scaleY(0.8);
-          transform: scaleY(0.8);
-  max-height: 0;
-  overflow: hidden;
-}
 .rs-toast-container-top-center,
 .rs-toast-container-bottom-center {
   -webkit-box-align: center;
@@ -16762,7 +16943,30 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-toast-container-bottom-end {
   bottom: 24px;
 }
-.rs-toast-container .rs-toast-fade-exiting {
+.rs-toast-fade-entered,
+.rs-toast-fade-exiting {
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+.rs-toast-fade-entered {
+  -webkit-animation-duration: 0.4s;
+          animation-duration: 0.4s;
+  -webkit-animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+          animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+}
+.rs-toast-fade-exited,
+.rs-toast-fade-entering {
+  opacity: 0;
+}
+.rs-toast-fade-exited {
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+  -webkit-transform: scaleY(0.8);
+          transform: scaleY(0.8);
+  max-height: 0;
+  overflow: hidden;
+}
+.rs-toast-fade-exiting {
   -webkit-animation-duration: 0.3s;
           animation-duration: 0.3s;
   -webkit-animation-timing-function: cubic-bezier(0.64, 0.65, 0.57, 1.13);