rsuite 5.52.0 → 5.53.0

package/dist/rsuite.css

@@ -174,19 +174,27 @@
   --rs-message-success-header: var(--rs-text-heading);
   --rs-message-success-text: var(--rs-text-primary);
   --rs-message-success-icon: var(--rs-color-green);
-  --rs-message-success-bg: var(--rs-green-50);
+  --rs-message-success-icon-border: var(--rs-green-200);
+  --rs-message-success-bg: rgb(from var(--rs-green-100) r g b / 60%);
+  --rs-message-success-border: var(--rs-color-green);
   --rs-message-info-header: var(--rs-text-heading);
   --rs-message-info-text: var(--rs-text-primary);
   --rs-message-info-icon: var(--rs-color-blue);
-  --rs-message-info-bg: var(--rs-blue-50);
+  --rs-message-info-icon-border: var(--rs-blue-200);
+  --rs-message-info-bg: rgb(from var(--rs-blue-100) r g b / 60%);
+  --rs-message-info-border: var(--rs-color-blue);
   --rs-message-warning-header: var(--rs-text-heading);
   --rs-message-warning-text: var(--rs-text-primary);
   --rs-message-warning-icon: var(--rs-color-yellow);
-  --rs-message-warning-bg: var(--rs-yellow-50);
+  --rs-message-warning-icon-border: var(--rs-yellow-200);
+  --rs-message-warning-bg: rgb(from var(--rs-yellow-100) r g b / 60%);
+  --rs-message-warning-border: var(--rs-color-yellow);
   --rs-message-error-header: var(--rs-text-heading);
   --rs-message-error-text: var(--rs-text-primary);
   --rs-message-error-icon: var(--rs-color-red);
-  --rs-message-error-bg: var(--rs-red-50);
+  --rs-message-error-icon-border: var(--rs-red-200);
+  --rs-message-error-bg: rgb(from var(--rs-red-100) r g b / 60%);
+  --rs-message-error-border: var(--rs-color-red);
   --rs-tooltip-bg: var(--rs-gray-900);
   --rs-tooltip-text: var(--rs-gray-0);
   --rs-progress-bg: var(--rs-gray-200);
@@ -354,6 +362,10 @@
     --rs-loader-backdrop: rgba(255, 255, 255, 0.9);
     --rs-loader-ring-inverse: rgba(247, 247, 250, 0.3);
     --rs-loader-backdrop-inverse: rgba(39, 44, 54, 0.83);
+    --rs-message-success-bg: rgba(200, 240, 199, 0.6);
+    --rs-message-info-bg: rgba(197, 231, 252, 0.6);
+    --rs-message-warning-bg: rgba(255, 233, 194, 0.6);
+    --rs-message-error-bg: rgba(252, 207, 207, 0.6);
     --rs-dropdown-item-bg-hover: rgba(204, 233, 255, 0.5);
     --rs-menuitem-active-bg: rgba(204, 233, 255, 0.5);
     --rs-listbox-option-hover-bg: rgba(204, 233, 255, 0.5);
@@ -537,18 +549,22 @@
   --rs-message-success-text: #fff;
   --rs-message-success-icon: #fff;
   --rs-message-success-bg: var(--rs-green-500);
+  --rs-message-success-border: var(--rs-green-800);
   --rs-message-info-header: #fff;
   --rs-message-info-text: #fff;
   --rs-message-info-icon: #fff;
   --rs-message-info-bg: var(--rs-blue-500);
+  --rs-message-info-border: var(--rs-blue-800);
   --rs-message-warning-header: var(--rs-gray-900);
   --rs-message-warning-text: var(--rs-gray-900);
   --rs-message-warning-icon: var(--rs-gray-900);
   --rs-message-warning-bg: var(--rs-yellow-500);
+  --rs-message-warning-border: var(--rs-yellow-800);
   --rs-message-error-header: #fff;
   --rs-message-error-text: #fff;
   --rs-message-error-icon: #fff;
   --rs-message-error-bg: var(--rs-red-500);
+  --rs-message-error-border: var(--rs-red-800);
   --rs-tooltip-bg: var(--rs-gray-500);
   --rs-tooltip-text: var(--rs-gray-0);
   --rs-progress-bg: var(--rs-gray-700);
@@ -4352,24 +4368,26 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-check-tree.rs-check-tree-virtualized {
   overflow: hidden;
 }
-.rs-check-tree .rs-check-item .rs-checkbox-checker > label {
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker > label {
   text-align: left;
   position: relative;
   margin: 0;
-  padding: 8px 12px;
-  padding-left: 50px;
-}
-.rs-check-tree .rs-check-item .rs-checkbox-checker > label::before {
-  content: '';
-  position: absolute;
-  width: 46px;
-  height: 100%;
-  top: 0;
-  margin-left: -52px;
+  padding: 1px 0 1px 42px;
 }
-.rs-check-tree .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
   left: 20px;
 }
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-check-tree-node-label-content {
+  padding: 6px 8px;
+  width: auto;
+}
+.rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
+  outline-offset: 2px;
+}
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 32px;
 }
@@ -4388,6 +4406,20 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-check-tree-node .rs-check-item {
   display: inline-block;
 }
+.rs-check-tree-node .rs-check-item:hover,
+.rs-check-tree-node .rs-check-item:focus,
+.rs-check-tree-node .rs-check-item-focus {
+  background-color: transparent !important;
+}
+.rs-check-tree-node .rs-check-item:hover .rs-check-tree-node-label-content,
+.rs-check-tree-node .rs-check-item:focus .rs-check-tree-node-label-content,
+.rs-check-tree-node .rs-check-item-focus .rs-check-tree-node-label-content {
+  background-color: rgb(from #cce9ff r g b / 50%);
+  background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+  border-radius: 6px;
+}
 .rs-picker-popup .rs-check-tree-node .rs-check-item {
   display: block;
 }
@@ -4482,10 +4514,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-picker-popup.rs-check-tree-menu {
   padding-top: 12px;
 }
-.rs-picker-popup .rs-check-tree {
+.rs-check-tree {
   padding-right: 12px;
 }
-.rs-picker-popup .rs-check-tree-node > .rs-check-tree-node-label .rs-check-tree-node-text-wrapper {
+.rs-check-tree-node > .rs-check-tree-node-label .rs-check-tree-node-label-content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -8288,6 +8320,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -9434,6 +9468,7 @@ textarea.rs-picker-search-input {
   position: relative;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
+  overflow: hidden;
 }
 .rs-message-container {
   padding: 20px;
@@ -9442,14 +9477,36 @@ textarea.rs-picker-search-input {
   display: -ms-flexbox;
   display: flex;
 }
-.rs-message-icon-wrapper {
+.rs-message-centered .rs-message-container {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  text-align: center;
+  gap: 20px;
+}
+.rs-message-centered .rs-message-icon {
+  -ms-flex-item-align: center !important;
+      align-self: center !important;
+}
+.rs-message-centered .rs-message-icon .rs-icon {
+  font-size: 40px !important;
+}
+.rs-message-centered.rs-message-bordered {
+  border-left-width: 1px !important;
+  border-top-width: 4px !important;
+}
+.rs-message-icon {
   -ms-flex-item-align: center;
       align-self: center;
   font-size: 0;
   margin-right: 10px;
 }
-.rs-message-icon-wrapper .rs-icon {
-  font-size: 12px;
+.rs-message-icon .rs-icon {
+  font-size: 16px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -9463,6 +9520,7 @@ textarea.rs-picker-search-input {
   color: #272c36;
   color: var(--rs-text-heading);
   line-height: 1.71428571;
+  font-weight: bold;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9475,11 +9533,18 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-text-primary);
 }
-.rs-message.rs-message-has-title .rs-message-icon-wrapper {
+.rs-message-body ul,
+.rs-message-body ol {
+  margin: 0;
+  padding: 0;
+  -webkit-padding-start: 16px;
+          padding-inline-start: 16px;
+}
+.rs-message.rs-message-has-title .rs-message-icon {
   -ms-flex-item-align: start;
       align-self: flex-start;
 }
-.rs-message.rs-message-has-title .rs-message-icon-wrapper .rs-icon {
+.rs-message.rs-message-has-title .rs-message-icon .rs-icon {
   font-size: 24px;
   line-height: 1;
 }
@@ -9506,9 +9571,25 @@ textarea.rs-picker-search-input {
   left: 0;
   width: 100%;
   border-radius: 0;
+  z-index: 1090;
 }
 .rs-message-success {
-  background-color: #eeffed;
+  background-color: #fff;
+}
+.rs-message-success.rs-message-bordered {
+  border: 1px solid #4caf50;
+  border: 1px solid var(--rs-message-success-border);
+  border-left-width: 4px;
+}
+.rs-message-success.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #a5e0a4;
+  border: 4px solid var(--rs-message-success-icon-border);
+  border-radius: 50%;
+}
+.rs-message-success .rs-message-container {
+  background-color: rgb(from #c8f0c7 r g b / 60%);
   background-color: var(--rs-message-success-bg);
 }
 .rs-message-success .rs-message-header {
@@ -9526,16 +9607,32 @@ textarea.rs-picker-search-input {
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-success .rs-message-icon-wrapper > .rs-icon,
+.rs-message-success .rs-message-icon > .rs-icon,
 .rs-message-success .rs-btn-close {
   color: #4caf50;
   color: var(--rs-message-success-icon);
 }
 .rs-theme-high-contrast .rs-message-success {
+  border: 1px solid #4caf50;
   border: 1px solid var(--rs-message-success-border);
 }
 .rs-message-info {
-  background-color: #f0f9ff;
+  background-color: #fff;
+}
+.rs-message-info.rs-message-bordered {
+  border: 1px solid #2196f3;
+  border: 1px solid var(--rs-message-info-border);
+  border-left-width: 4px;
+}
+.rs-message-info.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #9bd4fa;
+  border: 4px solid var(--rs-message-info-icon-border);
+  border-radius: 50%;
+}
+.rs-message-info .rs-message-container {
+  background-color: rgb(from #c5e7fc r g b / 60%);
   background-color: var(--rs-message-info-bg);
 }
 .rs-message-info .rs-message-header {
@@ -9553,16 +9650,32 @@ textarea.rs-picker-search-input {
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-info .rs-message-icon-wrapper > .rs-icon,
+.rs-message-info .rs-message-icon > .rs-icon,
 .rs-message-info .rs-btn-close {
   color: #2196f3;
   color: var(--rs-message-info-icon);
 }
 .rs-theme-high-contrast .rs-message-info {
+  border: 1px solid #2196f3;
   border: 1px solid var(--rs-message-info-border);
 }
 .rs-message-warning {
-  background-color: #fffaf2;
+  background-color: #fff;
+}
+.rs-message-warning.rs-message-bordered {
+  border: 1px solid #ffb300;
+  border: 1px solid var(--rs-message-warning-border);
+  border-left-width: 4px;
+}
+.rs-message-warning.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #ffd991;
+  border: 4px solid var(--rs-message-warning-icon-border);
+  border-radius: 50%;
+}
+.rs-message-warning .rs-message-container {
+  background-color: rgb(from #ffe9c2 r g b / 60%);
   background-color: var(--rs-message-warning-bg);
 }
 .rs-message-warning .rs-message-header {
@@ -9580,16 +9693,32 @@ textarea.rs-picker-search-input {
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-warning .rs-message-icon-wrapper > .rs-icon,
+.rs-message-warning .rs-message-icon > .rs-icon,
 .rs-message-warning .rs-btn-close {
   color: #ffb300;
   color: var(--rs-message-warning-icon);
 }
 .rs-theme-high-contrast .rs-message-warning {
+  border: 1px solid #ffb300;
   border: 1px solid var(--rs-message-warning-border);
 }
 .rs-message-error {
-  background-color: #fff2f2;
+  background-color: #fff;
+}
+.rs-message-error.rs-message-bordered {
+  border: 1px solid #f44336;
+  border: 1px solid var(--rs-message-error-border);
+  border-left-width: 4px;
+}
+.rs-message-error.rs-message-bordered .rs-message-icon {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 4px solid #faa9a7;
+  border: 4px solid var(--rs-message-error-icon-border);
+  border-radius: 50%;
+}
+.rs-message-error .rs-message-container {
+  background-color: rgb(from #fccfcf r g b / 60%);
   background-color: var(--rs-message-error-bg);
 }
 .rs-message-error .rs-message-header {
@@ -9607,12 +9736,13 @@ textarea.rs-picker-search-input {
   padding: 8px;
   font-size: 12px;
 }
-.rs-message-error .rs-message-icon-wrapper > .rs-icon,
+.rs-message-error .rs-message-icon > .rs-icon,
 .rs-message-error .rs-btn-close {
   color: #f44336;
   color: var(--rs-message-error-icon);
 }
 .rs-theme-high-contrast .rs-message-error {
+  border: 1px solid #f44336;
   border: 1px solid var(--rs-message-error-border);
 }
 .rs-modal-backdrop {
@@ -13778,6 +13908,45 @@ textarea.rs-picker-search-input {
   margin-top: 10px;
   margin-left: 10px;
 }
+.rs-tabs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 10px;
+}
+.rs-tabs-reversed {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+.rs-tabs-vertical {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.rs-tabs-vertical .rs-tabs-content {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.rs-tabs .rs-nav-item {
+  background: none;
+}
+.rs-tabs .rs-nav-vertical {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
 .rs-picker-tag .rs-picker-toggle {
   left: 0;
   cursor: text;
@@ -14618,17 +14787,23 @@ textarea.rs-picker-search-input {
 .rs-tree-node-label {
   position: relative;
   margin: 0;
-  padding-left: 16px;
+  padding: 1px 1px 1px 16px;
   display: inline-block;
   cursor: pointer;
   font-size: 14px;
   line-height: 22px;
 }
+.rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+  outline-offset: 2px;
+}
 .rs-tree-node-label-content {
-  padding: 6px 12px 6px 8px;
+  padding: 6px 8px;
   display: inline-block;
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
+  border-radius: 6px;
 }
 .rs-tree-node-label-content:hover,
 .rs-tree-node-label-content:focus,
@@ -16741,6 +16916,8 @@ textarea.rs-picker-search-input {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,