@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/packages/imagepreview/imagepreview.scss

@@ -1,18 +1,14 @@
+
 .nut-imagepreview {
   width: 100%;
+  height: 100%;
 
   &-swiper {
-    height: 327px;
+    height: 100%;
     width: 100vw;
     background-color: transparent;
   }
 
-  &-img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
   &-index {
     position: fixed;
     z-index: 2002;
@@ -39,18 +35,53 @@
     overflow: visible;
     background-color: transparent;
   }
-}
-.custom-pop {
-  height: 100%;
-  background: transparent !important;
-  display: flex;
-  align-items: center;
-}
-.nut-imagepreview-swiper {
-  swiper {
+
+  &-pop {
+    height: 100%;
+    background: transparent !important;
+    display: flex;
+    align-items: center;
     width: 100%;
   }
-}
-.nut-imagepreview-swiper .nut-swiper-item {
-  height: 327px;
+
+  &-swiper {
+    swiper {
+      width: 100%;
+      height: 100%;
+    }
+
+    swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .nut-image-preview-box {
+        width: 100%;
+      }
+
+      .nut-video {
+        video {
+          object-fit: contain;
+        }
+      }
+    }
+
+    .nut-swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .nut-image-preview-box {
+        width: 100%;
+      }
+
+      .nut-video {
+        video {
+          object-fit: contain;
+        }
+      }
+    }
+  }
 }

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -1,20 +1,3 @@
-.nut-theme-dark {
-  .nut-infiniteloading {
-    .nut-infinite-container {
-      .infiniteLi {
-        color: $dark1;
-      }
-    }
-    .nut-infinite-bottom {
-      .bottom-box {
-        .bottom-text {
-          color: $dark2;
-        }
-      }
-    }
-  }
-}
-
 .nut-infiniteloading {
   display: block;
   width: 100%;
@@ -30,10 +13,7 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      .top-text {
-        font-size: 10px;
-        color: $text-color;
-      }
+      color: $text-color;
     }
   }
   .nut-infinite-container {
@@ -52,10 +32,7 @@
     text-align: center;
 
     .bottom-box {
-      .bottom-text {
-        font-size: 10px;
-        color: $text-color;
-      }
+      color: $text-color;
     }
   }
 }

package/dist/packages/inputnumber/inputnumber.scss

@@ -52,12 +52,14 @@
   }
 }
 
-.icon-minus {
+.nut-icon-Minus,
+.nut-icon-minus {
   --nut-icon-width: 20px;
   --nut-icon-height: 20px;
 }
 
-.icon-plus {
+.nut-icon-Plus,
+.nut-icon-plus {
   --nut-icon-width: 20px;
   --nut-icon-height: 20px;
 }

package/dist/packages/layout/layout.scss

@@ -1,2 +0,0 @@
-.nut-layout {
-}

package/dist/packages/menuitem/menuitem.scss

@@ -57,7 +57,7 @@
 }
 
 .placeholder-element {
-  position: fixed;
+  position: absolute;
   top: -$menu-bar-line-height;
   left: 0;
   right: 0;

package/dist/packages/noticebar/noticebar.scss

@@ -1,23 +1,6 @@
-.nut-theme-dark {
-  .nut-noticebar {
-    .wrap {
-      .content {
-        a {
-          color: $noticebar-color;
-        }
-      }
-    }
-    .nut-noticebar-vertical {
-      .horseLamp_list {
-        .custom-item {
-          color: $noticebar-color;
-        }
-      }
-    }
-  }
-}
 .nut-noticebar {
   width: 100%;
+
   .nut-noticebar-page {
     display: flex;
     padding: $noticebar-box-padding;
@@ -27,11 +10,14 @@
     align-items: center;
     background: $noticebar-background;
     color: $noticebar-color;
+
     &.wrapable {
       height: auto;
-      padding: $noticebar-wrapable-padding;
+      padding: $noticebar-wrap-padding;
+
       .wrap {
         height: auto;
+
         .content {
           position: relative;
           white-space: normal;
@@ -44,12 +30,14 @@
       position: relative;
       padding-right: 40px;
     }
+
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin: $noticebar-lefticon-margin;
       background-size: 100% 100%;
     }
+
     .right-icon {
       display: flex;
       align-items: center;
@@ -57,6 +45,7 @@
       width: $noticebar-right-icon-width;
       margin: $noticebar-righticon-margin;
     }
+
     .wrap {
       display: flex;
       flex: 1;
@@ -65,9 +54,11 @@
       overflow: hidden;
       position: relative;
     }
+
     .content {
       position: absolute;
       white-space: nowrap;
+
       &.nut-ellipsis {
         max-width: 100%;
         white-space: nowrap;
@@ -75,13 +66,15 @@
         text-overflow: ellipsis;
       }
     }
-    // 只跑一次
+
     .play {
       animation: nut-notice-bar-play linear both running;
     }
+
     .play-infinite {
       animation: nut-notice-bar-play-infinite linear infinite both running;
     }
+
     .play-vertical {
       animation: nut-notice-bar-play-vertical linear infinite both running;
     }
@@ -98,14 +91,13 @@
       transform: translate3d(-100%, 0, 0);
     }
   }
-  // 垂直方向的滚动
+
   @keyframes nut-notice-bar-play-vertical {
     to {
       transform: translateY($noticebar-height);
     }
   }
 
-  // 纵向
   .nut-noticebar-vertical {
     position: relative;
     display: flex;
@@ -116,6 +108,7 @@
     padding: $noticebar-box-padding;
     background: $noticebar-background;
     color: $noticebar-color;
+
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
@@ -124,11 +117,13 @@
       display: flex;
       align-self: center;
     }
+
     .horseLamp_list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
+
       .horseLamp_list_item {
         display: flex;
         align-items: center;
@@ -136,6 +131,7 @@
         width: 100%;
       }
     }
+
     .nut-noticebar__inner {
       display: flex;
       height: 100%;

package/dist/packages/pagination/pagination.scss

@@ -1,46 +1,19 @@
-.nut-theme-dark {
-  .nut-pagination {
-    &__prev,
-    &__item,
-    &__next {
-      background: $dark5;
-      border: 1px solid $dark5;
-    }
-    &-simple {
-      background: $dark4;
-    }
-    .simple-border {
-      border-color: $dark2;
-    }
-    .disabled {
-      background-color: $dark2;
-      color: $disable-color;
-      border: 1px solid $dark2;
-    }
-    &.active {
-      background: $dark-pagination-active-background-color;
-    }
-    &__contain {
-      .nut-pagination__item {
-        background-color: $dark5;
-        border: 1px solid $dark4;
-      }
-    }
-  }
-}
 .nut-pagination {
   display: flex;
   font-size: $pagination-font-size;
   color: $pagination-color;
+
   &__contain {
     display: flex;
   }
+
   &__simple {
     height: 39px;
     width: 124px;
     line-height: 39px;
     text-align: center;
   }
+
   &__prev,
   &__item,
   &__next {
@@ -56,23 +29,28 @@
     border: $pagination-item-border-width solid $pagination-item-border-color;
     cursor: pointer;
   }
+
   &__prev,
   &__item {
     border-right: none;
   }
+
   &__prev,
   &__next {
     padding: $pagination-prev-next-padding;
   }
+
   .simple-border {
     border-right: $pagination-item-border-width solid
       $pagination-item-border-color;
   }
+
   .active {
     color: $white;
     border: none;
     background: $pagination-active-background-color;
   }
+
   .disabled {
     color: $pagination-disable-color;
     background-color: $pagination-disable-background-color;