@nutui/nutui-react 2.1.0-beta.0 → 2.1.0

package/dist/packages/picker/picker.scss

@@ -1,25 +1,25 @@
 
 .nut-picker {
-  background-color: $color-background-overlay;
+  background-color: $background-color3;
   width: 100%;
 
   &__control {
     display: flex;
-    height: $popup-title-height;
-    font-size: $popup-title-font-size;
+    height: 56px;
+    font-size: 16px;
     align-items: center;
     justify-content: space-between;
-    padding: $popup-title-padding;
+    padding: $picker-bar-button-padding;
   }
 
   &__cancel-btn {
-    color: $color-text;
-    font-size: $picker-title-cancel-font-size;
+    color: $picker-bar-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
   }
 
   &__confirm-btn {
-    color: $color-primary;
-    font-size: $picker-title-ok-font-size;
+    color: $picker-bar-ok-color;
+    font-size: $picker-bar-ok-font-size;
   }
 
   &__title {
@@ -28,9 +28,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: center;
-    color: $color-title;
-    font-size: $popup-title-font-size;
-    font-weight: $font-weight-bold;
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
   }
 
   &__panel {
@@ -50,7 +50,7 @@
     font-size: $picker-item-text-font-size;
     z-index: 3;
 
-    &-jdapp {
+    &-taro {
       height: $picker-item-height;
       border: 0;
 
@@ -81,7 +81,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-image: $picker-mask-background;
+    background-image: $picker-mask-bg-img;
     background-position: top, bottom;
     background-size: 100% 108px;
     background-repeat: no-repeat;
@@ -136,17 +136,16 @@
     position: absolute;
     top: 0;
     width: 100%;
-    color: $color-title;
   }
 
   &-roller-item-title {
     display: block;
     width: 100%;
-    height: 36px;
-    line-height: 36px;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
     text-align: center;
-    color: $color-title;
-    font-size: $font-size-base;
+    color: $picker-item-text-color;
+    font-size: $picker-bar-title-font-size;
   }
 
   &-roller-item-hidden {

package/dist/packages/popover/popover.scss

@@ -12,14 +12,14 @@
 
     &-top {
       bottom: 0;
-      border-top-color: $popover-border-color;
+      border-top-color: $popover-white-background-color;
       border-bottom-width: 0;
       margin-bottom: -8px;
     }
 
     &-bottom {
       top: 0px;
-      border-bottom-color: $popover-border-color;
+      border-bottom-color: $popover-white-background-color;
       border-top-width: 0;
       margin-top: -8px;
 
@@ -41,7 +41,7 @@
 
     &-left {
       right: 0px;
-      border-left-color: $popover-border-color;
+      border-left-color: $popover-white-background-color;
       border-right-width: 0;
       margin-right: -8px;
 
@@ -63,7 +63,7 @@
 
     &-right {
       left: 0px;
-      border-right-color: $popover-border-color;
+      border-right-color: $popover-white-background-color;
       border-left-width: 0;
       margin-left: -8px;
 
@@ -91,7 +91,7 @@
     font-size: $popover-font-size;
     font-family: PingFangSC;
     font-weight: normal;
-    color: $popover-text-color;
+    color: $popover-primary-text-color;
     box-shadow: 0 2px 12px #3232331f;
     max-height: initial;
     overflow-y: initial;
@@ -103,18 +103,22 @@
     }
 
     .nut-popover-menu-item {
-      position: relative;
       display: flex;
       align-items: center;
-      justify-content: center;
       padding: $popover-menu-item-padding;
-      border-bottom: 1px solid $popover-divider-color;
+      border-bottom: 1px solid $popover-border-bottom-color;
 
       &:last-child {
         margin-bottom: 2px;
         border-bottom: none;
       }
 
+      &:hover {
+        cursor: pointer;
+        color: $popover-menu-item-hover-text-color;
+        background-color: $popover-menu-item-hover-background-color;
+      }
+
       &:hover:nth-of-type(2) {
         border-radius: 8px 8px 0px 0px;
       }
@@ -123,31 +127,9 @@
         border-radius: 0px 0px 8px 8px;
       }
 
-      &-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 12px;
-        height: 12px;
-        font-size: 12px;
-      }
-
-      &-name {
+      .nut-popover-menu-item-name {
         width: 100%;
         word-break: keep-all;
-        margin-left: 4px;
-      }
-
-      &-action-icon {
-        position: absolute;
-        right: $popover-menu-item-padding;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 12px;
-        height: 12px;
-        font-size: 12px;
-        color: $color-text;
       }
 
       &.nut-popover-menu-disabled {
@@ -172,11 +154,13 @@
         right: 16px;
         transform: translateX(0%);
       }
+
       right: 0;
     }
 
     &--top-start {
       left: 0;
+
       .nut-popover-arrow--top-start {
         left: 16px;
         transform: translateX(0%);