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

package/dist/packages/image/image.scss

@@ -1,53 +0,0 @@
-.nut-theme-dark {
-  .nut-image {
-    .nut-img-loading {
-      background: $mask-color;
-    }
-
-    .nut-img-error {
-      background: $mask-color;
-    }
-  }
-}
-
-.nut-image {
-  display: block;
-  position: relative;
-  .nut-img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  &.nut-image-round {
-    border-radius: 50%;
-    overflow: hidden;
-  }
-
-  .nut-img-loading {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: #f7f8fa;
-    background-size: 100% 100%;
-  }
-  .nut-img-error {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: #f7f8fa;
-    background-size: 100% 100%;
-  }
-}

package/dist/packages/imagepreview/imagepreview.scss

@@ -1,51 +0,0 @@
-.nut-imagepreview {
-  width: 100%;
-
-  &-swiper {
-    height: 327px;
-    width: 100vw;
-    background-color: transparent;
-  }
-
-  &-img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  &-index {
-    position: fixed;
-    z-index: 2002;
-    top: 50px;
-    text-align: center;
-    left: 0;
-    right: 0;
-    background: transparent;
-    color: #fff;
-
-    .arrow {
-      position: absolute;
-      left: 15px;
-      transform: rotateZ(180deg);
-    }
-  }
-
-  .popup-bg {
-    background: rgba(0, 0, 0, 0.9);
-  }
-
-  .popup-box {
-    height: 100%;
-    overflow: visible;
-    background-color: transparent;
-  }
-}
-.custom-pop {
-  height: 100%;
-  background: transparent !important;
-  display: flex;
-  align-items: center;
-}
-.nut-imagepreview-swiper .nut-swiper-item {
-  height: 327px;
-}

package/dist/packages/indicator/indicator.scss

@@ -1,70 +0,0 @@
-.nut-theme-dark {
-  .nut-indicator {
-    .nut-indicator__number {
-      border: none;
-    }
-  }
-}
-.nut-indicator {
-  &__block {
-    display: block;
-    width: 100%;
-  }
-  &__align__left {
-    text-align: left;
-  }
-  &__align__right {
-    text-align: right;
-  }
-  &__align__center {
-    text-align: center;
-  }
-  &__dot,
-  &__number {
-    margin: 0 $indicator-dot-margin;
-    &:first-child {
-      margin-left: $indicator-dot-first-margin;
-    }
-    &:last-child {
-      margin-right: $indicator-dot-last-margin;
-    }
-  }
-  &__dot {
-    display: inline-block;
-    vertical-align: middle;
-    width: $indicator-dot-size;
-    height: $indicator-dot-size;
-    border-radius: 50%;
-    background-color: $indicator-dot-color;
-  }
-  &__number {
-    display: inline-block;
-    position: relative;
-    width: $indicator-size;
-    height: $indicator-size;
-    text-align: center;
-    font-size: $indicator-number-font-size;
-    line-height: $indicator-size;
-    color: $indicator-white;
-    vertical-align: middle;
-    border: 1px solid $indicator-white;
-    border-radius: 50%;
-    background-color: $indicator-color;
-    box-shadow: 0 0 1px 1px $indicator-color;
-  }
-  &__vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    .nut-indicator__dot {
-      margin: $indicator-dot-vertical-margin 0;
-      &:first-child {
-        margin-top: $indicator-dot-first-margin;
-      }
-      &:last-child {
-        margin-bottom: $indicator-dot-last-margin;
-      }
-    }
-  }
-}

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -1,69 +0,0 @@
-.nut-theme-dark {
-  .nut-infiniteloading {
-    .nut-infinite-container {
-      .infiniteLi {
-        color: $dark1;
-      }
-    }
-    .nut-infinite-bottom {
-      .bottom-box {
-        .bottom-text {
-          color: $dark2;
-        }
-      }
-    }
-  }
-}
-
-.nut-infiniteloading {
-  display: block;
-  width: 100%;
-  .nut-infinite-top {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    overflow: hidden;
-    .top-box {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      .top-img {
-        width: 28px;
-        height: 24px;
-      }
-      .top-text {
-        font-size: 10px;
-        color: $text-color;
-      }
-    }
-  }
-  .nut-infinite-container {
-    .infiniteLi {
-      color: $title-color;
-    }
-  }
-  .nut-infinite-bottom {
-    display: block;
-    width: 100%;
-    padding-top: 16px;
-    font-size: $font-size-small;
-    color: $infiniteloading-bottom-color;
-    text-align: center;
-
-    .bottom-box {
-      .bottom-img {
-        margin-right: 5px;
-        width: 28px;
-        height: 24px;
-      }
-      .bottom-text {
-        font-size: 10px;
-        color: $text-color;
-      }
-    }
-  }
-}

package/dist/packages/input/input.scss

@@ -1,203 +0,0 @@
-.nut-theme-dark {
-  .nut-input {
-    background: $dark4;
-    &-label {
-      color: $dark1;
-      .label-string {
-        color: $dark1;
-      }
-    }
-    .input-text,
-    &__text--readonly {
-      color: $dark1;
-    }
-    &-left-icon,
-    &-right-icon {
-      i {
-        color: $dark1;
-      }
-    }
-    &-inner {
-      .nut-input-clear {
-        color: $dark1;
-      }
-    }
-  }
-}
-input,
-textarea {
-  font: inherit;
-}
-
-.nut-input {
-  position: relative;
-  width: 100%;
-  padding: $input-padding;
-  display: flex;
-  line-height: 24px;
-  background: $white;
-  font-size: $input-font-size;
-  box-sizing: border-box;
-  &.center {
-    align-items: center;
-  }
-  &.nut-input-border {
-    border-bottom: 1px solid $input-border-bottom;
-  }
-  input {
-    width: 230px;
-    color: $gray1;
-    flex: 1;
-    padding: 0 10px;
-    padding-right: 35px;
-    outline: 0 none;
-    border: 0;
-    text-decoration: none;
-  }
-  .label-string {
-    color: $gray1;
-  }
-  &__clear {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    right: 15px;
-  }
-  &__disabled {
-    color: $input-disabled-color !important;
-    input:disabled {
-      background: none;
-      color: $input-disabled-color;
-      cursor: not-allowed;
-      opacity: 1;
-      -webkit-text-fill-color: $input-disabled-color;
-    }
-  }
-  &__require {
-    color: $primary-color;
-    display: inline-block;
-    margin-right: 5px;
-  }
-
-  .input-text,
-  &__text--readonly {
-    width: 90%;
-    padding: 0;
-    line-height: inherit;
-    text-align: left;
-    outline: 0 none;
-    border: 0;
-    text-decoration: none;
-    background: transparent;
-    resize: none;
-    color: $gray1;
-  }
-
-  &-label {
-    width: 80px;
-    overflow: hidden;
-    margin-right: 6px;
-    text-align: left;
-  }
-  &-value {
-    flex: 1;
-    vertical-align: middle;
-  }
-  &-right-mark {
-    .nut-input-main-con {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .nut-input-inner {
-      flex: 1;
-    }
-    .nut-input-button,
-    .nut-input-right-icon {
-      width: auto;
-    }
-  }
-  &-inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  &-box {
-    position: relative;
-    width: 100%;
-  }
-  &-disabled-mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 2;
-  }
-  &-error-message {
-    color: $input-required-color;
-    font-size: 12px;
-  }
-  &-word-limit {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 4px;
-    color: #808080;
-    font-size: 12px;
-  }
-  &-left-icon,
-  &-right-icon {
-    display: flex;
-    align-items: center;
-    font-size: 0;
-    i {
-      color: $gray1;
-    }
-  }
-  &-clear,
-  &-right-icon {
-    margin-left: 4px;
-  }
-  &-left-icon {
-    margin-right: 4px;
-  }
-  &-clear-box {
-    height: 100%;
-    .nut-input-clear {
-      vertical-align: -2px;
-    }
-  }
-  &-clear {
-    width: 16px;
-    height: 16px;
-    color: #c8c9cc;
-    cursor: pointer;
-  }
-  .nut-button {
-    margin-left: 10px;
-  }
-  &.nut-input-required {
-    &::before {
-      position: absolute;
-      left: 14px;
-      color: $input-required-color;
-      content: '*';
-    }
-  }
-  &-disabled {
-    color: $input-disabled-color !important;
-    input:disabled {
-      background: none;
-      color: $input-disabled-color;
-      cursor: not-allowed;
-      opacity: 1;
-      -webkit-text-fill-color: $input-disabled-color;
-    }
-  }
-  &-error,
-  &-error::placeholder {
-    color: $input-required-color;
-    -webkit-text-fill-color: $input-required-color;
-  }
-}

package/dist/packages/inputnumber/inputnumber.scss

@@ -1,79 +0,0 @@
-
-.nut-theme-dark {
-  .nut-inputnumber {
-    &__icon {
-      color: $dark1;
-
-      &--disabled {
-        color: $dark2;
-      }
-    }
-
-    input,
-    &__text--readonly {
-      background-color: $dark4;
-      color: $dark1;
-      border: 1px solid $dark2;
-    }
-
-    &--disabled {
-      input {
-        color: $dark3 !important;
-      }
-    }
-  }
-}
-
-.nut-inputnumber {
-  display: $inputnumber-display;
-  align-items: center;
-
-  .nut-input-minus,
-  .nut-input-add {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $inputnumber-button-width;
-    height: $inputnumber-button-height;
-    background-color: $inputnumber-button-background-color;
-    border-radius: $inputnumber-button-border-radius;
-  }
-
-  &--disabled {
-    input {
-      color: $inputnumber-icon-void-color !important;
-    }
-  }
-
-  &__icon {
-    color: $inputnumber-icon-color;
-    font-size: $inputnumber-icon-size;
-    cursor: pointer;
-
-    &--disabled {
-      color: $inputnumber-icon-disabled-color;
-      cursor: not-allowed;
-    }
-  }
-
-  input,
-  .nut-number-input,
-  &__text--readonly {
-    width: $inputnumber-input-width;
-    height: $inputnumber-input-height;
-    text-align: center;
-    outline: none;
-    border: $inputnumber-input-border;
-    margin: $inputnumber-input-margin;
-    color: $inputnumber-input-font-color;
-    background-color: $inputnumber-input-background-color;
-    border-radius: $inputnumber-input-border-radius;
-  }
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button,
-  .nut-number-input::-webkit-outer-spin-button,
-  .nut-number-input::-webkit-inner-spin-button {
-    appearance: none;
-  }
-}

package/dist/packages/layout/layout.scss

@@ -1,2 +0,0 @@
-.nut-layout {
-}

package/dist/packages/menu/menu.scss

@@ -1,75 +0,0 @@
-@import '../../styles/mixins/text-ellipsis.scss';
-
-.nut-theme-dark {
-  .nut-menu {
-    .nut-menu__bar {
-      background-color: $dark6;
-      .nut-menu__item {
-        color: $gray6;
-      }
-    }
-  }
-}
-
-.nut-menu {
-  &.scroll-fixed {
-    position: fixed;
-    top: $menu-scroll-fixed-top;
-    z-index: $menu-scroll-fixed-z-index;
-    width: 100%;
-  }
-
-  .nut-menu-relative {
-    position: relative;
-  }
-
-  .nut-menu__bar {
-    position: relative;
-    display: flex;
-    line-height: $menu-bar-line-height;
-    background-color: $white;
-    box-shadow: $menu-bar-box-shadow;
-
-    &.opened {
-      z-index: $menu-bar-opened-z-index;
-    }
-
-    .nut-menu__item {
-      flex: 1;
-      text-align: center;
-      font-size: $menu-item-font-size;
-      color: $menu-item-text-color;
-      min-width: 0;
-
-      &.active {
-        color: $menu-item-active-text-color;
-      }
-
-      &.disabled {
-        color: $menu-item-disabled-color;
-      }
-
-      .nut-menu__title-icon {
-        transition: all 0.2s linear;
-      }
-
-      .nut-menu__title {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        max-width: 100%;
-
-        .nut-menu__title-text {
-          @include text-ellipsis;
-          display: block;
-          padding-left: $menu-title-text-padding-left;
-          padding-right: $menu-title-text-padding-right;
-        }
-
-        &.active .nut-menu__title-icon {
-          transform: rotate(180deg);
-        }
-      }
-    }
-  }
-}

package/dist/packages/menuitem/menuitem.scss

@@ -1,120 +0,0 @@
-
-.nut-theme-dark {
-  .nut-menu-item__content {
-    background: $dark6;
-
-    .nut-menu-item__option {
-      color: $dark1;
-    }
-  }
-}
-
-.nut-menu-item__content {
-  padding: $menu-item-content-padding;
-  max-height: $menu-item-content-max-height;
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  background: $menu-item-content-bg-color;
-
-  &_fixed {
-    width: 100%;
-    opacity: 0;
-    position: fixed;
-  }
-
-  .nut-menu-item__option {
-    color: $title-color;
-    font-size: $font-size-2;
-    padding-top: $menu-item-option-padding-top;
-    padding-bottom: $menu-item-option-padding-bottom;
-    display: flex;
-    align-items: center;
-
-    &.active {
-      font-weight: 500;
-      color: $menu-item-active-text-color;
-    }
-
-    i {
-      margin-right: $menu-item-option-i-margin-right;
-    }
-  }
-}
-
-.nut-menu-item__wrap,
-.nut-menu-item__wrap-up {
-  position: absolute;
-  width: 100%;
-  z-index: 2052;
-  overflow: hidden;
-}
-
-.nut-menu-item__wrap-up {
-  bottom: $menu-bar-line-height;
-}
-
-.overlay-fade-enter-active.nut-menu__overlay {
-  top: auto;
-  z-index: 2052;
-}
-
-.nut-menu__pop.nut-popup {
-  transition: all 0s ease 0s;
-  transform: none;
-}
-
-.placeholder-element {
-  position: fixed;
-  top: -$menu-bar-line-height;
-  left: 0;
-  right: 0;
-  z-index: $menu-bar-opened-z-index;
-  background-color: transparent;
-
-  &.up {
-    bottom: -$menu-bar-line-height;
-  }
-}
-
-.menu-item-enter {
-  opacity: 0;
-  transform: translate(0, -30px);
-}
-
-.menu-item-enter-done {
-  opacity: 1;
-  transform: translate(0, 0);
-  transition: all 100ms;
-}
-
-.menu-item-exit {
-  opacity: 1;
-  transition: all 100ms;
-}
-
-.menu-item-exit-done {
-  opacity: 0;
-  transition: all 100ms;
-}
-
-.menu-item-up-enter {
-  opacity: 0;
-  transform: translate(0, 30px);
-}
-
-.menu-item-up-enter-done {
-  opacity: 1;
-  transform: translate(0, 0);
-  transition: all 100ms;
-}
-
-.menu-item-up-exit {
-  opacity: 1;
-  transition: all 100ms;
-}
-
-.menu-item-up-exit-done {
-  opacity: 0;
-  transition: all 100ms;
-}