@nutui/nutui-react 2.0.0-alpha.10 → 2.0.0-alpha.12

package/dist/packages/actionsheet/actionsheet.scss

@@ -1,74 +1,29 @@
 
-.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;
-    }
-
-    .description {
-      background-color: $dark5;
-      color: $dark2;
-    }
-  }
-}
-
 .nut-actionsheet {
   display: block;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
+  text-align: center;
 
   .nut-actionsheet__title {
     display: block;
     padding: 10px;
     margin: 0;
-    text-align: center;
     background-color: $white;
-    border-bottom: 1px solid $light-color;
-    font-size: $font-size-base;
+    border-bottom: 1px solid $actionsheet-border-color;
+    font-size: $font-size-large;
     color: $title-color;
   }
 
-  .nut-actionsheet-modal {
-    .nut-actionsheet__title,
-    .nut-actionsheet-sub-title {
-      padding: 5px 0;
-    }
-
-    .nut-actionsheet-sub-title {
-      display: block;
-      font-size: $font-size-small;
-      color: $title-color;
-      margin-inline-start: 0px;
-    }
+  .nut-actionsheet__description {
+    padding: 10px;
+    display: block;
+    font-size: $font-size-base;
+    color: $title-color2;
+    margin-inline-start: 0px;
   }
 
-  .nut-actionsheet__menu {
+  .nut-actionsheet__list {
     display: block;
     list-style: none;
     padding: 0;
@@ -78,34 +33,32 @@
   .nut-actionsheet__cancel,
   .nut-actionsheet__item {
     display: block;
-    //   height: 24px;
     padding: 10px;
-    line-height: 24px;
+    text-align: $actionsheet-item-text-align;
+    line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
-    color: $title-color;
-    text-align: center;
+    color: $actionsheet-item-color;
     background-color: $background-color3;
     cursor: pointer;
-  }
 
-  .description {
-    font-size: $font-size-2;
-    color: $title-color2;
-  }
+    &-description {
+      display: block;
+      font-size: $font-size-small;
+      color: $title-color2;
+    }
 
-  .subdesc {
-    display: block;
-    font-size: $font-size-small;
-    color: $title-color2;
-  }
+    &.danger {
+      color: $actionsheet-item-danger;
+    }
 
-  .nut-actionsheet__item-disabled {
-    color: #e1e1e1 !important;
-    cursor: not-allowed;
+    &.disabled {
+      color: #e1e1e1 !important;
+      cursor: not-allowed;
+    }
   }
 
   .nut-actionsheet__cancel {
     margin-top: 5px;
-    border-top: 1px solid $light-color;
+    border-top: 1px solid $actionsheet-border-color;
   }
 }

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,54 +1,3 @@
-.nut-theme-dark {
-  .nut-collapse {
-    &-item__header {
-      background-color: $dark6;
-
-      .nut-collapse-item__title {
-        color: $dark1;
-      }
-
-      .nut-collapse-item__icon-box {
-        .nut-collapse-item__icon {
-          i {
-            color: $dark1 !important;
-          }
-        }
-      }
-
-      .nut-collapse-item__sub-title {
-        color: $dark2;
-      }
-
-      &::after {
-        border-bottom: 1px solid $dark4;
-      }
-    }
-
-    .nut-collapse-item__header--disabled {
-      .nut-collapse-item__title {
-        color: $dark2;
-      }
-
-      .nut-collapse-item__icon-box {
-        .nut-collapse-item__icon {
-          i {
-            color: $dark2 !important;
-          }
-        }
-      }
-    }
-
-    &-item__content {
-      background-color: $dark6;
-      color: $dark1;
-
-      &-text {
-        color: $dark1;
-      }
-    }
-  }
-}
-
 .nut-collapse-item {
   &__header {
     position: relative;
@@ -79,23 +28,9 @@
     color: $collapse-item-color;
     display: flex;
     align-items: center;
-
-    &-icon-left {
-      margin-right: $collapse-item-icon-margin-right;
-      display: flex;
-      align-items: center;
-      color: $collapse-item-icon-color;
-    }
-
-    &-icon-right {
-      margin-left: $collapse-item-icon-margin-left;
-      display: flex;
-      align-items: center;
-      color: $collapse-item-icon-color;
-    }
   }
 
-  &__sub-title {
+  &__extra {
     flex: 1;
     display: flex;
     justify-content: flex-end;
@@ -103,19 +38,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: $collapse-item-sub-title-color;
+    color: $collapse-item-extra-color;
   }
 
   &__icon-box {
     display: flex;
     padding-right: 40px;
     position: relative;
-
-    .nut-collapse-item__icon {
-      i {
-        color: $collapse-item-icon-color;
-      }
-    }
   }
 
   &__icon {
@@ -135,12 +64,6 @@
     .nut-collapse-item__title {
       color: $collapse-item-disabled-color;
     }
-
-    .nut-collapse-item__icon {
-      i {
-        color: $collapse-item-disabled-color !important;
-      }
-    }
   }
 
   &__content {

package/dist/packages/countdown/countdown.scss

@@ -1,3 +1,5 @@
 .nut-countdown {
   display: $countdown-display;
+  color: $countdown-color;
+  font-size: $countdown-font-size;
 }

package/dist/packages/ellipsis/ellipsis.scss

@@ -15,3 +15,7 @@
   position: absolute;
   top: -999999px;
 }
+
+.nut-ellipsis-width {
+  width: fit-content;
+}

package/dist/packages/searchbar/searchbar.scss

@@ -1,46 +1,3 @@
-.nut-theme-dark {
-  .nut-searchbar {
-    background: $dark5;
-
-    &__label {
-      color: $dark1;
-    }
-
-    &__action-text {
-      color: $dark1;
-    }
-
-    .nut-searchbar__input-clear {
-      & .nut-searchbar__nut-icon-mask-close {
-        color: $dark1;
-
-        &:hover {
-          cursor: pointer;
-          color: $dark1;
-        }
-      }
-    }
-
-    &__right-search-icon,
-    &__left-search-icon {
-      color: $dark1;
-    }
-
-    &__leftout-icon,
-    &__rightout-icon {
-      i {
-        color: $dark1;
-      }
-    }
-  }
-}
-
-.val-text {
-  font-size: 12px;
-  color: $title-color2;
-  padding: 0 20px;
-}
-
 .nut-searchbar {
   display: flex;
   align-items: center;
@@ -49,6 +6,7 @@
   background: $searchbar-background;
   color: $gray1;
   box-sizing: border-box;
+  justify-content: center;
 
   &__content {
     position: relative;
@@ -65,11 +23,12 @@
     padding: 0 5px 0 10px;
   }
 
-  &__rightin-icon {
+  &__rightin {
+    display: flex;
     padding: 0 5px;
   }
 
-  .nut-searchbar__input-box {
+  &__input-box {
     display: flex;
     align-items: center;
     flex: 1;
@@ -89,6 +48,7 @@
     color: $searchbar-input-text-color;
     caret-color: $searchbar-input-curror-color;
     background: transparent;
+    text-align: $searchbar-input-text-align;
   }
 
   &__round {
@@ -112,34 +72,16 @@
   }
 
   &__left {
-    text-align: left;
+    display: flex;
+    padding: $searchbar-left-padding;
+    font-size: $searchbar-left-fontsize;
+    color: $searchbar-left-color;
   }
 
   &__right {
-    text-align: right;
-  }
-
-  &__center {
-    text-align: center;
-  }
-
-  &__label {
-    padding: $searchbar-label-padding;
-    font-size: $searchbar-label-fontsize;
-    color: $searchbar-label-color;
-  }
-
-  &__action-text {
-    padding: $searchbar-action-text-padding;
-    font-size: $searchbar-action-text-fontsize;
-    color: $searchbar-action-text-color;
-  }
-
-  &__leftout-icon {
-    margin-right: 10px;
-  }
-
-  &__rightout-icon {
-    margin-left: 10px;
+    display: flex;
+    padding: $searchbar-right-padding;
+    font-size: $searchbar-right-fontsize;
+    color: $searchbar-right-color;
   }
 }

package/dist/packages/shortpassword/shortpassword.scss

@@ -1,87 +1,4 @@
 
-.nut-theme-dark {
-  .nut-shortpassword {
-    &__title {
-      color: $dark1;
-    }
-
-    &__subtitle {
-      color: $dark2;
-    }
-
-    &__message__forget {
-      color: $dark3;
-    }
-
-    &__input-real {
-      background-color: $dark6;
-      border-radius: 4px;
-    }
-
-    &__input-site {
-      background-color: $dark6;
-    }
-
-    &__input-fake {
-      border: none;
-      background-color: $dark4;
-
-      &__li__icon {
-        background-color: $dark1;
-      }
-    }
-
-    &__message__forget {
-      color: $dark2;
-    }
-  }
-}
-
-.nut-shortpsd-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 {
-  display: block;
-  margin-top: 12px;
-  line-height: 1;
-  font-size: $font-size-1;
-  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-shortpassword {
   &__title {
     line-height: 1;
@@ -89,7 +6,7 @@
     color: $title-color;
   }
 
-  &__subtitle {
+  &__description {
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;
@@ -168,10 +85,6 @@
       color: $shortpassword-forget;
       display: flex;
       align-items: center;
-
-      &-tips {
-        margin-left: 3px;
-      }
     }
   }
 

package/dist/packages/skeleton/skeleton.scss

@@ -4,44 +4,42 @@
   position: relative;
   overflow: hidden;
   vertical-align: middle;
+  width: 100%;
 
-  .nut-skeleton-content {
+  &__content {
     display: flex;
 
-    .avatarClass {
+    .avatar {
       margin-right: 20px;
-      background: rgb(239, 239, 239);
+      background: $skeleton-background !important;
     }
 
-    .blockClass,
-    .blockClass--round {
-      width: 100%;
-      height: 100%;
-      background: rgb(239, 239, 239);
+    .nut-skeleton__block {
+      width: $skeleton-line-width;
+      height: $skeleton-line-height;
+      background: $skeleton-background;
       margin-top: 10px;
+      border-radius: $skeleton-line-border-radius;
 
       &:last-child {
-        width: 70% !important;
+        width: 70%;
       }
     }
 
-    .blockClass--round {
-      border-radius: 10px;
-    }
-
-    .skeleton-content-line {
+    &-line {
+      width: 100%;
       display: flex;
       flex-direction: column;
 
-      .skeleton-title {
+      .nut-skeleton__title {
         width: 30%;
-        height: 15px;
-        background: $skeleton-content-line-title-background-color;
+        height: $skeleton-line-height;
+        background: $skeleton-background;
       }
     }
   }
 
-  .skeleton-animation {
+  &__animation {
     position: absolute;
     top: 0;
     left: 0;
@@ -55,10 +53,10 @@
       hsla(0, 0%, 100%, 0) 80%
     );
     background-repeat: no-repeat;
-    animation: backpos 2s ease-in-out 0s infinite;
+    animation: nut-skeleton 2s ease-in-out 0s infinite;
   }
 
-  @keyframes backpos {
+  @keyframes nut-skeleton {
     0% {
       background-position-x: -500px;
     }

package/dist/packages/toast/toast.scss

@@ -10,11 +10,15 @@
 .nut-toast {
   position: fixed;
   left: 0;
-  bottom: 150px;
+  top: 0;
   width: 100%;
+  height: 100%;
   text-align: center;
   pointer-events: none;
   z-index: 9999;
+  &__overlay-default {
+    --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
+  }
   &-small {
     .nut-toast__inner {
       font-size: $font-size-small;
@@ -29,7 +33,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    pointer-events: auto;
+    pointer-events: none;
     height: 100%;
     background: $toast-cover-bg-color;
   }
@@ -38,12 +42,25 @@
     font-size: $toast-text-font-size;
     min-width: 40%;
     max-width: 65%;
-    text-align: center;
+    text-align: $toast-inner-text-align;
     padding: $toast-inner-padding;
     word-break: break-all;
     background: $toast-inner-bg-color;
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
+    position: absolute;
+    left: 50%;
+    top: $toast-inner-top;
+    transform: translate(-50%, -50%);
+  }
+  &-center {
+    top: var(--nutui-toast-inner-top, 50%);
+  }
+  &-bottom {
+    top: var(--nutui-toast-inner-top, 80%);
+  }
+  &-top {
+    top: var(--nutui-toast-inner-top, 20%);
   }
   &-text {
     font-size: $toast-text-font-size;
@@ -66,10 +83,6 @@
       margin-bottom: 8px;
     }
   }
-  &-center {
-    top: 50%;
-    transform: translateY(-50%);
-  }
   &-loading {
     .nut-toast__inner {
       display: inline-flex;

package/dist/packages/virtuallist/virtuallist.scss

@@ -1,15 +1,3 @@
-.nut-theme-dark {
-  .nut-virtualList-demo-box {
-    li {
-      background-color: $dark5;
-      color: $dark1;
-    }
-    .nut-vertical-items li {
-      box-shadow: 0 1px 6px 0 $dark5;
-    }
-  }
-}
-
 .nut-horizontal-items {
   float: left;
   li {