@nutui/nutui 3.3.1 → 4.0.0-beta.0

package/dist/packages/address/index.scss

@@ -8,29 +8,29 @@
       }
     }
 
-    .custom-address {
-      .nut-address-region-tab {
+    .nut-address__custom {
+      .nut-address__region {
         color: $dark-color;
       }
-      .region-con {
-        .region-group {
-          .region-item {
+      .nut-address__detail {
+        .nut-address__detail-list {
+          .nut-address__detail-item {
             color: $dark-color;
           }
         }
       }
     }
 
-    .exist-address {
-      .exist-address-group {
-        .exist-ul {
-          .exist-item {
+    .nut-address__exist {
+      .nut-address__exist-group {
+        .nut-address__exist-group-list {
+          .nut-address__exist-group-item {
             color: $dark-color;
           }
         }
       }
 
-      .choose-other {
+      .nut-address__exist-choose {
         border-top: 1px solid $dark-background;
       }
     }
@@ -46,13 +46,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 24px;
-    margin-bottom: 17px;
+    height: 68px;
     padding: 0 20px;
     text-align: center;
     font-weight: bold;
     color: #333;
-    line-height: 20px;
     &__title {
       display: block;
       color: $address-header-title-color;
@@ -61,9 +59,9 @@
   }
 
   // 请选择
-  .custom-address {
+  .nut-address__custom {
     display: block;
-    .nut-address-region-tab {
+    .nut-address__region {
       position: relative;
       margin-top: 32px;
       padding: 0 20px;
@@ -71,7 +69,7 @@
       font-size: $address-region-tab-font-size;
       color: $address-region-tab-color;
 
-      .tab-item {
+      .nut-address__region-item {
         position: relative;
         min-width: 2px;
         margin-right: 30px;
@@ -96,7 +94,7 @@
           text-overflow: ellipsis;
         }
 
-        .region-tab-line-mini {
+        .nut-address__region-line--mini {
           position: absolute;
           bottom: -10px;
           left: 0px;
@@ -113,7 +111,7 @@
         }
       }
 
-      .region-tab-line {
+      .nut-address__region-line {
         position: absolute;
         bottom: -10px;
         left: 20px;
@@ -128,16 +126,16 @@
       }
     }
 
-    .region-con {
+    .nut-address__detail {
       display: block;
       margin: 20px 20px 0;
-      .region-group {
+      .nut-address__detail-list {
         padding-top: 15px;
         height: 270px;
         overflow-y: auto;
         box-sizing: border-box;
         padding: 0;
-        .region-item {
+        .nut-address__detail-item {
           display: flex;
           align-items: center;
 
@@ -146,38 +144,34 @@
           &.active {
             font-weight: bold;
           }
-
-          .region-item-icon {
-            margin-right: 6px;
-            color: $address-icon-color !important;
-          }
-
           > div {
+            display: flex;
+            align-items: center;
             margin: 10px 0;
           }
         }
       }
     }
-    .elevator-group {
+    .nut-address__elevator-group {
       display: flex;
       margin-top: 20px;
     }
   }
 
   // 配送至
-  .exist-address {
+  .nut-address__exist {
     display: block;
     margin-top: 15px;
 
-    .exist-address-group {
+    .nut-address__exist-group {
       padding: 15px 20px 0;
       height: 279px;
       overflow-y: scroll;
 
-      .exist-ul {
+      .nut-address__exist-group-list {
         box-sizing: border-box;
         padding: 0;
-        .exist-item {
+        .nut-address__exist-group-item {
           display: flex;
           align-items: center;
           margin-bottom: 20px;
@@ -199,12 +193,12 @@
       }
     }
 
-    .choose-other {
+    .nut-address__exist-choose {
       width: 100%;
       height: 54px;
       padding: 6px 0px 0;
       border-top: 1px solid #f2f2f2;
-      .btn {
+      .nut-address__exist-choose-btn {
         width: 90%;
         height: 42px;
         line-height: 42px;
@@ -218,24 +212,6 @@
     }
   }
 
-  &-custom-buttom {
-    width: 100%;
-    height: 54px;
-    padding: 6px 0px 0;
-    border-top: 1px solid #f2f2f2;
-    .btn {
-      width: 90%;
-      height: 42px;
-      line-height: 42px;
-      margin: auto;
-      text-align: center;
-      background: $button-primary-background-color;
-      border-radius: 21px;
-      font-size: 15px;
-      color: $white;
-    }
-  }
-
   &-select-icon {
     margin-right: $address-item-margin-right;
     color: $address-icon-color !important;

package/dist/packages/addresslist/index.js

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

package/dist/packages/addresslist/index.scss

@@ -1,5 +1,5 @@
 .nut-theme-dark {
-  .nut-addresslist {
+  .nut-address-list {
     &-swipe,
     &-general {
       background-color: $dark-background2;
@@ -23,7 +23,7 @@
     }
   }
 }
-.nut-addresslist {
+.nut-address-list {
   overflow: hidden;
   &:last-child {
     padding-bottom: 84px;
@@ -132,7 +132,7 @@
     background-color: $addresslist-bg;
     box-sizing: border-box;
   }
-  .nut-addresslist__mask-bottom {
+  .nut-address-list__mask-bottom {
     position: fixed;
     top: 0;
     bottom: 0;

package/dist/packages/animate/index.js

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

package/dist/packages/animate/index.scss

@@ -1,5 +1,5 @@
 .nut-animate {
-  .nut-ani-container {
+  .nut-animate__container {
     display: inline-block;
   }
 

package/dist/packages/audio/index.js

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

package/dist/packages/audio/index.scss

@@ -1,6 +1,6 @@
 .nut-theme-dark {
-  .nut-audio-icon {
-    .nut-audio-icon-box {
+  .nut-audio__icon {
+    .nut-audio__icon--box {
       background: $dark-color;
     }
   }
@@ -8,30 +8,30 @@
 
 .nut-audio {
   padding: 0;
-  .progress-wrapper {
+  .nut-audio__progress {
     display: flex;
     align-items: center;
     width: 100%;
     margin: 0px auto;
     padding: 10px 0;
 
-    .progress-bar-wrapper {
+    .nut-audio__bar {
       flex: 1;
       margin: 0 10px;
     }
 
-    .time {
+    .nut-audio__time {
       min-width: 50px;
       font-size: 12px;
       text-align: center;
     }
   }
 
-  .nut-audio-icon {
+  .nut-audio__icon {
     position: relative;
     display: inline-block;
 
-    .nut-audio-icon-box {
+    .nut-audio__icon--box {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -40,7 +40,7 @@
       background: #fff;
       border-radius: 50%;
       box-shadow: 0 0 8px rgba($color: $text-color, $alpha: 0.5);
-      &.nut-audio-icon-stop {
+      &.nut-audio__icon--stop {
         &::after {
           position: absolute;
           left: 50%;
@@ -61,7 +61,7 @@
     margin-top: 30px;
   }
 
-  .custom-button {
+  .nut-audio__button--custom {
     width: 8px;
     height: 8px;
     color: #fff;

package/dist/packages/audiooperate/index.js

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

package/dist/packages/avatar/index.js

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

package/dist/packages/avatar/index.scss

@@ -10,24 +10,13 @@
     width: 100%;
     height: 100%;
   }
-  .icon {
+  .nut-icon {
     background-size: 100% 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
-  .nut-icon__img {
-    width: 100%;
-    height: 100%;
-  }
-  .text {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    overflow: hidden;
-  }
 }
 .nut-avatar-large {
   width: $avatar-large-width;

package/dist/packages/avatargroup/index.js

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

package/dist/packages/backtop/index.js

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

package/dist/packages/badge/index.js

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

package/dist/packages/badge/index.scss

@@ -9,7 +9,7 @@
 .nut-badge {
   position: relative;
   display: inline-block;
-  .slot-icons {
+  .nut-badge__icon {
     position: absolute;
     background: $badge-background-color;
     top: -20%;
@@ -19,23 +19,23 @@
     border-radius: $badge-border-radius;
     z-index: $badge-z-index;
   }
-  .sup {
-    position: absolute;
-    background: $badge-background-color;
-    padding: $badge-padding;
-    text-align: center;
-    border-radius: $badge-border-radius;
-    font-size: $badge-font-size;
-    font-weight: normal;
-    color: $badge-color;
-  }
   .nut-badge__content {
     transform: $badge-content-transform;
-  }
-  .is-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-height;
-    border-radius: $badge-dot-border-radius;
-    padding: $badge-dot-padding;
+    &--sup {
+      position: absolute;
+      background: $badge-background-color;
+      padding: $badge-padding;
+      text-align: center;
+      border-radius: $badge-border-radius;
+      font-size: $badge-font-size;
+      font-weight: normal;
+      color: $badge-color;
+    }
+    &--dot {
+      width: $badge-dot-width;
+      height: $badge-dot-height;
+      border-radius: $badge-dot-border-radius;
+      padding: $badge-dot-padding;
+    }
   }
 }

package/dist/packages/barrage/index.js

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

package/dist/packages/barrage/index.scss

@@ -7,9 +7,8 @@
   overflow: hidden;
   box-sizing: border-box;
   background-color: #f7f8fa;
-  .dmitem {
+  &__item {
     width: 100px;
-    // max-width: 150px;
     display: block;
     position: absolute;
     right: 0;
@@ -30,27 +29,8 @@
 }
 .nut-theme-dark {
   .nut-barrage {
-    .dmitem {
+    .nut-barrage__item {
       color: $dark-color-gray;
     }
   }
 }
-
-// @keyframes moving {
-//   from {
-//     transform: translateX(100%);
-//   }
-//   to {
-//     transform: translateX(-150%);
-//     // transform: translateX(-180%);
-//     // transform: translateX(var(--move-distance));
-//   }
-// }
-// @-webkit-keyframes moving {
-//   from {
-//     -webkit-transform: translateX(100%);
-//   }
-//   to {
-//     transform: translateX(-150%);
-//   }
-// }

package/dist/packages/button/index.js

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

package/dist/packages/button/index.scss

@@ -19,7 +19,8 @@
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
-  .text {
+
+  .nut-button__text {
     margin-left: 5px;
   }
   &::before {

package/dist/packages/calendar/index.js

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