@nutui/nutui-react 2.3.0-beta.0 → 2.3.0-beta.1

package/dist/packages/tabbar/tabbar.scss

@@ -12,7 +12,7 @@
   box-sizing: border-box;
   background: $color-background-overlay;
 
-  &__wrap {
+  &-wrap {
     width: 100%;
     height: $tabbar-height;
     display: flex;
@@ -25,13 +25,13 @@
     border-right: 0;
   }
 
-  &__fixed {
+  &-fixed {
     position: fixed;
     bottom: 0px;
     left: 0px;
   }
 
-  &__safe-area {
+  &-safe-area {
     display: block;
     width: 100%;
     padding-bottom: constant(safe-area-inset-bottom);

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -14,7 +14,7 @@
     color: $tabbar-active-color;
   }
 
-  &__icon-box {
+  &-icon-box {
     padding: 0px;
     display: flex;
     flex-direction: column;

package/dist/packages/table/table.scss

@@ -5,7 +5,7 @@
   font-size: $font-size-base;
   color: $color-title;
 
-  &__main {
+  &-main {
     display: table;
     width: 100%;
     border-collapse: collapse;
@@ -13,41 +13,41 @@
     color: $color-title;
     background-color: $color-background-overlay;
 
-    &--striped {
-      .nut-table__main__head {
-        &__tr {
+    &-striped {
+      .nut-table-main-head {
+        &-tr {
           background-color: $table-tr-even-bg-color;
         }
       }
 
-      .nut-table__main__body {
-        &__tr:nth-child(odd) {
+      .nut-table-main-body {
+        &-tr:nth-child(odd) {
           background-color: $table-tr-odd-bg-color;
         }
       }
 
-      .nut-table__main__body {
-        &__tr:nth-child(even) {
+      .nut-table-main-body {
+        &-tr:nth-child(even) {
           background-color: $table-tr-even-bg-color;
         }
       }
     }
 
-    &__head,
-    &__body {
-      &__tr {
+    &-head,
+    &-body {
+      &-tr {
         display: table-row;
 
-        &__th {
+        &-th {
           display: table-cell;
           padding: $table-cols-padding;
         }
 
-        &__td {
+        &-td {
           display: table-cell;
           padding: $table-cols-padding;
 
-          &__nodata {
+          &-nodata {
             display: flex;
             height: 50px;
             align-items: center;
@@ -55,35 +55,35 @@
           }
         }
 
-        &--border {
+        &-border {
           border: 1px solid $table-border-color;
         }
 
-        &--alignleft,
-        &--align {
+        &-alignleft,
+        &-align {
           text-align: left;
         }
 
-        &--aligncenter {
+        &-aligncenter {
           text-align: center;
         }
 
-        &--alignright {
+        &-alignright {
           text-align: right;
         }
       }
     }
 
-    &__head {
+    &-head {
       display: table-header-group;
     }
 
-    &__body {
+    &-body {
       display: table-row-group;
     }
   }
 
-  &__summary {
+  &-summary {
     color: $color-title;
     background-color: $color-background-overlay;
     display: flex;

package/dist/packages/tabs/tabs.scss

@@ -134,6 +134,7 @@
     background-color: $color-default-light;
     .nut-tabs-titles-item {
       margin: 0;
+
       &-active {
         font-weight: $font-weight-bold;
         background-color: $white;
@@ -143,17 +144,20 @@
   }
 
   &-button {
-    padding: 8px 9px;
     .nut-tabs-titles-item {
-      background: $color-default-light;
-      color: $color-text;
-      border-radius: $radius-xs;
-      margin: 0 3px;
-      padding: 12px 0;
       &-active {
+        &.taro {
+          height: 28px;
+        }
+
+        margin: 8px 9px;
+        background: $color-default-light;
+        color: $color-text;
+        border-radius: $tabs-tab-button-border-radius;
         font-weight: $font-weight-bold;
-        background-color: $color-primary-light;
+        background-color: $tabs-tab-button-active-background-color;
         color: $color-text-link;
+        border: $tabs-tab-button-active-border;
       }
     }
   }
@@ -165,6 +169,7 @@
     .nut-tabs-titles-item {
       margin: 0;
       position: relative;
+
       &::after {
         content: '';
         position: absolute;

package/dist/packages/tag/tag.scss

@@ -15,52 +15,52 @@
   }
 
   @mixin plain {
-    &.nut-tag--plain {
+    &.nut-tag-plain {
       color: $color-title;
       background-color: #fff;
       border: $tag-border-width solid $color-title;
     }
   }
 
-  &--default {
+  &-default {
     background: $tag-background-color;
     @include plain;
   }
 
-  &--primary {
+  &-primary {
     background: $tag-primary-background-color;
     @include plain;
   }
 
-  &--info {
+  &-info {
     background: $tag-info-background-color;
     @include plain;
   }
 
-  &--success {
+  &-success {
     background: $tag-success-background-color;
     @include plain;
   }
 
-  &--danger {
+  &-danger {
     background: $tag-danger-background-color;
     @include plain;
   }
 
-  &--warning {
+  &-warning {
     background: $tag-warning-background-color;
     @include plain;
   }
 
-  &--round {
+  &-round {
     border-radius: $tag-round-border-radius;
   }
 
-  &--mark {
+  &-mark {
     border-radius: $tag-mark-border-radius;
   }
 
-  &--close {
+  &-close {
     cursor: pointer;
   }
 

package/dist/packages/textarea/textarea.scss

@@ -7,15 +7,15 @@
   font-size: $textarea-font;
   padding: $textarea-padding;
 
-  &__disabled {
-    .nut-textarea__textarea,
-    .nut-textarea__limit {
+  &-disabled {
+    .nut-textarea-textarea,
+    .nut-textarea-limit {
       cursor: not-allowed;
       color: $textarea-disabled-color !important;
     }
   }
 
-  &__limit {
+  &-limit {
     position: absolute;
     right: 15px;
     bottom: 12px;
@@ -23,7 +23,7 @@
     color: $textarea-limit-color;
   }
 
-  &__textarea {
+  &-textarea {
     outline: none;
     display: block;
     box-sizing: border-box;

package/dist/packages/timedetail/timedetail.scss

@@ -4,7 +4,7 @@
   flex-wrap: wrap;
   padding: 0 0 50px 12px;
 
-  &__item {
+  &-item {
     width: $timeselect-time-width;
     height: $timeselect-time-height;
     line-height: $timeselect-time-height;

package/dist/packages/timeselect/timeselect.scss

@@ -5,12 +5,12 @@
   flex-direction: column;
   height: calc(100% - 50px);
 
-  &__content {
+  &-content {
     display: flex;
     flex: 1;
   }
 
-  &__content-left {
+  &-content-left {
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;

package/dist/packages/toast/toast.scss

@@ -17,24 +17,24 @@
   text-align: center;
   pointer-events: none;
   z-index: 1300;
-  &__overlay-default {
+  &-overlay-default {
     --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
     --nutui-overlay-zIndex: 1300;
   }
 
   &-small {
-    .nut-toast__inner {
+    .nut-toast-inner {
       font-size: $font-size-small;
     }
   }
 
   &-large {
-    .nut-toast__inner {
+    .nut-toast-inner {
       font-size: $font-size-large;
     }
   }
 
-  &__inner {
+  &-inner {
     display: inline-block;
     position: absolute;
     left: 50%;
@@ -42,7 +42,7 @@
     min-width: 30%;
     max-width: 95.7%;
     font-size: $toast-text-font-size;
-    // text-align: $toast-inner-text-align;
+    text-align: $toast-inner-text-align;
     padding: $toast-inner-padding;
     word-break: break-all;
     background: $toast-inner-bg-color;
@@ -87,7 +87,7 @@
   }
 
   &-has-icon {
-    .nut-toast__icon-wrapper {
+    .nut-toast-icon-wrapper {
       width: 100%;
       display: flex;
       align-items: center;
@@ -102,14 +102,14 @@
   }
 
   &-loading {
-    .nut-toast__inner {
+    .nut-toast-inner {
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
 
-    .nut-toast__icon-wrapper {
+    .nut-toast-icon-wrapper {
       animation: rotation 2s linear infinite;
 
       .nut-icon {

package/dist/packages/uploader/uploader.scss

@@ -5,11 +5,11 @@
   display: flex;
   flex-wrap: wrap;
 
-  &__slot {
+  &-slot {
     position: relative;
   }
 
-  &__upload {
+  &-upload {
     position: relative;
     display: flex;
     align-items: center;
@@ -21,7 +21,7 @@
     border-radius: $uploader-image-border-radius;
   }
 
-  &__icon {
+  &-icon {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -39,14 +39,14 @@
     }
   }
 
-  &__input {
+  &-input {
     position: absolute !important;
     top: 0;
     left: 0;
     width: 100% !important;
     height: 100% !important;
     overflow: hidden;
-    cursor: pointer !important;
+    cursor: pointer;
     opacity: 0;
 
     &:disabled {
@@ -54,11 +54,11 @@
     }
   }
 
-  &__upload-disabled {
+  &-upload-disabled {
     background: $uploader-background-disabled;
     color: $uploader-image-disabled;
 
-    .nut-uploader__icon {
+    .nut-uploader-icon {
       i,
       .nut-icon {
         color: $uploader-image-disabled;
@@ -67,14 +67,14 @@
     }
   }
 
-  &__preview {
+  &-preview {
     position: relative;
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
     box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
 
-    &__progress {
+    &-progress {
       position: absolute;
       left: 0;
       top: 0;
@@ -91,7 +91,7 @@
         margin-bottom: $uploader-image-icon-margin-bottom;
       }
 
-      &__msg {
+      &-msg {
         color: $color-text-help;
         font-size: 12px;
       }
@@ -115,7 +115,7 @@
       padding: 0 10px;
       background-color: $color-background-sunken;
 
-      .nut-uploader__preview-img__file__name {
+      .nut-uploader-preview-img-file-name {
         display: flex;
         -webkit-line-clamp: 1;
         padding: 2px;
@@ -171,14 +171,14 @@
         @include oneline-ellipsis();
       }
 
-      &__c {
+      &-c {
         width: 100%;
         height: 100%;
         position: initial;
         border-radius: $uploader-image-border-radius;
       }
 
-      &__file {
+      &-file {
         height: 100%;
         width: 100%;
         display: flex;
@@ -186,7 +186,7 @@
         justify-content: center;
         transition: all 0.3s;
 
-        &__name {
+        &-name {
           display: flex;
           width: 90%;
           font-size: 12px;