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

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.harmony.css

@@ -0,0 +1,201 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-step {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex: 1;
+  text-align: center;
+  font-size: 0;
+}
+.nut-step-head {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+.nut-step-line {
+  position: absolute;
+  top: calc(25px / 2);
+  left: calc(50% + (100% - 70%) / 2);
+  height: 1px;
+  width: 70%;
+  background: #888b94;
+}
+.nut-step-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+  background-color: #888b94;
+  border-color: #888b94;
+  color: #ffffff;
+  z-index: 1;
+}
+.nut-step-icon .nut-icon {
+  width: 100%;
+  height: 100%;
+}
+.nut-step-icon.is-text {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-icon.is-icon {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-main {
+  padding: 0 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-step-title {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #1a1a1a;
+}
+.nut-step-description {
+  display: block;
+  font-size: 12px;
+  color: #505259;
+}
+.nut-step:last-child .nut-step-line {
+  display: none;
+}
+.nut-step.nut-step-process .nut-step-icon {
+  background-color: #ff0f23;
+  border-color: #ff0f23;
+  color: #ffffff;
+}
+.nut-step.nut-step-process .nut-step-title {
+  color: #ff0f23;
+  font-size: 14px;
+  font-weight: 600;
+}
+.nut-step.nut-step-process .nut-step-description {
+  color: #505259;
+}
+.nut-step.nut-step-wait .nut-step-title {
+  color: #1a1a1a;
+}
+.nut-step.nut-step-wait .nut-step-description {
+  color: #505259;
+}
+.nut-step.nut-step-finish .nut-step-icon {
+  background-color: #ffffff;
+  border-color: #ff0f23;
+  color: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-line {
+  background: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-title {
+  color: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-description {
+  color: #505259;
+}
+
+.nut-steps-dot .nut-step-head {
+  margin: 10px 0;
+}
+.nut-steps-dot .nut-step-line {
+  top: 7px;
+}
+.nut-steps-dot .nut-step-icon {
+  width: 6px;
+  height: 6px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+.nut-steps-dot .nut-step-wait .nut-step-icon {
+  background-color: #888b94;
+}
+.nut-steps-dot .nut-step-finish .nut-step-icon {
+  background-color: #ffffff;
+  border-color: #ff0f23;
+}
+.nut-steps-dot .nut-step-process .nut-step-icon {
+  position: relative;
+}
+.nut-steps-dot .nut-step-process .nut-step-icon:before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -7px;
+  margin-top: -7px;
+  width: 14px;
+  height: 14px;
+  background-color: #ff0f23;
+  border-radius: 50%;
+  opacity: 0.23;
+}
+
+.nut-steps-horizontal.nut-steps-dot .nut-step-line {
+  top: 50%;
+  bottom: -50%;
+}
+
+.nut-steps-vertical .nut-step {
+  display: flex;
+  height: 33.34%;
+}
+.nut-steps-vertical .nut-step-line {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: 70%;
+  background: #888b94;
+  top: calc(25px + (100% - 70% - 12px) / 2);
+  left: calc(50% - 1px);
+}
+.nut-steps-vertical.nut-steps-dot .nut-step-line {
+  top: calc(6px + (100% - 70%) / 2);
+}
+.nut-steps-vertical .nut-step-main {
+  display: inline-block;
+  padding-left: 6%;
+  text-align: start;
+}
+
+[dir=rtl] .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+.nut-rtl .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before,
+.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before {
+  left: auto;
+  right: 50%;
+  margin-left: 0;
+  margin-right: -7px;
+}
+
+[dir=rtl] .nut-steps-vertical .nut-step-line,
+.nut-rtl .nut-steps-vertical .nut-step-line {
+  left: auto;
+  right: calc(50% - 1px);
+}
+[dir=rtl] .nut-steps-vertical .nut-step-main,
+.nut-rtl .nut-steps-vertical .nut-step-main {
+  padding-left: 0;
+  padding-right: 6%;
+}

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

@@ -0,0 +1,12 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-steps {
+  display: flex;
+}
+
+.nut-steps-vertical {
+  height: 100%;
+  flex-flow: column;
+}

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

@@ -0,0 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-sticky-fixed {
+  position: fixed;
+}

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

@@ -0,0 +1,20 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-subsidenavbar-title {
+  height: 40px;
+  padding: 10px 8px 10px 35px;
+  box-sizing: border-box;
+  background-color: #f7f8fc;
+  color: #1a1a1a;
+  box-sizing: border-box;
+}
+.nut-subsidenavbar-list.sidenavbar-show .nut-subsidenavbar-content {
+  height: auto;
+  overflow: inherit;
+}
+.nut-subsidenavbar-list.sidenavbar-hide .nut-subsidenavbar-content {
+  height: 0;
+  overflow: hidden;
+}

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

@@ -0,0 +1,33 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swipe {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+  background-color: #ffffff;
+}
+.nut-swipe-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-self: stretch;
+  width: 100%;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+  transition-property: transform;
+}
+.nut-swipe-left, .nut-swipe-right {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+}
+.nut-swipe-left {
+  left: 0;
+}
+.nut-swipe-right {
+  left: 100%;
+}

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

@@ -0,0 +1,74 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  touch-action: none;
+  position: relative;
+}
+.nut-swiper-indicator {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: absolute;
+  height: 4px;
+  width: 100%;
+  top: 89.33%;
+  z-index: 10;
+}
+.nut-swiper-indicator-vertical {
+  width: 8px;
+  height: 100%;
+  top: 0;
+  left: 12px;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 1;
+}
+
+.nut-swiper-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.nut-swiper-inner-horizontal {
+  /* #ifndef rn */
+  transform: undefined;
+  /* #ifndef rn */
+}
+.nut-swiper-inner-vertical {
+  /* #ifndef rn */
+  transform: undefined;
+  /* #ifndef rn */
+  flex-direction: column;
+}
+
+.nut-swiper-slide {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.nut-swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+[dir=rtl] .nut-swiper-indicator,
+.nut-rtl .nut-swiper-indicator {
+  left: auto;
+  right: 50%;
+  /* #ifndef rn */
+  transform: translateX(50%);
+  /* #endif */
+}
+[dir=rtl] .nut-swiper-indicator-vertical,
+.nut-rtl .nut-swiper-indicator-vertical {
+  left: auto;
+  right: 12px;
+}

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

@@ -0,0 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swiper-item {
+  height: 100%;
+}

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

@@ -0,0 +1,91 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-switch {
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 46px;
+  height: 28px;
+  line-height: 28px;
+  background-color: #ff0f23;
+  border-radius: 50px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  flex: 0 0 auto;
+}
+.nut-switch-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: calc(28px - 2px * 2);
+  width: calc(28px - 2px * 2);
+  border-radius: 50%;
+  background: #ffffff;
+  transition: left 0.3s linear;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.nut-switch-button-open {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-button-open-rtl {
+  left: 2px;
+}
+.nut-switch-button-close {
+  left: 2px;
+}
+.nut-switch-button-close-rtl {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-close {
+  background-color: #c2c4cc;
+}
+.nut-switch-close-line {
+  width: calc((28px - 2px * 2) / 2);
+  height: 2px;
+  background: #ffffff;
+  border-radius: 2px;
+}
+.nut-switch-label {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  color: #ffffff;
+  font-size: 12px;
+}
+.nut-switch-label .nut-icon {
+  color: #ffffff;
+}
+.nut-switch-label-open {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-open-rtl {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close-rtl {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-close-disabled {
+  color: #c2c4cc;
+}
+.nut-switch-label-close-disabled .nut-icon {
+  color: #c2c4cc;
+}
+.nut-switch-disabled {
+  background-color: #ffadbe;
+}
+.nut-switch-disabled-close {
+  background-color: #f2f3f5;
+}

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

@@ -0,0 +1,50 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-tabbar {
+  border: 0px;
+  box-shadow: none;
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  background: #ffffff;
+}
+.nut-tabbar-wrap {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.nut-tabbar:last-child {
+  border-right: 0;
+}
+.nut-tabbar-fixed {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+}
+.nut-tabbar-safe-area {
+  display: block;
+  width: 100%;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+[dir=rtl] .nut-tabbar:last-child,
+.nut-rtl .nut-tabbar:last-child {
+  border-right: none;
+  border-left: 0;
+}
+[dir=rtl] .nut-tabbar-fixed,
+.nut-rtl .nut-tabbar-fixed {
+  left: auto;
+  right: 0px;
+}

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

@@ -0,0 +1,59 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-tabbar-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: #1a1a1a;
+  height: 100%;
+}
+.nut-tabbar-item-icon-box {
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.nut-tabbar-item-icon-box .nut-icon {
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
+}
+.nut-tabbar-item-icon-box-nav {
+  display: block;
+  color: #505259;
+  font-size: 11px;
+  line-height: 11px;
+  margin-top: 3px;
+}
+.nut-tabbar-item-icon-box-large {
+  font-size: 16px;
+  margin-top: 0;
+  line-height: 20px;
+  font-weight: 400;
+}
+.nut-tabbar-item-active {
+  color: #ff0f23;
+}
+.nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: #ff0f23;
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
+}
+.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: #ff0f23;
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
+}