@nutui/nutui-react 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/packages/cascader/cascader.scss

@@ -1,30 +1,4 @@
 
-.nut-theme-dark {
-  .nut-cascader {
-    .nut-cascader__bar {
-      background: $dark5;
-      color: $dark1;
-    }
-
-    .nut-tabs__titles {
-      background: $dark5;
-    }
-
-    &__title {
-      color: $dark1;
-      background-color: $dark5;
-    }
-
-    .nut-tabpane {
-      background-color: $dark5;
-    }
-
-    .nut-cascader-item {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-cascader {
   width: 100%;
   font-size: $cascader-font-size;

package/dist/packages/cellgroup/cellgroup.scss

@@ -27,25 +27,29 @@
     overflow: hidden;
     background-color: $cell-group-background-color;
     margin: 10px 0;
+    .nut-cell {
+      margin: 0;
+      box-shadow: none;
+      border-radius: 0;
+    }
   }
 
-  .nut-cell {
-    margin: 0;
-    box-shadow: none;
-    border-radius: 0;
-    &__divider {
-      position: absolute;
-      box-sizing: border-box;
-      pointer-events: none;
-      right: $cell-divider-right;
-      bottom: 0;
-      left: $cell-divider-left;
-      transform: scaleY(0.5);
-      border-bottom: $cell-divider-border-bottom;
-    }
-    &:last-child {
+  &__wrap--divider {
+    .nut-cell {
       &__divider {
-        border: 0 !important;
+        position: absolute;
+        box-sizing: border-box;
+        pointer-events: none;
+        right: $cell-divider-right;
+        bottom: 0;
+        left: $cell-divider-left;
+        transform: scaleY(0.5);
+        border-top: $cell-divider-border-bottom;
+      }
+      &:last-child {
+        .nut-cell__divider {
+          border-top: 0 !important;
+        }
       }
     }
   }

package/dist/packages/checkbox/checkbox.scss

@@ -1,47 +1,44 @@
 
-.nut-theme-dark {
-  .nut-checkbox {
-    &__label {
-      color: $dark1;
-      &--disabled {
-        color: $checkbox-label-disable-color;
-      }
-    }
-  }
-}
-
 .nut-checkbox {
   display: flex;
   align-items: center;
+
   &--reverse {
     flex-direction: row-reverse;
+
     .nut-checkbox__label {
       margin-right: $checkbox-label-margin-left;
       margin-left: 0;
     }
   }
+
   &__label {
     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: $disable-color;
     font-size: $checkbox-icon-font-size;

package/dist/packages/empty/empty.scss

@@ -1,12 +1,3 @@
-.nut-theme-dark {
-  .nut-empty {
-    background: $dark6;
-    &__description {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-empty {
   box-sizing: border-box;
   display: flex;

package/dist/packages/picker/picker.scss

@@ -1,105 +1,28 @@
 
-.nut-theme-dark {
-  .nut-picker {
-    background-color: $dark6;
-
-    &__title {
-      color: $dark1;
-    }
-
-    &__confirm-btn {
-      color: $picker-ok-color;
-      cursor: pointer;
-    }
-
-    .nut-picker__control {
-      background-color: $dark10;
-    }
-
-    .nut-picker-indicator {
-      background-color: $dark7;
-      z-index: 0;
-      border-top: 1px solid $gray2;
-      border-bottom: 1px solid $gray2;
-    }
-
-    .nut-picker-mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-image: linear-gradient(
-          180deg,
-          rgba(31, 31, 31, 1),
-          rgba(31, 31, 31, 0.4)
-        ),
-        linear-gradient(0deg, rgba(31, 31, 31, 1), rgba(31, 31, 31, 0.4));
-      background-position: top, bottom;
-      background-size: 100% 108px;
-      background-repeat: no-repeat;
-      z-index: 3;
-    }
-
-    .nut-picker-list {
-      .nut-picker-roller {
-        &-item {
-          color: $white;
-
-          &-tile {
-            color: $white;
-          }
-        }
-      }
-    }
-
-    &-roller-mask {
-      background-image: linear-gradient(
-          180deg,
-          rgba(27, 27, 27, 0.9),
-          rgba(27, 27, 27, 0.4)
-        ),
-        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;
-    }
-
-    &-content {
-      color: $dark1;
-    }
-
-    &-item {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-picker {
   background-color: $background-color3;
   width: 100%;
-}
 
-.nut-picker__control {
-  display: flex;
-  height: 56px;
-  font-size: 16px;
-  align-items: center;
-  justify-content: space-between;
-  padding: $picker-bar-button-padding;
+  &__control {
+    display: flex;
+    height: 56px;
+    font-size: 16px;
+    align-items: center;
+    justify-content: space-between;
+    padding: $picker-bar-button-padding;
+  }
 
-  .nut-picker__cancel-btn {
-    color: $picker-cancel-color;
+  &__cancel-btn {
+    color: $picker-bar-cancel-color;
     font-size: $picker-bar-cancel-font-size;
   }
 
-  .nut-picker__confirm-btn {
-    color: $picker-ok-color;
+  &__confirm-btn {
+    color: $picker-bar-ok-color;
     font-size: $picker-bar-ok-font-size;
   }
 
-  .nut-picker__title {
+  &__title {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -109,13 +32,13 @@
     font-size: $picker-bar-title-font-size;
     font-weight: $picker-bar-title-font-weight;
   }
-}
 
-.nut-picker__panel {
-  display: flex;
-  position: relative;
+  &__panel {
+    display: flex;
+    position: relative;
+  }
 
-  .nut-picker-indicator {
+  &-indicator {
     position: absolute;
     top: 108px;
     height: $picker-item-height;
@@ -127,20 +50,20 @@
     font-size: $picker-item-text-font-size;
     z-index: 3;
   }
-}
 
-.nut-picker-list {
-  flex: 1;
-  position: relative;
-  height: $picker-list-height;
-  overflow: hidden;
-  text-align: center;
+  &-list {
+    flex: 1;
+    position: relative;
+    height: $picker-list-height;
+    overflow: hidden;
+    text-align: center;
+  }
 
-  .nut-picker-list-panel {
+  &-list-panel {
     transform-style: preserve-3d;
   }
 
-  .nut-picker-mask {
+  &-mask {
     position: absolute;
     top: 0;
     left: 0;
@@ -153,22 +76,27 @@
     z-index: 3;
   }
 
-  .nut-picker-content,
-  .nut-picker-roller {
+  &-view-panel {
+    height: $picker-list-height;
+    flex-grow: 1;
+  }
+
+  &-content,
+  &-roller {
     position: absolute;
     top: 108px;
     width: 100%;
     height: $picker-item-height;
   }
 
-  .nut-picker-content {
+  &-content {
     background: #fff;
     z-index: 2;
     overflow: hidden;
   }
 
-  .nut-picker-item,
-  .nut-picker-roller-item {
+  &-item,
+  &-roller-item {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -179,41 +107,42 @@
     text-align: center;
   }
 
-  .nut-picker-item {
+  &-item {
     font-size: 16px;
     background: #fff;
   }
 
-  .nut-picker-roller {
+  &-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-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;
-    }
+  &-roller-item {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    color: $gray1;
+  }
+
+  &-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-placeholder {
-  height: 1px;
+  &-roller-item-hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-placeholder {
+    height: 1px;
+  }
 }

package/dist/packages/tabbar/tabbar.scss

@@ -1,3 +1,4 @@
+
 .nut-tabbar {
   border: 0px;
   box-shadow: $tabbar-box-shadow;

package/dist/packages/table/table.scss

@@ -1,52 +1,3 @@
-.nut-theme-dark {
-  .nut-table {
-    margin-bottom: 3px;
-
-    &__main {
-      color: $dark1;
-      background-color: $dark5;
-
-      &--striped {
-        .nut-table__main__head {
-          &__tr {
-            background-color: $dark6;
-          }
-        }
-
-        .nut-table__main__body {
-          &__tr:nth-child(odd) {
-            background-color: $dark4;
-          }
-        }
-
-        .nut-table__main__body {
-          &__tr:nth-child(even) {
-            background-color: $dark6;
-          }
-        }
-      }
-    }
-
-    .nut-table__nodata {
-      background-color: $dark6;
-
-      .nut-table__nodata {
-        color: $dark1;
-      }
-    }
-
-    &__summary {
-      color: $dark1;
-      background-color: $dark4;
-    }
-
-    &__nodata {
-      color: $dark1;
-      background-color: $dark4;
-    }
-  }
-}
-
 .nut-table {
   display: flex;
   width: 100%;
@@ -133,13 +84,6 @@
   }
 
   &__summary {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    padding: $table-cols-padding;
-  }
-
-  &__nodata {
     color: $title-color;
     background-color: $background-color3;
     display: flex;

package/dist/packages/textarea/textarea.scss

@@ -1,13 +1,3 @@
-.nut-theme-dark {
-  .nut-textarea {
-    background: $dark5;
-
-    &__textarea {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-textarea {
   position: relative;
   width: 100%;
@@ -34,7 +24,6 @@
   }
 
   &__textarea {
-    // min-height: $textarea-height;
     outline: none;
     display: block;
     box-sizing: border-box;
@@ -43,13 +32,17 @@
     margin: 0;
     padding: 0;
     font-size: $textarea-font;
-    line-height: $textarea-text-line-height;
     color: $textarea-text-color;
     caret-color: $textarea-text-curror-color;
     text-align: left;
     background-color: transparent;
     border: 0;
     resize: none;
+
+    .taro-textarea {
+      background-color: transparent;
+      resize: none;
+    }
   }
 
   .cpoyText {