rsuite 5.50.0 → 5.52.0

package/Navbar/styles/index.less

@@ -1,5 +1,6 @@
 @import '../../styles/common';
 @import '../../Dropdown/styles/index';
+@import '../../internals/Ripple/styles/index';
 
 // NavBar
 // --------------------------------------------------

package/Notification/styles/index.css

@@ -0,0 +1,316 @@
+:root,
+.rs-theme-light {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-100: #f2f2f5;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-600: #8e8e93;
+  --rs-gray-700: #7a7a7a;
+  --rs-gray-800: #575757;
+  --rs-gray-900: #272c36;
+  --rs-color-red: #f44336;
+  --rs-color-yellow: #ffb300;
+  --rs-color-green: #4caf50;
+  --rs-color-blue: #2196f3;
+  --rs-state-success: var(--rs-color-green);
+  --rs-state-info: var(--rs-color-blue);
+  --rs-state-warning: var(--rs-color-yellow);
+  --rs-state-error: var(--rs-color-red);
+  --rs-text-primary: var(--rs-gray-800);
+  --rs-text-heading: var(--rs-gray-900);
+  --rs-border-primary: var(--rs-gray-200);
+  --rs-bg-overlay: var(--rs-gray-0);
+}
+.rs-theme-dark {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --rs-color-red: #f04f43;
+  --rs-color-yellow: #ffc757;
+  --rs-color-green: #58b15b;
+  --rs-color-blue: #1499ef;
+  --rs-state-success: var(--rs-color-green);
+  --rs-state-info: var(--rs-color-blue);
+  --rs-state-warning: var(--rs-color-yellow);
+  --rs-state-error: var(--rs-color-red);
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-heading: var(--rs-gray-0);
+  --rs-border-primary: var(--rs-gray-600);
+  --rs-bg-overlay: var(--rs-gray-700);
+}
+.rs-theme-high-contrast {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-700: #292d33;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --rs-color-red: #bd1732;
+  --rs-color-yellow: #ffc757;
+  --rs-color-green: #0d822c;
+  --rs-color-blue: #1499ef;
+  --rs-state-success: var(--rs-color-green);
+  --rs-state-info: var(--rs-color-blue);
+  --rs-state-warning: var(--rs-color-yellow);
+  --rs-state-error: var(--rs-color-red);
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-heading: var(--rs-gray-0);
+  --rs-border-primary: var(--rs-gray-100);
+  --rs-bg-overlay: var(--rs-gray-800);
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+@-webkit-keyframes notificationMoveIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@keyframes notificationMoveIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@-webkit-keyframes notificationMoveInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@keyframes notificationMoveInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@-webkit-keyframes notificationMoveInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@keyframes notificationMoveInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@-webkit-keyframes notificationMoveOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    max-height: 100px;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+@keyframes notificationMoveOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    max-height: 100px;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+.rs-notification {
+  pointer-events: auto;
+  position: relative;
+  display: inline-block;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+  border-radius: 6px;
+  background: #fff;
+  background: var(--rs-bg-overlay);
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+.rs-notification:not(.rs-toast-fade-exited) ~ .rs-notification {
+  margin-top: 10px;
+}
+.rs-theme-high-contrast .rs-notification {
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-border-primary);
+}
+.rs-notification-content {
+  padding: 20px;
+  max-width: 400px;
+}
+.rs-notification-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  color: #272c36;
+  color: var(--rs-text-heading);
+  font-size: 16px;
+  line-height: 1.5;
+}
+.rs-notification-title > p {
+  margin: 0;
+}
+.rs-notification-title .rs-icon {
+  font-size: 24px;
+  width: 24px;
+  line-height: 1;
+  margin-right: 10px;
+}
+.rs-notification-title-with-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+.rs-notification-description {
+  color: #575757;
+  color: var(--rs-text-primary);
+}
+.rs-notification-title + .rs-notification-description {
+  margin-top: 8px;
+}
+.rs-notification.rs-notification-hiding {
+  -webkit-animation: notificationMoveOut 0.3s ease-in forwards;
+          animation: notificationMoveOut 0.3s ease-in forwards;
+}
+.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;
+}
+.rs-notification-success .rs-notification-content .rs-icon {
+  color: #4caf50;
+  color: var(--rs-state-success);
+}
+.rs-notification-success .rs-notification-content .rs-icon::before {
+  vertical-align: middle;
+}
+.rs-notification-info .rs-notification-content .rs-notification-title + .rs-notification-description {
+  margin-left: 34px;
+}
+.rs-notification-info .rs-notification-content .rs-icon {
+  color: #2196f3;
+  color: var(--rs-state-info);
+}
+.rs-notification-info .rs-notification-content .rs-icon::before {
+  vertical-align: middle;
+}
+.rs-notification-warning .rs-notification-content .rs-notification-title + .rs-notification-description {
+  margin-left: 34px;
+}
+.rs-notification-warning .rs-notification-content .rs-icon {
+  color: #ffb300;
+  color: var(--rs-state-warning);
+}
+.rs-notification-warning .rs-notification-content .rs-icon::before {
+  vertical-align: middle;
+}
+.rs-notification-error .rs-notification-content .rs-notification-title + .rs-notification-description {
+  margin-left: 34px;
+}
+.rs-notification-error .rs-notification-content .rs-icon {
+  color: #f44336;
+  color: var(--rs-state-error);
+}
+.rs-notification-error .rs-notification-content .rs-icon::before {
+  vertical-align: middle;
+}
+
+/*# sourceMappingURL=index.css.map */