rsuite 5.46.0 → 5.47.0

package/dist/rsuite.css

@@ -305,8 +305,8 @@
   --rs-avatar-text: var(--rs-gray-0);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-50);
-  --rs-tag-close: var(--rs-color-red);
   --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);
@@ -538,7 +538,7 @@
   --rs-progress-bar-success: var(--rs-color-green);
   --rs-progress-bar-fail: var(--rs-color-red);
   --rs-placeholder: var(--rs-gray-600);
-  --rs-placeholder-active: hsl(from var(--rs-gray-600) h s calc(l + l * 0.2));
+  --rs-placeholder-active: var(--rs-gray-500);
   --rs-breadcrumb-item-active-text: #fff;
   --rs-dropdown-divider: var(--rs-gray-600);
   --rs-dropdown-item-bg-hover: var(--rs-gray-600);
@@ -647,8 +647,8 @@
   --rs-avatar-text: var(--rs-gray-0);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
-  --rs-tag-close: var(--rs-color-red);
   --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);
@@ -880,7 +880,7 @@
   --rs-progress-bar-success: var(--rs-color-green);
   --rs-progress-bar-fail: var(--rs-color-red);
   --rs-placeholder: var(--rs-gray-600);
-  --rs-placeholder-active: hsl(from var(--rs-gray-600) h s calc(l + l * 0.2));
+  --rs-placeholder-active: var(--rs-gray-500);
   --rs-breadcrumb-item-active-text: #fff;
   --rs-dropdown-divider: var(--rs-gray-600);
   --rs-dropdown-item-bg-hover: var(--rs-gray-600);
@@ -992,8 +992,8 @@
   --rs-avatar-text: var(--rs-gray-0);
   --rs-badge-bg: var(--rs-red-500);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
-  --rs-tag-close: var(--rs-color-red);
   --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);
@@ -9486,6 +9486,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-success-text);
 }
+.rs-message-success .rs-btn-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-success .rs-message-icon-wrapper > .rs-icon,
 .rs-message-success .rs-btn-close {
   color: #4caf50;
@@ -9506,6 +9513,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-info-text);
 }
+.rs-message-info .rs-btn-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-info .rs-message-icon-wrapper > .rs-icon,
 .rs-message-info .rs-btn-close {
   color: #2196f3;
@@ -9526,6 +9540,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-warning-text);
 }
+.rs-message-warning .rs-btn-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-warning .rs-message-icon-wrapper > .rs-icon,
 .rs-message-warning .rs-btn-close {
   color: #ffb300;
@@ -9546,6 +9567,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-error-text);
 }
+.rs-message-error .rs-btn-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-error .rs-message-icon-wrapper > .rs-icon,
 .rs-message-error .rs-btn-close {
   color: #f44336;
@@ -10322,6 +10350,13 @@ textarea.rs-picker-search-input {
 .rs-notification.rs-notification-hiding ~ .rs-notification {
   margin-top: 0;
 }
+.rs-notification .rs-btn-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-notification-success .rs-notification-content .rs-notification-title + .rs-notification-description {
   margin-left: 34px;
 }
@@ -11843,15 +11878,6 @@ textarea.rs-picker-search-input {
 .rs-picker-toggle-clean.rs-btn-close {
   padding: 4px 0;
 }
-.rs-picker-toggle-clean:hover {
-  color: #f44336;
-  color: var(--rs-state-error);
-}
-.rs-picker-toggle-clean:hover svg path {
-  stroke: #f44336;
-  stroke: var(--rs-state-error);
-  stroke-width: 1;
-}
 .rs-picker-date .rs-picker-toggle-clean,
 .rs-picker-daterange .rs-picker-toggle-clean {
   right: 38px;
@@ -14823,11 +14849,8 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-tag-icon-close {
   position: absolute;
-  font-size: 12px;
-}
-.rs-tag-default .rs-tag-icon-close:hover {
-  color: #f44336;
-  color: var(--rs-tag-close);
+  top: 0;
+  right: 0;
 }
 .rs-tag-group {
   margin: -10px 0 0 -10px;
@@ -16084,7 +16107,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-uploader-text .rs-uploader-file-item-btn-remove {
   position: absolute;
-  font-size: 12px;
+  font-size: 14px;
   top: 12px;
   right: 12px;
   color: #8e8e93;
@@ -16941,20 +16964,26 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
           animation-name: notificationMoveOut;
 }
 .rs-btn-close {
-  background: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 8px 8px 0;
-  font-size: 12px;
-  line-height: 1;
   border: none;
   outline: none !important;
+  background: transparent;
+  line-height: 1;
   cursor: pointer;
 }
 .rs-btn-close .rs-icon {
   vertical-align: bottom;
 }
+.rs-btn-close:hover,
+.rs-btn-close:focus {
+  color: #f44336;
+  color: var(--rs-close-button-hover-color);
+}
+.rs-btn-close:hover svg path,
+.rs-btn-close:focus svg path {
+  stroke: #f44336;
+  stroke: var(--rs-close-button-hover-color);
+  stroke-width: 1;
+}
 .rs-stack {
   display: -webkit-box;
   display: -ms-flexbox;