rsuite 5.61.0 → 5.62.0

package/dist/rsuite-no-reset.css

@@ -363,6 +363,7 @@
   --rs-calendar-cell-selected-hover-bg: var(--rs-primary-700);
   --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);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -735,6 +736,7 @@
   --rs-calendar-cell-selected-hover-bg: var(--rs-primary-700);
   --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);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
@@ -1112,6 +1114,7 @@
   --rs-calendar-cell-selected-hover-bg: var(--rs-gray-50);
   --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);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-high-contrast {
@@ -4655,15 +4658,15 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-picker-popup.rs-picker-popup-daterange {
   padding: 0;
 }
+.rs-picker-popup.rs-picker-popup-daterange .rs-calendar:first-child {
+  border-right: 1px solid #e5e5ea;
+  border-right: 1px solid var(--rs-border-primary);
+}
 .rs-picker-popup .rs-calendar {
   display: inline-block;
   height: 274px;
   padding-bottom: 12px;
 }
-.rs-picker-popup .rs-calendar:first-child {
-  border-right: 1px solid #e5e5ea;
-  border-right: 1px solid var(--rs-border-primary);
-}
 .rs-picker-popup .rs-calendar-header {
   width: 100%;
   text-align: center;
@@ -11133,6 +11136,66 @@ textarea.rs-inline-edit-sm .rs-plaintext {
           transform: rotate(180deg);
 }
 /* rtl:end:ignore */
+.rs-scroll-view.rs-scroll-view-shadow {
+  overflow: auto;
+  padding: 0px;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before,
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  content: '';
+  position: sticky;
+  width: 100%;
+  height: 2px;
+  visibility: hidden;
+  display: block;
+  z-index: 1;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before {
+  top: -2px;
+  -webkit-box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  bottom: -2px;
+  -webkit-box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::before,
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-top::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-bottom::before {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar {
+  --rs-scrollbar-bg: transparent;
+  --rs-scrollbar-thumb-bg: rgba(87, 87, 87, 0.6);
+  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-800);
+  scrollbar-width: auto;
+  scrollbar-color: var(--rs-scrollbar-thumb-bg) var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--rs-scrollbar-bg);
+  border-radius: 10px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--rs-scrollbar-thumb-bg);
+  border-radius: 6px;
+  border: 3px solid var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--rs-scrollbar-thumb-hover-bg);
+}
 .rs-panel {
   border-radius: 6px;
   overflow: hidden;
@@ -11218,7 +11281,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-panel-title a:active {
   text-decoration: none;
 }
-.rs-panel-header + .rs-panel-collapse .rs-panel-body,
+.rs-panel-header + .rs-panel-body-collapse .rs-panel-body,
 .rs-panel-header + .rs-panel-body {
   padding-top: 0;
 }