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

package/dist/packages/step/step.scss

@@ -1,274 +0,0 @@
-
-.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

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

package/dist/packages/sticky/sticky.scss

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

package/dist/packages/subsidenavbar/subsidenavbar.scss

@@ -1,35 +0,0 @@
-.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

@@ -1,33 +0,0 @@
-.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

@@ -1,45 +0,0 @@
-.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

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

package/dist/packages/switch/switch.scss

@@ -1,87 +0,0 @@
-.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

@@ -1,46 +0,0 @@
-.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

@@ -1,97 +0,0 @@
-
-.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;
-    }
-  }
-}