@nutui/nutui-react-taro 3.0.0-beta.10 → 3.0.0-beta.12

package/dist/cjs/packages/sidebaritem/style/style.harmony.css

@@ -0,0 +1,19 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-sidebaritem {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  display: block;
+  background-color: #ffffff;
+  color: #1a1a1a;
+  padding: 24px 20px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.nut-sidebaritem.inactive {
+  overflow: visible;
+  height: 0;
+}

package/dist/cjs/packages/sidenavbar/style/style.css

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -393,20 +388,20 @@
   cursor: pointer;
 }
 .nut-sidenavbar .arrow-down {
-  border-top: 4px solid var(--nutui-gray-5);
+  border-top: 4px solid var(--nutui-color-text-help, #888b94);
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
 }
 .nut-sidenavbar .arrow-up {
-  border-bottom: 4px solid var(--nutui-gray-5);
+  border-bottom: 4px solid var(--nutui-color-text-help, #888b94);
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
 }
 .nut-sidenavbar-title {
   height: var(--nutui-sidenavbar-item-height, 40px);
   padding: var(--nutui-sidenavbar-title-padding, 10px 8px 10px 20px);
-  background: var(--nutui-sidenavbar-title-background, var(--nutui-gray-3));
-  color: var(--nutui-sidenavbar-title-color, var(--nutui-gray-7));
+  background: var(--nutui-sidenavbar-title-background, var(--nutui-color-background, #f2f3f5));
+  color: var(--nutui-sidenavbar-title-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
   transition: transform 0.5s;
 }

package/dist/cjs/packages/sidenavbar/style/style.harmony.css

@@ -0,0 +1,74 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-sidenavbar {
+  color: #1d1d21;
+  font-size: 14px;
+  height: 100%;
+  overflow: auto;
+  display: block;
+  background-color: #ffffff;
+}
+.nut-sidenavbar .arrow-icon {
+  position: absolute;
+  width: 0;
+  height: 0;
+  right: 16px;
+  top: 18px;
+  cursor: pointer;
+}
+.nut-sidenavbar .arrow-down {
+  border-top: 4px solid #888b94;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
+.nut-sidenavbar .arrow-up {
+  border-bottom: 4px solid #888b94;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
+.nut-sidenavbar-title {
+  height: 40px;
+  padding: 10px 8px 10px 20px;
+  background: #f2f3f5;
+  color: #1a1a1a;
+  box-sizing: border-box;
+  transition: transform 0.5s;
+}
+.nut-sidenavbar-content {
+  position: relative;
+  display: block;
+}
+.nut-sidenavbar-list.sidenavbar-show .nut-sidenavbar-content {
+  height: auto;
+  overflow: inherit;
+}
+.nut-sidenavbar-list.sidenavbar-hide .nut-sidenavbar-content {
+  height: 0;
+  overflow: hidden;
+}
+.nut-sidenavbar .nut-subsidenavbar-border-bt {
+  position: relative;
+}
+.nut-sidenavbar .nut-subsidenavbar-border-bt:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background: #eeeff2;
+  transform: scale(1, 0.5);
+  left: 0;
+  bottom: 0;
+}
+
+[dir=rtl] .nut-sidenavbar .arrow-icon,
+.nut-rtl .nut-sidenavbar .arrow-icon {
+  right: auto;
+  left: 16px;
+}
+[dir=rtl] .nut-sidenavbar .nut-subsidenavbar-border-bt:after,
+.nut-rtl .nut-sidenavbar .nut-subsidenavbar-border-bt:after {
+  left: auto;
+  right: 0;
+}

package/dist/cjs/packages/sidenavbaritem/style/style.css

@@ -4,11 +4,11 @@
 /* #endif */
 .nut-subsidenavbar-item {
   height: var(--nutui-sidenavbar-item-height, 40px);
-  color: var(--nutui-sidenavbar-sub-item-color, var(--nutui-gray-6));
+  color: var(--nutui-sidenavbar-sub-item-color, var(--nutui-color-text, #505259));
   padding: var(--nutui-sidenavbar-sub-item-padding, 10px 8px 10px 55px);
   box-sizing: border-box;
 }
 .nut-subsidenavbar-list {
   background-color: var(--nutui-sidenavbar-sub-list-background, #ffffff);
-  color: var(--nutui-sidenavbar-sub-list-background, var(--nutui-gray-6));
+  color: var(--nutui-sidenavbar-sub-list-background, var(--nutui-color-text, #505259));
 }

package/dist/cjs/packages/sidenavbaritem/style/style.harmony.css

@@ -0,0 +1,14 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-subsidenavbar-item {
+  height: 40px;
+  color: #505259;
+  padding: 10px 8px 10px 55px;
+  box-sizing: border-box;
+}
+.nut-subsidenavbar-list {
+  background-color: #ffffff;
+  color: #505259;
+}

package/dist/cjs/packages/signature/style/style.css

@@ -14,8 +14,8 @@
   justify-content: center;
   align-items: center;
   height: var(--nutui-signature-height, 10rem);
-  border: var(--nutui-signature-border-width, 1px) solid var(--nutui-signature-border-color, var(--nutui-black-3));
-  background-color: var(--nutui-signature-background-color, var(--nutui-gray-1));
+  border: var(--nutui-signature-border-width, 1px) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-signature-unsupport {
   font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14px));

package/dist/cjs/packages/signature/style/style.harmony.css

@@ -0,0 +1,22 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-signature .spcanvas_WEAPP {
+  width: 100%;
+  height: 100%;
+}
+.nut-signature .spcanvas_WEAPP Canvas {
+  width: 100%;
+}
+.nut-signature-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 10rem;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+.nut-signature-unsupport {
+  font-size: 14px;
+}

package/dist/cjs/packages/skeleton/style/skeleton.scss

@@ -49,15 +49,6 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-
-    /* #ifndef rn */
-    background: linear-gradient(
-      90deg,
-      hsla(0, 0%, 100%, 0),
-      hsla(0, 0%, 100%, 0.5) 50%,
-      hsla(0, 0%, 100%, 0) 80%
-    );
-    /* #endif */
     animation: nut-skeleton 2s ease-in-out 0s infinite;
   }
 
@@ -83,15 +74,6 @@
   &-animation {
     left: auto;
     right: 0;
-
-    /* #ifndef rn */
-    background: linear-gradient(
-      -90deg,
-      hsla(0, 0%, 100%, 0),
-      hsla(0, 0%, 100%, 0.5) 50%,
-      hsla(0, 0%, 100%, 0) 80%
-    );
-    /* #endif */
     animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
   }
 

package/dist/cjs/packages/skeleton/style/style.css

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 
@@ -148,12 +148,12 @@
 }
 .nut-skeleton-content-avatar {
   margin-right: 20px;
-  background: var(--nutui-skeleton-background, var(--nutui-gray-3)) !important;
+  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5)) !important;
 }
 .nut-skeleton-content-block {
   width: var(--nutui-skeleton-line-width, 100%);
   height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-gray-3));
+  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
   margin-top: 10px;
   border-radius: var(--nutui-skeleton-line-border-radius, 0);
 }
@@ -168,7 +168,7 @@
 .nut-skeleton-content-title {
   width: 30%;
   height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-gray-3));
+  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-skeleton-content-block-last-child {
   width: 55%;
@@ -180,9 +180,6 @@
   width: 100%;
   height: 100%;
   z-index: 1;
-  /* #ifndef rn */
-  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
-  /* #endif */
   animation: nut-skeleton 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton {
@@ -203,9 +200,6 @@
 .nut-rtl .nut-skeleton-animation {
   left: auto;
   right: 0;
-  /* #ifndef rn */
-  background: linear-gradient(-90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
-  /* #endif */
   animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton-rtl {

package/dist/cjs/packages/skeleton/style/style.harmony.css

@@ -0,0 +1,79 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-skeleton {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  vertical-align: middle;
+  width: 100%;
+}
+.nut-skeleton-content {
+  display: flex;
+  flex-direction: row;
+}
+.nut-skeleton-content-avatar {
+  margin-right: 20px;
+  background: #f2f3f5 !important;
+}
+.nut-skeleton-content-block {
+  width: 100%;
+  height: 15px;
+  background: #f2f3f5;
+  margin-top: 10px;
+  border-radius: 0;
+}
+.nut-skeleton-content-line {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
+  width: 70%;
+}
+.nut-skeleton-content-title {
+  width: 30%;
+  height: 15px;
+  background: #f2f3f5;
+}
+.nut-skeleton-content-block-last-child {
+  width: 55%;
+}
+.nut-skeleton-animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  animation: nut-skeleton 2s ease-in-out 0s infinite;
+}
+@keyframes nut-skeleton {
+  0% {
+    background-position-x: -500px;
+  }
+  to {
+    background-position-x: calc(500px + 100%);
+  }
+}
+
+[dir=rtl] .nut-skeleton-content .nut-avatar,
+.nut-rtl .nut-skeleton-content .nut-avatar {
+  margin-right: 0;
+  margin-left: 20px;
+}
+[dir=rtl] .nut-skeleton-animation,
+.nut-rtl .nut-skeleton-animation {
+  left: auto;
+  right: 0;
+  animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+}
+@keyframes nut-skeleton-rtl {
+  0% {
+    background-position-x: calc(500px + 100%);
+  }
+  to {
+    background-position-x: -500px;
+  }
+}

package/dist/cjs/packages/space/style/style.harmony.css

@@ -0,0 +1,83 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-space {
+  display: flex;
+}
+.nut-space-item {
+  flex: none;
+}
+.nut-space-vertical {
+  flex-direction: column;
+}
+.nut-space-vertical-item {
+  margin-bottom: 8px;
+}
+.nut-space-vertical-item-last {
+  margin-bottom: 0;
+}
+.nut-space-horizontal {
+  flex-direction: row;
+}
+.nut-space-horizontal-item {
+  margin-right: 8px;
+}
+.nut-space-horizontal-item-last {
+  margin-right: 0;
+}
+.nut-space-horizontal-wrap {
+  flex-wrap: wrap;
+  margin-bottom: calc(8px * -1);
+}
+.nut-space-horizontal-wrap-item {
+  padding-bottom: 8px;
+}
+.nut-space-align-center {
+  align-items: center;
+}
+.nut-space-align-start {
+  align-items: flex-start;
+}
+.nut-space-align-end {
+  align-items: flex-end;
+}
+.nut-space-align-baseline {
+  align-items: baseline;
+}
+.nut-space-justify-center {
+  justify-content: center;
+}
+.nut-space-justify-start {
+  justify-content: flex-start;
+}
+.nut-space-justify-end {
+  justify-content: flex-end;
+}
+.nut-space-justify-between {
+  justify-content: space-between;
+}
+.nut-space-justify-around {
+  justify-content: space-around;
+}
+.nut-space-justify-evenly {
+  justify-content: space-evenly;
+}
+.nut-space-justify-stretch {
+  justify-content: stretch;
+}
+
+[dir=rtl] .nut-space-horizontal > .nut-space-item {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
+.nut-rtl .nut-space-horizontal > .nut-space-item {
+  margin-right: 0;
+  margin-left: 8px;
+}
+[dir=rtl] .nut-space-horizontal > .nut-space-item:last-child,
+.nut-rtl .nut-space-horizontal > .nut-space-item:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}

package/dist/cjs/packages/step/style/style.css

@@ -21,7 +21,7 @@
   left: calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
   height: var(--nutui-steps-base-line-height, 1px);
   width: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-gray-5));
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
 }
 .nut-step-icon {
   position: relative;
@@ -32,8 +32,8 @@
   height: var(--nutui-steps-base-icon-height, 25px);
   line-height: var(--nutui-steps-base-icon-line-height, 25px);
   font-size: var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-s, 12px));
-  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5));
-  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5));
+  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
+  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
   color: var(--nutui-steps-wait-icon-color, #ffffff);
   z-index: 1;
 }
@@ -62,48 +62,48 @@
   display: block;
   margin-bottom: var(--nutui-steps-base-title-margin-bottom, 10px);
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-steps-base-title-color, var(--nutui-gray-7));
+  color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-step-description {
   display: block;
   font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-steps-base-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-base-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step:last-child .nut-step-line {
   display: none;
 }
 .nut-step.nut-step-process .nut-step-icon {
-  background-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-6));
-  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-6));
+  background-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
   color: var(--nutui-steps-process-icon-color, #ffffff);
 }
 .nut-step.nut-step-process .nut-step-title {
-  color: var(--nutui-steps-process-title-color, var(--nutui-brand-6));
+  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23));
   font-size: var(--nutui-steps-process-title-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-step.nut-step-process .nut-step-description {
-  color: var(--nutui-steps-process-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-process-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step.nut-step-wait .nut-step-title {
-  color: var(--nutui-steps-wait-title-color, var(--nutui-gray-7));
+  color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-step.nut-step-wait .nut-step-description {
-  color: var(--nutui-steps-wait-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step.nut-step-finish .nut-step-icon {
   background-color: var(--nutui-steps-finish-icon-bg-color, #ffffff);
-  border-color: var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-brand-6)));
-  color: var(--nutui-steps-finish-icon-color, var(--nutui-brand-6));
+  border-color: var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
+  color: var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-line {
-  background: var(--nutui-steps-finish-line-background, var(--nutui-brand-6));
+  background: var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-title {
-  color: var(--nutui-steps-finish-title-color, var(--nutui-brand-6));
+  color: var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-description {
-  color: var(--nutui-steps-finish-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-finish-description-color, var(--nutui-color-text, #505259));
 }
 
 .nut-steps-dot .nut-step-head {
@@ -120,11 +120,11 @@
   box-sizing: content-box;
 }
 .nut-steps-dot .nut-step-wait .nut-step-icon {
-  background-color: var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5)));
+  background-color: var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94)));
 }
 .nut-steps-dot .nut-step-finish .nut-step-icon {
   background-color: var(--nutui-steps-finish-icon-bg-color, #ffffff);
-  border-color: var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-brand-6)));
+  border-color: var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
 }
 .nut-steps-dot .nut-step-process .nut-step-icon {
   position: relative;
@@ -158,7 +158,7 @@
   display: inline-block;
   width: 1px;
   height: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-gray-5));
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
   top: calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);
   left: calc(50% - 1px);
 }