@nutui/nutui-react 1.5.1 → 2.0.0-alpha.0

package/dist/packages/icon/icon.scss

@@ -1,132 +0,0 @@
-@import '../../styles/mixins/index.scss';
-@import '../../styles/animation/index.scss';
-
-.nut-icon {
-  display: inline-block;
-  position: relative;
-  width: $icon-width;
-  height: $icon-height;
-  line-height: $icon-line-height;
-  text-align: right;
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &__img {
-    width: $icon-width;
-    height: $icon-height;
-    object-fit: contain;
-  }
-  &-loading,
-  &-loading1 {
-    display: inline-block;
-    animation: rotation 1s infinite linear;
-  }
-
-  --animate-duration: 1s;
-  --animate-delay: 0s;
-
-  &-am-infinite {
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-direction: alternate;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-  &-am-jump {
-    -webkit-animation-name: nutJumpOne;
-    -webkit-animation-duration: var(--animate-duration);
-    -webkit-animation-timing-function: ease;
-    -webkit-animation-delay: var(--animate-delay);
-
-    animation-name: nutJumpOne;
-    animation-duration: var(--animate-duration);
-    animation-timing-function: ease;
-    animation-delay: var(--animate-delay);
-
-    &.nut-icon-am-infinite {
-      -webkit-animation-name: nutJump;
-      animation-name: nutJump;
-    }
-  }
-
-  &-am-rotate {
-    -webkit-animation-name: rotation;
-    -webkit-animation-duration: var(--animate-duration);
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-delay: var(--animate-delay);
-
-    animation-name: rotation;
-    animation-duration: var(--animate-duration);
-    animation-timing-function: linear;
-    animation-delay: var(--animate-delay);
-
-    &.nut-icon-am-infinite {
-      -webkit-animation-direction: normal;
-      animation-direction: normal;
-    }
-  }
-  &-am-blink {
-    -webkit-animation-name: nutBlink;
-    -webkit-animation-duration: var(--animate-duration);
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-delay: var(--animate-delay);
-
-    animation-name: nutBlink;
-    animation-duration: var(--animate-duration);
-    animation-timing-function: linear;
-    animation-delay: var(--animate-delay);
-  }
-  &-am-breathe {
-    -webkit-animation-name: nutBreathe;
-    -webkit-animation-duration: var(--animate-duration);
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-delay: var(--animate-delay);
-
-    animation-name: nutBreathe;
-    animation-duration: var(--animate-duration);
-    animation-timing-function: ease-in-out;
-    animation-delay: var(--animate-delay);
-  }
-  &-am-flash {
-    -webkit-animation-name: nutFlash;
-    -webkit-animation-duration: var(--animate-duration);
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-delay: var(--animate-delay);
-
-    animation-name: nutFlash;
-    animation-duration: var(--animate-duration);
-    animation-timing-function: ease-in-out;
-    animation-delay: var(--animate-delay);
-  }
-  &-am-bounce {
-    -webkit-animation-name: nutBounce;
-    -webkit-animation-duration: var(--animate-duration);
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-delay: var(--animate-delay);
-    animation-name: nutBounce;
-    animation-duration: var(--animate-duration);
-    animation-timing-function: ease-in-out;
-    animation-delay: var(--animate-delay);
-
-    &.nut-icon-am-infinite {
-      -webkit-animation-direction: normal;
-      animation-direction: normal;
-    }
-  }
-
-  &-am-shake {
-    -webkit-animation-name: nutShake;
-    -webkit-animation-duration: var(--animate-duration);
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-delay: var(--animate-delay);
-
-    animation-name: nutShake;
-    animation-duration: var(--animate-duration);
-    animation-timing-function: ease-in-out;
-    animation-delay: var(--animate-delay);
-  }
-}

package/dist/packages/image/image.scss

@@ -1,15 +1,3 @@
-.nut-theme-dark {
-  .nut-image {
-    .nut-img-loading {
-      background: $mask-color;
-    }
-
-    .nut-img-error {
-      background: $mask-color;
-    }
-  }
-}
-
 .nut-image {
   display: block;
   position: relative;

package/dist/packages/indicator/indicator.scss

@@ -1,34 +1,16 @@
-.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 {
+  &__dot {
     margin: 0 $indicator-dot-margin;
+
     &:first-child {
-      margin-left: $indicator-dot-first-margin;
+      margin-left: 0px;
     }
+
     &:last-child {
-      margin-right: $indicator-dot-last-margin;
+      margin-right: 0px;
     }
   }
+
   &__dot {
     display: inline-block;
     vertical-align: middle;
@@ -37,34 +19,34 @@
     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%;
+
+  &__active {
+    width: $indicator-dot-active-size;
+    border-radius: $indicator-border-size;
     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;
+        margin-top: 0px;
       }
+
       &:last-child {
-        margin-bottom: $indicator-dot-last-margin;
+        margin-bottom: 0px;
       }
     }
+
+    .nut-indicator__active {
+      width: $indicator-dot-size;
+      height: $indicator-dot-active-size;
+    }
   }
 }

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -30,11 +30,6 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-
-      .top-img {
-        width: 28px;
-        height: 24px;
-      }
       .top-text {
         font-size: 10px;
         color: $text-color;
@@ -47,19 +42,16 @@
     }
   }
   .nut-infinite-bottom {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-    padding-top: 16px;
+    padding-top: 6px;
     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

@@ -168,6 +168,10 @@ textarea {
       vertical-align: -2px;
     }
   }
+  &-clear-wrap {
+    width: 16px;
+    height: 16px;
+  }
   &-clear {
     width: 16px;
     height: 16px;

package/dist/packages/inputnumber/inputnumber.scss

@@ -1,29 +1,3 @@
-
-.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;
@@ -77,3 +51,13 @@
     appearance: none;
   }
 }
+
+.icon-minus {
+  --nut-icon-width: 20px;
+  --nut-icon-height: 20px;
+}
+
+.icon-plus {
+  --nut-icon-width: 20px;
+  --nut-icon-height: 20px;
+}

package/dist/packages/menuitem/menuitem.scss

@@ -38,6 +38,8 @@
 
     i {
       margin-right: $menu-item-option-i-margin-right;
+      display: inline-flex;
+      align-items: center;
     }
   }
 }

package/dist/packages/navbar/navbar.scss

@@ -1,4 +1,3 @@
-
 .nut-theme-dark {
   .nut-navbar {
     background: $dark5;
@@ -124,8 +123,8 @@
       display: inline;
     }
 
-    &-desc {
-      font-size: $cell-title-desc-font;
+    &-description {
+      font-size: $cell-description-font-size;
     }
 
     .text__title {
@@ -150,7 +149,7 @@
   }
 
   &__left {
-    font-size: $cell-desc-font;
+    font-size: $cell-extra-font-size;
     color: $gray2;
     position: absolute;
     left: 0;
@@ -163,7 +162,7 @@
   }
 
   &__right {
-    font-size: $cell-desc-font;
+    font-size: $cell-extra-font-size;
     color: $gray2;
     position: absolute;
     right: 0;

package/dist/packages/overlay/overlay.scss

@@ -1,22 +1,3 @@
-.nut-theme-dark {
-  .nut-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: $dark7;
-  }
-  .overlay-fade-enter-active {
-    .wrapper {
-      .content {
-        background-color: $dark2;
-        color: $white;
-      }
-    }
-  }
-}
-
 .nut-overlay {
   position: fixed;
   top: 0;

package/dist/packages/picker/picker.scss

@@ -88,45 +88,45 @@
   align-items: center;
   justify-content: space-between;
   padding: $picker-bar-button-padding;
-}
 
-.nut-picker__cancel-btn {
-  color: $picker-cancel-color;
-  font-size: $picker-bar-cancel-font-size;
-}
+  .nut-picker__cancel-btn {
+    color: $picker-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
+  }
 
-.nut-picker__confirm-btn {
-  color: $picker-ok-color;
-  font-size: $picker-bar-ok-font-size;
-}
+  .nut-picker__confirm-btn {
+    color: $picker-ok-color;
+    font-size: $picker-bar-ok-font-size;
+  }
 
-.nut-picker__title {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: center;
-  color: $picker-bar-title-color;
-  font-size: $picker-bar-title-font-size;
-  font-weight: $picker-bar-title-font-weight;
+  .nut-picker__title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
+  }
 }
 
 .nut-picker__panel {
   display: flex;
   position: relative;
-}
 
-.nut-picker-indicator {
-  position: absolute;
-  top: 108px;
-  height: $picker-item-height;
-  width: 100%;
-  border: $picker-item-active-line-border;
-  border-left: 0;
-  border-right: 0;
-  color: $picker-item-text-color;
-  font-size: $picker-item-text-font-size;
-  z-index: 3;
+  .nut-picker-indicator {
+    position: absolute;
+    top: 108px;
+    height: $picker-item-height;
+    width: 100%;
+    border: $picker-item-active-line-border;
+    border-left: 0;
+    border-right: 0;
+    color: $picker-item-text-color;
+    font-size: $picker-item-text-font-size;
+    z-index: 3;
+  }
 }
 
 .nut-picker-list {
@@ -135,89 +135,83 @@
   height: $picker-list-height;
   overflow: hidden;
   text-align: center;
-}
-
-.nut-picker-list-panel {
-  transform-style: preserve-3d;
-}
 
-.nut-picker-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: $picker-mask-bg-img;
-  background-position: top, bottom;
-  background-size: 100% 108px;
-  background-repeat: no-repeat;
-  z-index: 3;
-}
+  .nut-picker-list-panel {
+    transform-style: preserve-3d;
+  }
 
-.picker-view-panel {
-  height: $picker-list-height;
-  flex-grow: 1;
-}
+  .nut-picker-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: $picker-mask-bg-img;
+    background-position: top, bottom;
+    background-size: 100% 108px;
+    background-repeat: no-repeat;
+    z-index: 3;
+  }
 
-.nut-picker-content,
-.nut-picker-roller {
-  position: absolute;
-  top: 108px;
-  width: 100%;
-  height: $picker-item-height;
-}
+  .nut-picker-content,
+  .nut-picker-roller {
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: $picker-item-height;
+  }
 
-.nut-picker-content {
-  background: #fff;
-  z-index: 2;
-  overflow: hidden;
-}
+  .nut-picker-content {
+    background: #fff;
+    z-index: 2;
+    overflow: hidden;
+  }
 
-.nut-picker-item,
-.nut-picker-roller-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: $picker-item-height;
-  line-height: $picker-item-height;
-  color: $picker-item-text-color;
-  font-size: $picker-item-text-font-size;
-  text-align: center;
-}
+  .nut-picker-item,
+  .nut-picker-roller-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
+    color: $picker-item-text-color;
+    font-size: $picker-item-text-font-size;
+    text-align: center;
+  }
 
-.nut-picker-item {
-  font-size: 16px;
-  background: #fff;
-}
+  .nut-picker-item {
+    font-size: 16px;
+    background: #fff;
+  }
 
-.nut-picker-roller {
-  z-index: 1;
-  transform-style: preserve-3d;
-}
+  .nut-picker-roller {
+    z-index: 1;
+    transform-style: preserve-3d;
 
-.nut-picker-roller-item {
-  backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  color: $gray1;
-}
+    .nut-picker-roller-item {
+      backface-visibility: hidden;
+      -moz-backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      color: $gray1;
+    }
 
-.nut-picker-roller-item-title {
-  display: block;
-  width: 100%;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  color: $gray1;
-  font-size: $picker-bar-title-font-size;
-}
+    .nut-picker-roller-item-title {
+      display: block;
+      width: 100%;
+      height: 36px;
+      line-height: 36px;
+      color: $gray1;
+      font-size: $picker-bar-title-font-size;
+    }
 
-.nut-picker-roller-item-hidden {
-  visibility: hidden;
-  opacity: 0;
+    .nut-picker-roller-item-hidden {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
 }
 
 .nut-picker-placeholder {

package/dist/packages/progress/progress.scss

@@ -1,4 +1,3 @@
-
 .nut-theme-dark {
   .nut-progress {
     &-text {

package/dist/packages/radio/radio.scss

@@ -3,16 +3,20 @@
   .nut-radio {
     &__label {
       color: $dark1;
+
       &--disabled {
         color: $dark2;
       }
     }
+
     &__button {
       background: $dark4;
       color: $dark1;
+
       &--active {
         color: $primary-color;
       }
+
       &--disabled {
         color: $dark2;
         border: 1px solid $dark2;
@@ -54,6 +58,7 @@
       color: $radio-label-font-active-color;
       border: 1px solid $radio-label-button-border-color;
     }
+
     &--disabled {
       color: $radio-label-disable-color;
       border: none;
@@ -64,6 +69,7 @@
     margin-left: $radio-label-margin-left;
     font-size: $radio-label-font-size;
     color: $radio-label-font-color;
+
     &--disabled {
       color: $radio-label-disable-color;
     }
@@ -75,9 +81,11 @@
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
   }
+
   &__icon--unchecked {
     color: $radio-icon-disable-color;
   }
+
   &__icon--disable {
     color: $radio-icon-disable-color2;
   }