@nutui/nutui-react 2.3.2 → 2.3.4

package/dist/packages/checkbox/checkbox.scss

@@ -99,7 +99,10 @@
 
       // background-color: $color-primary;
       .nut-icon {
+        position: absolute;
         font-size: 12px;
+        width: 12px;
+        height: 12px;
         &:before {
           top: auto;
           bottom: -22px;

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -11,7 +11,7 @@
     font-size: $font-size-small;
     color: $infiniteloading-color;
 
-    .top-box {
+    &-tips {
       width: 100%;
       display: flex;
       flex-direction: column;
@@ -21,8 +21,6 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: $pulltorefresh-icon-width;
-        height: $pulltorefresh-icon-height;
         margin-bottom: 4px;
       }
     }
@@ -38,14 +36,12 @@
     color: $infiniteloading-color;
     text-align: center;
 
-    .bottom-box {
+    &-tips {
       display: flex;
       justify-content: center;
       align-items: center;
 
       &-icons {
-        width: $infiniteloading-icon-size;
-        height: $infiniteloading-icon-size;
         margin-right: 8px;
       }
     }

package/dist/packages/menuitem/menuitem.scss

@@ -26,7 +26,7 @@
       color: $menu-item-active-color;
     }
 
-    i {
+    .nut-icon {
       display: inline-flex;
       align-items: center;
       margin-right: $menu-item-icon-margin;

package/dist/packages/popover/popover.scss

@@ -22,21 +22,6 @@
       border-bottom-color: $popover-border-color;
       border-top-width: 0;
       margin-top: -8px;
-
-      &.nut-popover-arrow-bottom {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      &.nut-popover-arrow-bottom-start {
-        left: 16px;
-        transform: translateX(0%);
-      }
-
-      &.nut-popover-arrow-bottom-end {
-        right: 16px;
-        transform: translateX(0%);
-      }
     }
 
     &-left {
@@ -189,10 +174,31 @@
       }
     }
 
+    &-bottom {
+      .nut-popover-arrow-bottom {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
     &-bottom-end {
+      .nut-popover-arrow-bottom-end {
+        right: 16px;
+        transform: translateX(0%);
+      }
+
       right: 0;
     }
 
+    &-bottom-start {
+      left: 0;
+
+      .nut-popover-arrow-bottom-start {
+        left: 16px;
+        transform: translateX(0%);
+      }
+    }
+
     &-left-end {
       bottom: 0;
     }

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -10,10 +10,6 @@
   color: $tabbar-inactive-color;
   height: 100%;
 
-  &-active {
-    color: $tabbar-active-color;
-  }
-
   &-icon-box {
     padding: 0px;
     display: flex;
@@ -40,4 +36,14 @@
       font-weight: $tabbar-text-large-font-weight;
     }
   }
+
+  &-active {
+    color: $tabbar-active-color;
+    .nut-tabbar-item-icon-box {
+      color: inherit;
+      .nut-icon {
+        color: inherit;
+      }
+    }
+  }
 }

package/dist/packages/table/table.scss

@@ -1,17 +1,29 @@
 .nut-table {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  font-size: $font-size-base;
-  color: $color-title;
+  overflow: hidden;
+  position: relative;
+
+  &-wrapper {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    font-size: $font-size-base;
+    color: $color-title;
+    overflow: auto;
+    position: relative;
+    border: 1px solid $table-border-color;
+  }
 
   &-main {
     display: table;
-    width: 100%;
-    border-collapse: collapse;
-    overflow-x: hidden;
+    // width: 100%;
+    // border-collapse: collapse;
+    overflow-x: auto;
     color: $color-title;
     background-color: $color-background-overlay;
+    table-layout: fixed;
+    width: max-content;
+    min-width: 100%;
+    position: relative;
 
     &-striped {
       .nut-table-main-head {
@@ -35,17 +47,41 @@
 
     &-head,
     &-body {
+      background: inherit;
       &-tr {
         display: table-row;
+        background: inherit;
+
+        &:last-child {
+          .nut-table-main-body-tr-td {
+            border-bottom: none;
+          }
+        }
 
         &-th {
           display: table-cell;
           padding: $table-cols-padding;
+          background: inherit;
+          position: sticky;
+          top: 0;
+          &.nut-table-fixed-left,
+          &.nut-table-fixed-right {
+            z-index: 4;
+          }
+
+          &:last-child {
+            border-right: none;
+          }
         }
 
         &-td {
           display: table-cell;
           padding: $table-cols-padding;
+          background: inherit;
+
+          &:last-child {
+            border-right: none;
+          }
 
           &-nodata {
             display: flex;
@@ -56,7 +92,8 @@
         }
 
         &-border {
-          border: 1px solid $table-border-color;
+          border-right: 1px solid $table-border-color;
+          border-bottom: 1px solid $table-border-color;
         }
 
         &-alignleft,
@@ -83,6 +120,40 @@
     }
   }
 
+  &-sticky-left,
+  &-sticky-right {
+    position: absolute;
+    top: 0px;
+    width: 8px;
+    bottom: -1px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    box-shadow: none;
+    touch-action: none;
+    pointer-events: none;
+    z-index: 3;
+    background: transparent;
+  }
+
+  &-sticky-left {
+    left: 1px;
+    box-shadow: $table-sticky-left-shadow;
+  }
+
+  &-sticky-right {
+    right: 1px;
+    box-shadow: $table-sticky-right-shadow;
+  }
+
+  &-fixed-left,
+  &-fixed-right {
+    position: sticky;
+    z-index: 2;
+  }
+  &-fixed-left-last {
+    border-right: none;
+  }
+
   &-summary {
     color: $color-title;
     background-color: $color-background-overlay;
@@ -91,5 +162,7 @@
     justify-content: center;
     height: 30px;
     padding: $table-cols-padding;
+    position: relative;
+    z-index: 5;
   }
 }