@nutui/nutui 3.3.1 → 4.0.0-beta.0

package/dist/packages/picker/index.scss

@@ -19,7 +19,6 @@
         linear-gradient(0deg, rgba(27, 27, 27, 0.9), rgba(27, 27, 27, 0.4));
       background-repeat: no-repeat;
       background-position: top, bottom;
-      background-size: 100% 108px;
       z-index: 1;
     }
 
@@ -32,19 +31,18 @@
   }
 }
 .nut-picker {
+  position: relative;
+  background: #fff;
+  border-radius: 5px;
   // 标题
   &__bar {
-    position: relative;
-    height: 56px;
-    display: block;
-    text-align: center;
-    line-height: 56px;
+    display: flex;
+    height: 46px;
+    align-items: center;
+    justify-content: space-between;
   }
 
   &__left {
-    position: absolute;
-    left: 0;
-    top: 0;
     cursor: pointer;
     padding: $picker-bar-button-padding;
     display: flex;
@@ -56,9 +54,6 @@
     font-size: $picker-bar-cancel-font-size;
   }
   &__right {
-    position: absolute;
-    right: 0;
-    top: 0;
     cursor: pointer;
     padding: $picker-bar-button-padding;
     display: flex;
@@ -73,17 +68,18 @@
   &__column {
     display: flex;
     position: relative;
-    height: 252px;
 
     &::before {
       content: '';
       position: absolute;
-      top: 108px;
-      height: 34px;
+      top: 50%;
+      height: var(--lineHeight);
       width: 100%;
       border: $picker-item-active-line-border;
       border-left: 0;
       border-right: 0;
+      transform: scale(0.9);
+      transform: translateY(-50%);
     }
   }
   &__columnitem {
@@ -93,6 +89,7 @@
   }
 
   &__title {
+    flex: 1;
     @include oneline-ellipsis();
     text-align: center;
     color: $picker-bar-title-color;
@@ -103,18 +100,12 @@
   &__wrapper {
     display: block;
   }
-  &__item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 35px;
-  }
 
   &__list {
     position: relative;
     display: block;
     width: 100%;
-    height: 252px;
+    height: 100%;
     overflow: hidden;
     text-align: center;
     -webkit-overflow-scrolling: touch;
@@ -123,11 +114,12 @@
   &-roller {
     display: block;
     position: absolute;
-    top: 108px;
+    top: 50%;
     width: 100%;
-    height: $picker-item-height;
+    height: var(--lineHeight);
     z-index: 1;
     transform-style: preserve-3d;
+    transform: translateY(-50%);
 
     &-item {
       display: block;
@@ -152,10 +144,10 @@
     }
 
     &-item-tile {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
-      height: $picker-item-height;
-      line-height: $picker-item-height;
       color: $picker-item-text-color;
       font-size: $picker-item-text-font-size;
 
@@ -188,35 +180,6 @@
       linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
     background-repeat: no-repeat;
     background-position: top, bottom;
-    background-size: 100% 108px;
     z-index: 1;
   }
-
-  &-content {
-    display: block;
-    position: absolute;
-    top: 108px;
-    width: 100%;
-    height: $picker-item-height;
-    color: $picker-item-active-text-color;
-    z-index: 2;
-    overflow: hidden;
-    border-left: 0;
-    border-right: 0;
-  }
-  &-list-panel {
-    display: block;
-    transform-style: preserve-3d;
-  }
-  &-item {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    height: $picker-item-height;
-    line-height: $picker-item-height;
-    text-align: center;
-    font-size: 16px;
-    color: $picker-columns-item-color;
-  }
 }

package/dist/packages/popover/index.js

@@ -0,0 +1,3 @@
+require('./index.scss');
+require('../popup/index.scss');
+require('../overlay/index.scss');

package/dist/packages/popover/index.scss

@@ -122,6 +122,7 @@
 
       .nut-popover-item-img {
         vertical-align: top;
+        margin-right: 3px;
       }
 
       .nut-popover-menu-item-name {
@@ -252,3 +253,9 @@
 .nut-popover-wrapper {
   display: inline-block;
 }
+
+// Taro
+.nut-popover-content-copy {
+  position: absolute;
+  top: 99999px;
+}

package/dist/packages/popup/index.js

@@ -0,0 +1,2 @@
+require('./index.scss');
+require('../overlay/index.scss');

package/dist/packages/popup/index.scss

@@ -7,7 +7,7 @@
   }
 }
 
-.popup-slide {
+.nut-popup-slide {
   &-center-enter-active,
   &-center-leave-active {
     transition-property: opacity;
@@ -40,7 +40,7 @@
   }
 }
 
-.popup-center {
+.nut-popup--center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -49,7 +49,7 @@
   }
 }
 
-.popup-bottom {
+.nut-popup--bottom {
   bottom: 0;
   left: 0;
   width: 100%;
@@ -62,7 +62,7 @@
   }
 }
 
-.popup-right {
+.nut-popup--right {
   top: 0;
   right: 0;
 
@@ -71,7 +71,7 @@
   }
 }
 
-.popup-left {
+.nut-popup--left {
   top: 0;
   left: 0;
 
@@ -80,7 +80,7 @@
   }
 }
 
-.popup-top {
+.nut-popup--top {
   top: 0;
   left: 0;
   width: 100%;

package/dist/packages/price/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/price/index.scss

@@ -2,15 +2,6 @@
   font-size: 0;
   display: inline;
   color: $primary-color;
-  &--strike {
-    > view {
-      text-decoration: line-through;
-    }
-    .nut-price--symbol,
-    .nut-price--son {
-      text-decoration: line-through;
-    }
-  }
   &--symbol {
     display: inline-block;
     font-size: $font-size-3;

package/dist/packages/progress/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/pullrefresh/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/pullrefresh/index.scss

@@ -0,0 +1,30 @@
+.nut-pullrefresh {
+  height: 100%;
+  overflow: hidden;
+  &-container {
+    position: relative;
+    height: 100%;
+
+    &-topbox {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 50px;
+      transform: translateY(-100%);
+      text-align: center;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &-icon {
+        width: 28px;
+        height: 24px;
+      }
+      &-text {
+        font-size: $font-size-2;
+        color: $text-color;
+      }
+    }
+  }
+}

package/dist/packages/radio/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/radiogroup/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/radiogroup/index.scss

@@ -1,4 +1,4 @@
-.nut-radiogroup {
+.nut-radio-group {
   display: inline-block;
   .nut-radio {
     margin-bottom: 5px;

package/dist/packages/range/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/range/index.scss

@@ -1,8 +1,8 @@
 .nut-theme-dark {
   .nut-range-container {
     background: $dark-background;
-    .min,
-    .max {
+    .nut-range-min,
+    .nut-range-max {
       color: $dark-color-gray;
     }
     .nut-range {
@@ -23,8 +23,8 @@
   width: 100%;
   height: 4px;
   align-items: center;
-  .min,
-  .max {
+  .nut-range-min,
+  .nut-range-max {
     font-size: $font-size-1;
     color: $range-tip-font-color;
     user-select: none;

package/dist/packages/rate/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/row/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/searchbar/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/shortpassword/index.js

@@ -0,0 +1,3 @@
+require('./index.scss');
+require('../popup/index.scss');
+require('../overlay/index.scss');

package/dist/packages/shortpassword/index.scss

@@ -1,16 +1,13 @@
 .nut-theme-dark {
-  .nut-shortpsd-title {
+  .nut-short-password-title {
     color: $dark-color;
   }
-  .nut-input-normalw {
-    .nut-input-real {
-      background: $dark-background3;
-    }
-    .nut-shortpsd-fake {
+  .nut-short-password-wrapper {
+    .nut-short-password__list {
       border: none;
       background: $dark-background3;
-      .nut-shortpsd-li {
-        .nut-shortpsd-icon {
+      .nut-short-password__item {
+        .nut-short-password__item-icon {
           background: $dark-color;
         }
       }
@@ -18,21 +15,13 @@
   }
 }
 
-.nut-shortpsd-title {
+.nut-short-password-title {
   line-height: 1;
   font-size: $font-size-3;
   color: $title-color;
 }
 
-.nut-shortpsd-subtitle {
-  display: block;
-  margin-top: 12px;
-  margin-bottom: 24px;
-  line-height: 1;
-  font-size: $font-size-1;
-  color: $text-color;
-}
-.nut-shortpsdWx-subtitle {
+.nut-short-password-subtitle {
   display: block;
   margin-top: 12px;
   line-height: 1;
@@ -40,81 +29,13 @@
   color: $text-color;
 }
 
-.nut-input-w {
-  padding: 24px 0 10px 0;
-  text-align: center;
-  position: relative;
-  .nut-input-site {
-    width: 247px;
-    height: 41px;
-    border-radius: 4px;
-  }
-  .nut-input-real {
-    position: absolute;
-    right: 247px;
-    width: 247px;
-    height: 41px;
-    outline: 0 none;
-    border: 0;
-    text-decoration: none;
-  }
-}
-.nut-input-normalw {
-  padding: 0px 0 10px 0;
+.nut-short-password-wrapper {
+  padding: 12px 0 10px 0;
   text-align: center;
   position: relative;
-  overflow: hidden;
-  .nut-input-site {
-    width: 247px;
-    height: 41px;
-    border-radius: 4px;
-  }
-  .nut-input-real {
-    // padding: 0 1200px 0 0; // ios必需
-    position: absolute;
-    right: 0;
-    width: 247px;
-    height: 41px;
-    outline: 0 none;
-    border: 0;
-    text-decoration: none;
-    // opacity: 0; // 安卓必需
-    // z-index: 11; // 安卓必需
-  }
-  .nut-shortpsd-fake {
-    top: 5%;
-  }
-  .nut-shortpsd-fake-taro {
-    top: 5%;
-  }
-}
-
-.nut-input-real-taro {
-  width: 0;
-  padding: 0 12px;
-  opacity: 0;
-  position: absolute;
-  bottom: 0;
-}
-
-.psd-blink {
-  display: inline-block;
 }
 
-.nut-shortpsd-fake {
-  width: 100%;
-  height: 41px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  background: $shortpassword-background-color;
-  border-radius: 4px;
-  border: 1px solid $shortpassword-border-color;
-  display: flex;
-  position: absolute;
-  left: 0;
-  top: 29%;
-}
-.nut-shortpsd-fake-taro {
+.nut-short-password__list {
   width: 100%;
   height: 41px;
   margin: 0 auto;
@@ -122,20 +43,17 @@
   border-radius: 4px;
   border: 1px solid $shortpassword-border-color;
   display: flex;
-  position: absolute;
-  left: 0;
-  top: 29%;
   z-index: 10;
 }
 
-.nut-shortpsd-li {
+.nut-short-password__item {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.nut-shortpsd-icon {
+.nut-short-password__item-icon {
   height: 6px;
   width: 6px;
   border-radius: 50%;
@@ -143,47 +61,22 @@
   display: inline-block;
 }
 
-.nut-shortpsd-message {
+.nut-short-password__message {
   margin-top: 9px;
   display: flex;
   justify-content: space-between;
   width: 247px;
 
-  .nut-shortpsd-error {
+  .nut-short-password--error {
     line-height: 1;
     font-size: $font-size-0;
     color: $shortpassword-error;
   }
 
-  .nut-shortpsd-forget {
+  .nut-short-password--forget {
     line-height: 1;
     font-size: $font-size-1;
     color: $shortpassword-forget;
     display: flex;
   }
 }
-
-.nut-shortpsd-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-
-  .nut-shortpsd-cancle {
-    background: $white;
-    border: 1px solid $primary-color;
-    border-radius: 15px;
-    padding: 8px 38px;
-    line-height: 1;
-    font-size: $font-size-2;
-    color: $primary-color;
-  }
-
-  .nut-shortpsd-sure {
-    background: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%);
-    border-radius: 15px;
-    padding: 8px 38px;
-    line-height: 1;
-    font-size: $font-size-2;
-    color: $white;
-  }
-}

package/dist/packages/sidenavbar/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/sidenavbar/index.scss

@@ -1,4 +1,4 @@
-.nut-sidenavbar {
+.nut-side-navbar {
   height: 100%;
   overflow: auto;
   display: block;

package/dist/packages/sidenavbaritem/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/sidenavbaritem/index.scss

@@ -1,5 +1,5 @@
 .nut-theme-dark {
-  .nut-sidenavbaritem {
+  .nut-side-navbar-item {
     background-color: $dark-background2;
     &__title {
       background-color: $dark-background2;
@@ -7,11 +7,12 @@
     }
   }
 }
-.nut-sidenavbaritem {
+.nut-side-navbar-item {
   height: $sidenavbar-item-height;
   line-height: $sidenavbar-item-line-height;
   display: block;
   font-size: $sidenavbar-item-font-size;
+  background-color: $sidenavbar-item-title-bg-color;
   &__title {
     color: $sidenavbar-item-title-color;
     background-color: $sidenavbar-item-title-bg-color;

package/dist/packages/signature/index.js

@@ -0,0 +1,2 @@
+require('./index.scss');
+require('../button/index.scss');

package/dist/packages/skeleton/index.js

@@ -0,0 +1,2 @@
+require('./index.scss');
+require('../avatar/index.scss');

package/dist/packages/skeleton/index.scss

@@ -1,43 +1,43 @@
-.skeleton {
+.nut-skeleton {
   display: inline-block;
   position: relative;
   overflow: hidden;
   vertical-align: middle;
-  .content {
+  .nut-skeleton-content {
     display: flex;
     .avatarClass {
       margin-right: 20px;
       background-color: $skeleton-content-avatar-background-color;
     }
 
-    .content-line {
+    .nut-skeleton-content__line {
       display: flex;
       flex-direction: column;
-      .blockTitle,
-      .blockLine {
+      .nut-skeleton-blockTitle,
+      .nut-skeleton-blockLine {
         width: 100%;
         margin-bottom: 10px;
         background-color: $skeleton-content-line-background-color;
       }
-      .blockTitle {
+      .nut-skeleton-blockTitle {
         width: 30%;
       }
       .blockLine ~ .blockLine:last-of-type {
         width: 70%;
       }
-      .blockTitle:last-of-type,
-      .blockLine:last-of-type {
+      .nut-skeleton-blockTitle:last-of-type,
+      .nut-skeleton-blockLine:last-of-type {
         margin-bottom: 0;
       }
 
-      .blockTitle--round,
-      .blockLine--round {
+      .nut-skeleton-blockTitle--round,
+      .nut-skeleton-blockLine--round {
         border-radius: 10px;
       }
     }
   }
 
-  .skeleton-animation {
+  .nut-skeleton-animation {
     position: absolute;
     top: 0;
     left: 0;

package/dist/packages/sku/index.js

@@ -0,0 +1,5 @@
+require('./index.scss');
+require('../popup/index.scss');
+require('../overlay/index.scss');
+require('../inputnumber/index.scss');
+require('../price/index.scss');

package/dist/packages/step/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/step/index.scss

@@ -29,20 +29,19 @@
     align-items: center;
     justify-content: center;
     z-index: 1;
-    .nut-icon {
-      width: 100%;
-      height: 100%;
+    &-inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-    &.is-text {
-      border-radius: 50%;
-      border-width: 1px;
-      border-style: solid;
+    .nut-icon {
+      width: $steps-base-icon-font-size;
+      height: $steps-base-icon-font-size;
     }
     &.is-icon {
       border-radius: 50%;
       border-width: 1px;
       border-style: solid;
-      background-color: transparent;
     }
   }
   &-main {

package/dist/packages/steps/index.js

@@ -0,0 +1 @@
+require('./index.scss');