@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.2

package/dist/packages/step/step.scss

@@ -0,0 +1,274 @@
+
+.nut-theme-dark {
+  .nut-step {
+    &.nut-step-wait {
+      .nut-step-main {
+        .nut-step-title {
+          color: $dark2;
+        }
+
+        .nut-step-content {
+          color: $dark2;
+        }
+      }
+
+      .nut-step-head {
+        color: $dark2;
+      }
+
+      .nut-step-icon.is-text {
+        background-color: $dark5;
+      }
+
+      .nut-step-icon.is-icon {
+        background-color: $dark5;
+
+        .nut-icon {
+          color: $dark2;
+        }
+      }
+
+      .nut-step-content {
+        color: $dark2;
+      }
+    }
+  }
+
+  .nut-step-process,
+  .nut-step-finish {
+    .nut-step-main {
+      .nut-step-content {
+        color: $dark1;
+      }
+    }
+  }
+}
+
+.nut-step {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex: 1;
+  text-align: center;
+  font-size: 0;
+
+  &-head {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-bottom: $steps-base-icon-margin-bottom;
+  }
+
+  // 计算方法：left = calc(50% + (100% - $steps-base-line-width) / 2)
+  // 如 width=70%时，left=65%; width=100%,left=50%;
+  &-line {
+    position: absolute;
+    top: calc($steps-base-icon-height / 2);
+    left: calc(50% + (100% - $steps-base-line-width) / 2);
+    // right: calc(0 - $steps-base-line-width / 2);
+    height: $steps-base-line-height;
+    width: $steps-base-line-width;
+    background: $steps-base-line-background;
+  }
+
+  &-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $steps-base-icon-width;
+    height: $steps-base-icon-height;
+    line-height: $steps-base-icon-line-height;
+    font-size: $steps-base-icon-font-size;
+    background-color: $steps-wait-icon-bg-color;
+    border-color: $steps-wait-icon-bg-color;
+    color: $steps-wait-icon-color;
+    z-index: 1;
+
+    .nut-icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.is-text {
+      border-radius: 50%;
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    &.is-icon {
+      border-radius: 50%;
+      border-width: 1px;
+      border-style: solid;
+    }
+  }
+
+  &-main {
+    display: inline-block;
+    padding-left: 10%;
+    padding-right: 10%;
+    text-align: center;
+
+    .nut-step-content {
+      color: $title-color;
+    }
+  }
+
+  &-title {
+    display: block;
+    margin-bottom: $steps-base-title-margin-bottom;
+    font-size: $steps-base-title-font-size;
+    color: $steps-base-title-color;
+  }
+
+  &-content {
+    display: block;
+    font-size: $steps-base-content-font-size;
+    color: $steps-base-content-color;
+  }
+
+  &:last-child {
+    .nut-step-line {
+      display: none;
+    }
+  }
+
+  &.nut-step-process {
+    .nut-step-icon {
+      background-color: $steps-process-icon-bg-color;
+      border-color: $steps-process-icon-bg-color;
+      color: $steps-process-icon-color;
+    }
+
+    .nut-step-title {
+      color: $steps-process-title-color;
+      font-size: $steps-process-title-font-size;
+      font-weight: $steps-process-title-font-weight;
+    }
+
+    .nut-step-content {
+      // color: $steps-process-title-color;
+    }
+  }
+
+  &.nut-step-wait {
+    .nut-step-title {
+      color: $steps-wait-title-color;
+    }
+
+    .nut-step-content {
+      color: $steps-wait-content-color;
+    }
+  }
+
+  &.nut-step-finish {
+    .nut-step-icon {
+      background-color: $steps-finish-icon-bg-color;
+      border-color: $steps-finish-icon-color;
+      color: $steps-finish-icon-color;
+    }
+
+    .nut-step-line {
+      background: $steps-finish-line-background;
+    }
+
+    .nut-step-title {
+      color: $steps-finish-title-color;
+    }
+
+    .nut-step-content {
+      // color: $steps-finish-content-color;
+    }
+  }
+}
+
+.nut-steps-dot {
+  .nut-step-head {
+    margin-top: 7px;
+    margin-bottom: 0;
+  }
+
+  .nut-step-line {
+    top: 7px;
+  }
+
+  .nut-step-icon {
+    width: $steps-dot-icon-width;
+    height: $steps-dot-icon-height;
+    border: $steps-dot-icon-border;
+    border-radius: 50%;
+    box-sizing: content-box;
+  }
+
+  .nut-step-wait {
+    .nut-step-title {
+      color: $steps-wait-title-color;
+    }
+
+    .nut-step-content {
+      color: $steps-wait-content-color;
+    }
+  }
+
+  .nut-step-finish {
+    .nut-step-icon {
+      background-color: $steps-finish-icon-bg-color;
+      border-color: $steps-finish-icon-color;
+    }
+  }
+
+  .nut-step-process {
+    .nut-step-icon {
+      position: relative;
+      background-color: $steps-process-icon-bg-color;
+
+      &:before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -7px;
+        margin-top: -7px;
+        width: 14px;
+        height: 14px;
+        background-color: $primary-color-end;
+        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-step-line {
+    position: absolute;
+    display: inline-block;
+    width: 1px;
+    height: 100%;
+    background: #909ca4;
+  }
+
+  .nut-step-main {
+    display: inline-block;
+    padding-left: 6%;
+    text-align: left;
+
+    .nut-step-content {
+      color: $steps-base-content-color;
+    }
+  }
+}

package/dist/packages/steps/steps.scss

@@ -0,0 +1,7 @@
+.nut-steps {
+  display: flex;
+}
+.nut-steps-vertical {
+  height: 100%;
+  flex-flow: column;
+}

package/dist/packages/sticky/sticky.scss

@@ -0,0 +1,3 @@
+.nut-sticky-fixed {
+  position: fixed;
+}

package/dist/packages/subsidenavbar/subsidenavbar.scss

@@ -0,0 +1,35 @@
+.nut-theme-dark {
+  .nut-subsidenavbar {
+    background-color: $dark5;
+    &__title {
+      background-color: $dark6;
+      color: $dark1;
+      &__text {
+        color: $dark1;
+      }
+    }
+  }
+}
+$nutSidenavbarItemHeight: 40px;
+
+.nut-subsidenavbar {
+  &__title {
+    height: $nutSidenavbarItemHeight;
+    padding: 10px 8px 10px 35px;
+    background: #f7f8fa;
+  }
+  &__list {
+    &.nutShow {
+      .nut-subsidenavbar__content {
+        height: auto;
+        overflow: inherit;
+      }
+    }
+    &.nutHide {
+      .nut-subsidenavbar__content {
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/dist/packages/swipe/swipe.scss

@@ -0,0 +1,33 @@
+.nut-swipe {
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+
+  &__wrapper {
+    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+    transition-property: transform;
+    .nut-button {
+      height: 100%;
+    }
+    .nut-cell {
+      margin: 0;
+    }
+  }
+
+  &__left,
+  &__right {
+    position: absolute;
+    top: 0;
+    height: 100%;
+  }
+
+  &__left {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &__right {
+    right: 0;
+    transform: translate3d(101%, 0, 0);
+  }
+}

package/dist/packages/swiper/swiper.scss

@@ -0,0 +1,45 @@
+.nut-swiper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  box-sizing: content-box;
+  overflow: hidden;
+  &__inner {
+    display: flex;
+    height: 100%;
+  }
+  &__vertical {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+  }
+  &__pagination {
+    display: flex;
+    position: absolute;
+    left: 50%;
+    bottom: $swiper-pagination-bottom;
+    transform: translateX(-50%);
+    i {
+      width: $swiper-pagination-item-width;
+      height: $swiper-pagination-item-height;
+      margin-right: $swiper-pagination-item-margin-right;
+      border-radius: $swiper-pagination-item-border-radius;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  &__pagination-vertical {
+    top: 50%;
+    left: 12px;
+    bottom: auto;
+    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    transform: translateY(-50%);
+    i {
+      margin-bottom: 5px;
+    }
+  }
+}

package/dist/packages/swiperitem/swiperitem.scss

@@ -0,0 +1,3 @@
+.nut-swiper-item {
+  height: 100%;
+}

package/dist/packages/switch/switch.scss

@@ -0,0 +1,87 @@
+.nut-theme-dark {
+  .nut-switch {
+    background-color: $dark4;
+
+    &.switch-close {
+      color: $dark1;
+    }
+
+    .switch-button {
+      .close {
+        color: $dark4;
+      }
+    }
+  }
+}
+
+.nut-switch {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  background-color: $primary-color;
+  border-radius: $switch-border-radius;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  flex: 0 0 auto; // 防止被压缩
+
+  &.switch-close {
+    background-color: $switch-close-bg-color;
+
+    .close-line {
+      background: $switch-close--line-bg-color;
+      border-radius: 2px;
+    }
+  }
+
+  .switch-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: $primary-text-color;
+    transition: transform 0.3s;
+
+    .nut-switch__label {
+      color: $primary-text-color;
+      font-size: $font-size-1;
+
+      &.open {
+        transform: translateX(-16px);
+      }
+
+      &.close {
+        transform: translateX(16px);
+      }
+    }
+  }
+
+  &-disable {
+    opacity: 0.6;
+  }
+
+  &-base {
+    width: $switch-width;
+    height: $switch-height;
+    line-height: $switch-line-height;
+
+    .switch-button {
+      height: $switch-inside-height;
+      width: $switch-inside-width;
+      transform: $switch-inside-close-transform;
+    }
+
+    &.switch-open {
+      .switch-button {
+        transform: $switch-inside-open-transform;
+      }
+    }
+
+    &.switch-close {
+      .close-line {
+        width: 8px;
+        height: 2px;
+      }
+    }
+  }
+}

package/dist/packages/tabbar/tabbar.scss

@@ -0,0 +1,46 @@
+.nut-theme-dark {
+  .nut-tabbar {
+    background: $dark4;
+  }
+}
+
+.nut-tabbar {
+  border: 0px;
+  box-shadow: $tabbar-box-shadow;
+  border-bottom: $tabbar-border-bottom;
+  border-top: $tabbar-border-top;
+  height: $tabbar-height;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  background: $white;
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  &__bottom {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    z-index: 888;
+  }
+
+  &__safebottom {
+    bottom: constant(safe-area-inset-bottom);
+    bottom: env(safe-area-inset-bottom);
+
+    &::after {
+      content: '';
+      z-index: 90;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      height: env(safe-area-inset-bottom);
+      width: 100%;
+      background-color: #fff;
+    }
+  }
+}

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -0,0 +1,97 @@
+
+.nut-theme-dark {
+  .nut-tabbar-item {
+    color: $dark1;
+
+    &--active {
+      color: $primary-color;
+    }
+  }
+}
+
+.nut-tabbar-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: $gray1;
+  height: 100%;
+
+  &--active {
+    color: $primary-color;
+  }
+
+  &__icon-box {
+    padding: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+    &__tips {
+      position: absolute;
+      background: $tabbar-active-color;
+      border: 1px solid $white;
+      border-radius: 7px;
+      text-align: center;
+      top: calc(50% - 6px);
+      right: calc(50% - 16px);
+      box-shadow: 0 0 0 1px $white;
+      font-size: $font-size-1;
+      color: $primary-text-color;
+      z-index: 1;
+    }
+
+    &__dot {
+      position: absolute;
+      width: 7px;
+      height: 7px;
+      border: 0;
+      border-radius: 7px;
+      padding: 0px;
+      background: $tabbar-active-color;
+      top: $tabbar-dot-top;
+      right: calc(50% - $tabbar-dot-right);
+      transform: translate(50%, -50%);
+    }
+
+    &__num {
+      line-height: 1;
+      font-size: $tabbar-item-text-font-size;
+      color: $primary-text-color;
+      padding: 1px 2px 2px 3px;
+      top: calc(-50% + 6px);
+      right: calc(-50%);
+    }
+
+    &__nums {
+      line-height: 1;
+      font-size: $tabbar-item-text-font-size;
+      color: $primary-text-color;
+      padding: 2px 1px 2px 2px;
+      top: calc(-50% + 6px);
+      right: calc(-50% - 8px);
+    }
+
+    &__icon {
+      display: block;
+      background-size: 100% 100%;
+      background-position: center center;
+    }
+
+    &--nav-word {
+      display: block;
+      font-size: $font-size-0;
+      margin-top: $tabbar-word-margin-top;
+    }
+
+    &--big-word {
+      font-size: $font-size-large;
+      margin-top: 0;
+      line-height: $tabbar-item-text-line-height;
+    }
+  }
+}