rsuite 5.51.0 → 5.52.0

package/Pagination/styles/index.less

@@ -1,7 +1,9 @@
-@import '../../styles/common';
-@import (reference) '../../Button/styles/index';
-@import './pagination-group';
-@import 'mixin';
+@import '../../styles/common.less';
+@import '../../Button/styles/index.less';
+@import '../../Divider/styles/index.less';
+@import '../../SelectPicker/styles/index.less';
+@import './pagination-group.less';
+@import './mixin.less';
 
 //
 // Pagination (multiple pages)

package/Panel/styles/index.css

@@ -0,0 +1,196 @@
+:root,
+.rs-theme-light {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-100: #f2f2f5;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-400: #c5c6c7;
+  --rs-gray-500: #a6a6a6;
+  --rs-gray-600: #8e8e93;
+  --rs-gray-800: #575757;
+  --rs-gray-900: #272c36;
+  --rs-primary-400: #59afff;
+  --rs-text-secondary: var(--rs-gray-600);
+  --rs-text-heading: var(--rs-gray-900);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-border-primary: var(--rs-gray-200);
+  --rs-btn-subtle-hover-bg: var(--rs-gray-200);
+  --rs-btn-subtle-hover-text: var(--rs-gray-800);
+  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-dark {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --rs-primary-400: #59d0ff;
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-heading: var(--rs-gray-0);
+  --rs-text-disabled: var(--rs-gray-500);
+  --rs-border-primary: var(--rs-gray-600);
+  --rs-btn-subtle-hover-bg: var(--rs-gray-500);
+  --rs-btn-subtle-hover-text: var(--rs-gray-50);
+  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-high-contrast {
+  --rs-gray-0: #fff;
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --rs-primary-400: #fffc30;
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-heading: var(--rs-gray-0);
+  --rs-text-disabled: var(--rs-gray-500);
+  --rs-border-primary: var(--rs-gray-100);
+  --rs-btn-subtle-hover-bg: transparent;
+  --rs-btn-subtle-hover-text: var(--rs-primary-400);
+  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+/* 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;
+}
+.rs-panel {
+  border-radius: 6px;
+  overflow: hidden;
+}
+.rs-panel .rs-anim-collapse {
+  display: none;
+}
+.rs-panel .rs-anim-collapse.rs-anim-in {
+  display: block;
+}
+tr.rs-panel .rs-anim-collapse.rs-anim-in {
+  display: table-row;
+}
+tbody.rs-panel .rs-anim-collapse.rs-anim-in {
+  display: table-row-group;
+}
+.rs-panel .rs-anim-collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
+  transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
+}
+.rs-panel .rs-anim-collapse {
+  display: none;
+}
+.rs-panel .rs-anim-collapse.rs-anim-in {
+  display: block;
+}
+.rs-panel-bordered {
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-border-primary);
+}
+.rs-panel-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-panel-header,
+.rs-panel-body {
+  padding: 20px;
+}
+.rs-panel-body-fill {
+  padding: 0 !important;
+}
+.rs-panel-header {
+  color: #272c36;
+  color: var(--rs-text-heading);
+  font-size: 16px;
+  line-height: 1.25;
+  font-weight: inherit;
+}
+.rs-panel-btn {
+  width: 100%;
+  border: none;
+  background: none;
+  outline: transparent solid 2px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 16px;
+  padding: 10px;
+  border-radius: 6px;
+}
+.rs-panel-btn:hover,
+.rs-panel-btn:focus,
+.rs-panel-btn:active {
+  background-color: #e5e5ea;
+  background-color: var(--rs-btn-subtle-hover-bg);
+  color: #575757;
+  color: var(--rs-btn-subtle-hover-text);
+  outline: transparent solid 2px;
+}
+.rs-panel-btn-icon {
+  -webkit-transition: -webkit-transform 0.2s ease 0s;
+  transition: -webkit-transform 0.2s ease 0s;
+  transition: transform 0.2s ease 0s;
+  transition: transform 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
+}
+.rs-panel-btn[disabled] {
+  cursor: not-allowed;
+  color: #c5c6c7;
+  color: var(--rs-text-disabled);
+  background-color: var(--rs-btn-subtle-disabled-bg);
+}
+.rs-panel-title {
+  margin: 0;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
+  text-align: left;
+}
+.rs-panel-title a {
+  color: inherit;
+}
+.rs-panel-title a:hover,
+.rs-panel-title a:focus,
+.rs-panel-title a:active {
+  text-decoration: none;
+}
+.rs-panel-header + .rs-panel-collapse .rs-panel-body,
+.rs-panel-header + .rs-panel-body {
+  padding-top: 0;
+}
+.rs-panel-collapsible > .rs-panel-header {
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s linear, border-radius 0.3s linear;
+  transition: background-color 0.3s linear, border-radius 0.3s linear;
+  position: relative;
+  padding: 10px;
+}
+.rs-panel-collapsible > .rs-panel-header > .rs-icon {
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
+  position: absolute;
+  top: 24px;
+  right: 20px;
+  -webkit-transition: -webkit-transform 0.3s linear;
+  transition: -webkit-transform 0.3s linear;
+  transition: transform 0.3s linear;
+  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
+}
+
+/*# sourceMappingURL=index.css.map */

package/Panel/styles/index.less

@@ -1,13 +1,23 @@
-@import '../../styles/common';
+@import '../../styles/common.less';
 
 //
 // Panel
 // --------------------------------------------------
 
 .rs-panel {
+  @import '../../Animation/styles/collapse.less';
+
   border-radius: 6px;
   overflow: hidden;
 
+  .rs-anim-collapse {
+    display: none;
+
+    &.rs-anim-in {
+      display: block;
+    }
+  }
+
   &-bordered {
     border: 1px solid var(--rs-border-primary);
   }
@@ -30,11 +40,43 @@
     color: var(--rs-text-heading);
     font-size: 16px;
     line-height: unit((@line-height-computed / 16px));
+    font-weight: inherit;
+  }
+
+  &-btn {
+    width: 100%;
+    border: none;
+    background: none;
+    outline: transparent solid 2px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    padding: 10px;
+    border-radius: 6px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--rs-btn-subtle-hover-bg);
+      color: var(--rs-btn-subtle-hover-text);
+      outline: transparent solid 2px;
+    }
+
+    &-icon {
+      transition: transform 0.2s ease 0s;
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      color: var(--rs-text-disabled);
+      background-color: var(--rs-btn-subtle-disabled-bg);
+    }
   }
 
   &-title {
     margin: 0;
-
+    flex: 1 1 0%;
+    text-align: left;
     a {
       color: inherit;
 
@@ -57,6 +99,7 @@
     cursor: pointer;
     transition: background-color 0.3s linear, border-radius 0.3s linear;
     position: relative;
+    padding: 10px;
 
     > .rs-icon {
       color: var(--rs-text-secondary);

package/PanelGroup/styles/index.css

@@ -0,0 +1,54 @@
+:root,
+.rs-theme-light {
+  --rs-gray-100: #f2f2f5;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-600: #8e8e93;
+  --rs-border-primary: var(--rs-gray-200);
+}
+.rs-theme-dark {
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-border-primary: var(--rs-gray-600);
+}
+.rs-theme-high-contrast {
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-border-primary: var(--rs-gray-100);
+}
+/* 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;
+}
+.rs-panel-group {
+  border-radius: 6px;
+  overflow: hidden;
+}
+.rs-panel-group-bordered {
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-border-primary);
+}
+.rs-panel-group > .rs-panel {
+  border: none;
+}
+.rs-panel-group > .rs-panel + .rs-panel {
+  position: relative;
+}
+.rs-panel-group > .rs-panel + .rs-panel::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  border-top: 1px solid #e5e5ea;
+  border-top: 1px solid var(--rs-border-primary);
+  left: 20px;
+  right: 20px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/Placeholder/styles/index.css

@@ -0,0 +1,186 @@
+:root,
+.rs-theme-light {
+  --rs-gray-0: #fff;
+  --rs-gray-100: #f2f2f5;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-500: #a6a6a6;
+  --rs-gray-600: #8e8e93;
+  --rs-gray-800: #575757;
+  --rs-bg-card: var(--rs-gray-0);
+  --rs-placeholder: var(--rs-gray-100);
+  --rs-placeholder-active: var(--rs-gray-200);
+}
+.rs-theme-dark {
+  --rs-gray-0: #fff;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-bg-card: var(--rs-gray-800);
+  --rs-placeholder: var(--rs-gray-600);
+  --rs-placeholder-active: var(--rs-gray-500);
+}
+@supports not (color: rgb(from white r g b)) {
+  .rs-theme-dark {
+    --rs-placeholder-active: #484c50;
+  }
+}
+.rs-theme-high-contrast {
+  --rs-gray-0: #fff;
+  --rs-gray-100: #cbced4;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-bg-card: var(--rs-gray-800);
+  --rs-placeholder: var(--rs-gray-600);
+  --rs-placeholder-active: var(--rs-gray-500);
+}
+@supports not (color: rgb(from white r g b)) {
+  .rs-theme-high-contrast {
+    --rs-placeholder-active: #484c50;
+  }
+}
+/* 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;
+}
+.rs-placeholder {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.rs-placeholder-paragraph {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.rs-placeholder-paragraph-graph {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  width: 60px;
+  height: 60px;
+  border-radius: 2px;
+  margin-right: 20px;
+  background-color: #f2f2f5;
+  background-color: var(--rs-placeholder);
+}
+.rs-placeholder-paragraph-graph-circle {
+  border-radius: 50%;
+}
+.rs-placeholder-paragraph-graph-image {
+  width: 80px;
+  height: 60px;
+  position: relative;
+  overflow: hidden;
+}
+.rs-placeholder-paragraph-graph-image::after {
+  content: '';
+  width: 0;
+  height: 0;
+  left: 10px;
+  bottom: 10px;
+  position: absolute;
+  border-bottom: 36px solid #fff;
+  border-bottom: 36px solid var(--rs-bg-card);
+  border-left: 20px solid transparent;
+  border-right: 30px solid transparent;
+}
+.rs-placeholder-paragraph-graph-image::before {
+  content: '';
+  width: 0;
+  height: 0;
+  left: 40px;
+  bottom: 10px;
+  position: absolute;
+  border-bottom: 22px solid #fff;
+  border-bottom: 22px solid var(--rs-bg-card);
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+}
+.rs-placeholder-paragraph-graph-image .rs-placeholder-paragraph-graph-inner {
+  width: 12px;
+  height: 12px;
+  right: 18px;
+  top: 10px;
+  border-radius: 50%;
+  background: #fff;
+  background: var(--rs-bg-card);
+  position: absolute;
+}
+.rs-placeholder-paragraph-rows {
+  width: 100%;
+}
+.rs-placeholder-paragraph-rows > p {
+  background-color: #f2f2f5;
+  background-color: var(--rs-placeholder);
+}
+.rs-placeholder-grid-col {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+}
+.rs-placeholder-grid-col > p {
+  background-color: #f2f2f5;
+  background-color: var(--rs-placeholder);
+}
+.rs-placeholder-grid-col:first-child {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.rs-placeholder-graph {
+  display: inline-block;
+  width: 100%;
+  background-color: #f2f2f5;
+  background-color: var(--rs-placeholder);
+}
+.rs-placeholder-active.rs-placeholder-graph,
+.rs-placeholder-active .rs-placeholder-paragraph-graph-image,
+.rs-placeholder-active .rs-placeholder-grid-col > p,
+.rs-placeholder-active .rs-placeholder-paragraph-rows > p {
+  background: linear-gradient(-45deg, #f2f2f5 25%, #e5e5ea 37%, #f2f2f5 63%);
+  background: linear-gradient(-45deg, var(--rs-placeholder) 25%, var(--rs-placeholder-active) 37%, var(--rs-placeholder) 63%);
+  background-size: 400% 100% !important;
+  -webkit-animation: placeholder-active 1.5s ease infinite;
+          animation: placeholder-active 1.5s ease infinite;
+}
+@-webkit-keyframes placeholder-active {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+@keyframes placeholder-active {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+/*# sourceMappingURL=index.css.map */