@nutui/nutui-react 1.2.0 → 1.2.1-beta.0

package/dist/packages/animatingnumbers/animatingnumbers.scss

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

package/dist/packages/animatingnumbers/countup.scss

@@ -1,13 +1,13 @@
 .nut-countup {
   &__list {
     display: inline-flex;
-    height: 32px;
+    height: $countup-height;
     overflow: hidden;
   }
   &__listitem {
-    height: 32px;
+    height: $countup-height;
     overflow: hidden;
-    font-size: 18px;
+    font-size: $countup-base-size;
     color: #000;
     font-weight: bold;
   }
@@ -17,20 +17,20 @@
     flex-direction: column;
     align-items: center;
     span {
-      height: 32px;
-      line-height: 32px;
+      height: $countup-height;
+      line-height: $countup-height;
     }
   }
 }
 // 自定义样式
 .custom-coutup {
   .nut-countup__listitem--number {
-    margin: 0 1px;
-    border-radius: 4px;
-    color: #fff;
-    background-color: #031f63;
+    margin: 0 $countup-lr-margin;
+    border-radius: $countup-border-raduis;
+    color: $countup-color;
+    background-color: $countup-bgcolor;
   }
   .nut-countup__number {
-    width: 24px;
+    width: $countup-width;
   }
 }

package/dist/packages/backtop/backtop.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-backtop {
+    &.show {
+      background: $dark-background;
+      color: $dark-color;
+    }
+  }
+}
 .nut-backtop {
   display: none;
   position: fixed;

package/dist/packages/checkbox/checkbox.scss

@@ -4,16 +4,34 @@
   &--reverse {
     flex-direction: row-reverse;
     .nut-checkbox__label {
-      margin-right: 15px;
+      margin-right: $checkbox-label-margin-left;
       margin-left: 0;
     }
   }
   &__label {
-    margin-left: 15px;
-    font-size: 16px;
+    margin-left: $checkbox-label-margin-left;
+    font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
     &--disabled {
       color: $checkbox-label-disable-color;
     }
   }
+  &__icon {
+    color: $primary-color;
+    font-size: $checkbox-icon-font-size;
+    transition-duration: 0.3s;
+    transition-property: color, border-color, background-color;
+  }
+  &__icon--unchecked {
+    color: $checkbox-icon-disable-color;
+    font-size: $checkbox-icon-font-size;
+  }
+  &__icon--indeterminate {
+    color: $primary-color;
+    font-size: $checkbox-icon-font-size;
+  }
+  &__icon--disable {
+    color: $help-color;
+    font-size: $checkbox-icon-font-size;
+  }
 }

package/dist/packages/col/col.scss

@@ -2,7 +2,7 @@
   float: left;
   box-sizing: border-box;
   word-break: break-all;
-
+  margin-bottom: $col-default-margin-bottom;
   &-gutter {
     &:last-child {
       padding-right: 0 !important;

package/dist/packages/elevator/elevator.scss

@@ -2,69 +2,101 @@
   width: 100%;
   display: block;
   position: relative;
+  overflow: hidden;
   &__list {
     display: block;
-    overflow: auto;
+    position: relative;
+    top: 1px;
+    overflow: hidden;
+    &__inner {
+      height: 100%;
+      width: 100%;
+      display: block;
+      overflow: auto;
+    }
     &__item {
       display: block;
-      font-size: 12px;
-      color: #333;
+      font-size: $elevator-list-item-font-size;
+      color: $elevator-list-item-font-color;
       &__code {
-        display: inline-flex;
+        display: flex;
         position: relative;
-        height: 35px;
-        line-height: 35px;
-        font-size: 14px;
-        color: #1a1a1a;
-        padding: 0 20px;
-        font-weight: 500;
+        height: $elevator-list-item-code-height;
+        line-height: $elevator-list-item-code-line-height;
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-item-code-font-color;
+        padding: $elevator-list-item-code-padding;
+        font-weight: $elevator-list-item-code-font-weight;
+        box-sizing: border-box;
         &::after {
           content: ' ';
-          width: 100%;
-          height: 1px;
+          width: $elevator-list-item-code-after-width;
+          height: $elevator-list-item-code-after-height;
           position: absolute;
           left: 0;
-          bottom: 7px;
-          background-color: #eeeff2;
+          bottom: 0;
+          background-color: $elevator-list-item-code-after-bg-color;
         }
       }
       &__name {
         display: flex;
         align-items: center;
-        padding: 0 20px;
-        height: 30px;
-        line-height: 30px;
+        padding: $elevator-list-item-name-padding;
+        height: $elevator-list-item-name-height;
+        line-height: $elevator-list-item-name-line-height;
+        &--highcolor {
+          color: $elevator-list-item-highcolor;
+        }
       }
     }
+    &__fixed {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      padding: $elevator-list-item-code-padding;
+      height: $elevator-list-item-code-height;
+      line-height: $elevator-list-item-code-line-height;
+      font-size: $elevator-list-item-code-font-size;
+      color: $elevator-list-fixed-color;
+      font-weight: $elevator-list-item-code-font-weight;
+      background-color: $elevator-list-fixed-bg-color;
+      box-sizing: border-box;
+      box-shadow: $elevator-list-fixed-box-shadow;
+    }
   }
   &__code--current {
-    position: absolute;
-    right: 60px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 45px;
-    height: 45px;
-    line-height: 45px;
-    border-radius: 50%;
-    background: $white;
-    box-shadow: 0 3px 3px 1px rgba(240, 240, 240, 1);
-    text-align: center;
+    position: $elevator-list-item-code-current-position;
+    right: $elevator-list-item-code-current-right;
+    top: $elevator-list-item-code-current-top;
+    transform: $elevator-list-item-code-current-transform;
+    width: $elevator-list-item-code-current-width;
+    height: $elevator-list-item-code-current-height;
+    line-height: $elevator-list-item-code-current-line-height;
+    border-radius: $elevator-list-item-code-current-border-radius;
+    background: $elevator-list-item-code-current-bg-color;
+    box-shadow: $elevator-list-item-code-current-box-shadow;
+    text-align: $elevator-list-item-code-current-text-align;
   }
   &__bars {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 15px 0;
-    background-color: #eeeff2;
-    border-radius: 6px;
-    text-align: center;
-    z-index: 10;
+    position: $elevator-list-item-bars-position;
+    right: $elevator-list-item-bars-right;
+    top: $elevator-list-item-bars-top;
+    transform: $elevator-list-item-bars-transform;
+    padding: $elevator-list-item-bars-padding;
+    background-color: $elevator-list-item-bars-background-color;
+    border-radius: $elevator-list-item-bars-border-radius;
+    text-align: $elevator-list-item-bars-text-align;
+    z-index: $elevator-list-item-bars-z-index;
     &__inner {
       &__item {
         display: block;
-        padding: 3px;
-        font-size: 10px;
+        padding: $elevator-list-item-bars-inner-item-padding;
+        font-size: $elevator-list-item-bars-inner-item-font-size;
+        &--active {
+          color: $elevator-list-item-bars-inner-item-active-color;
+        }
       }
     }
   }

package/dist/packages/input/input.scss

@@ -1,11 +1,35 @@
+.nut-theme-dark {
+  .nut-input {
+    background: $dark-background;
+    &-label {
+      color: $dark-color;
+    }
+    .input-text,
+    &__text--readonly {
+      color: $dark-color;
+    }
+  }
+}
+input,
+textarea {
+  font: inherit;
+}
+
 .nut-input {
   position: relative;
   width: 100%;
-  padding: 10px 0px 10px 25px;
+  padding: $input-padding;
   display: flex;
+  line-height: 24px;
   background: $white;
-  border-bottom: 1px solid $input-border-bottom;
-  font-size: 14px;
+  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;
     flex: 1;
@@ -47,4 +71,108 @@
     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;
+  }
+
+  &-label {
+    width: 80px;
+    overflow: hidden;
+    margin-right: 6px;
+    text-align: left;
+  }
+  &-value {
+    flex: 1;
+    vertical-align: middle;
+  }
+  &-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;
+    // line-height: var(--van-field-word-limit-line-height);
+  }
+  &-left-icon,
+  &-right-icon {
+    display: flex;
+    align-items: center;
+    font-size: 0;
+  }
+  &-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/navbar/navbar.scss

@@ -1,39 +1,132 @@
-
 .nut-navbar {
   position: relative;
   display: flex;
-  justify-content: space-around;
   align-items: center;
-  height: 44px;
-  padding: 13px 16px;
-  background: #fff;
-  box-shadow: 0 1px 7px 0 #edeef1;
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 20px;
-  &__back {
-    padding: 0 16px;
-    &:before {
-      content: '\e673';
+  height: $navbar-height;
+  box-sizing: border-box;
+  padding: $navbar-padding;
+  background: $navbar-background;
+  box-shadow: $navbar-box-shadow;
+  font-size: $navbar-title-base-font;
+  color: $navbar-color;
+  margin-bottom: $navbar-margin-bottom;
+  overflow: hidden;
+  &:active::before {
+    opacity: 0.1;
+  }
+  &--border {
+    border-bottom: 1px solid #eee;
+  }
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+  &--placeholder {
+    display: inline-block;
+    width: 100%;
+  }
+  &--safe-area-inset-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+  &--clickable {
+    &::before {
       position: absolute;
+      content: ' ';
       top: 50%;
       left: 50%;
+      width: 100%;
+      height: 100%;
+      background-color: $black;
+      border: inherit;
+      border-color: $black;
+      border-radius: inherit;
       transform: translate(-50%, -50%);
+      opacity: 0;
     }
   }
-  &__icon {
-    display: flex;
-    margin-left: 16px;
-    .nut-icon:before {
-      max-width: 100%;
+
+  .nutui-iconfont {
+    .nut-icon-left {
+      text-align: left;
     }
   }
+
   &__title {
-    flex: 1;
+    min-width: 53%;
+    margin: 0 auto;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .title {
+      min-width: $navbar-title-width;
+      font-size: $navbar-title-font;
+      font-weight: $navbar-title-font-weight;
+      color: $navbar-title-font-color;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+    }
+    &.icon {
+      .icon {
+        margin: $navbar-title-icon-margin;
+      }
+    }
     .nut-icon {
-      vertical-align: middle;
-      margin-top: -2px;
+      display: inline;
+    }
+    &-desc {
+      font-size: $cell-title-desc-font;
+    }
+    .text__title {
+      display: inline-block;
+    }
+
+    .nut-tabs__titles {
+      background: $white;
+    }
+
+    .nut-tabpane {
+      display: none;
+    }
+  }
+
+  &__title ::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__left {
+    font-size: $cell-desc-font;
+    color: $cell-desc-color;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 16px;
+  }
+  &__right {
+    font-size: $cell-desc-font;
+    color: $cell-desc-color;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    cursor: pointer;
+    .rightIcon {
+      margin-left: 16px;
+    }
+    .leftIcon {
+      margin-left: 16px;
     }
   }
 }

package/dist/packages/price/price.scss

@@ -5,7 +5,6 @@
   &__symbol {
     display: inline-block;
     font-size: $font-size-3;
-    margin-right: 4px;
   }
   &__big {
     display: inline-block;

package/dist/packages/row/row.scss

@@ -1,5 +1,19 @@
+.flex-content {
+  line-height: $row-content-line-height;
+  color: $row-content-color;
+  text-align: center;
+  border-radius: $row-content-border-radius;
+  background: $row-content-background-color;
+  &.flex-content-light {
+    background: $row-content-light-background-color;
+  }
+  &.flex-content-height {
+    height: $row-content-height;
+  }
+}
 .nut-row {
   width: 100%;
+  overflow: hidden;
   &:after {
     display: block;
     height: 0;

package/dist/packages/tabpane/tabpane.scss

@@ -9,4 +9,9 @@
   &.active {
     // overflow: visible;
   }
+
+  &.inactive {
+    overflow: visible;
+    height: 0;
+  }
 }

package/dist/packages/video/video.scss

@@ -0,0 +1,18 @@
+.nut-video {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  &-player {
+    width: 100%;
+    background: #000;
+    &:focus {
+      outline: none;
+    }
+  }
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+}