@nutui/nutui-react 1.5.1 → 2.0.0-alpha.1

package/dist/packages/actionsheet/actionsheet.scss

@@ -1,30 +1,37 @@
+
 .nut-theme-dark {
   .nut-actionsheet {
     background-color: $dark5;
     color: $dark1;
+
     &__menu {
       .nut-actionsheet__item {
         background-color: $dark5;
         color: $dark1 !important;
+
         .subdesc {
           color: $dark2;
         }
       }
+
       .nut-actionsheet__item:hover {
         background-color: $dark5;
       }
     }
+
     .nut-actionsheet__cancel {
       background-color: $dark5;
       color: $dark2;
       border-top: none;
     }
+
     .nut-actionsheet__title {
       background-color: $dark5;
       color: $dark1;
       border-top: none;
     }
-    .desc {
+
+    .description {
       background-color: $dark5;
       color: $dark2;
     }
@@ -35,6 +42,7 @@
   display: block;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
+
   .nut-actionsheet__title {
     display: block;
     padding: 10px;
@@ -80,7 +88,7 @@
     cursor: pointer;
   }
 
-  .desc {
+  .description {
     font-size: $font-size-2;
     color: $title-color2;
   }

package/dist/packages/audio/audio.scss

@@ -1,17 +1,3 @@
-.nut-theme-dark {
-  .nut-audio {
-    .nut-audio__icon {
-      &-stop::after {
-        background-color: $dark3;
-      }
-    }
-    .nut-audio__none-container {
-      .nut-voice {
-        border: 1px solid $white;
-      }
-    }
-  }
-}
 
 .nut-audio {
   &__icon {
@@ -23,7 +9,7 @@
       justify-content: center;
       width: 30px;
       height: 30px;
-      background: #fff;
+      background: $white;
       border-radius: 50%;
       box-shadow: 0 0 8px rgba(117, 117, 117, 0.5);
 
@@ -88,6 +74,7 @@
   .nut-audio__none-container {
     .nut-voice {
       border: 1px solid $title-color;
+      align-items: center;
     }
   }
 }

package/dist/packages/backtop/backtop.scss

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

package/dist/packages/badge/badge.scss

@@ -10,16 +10,15 @@
 .nut-badge {
   position: relative;
   display: inline-block;
-  width: 40px;
-  height: 40px;
   margin-right: 40px;
 
-  .slot-icons {
+  .slot-icon {
+    display: flex;
     position: absolute;
     background: $badge-background-color;
     top: -20%;
     right: -20%;
-    padding: $badge-padding;
+    padding: $badge-icon-padding;
     text-align: center;
     border: $badge-border;
     border-radius: $badge-border-radius;

package/dist/packages/button/button.scss

@@ -1,62 +1,3 @@
-
-.nut-theme-dark {
-  .nut-button {
-    &--default {
-      color: $dark1;
-      background: $dark6;
-    }
-
-    &--primary {
-      color: $dark6;
-    }
-
-    &--info {
-      color: $dark6;
-    }
-
-    &--success {
-      color: $dark6;
-    }
-
-    &--danger {
-      color: $dark6;
-    }
-
-    &--warning {
-      color: $dark6;
-    }
-
-    &--plain {
-      background: $dark6;
-
-      &.nut-button--primary {
-        color: $button-primary-border-color;
-        border-color: $button-primary-border-color;
-      }
-
-      &.nut-button--info {
-        color: $button-info-border-color;
-        border-color: $button-info-border-color;
-      }
-
-      &.nut-button--success {
-        color: $button-success-border-color;
-        border-color: $button-success-border-color;
-      }
-
-      &.nut-button--danger {
-        color: $button-danger-border-color;
-        border-color: $button-danger-border-color;
-      }
-
-      &.nut-button--warning {
-        color: $button-warning-border-color;
-        border-color: $button-warning-border-color;
-      }
-    }
-  }
-}
-
 .nut-button {
   position: relative;
   display: inline-block;
@@ -74,8 +15,12 @@
   user-select: none;
   touch-action: manipulation;
 
-  .text {
-    margin-left: $button-text-icon-width;
+  color: $button-default-color;
+  background: $button-default-bg-color;
+  border: $button-border-width solid $button-default-border-color;
+
+  .nut-button-text {
+    margin-left: $button-text-icon-margin-left;
   }
 
   &::before {
@@ -117,69 +62,111 @@
     }
   }
 
-  &--default {
-    color: $button-default-color;
-    background: $button-default-bg-color;
-    border: $button-border-width solid $button-default-border-color;
+  &--solid {
+    color: $button-primary-color;
+    background: $button-primary-background-color;
+    border: $button-border-width solid transparent;
+  }
+
+  &.nut-button--outline {
+    color: $button-primary-border-color;
+    border-color: $button-primary-border-color;
+    background: transparent;
+  }
+
+  &.nut-button--none {
+    color: $button-primary-border-color;
+    background: transparent;
+    border-color: transparent;
   }
 
   &--primary {
     color: $button-primary-color;
     background: $button-primary-background-color;
     border: $button-border-width solid transparent;
+
+    &.nut-button--outline {
+      color: $button-primary-border-color;
+      border-color: $button-primary-border-color;
+      background: transparent;
+    }
+
+    &.nut-button--none {
+      color: $button-primary-border-color;
+      background: transparent;
+      border-color: transparent;
+    }
   }
 
   &--info {
     color: $button-info-color;
     background: $button-info-background-color;
     border: $button-border-width solid transparent;
+
+    &.nut-button--outline {
+      color: $button-info-border-color;
+      border-color: $button-info-border-color;
+      background: transparent;
+    }
+
+    &.nut-button--none {
+      color: $button-info-border-color;
+      background: transparent;
+      border-color: transparent;
+    }
   }
 
   &--success {
     color: $button-success-color;
     background: $button-success-background-color;
     border: $button-border-width solid transparent;
+
+    &.nut-button--outline {
+      color: $button-success-border-color;
+      border-color: $button-success-border-color;
+      background: transparent;
+    }
+
+    &.nut-button--none {
+      color: $button-success-border-color;
+      background: transparent;
+      border-color: transparent;
+    }
   }
 
   &--danger {
     color: $button-danger-color;
     background: $button-danger-background-color;
     border: $button-border-width solid transparent;
+
+    &.nut-button--outline {
+      color: $button-danger-border-color;
+      border-color: $button-danger-border-color;
+      background: transparent;
+    }
+
+    &.nut-button--none {
+      color: $button-danger-border-color;
+      background: transparent;
+      border-color: transparent;
+    }
   }
 
   &--warning {
     color: $button-warning-color;
     background: $button-warning-background-color;
     border: $button-border-width solid transparent;
-  }
 
-  &--plain {
-    color: $button-plain-color;
-    background: $button-plain-background-color;
-
-    &.nut-button--primary {
-      color: $button-primary-border-color;
-      border-color: $button-primary-border-color;
-    }
-
-    &.nut-button--info {
-      color: $button-info-border-color;
-      border-color: $button-info-border-color;
-    }
-
-    &.nut-button--success {
-      color: $button-success-border-color;
-      border-color: $button-success-border-color;
-    }
-
-    &.nut-button--danger {
-      color: $button-danger-border-color;
-      border-color: $button-danger-border-color;
+    &.nut-button--outline {
+      color: $button-warning-border-color;
+      border-color: $button-warning-border-color;
+      background: transparent;
     }
 
-    &.nut-button--warning {
+    &.nut-button--none {
       color: $button-warning-border-color;
-      border-color: $button-warning-border-color;
+      background: transparent;
+      border-color: transparent;
     }
   }
 
@@ -189,7 +176,7 @@
     line-height: $button-large-line-height;
 
     .text {
-      margin-left: $button-text-icon-large-width;
+      margin-left: $button-text-icon-large-margin-left;
     }
   }
 
@@ -205,7 +192,7 @@
     font-size: $button-small-font-size;
 
     .text {
-      margin-left: $button-text-icon-small-width;
+      margin-left: $button-text-icon-small-margin-left;
     }
   }
 
@@ -216,7 +203,7 @@
     font-size: $button-mini-font-size;
 
     .text {
-      margin-left: $button-text-icon-mini-width;
+      margin-left: $button-text-icon-mini-margin-left;
     }
   }
 

package/dist/packages/calendar/calendar.scss

@@ -1,34 +1,4 @@
 
-.nut-theme-dark {
-  .nut-calendar {
-    background: $dark5;
-    color: $dark1;
-
-    .nut-calendar-header {
-      background: $dark5;
-      color: $dark1;
-    }
-
-    .nut-calendar-content {
-      .calendar-months-panel {
-        .calendar-month-con {
-          .calendar-month-day {
-            &-choose {
-              background-color: rgba(#fa2c19, 0.09);
-              color: $calendar-choose-font-color;
-            }
-          }
-        }
-      }
-    }
-
-    .nut-calendar-footer {
-      background: $dark5;
-      color: $dark1;
-    }
-  }
-}
-
 .nut-calendar {
   position: relative;
   display: flex;

package/dist/packages/cell/cell.scss

@@ -1,107 +1,35 @@
-.nut-theme-dark {
-  .nut-cell {
-    background: $dark5;
-    color: $dark1;
-    box-shadow: none;
-    &__value {
-      &--alone {
-        color: $cell-desc-color;
-      }
-    }
-  }
-}
-
 .nut-cell {
   position: relative;
   display: flex;
   width: 100%;
   line-height: $cell-line-height;
   padding: $cell-padding;
-  background: $cell-background;
+  background-color: $cell-background-color;
   border-radius: $cell-border-radius;
-  box-shadow: $cell-box-shaow;
-  font-size: $cell-title-font;
-  color: $cell-color;
+  box-shadow: $cell-box-shadow;
+  font-size: $cell-title-font-size;
+  color: $cell-title-color;
   margin: 10px 0;
   box-sizing: border-box;
-
-  &:last-child {
-    &::after {
-      border: 0 !important;
-    }
-  }
-
-  &--center {
-    align-items: center;
-  }
-
-  &--large {
-    font-size: $cell-large-title-font;
-    padding: $cell-large-padding;
-    .nut-cell__subtitle {
-      font-size: $cell-large-title-desc-font;
-    }
-  }
-
-  &::after {
-    position: absolute;
-    box-sizing: border-box;
-    content: ' ';
-    pointer-events: none;
-    right: $cell-after-right;
-    bottom: 0;
-    left: 16px;
-    transform: scaleY(0.5);
-  }
-
-  &:active::before {
-    opacity: 0.1;
-  }
-  &--clickable {
-    cursor: pointer;
-    &::before {
-      position: absolute;
-      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;
-      content: ' ';
-    }
-  }
-  &__icon {
-    display: flex;
-    flex-direction: row;
-    margin: $cell-default-icon-margin;
-  }
-
-  &__title {
+  &__left {
     display: flex;
     flex-direction: column;
     flex: 1;
   }
-  &__subtitle {
-    font-size: $cell-title-desc-font;
-    color: $cell-subtitle-color;
+
+  &__description {
+    font-size: $cell-description-font-size;
+    color: $cell-description-color;
   }
-  &__value {
-    display: inline-block;
-    text-align: right;
+
+  &__extra {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
     flex: 1;
-    font-size: $cell-desc-font;
-    color: $cell-desc-color;
-    word-wrap: break-word;
-    overflow: hidden;
-    &--alone {
-      color: $cell-color;
-    }
-  }
-  &__link {
-    color: #979797;
+    min-width: 0;
+    word-break: break-all;
+    font-size: $cell-extra-font-size;
+    color: $cell-extra-color;
   }
 }

package/dist/packages/cellgroup/cellgroup.scss

@@ -1,13 +1,6 @@
-.nut-theme-dark {
-  .nut-cell-group__wrap {
-    background: $dark5;
-    color: $dark1;
-    box-shadow: none;
-  }
-}
-
 .nut-cell-group {
   display: block;
+
   &__title {
     display: inherit;
     padding: $cell-group-title-padding;
@@ -17,30 +10,43 @@
     margin-top: 30px;
     margin-bottom: 10px;
   }
-  &__desc {
+
+  &__description {
     display: inherit;
-    padding: $cell-group-desc-padding;
-    color: $cell-group-desc-color;
-    font-size: $cell-group-desc-font-size;
-    line-height: $cell-group-desc-line-height;
+    padding: $cell-group-description-padding;
+    color: $cell-group-description-color;
+    font-size: $cell-group-description-font-size;
+    line-height: $cell-group-description-line-height;
     margin-top: 10px;
     margin-bottom: 10px;
   }
+
   &__wrap {
     display: inherit;
     border-radius: $cell-border-radius;
     overflow: hidden;
     background-color: $cell-group-background-color;
     margin: 10px 0;
-    .nut-cell {
-      margin: 0;
-      box-shadow: none;
-      border-radius: 0;
-    }
   }
+
   .nut-cell {
-    &::after {
-      border-bottom: $cell-after-border-bottom;
+    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 {
+      &__divider {
+        border: 0 !important;
+      }
     }
   }
 }

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,4 +1,3 @@
-
 .nut-theme-dark {
   .nut-collapse {
     &-item__header {

package/dist/packages/dialog/dialog.scss

@@ -12,7 +12,7 @@
   &__header {
     display: block;
     text-align: center;
-    height: $dialog-header-height;
+    // height: $dialog-header-height;
     font-size: $font-size-3;
     color: $title-color;
     @include oneline-ellipsis();

package/dist/packages/divider/divider.scss

@@ -1,24 +1,17 @@
-.nut-theme-dark {
-  a {
-    color: $primary-link-color !important;
-  }
-  .nut-divider {
-    color: $white;
-  }
-}
-
 .nut-divider {
   display: flex;
   align-items: center;
   font-size: $divider-text-font-size;
   color: $divider-text-color;
   margin: $divider-margin;
+  border: 0 solid currentColor;
   width: 100%;
 
   &::before,
   &::after {
     content: '';
-    border: $divider-line-height solid currentColor;
+    border-style: inherit;
+    border-color: inherit;
     border-width: $divider-line-height 0 0;
     height: $divider-line-height;
     flex: 1;
@@ -48,13 +41,6 @@
     }
   }
 
-  &.nut-divider__dashed {
-    &::before,
-    &::after {
-      border-style: dashed;
-    }
-  }
-
   &.nut-divider__hairline {
     &::before,
     &::after {

package/dist/packages/grid/grid.scss

@@ -1,3 +1,4 @@
+
 .nut-grid {
   display: flex;
   flex-wrap: wrap;

package/dist/packages/griditem/griditem.scss

@@ -1,20 +1,7 @@
-.nut-theme-dark {
-  .nut-grid-item {
-    &__content {
-      background: $dark5;
-      color: $dark1;
-      i {
-        color: $dark1;
-      }
-    }
-    &__text {
-      color: $dark1;
-    }
-  }
-}
 .nut-grid-item {
   position: relative;
   box-sizing: border-box;
+  color: $grid-item-text-color;
 
   $block: &;
 
@@ -34,9 +21,7 @@
     padding: $grid-item-content-padding;
     background: $grid-item-content-bg-color;
     border: 0 solid $grid-border-color;
-    i {
-      color: $grid-item-icon-color;
-    }
+
     &--border {
       border-right-width: 1px;
       border-bottom-width: 1px;