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

package/dist/packages/picker/picker.scss

@@ -1,39 +1,39 @@
 
 .nut-picker {
-  background-color: $background-color3;
+  background-color: $color-background-overlay;
   width: 100%;
 
-  &__control {
+  &-control {
     display: flex;
-    height: 56px;
-    font-size: 16px;
+    height: $popup-title-height;
+    font-size: $popup-title-font-size;
     align-items: center;
     justify-content: space-between;
-    padding: $picker-bar-button-padding;
+    padding: $popup-title-padding;
   }
 
-  &__cancel-btn {
-    color: $picker-bar-cancel-color;
-    font-size: $picker-bar-cancel-font-size;
+  &-cancel-btn {
+    color: $color-text;
+    font-size: $picker-title-cancel-font-size;
   }
 
-  &__confirm-btn {
-    color: $picker-bar-ok-color;
-    font-size: $picker-bar-ok-font-size;
+  &-confirm-btn {
+    color: $color-primary;
+    font-size: $picker-title-ok-font-size;
   }
 
-  &__title {
+  &-title {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: center;
-    color: $picker-bar-title-color;
-    font-size: $picker-bar-title-font-size;
-    font-weight: $picker-bar-title-font-weight;
+    color: $color-title;
+    font-size: $popup-title-font-size;
+    font-weight: $font-weight-bold;
   }
 
-  &__panel {
+  &-panel {
     display: flex;
     position: relative;
   }
@@ -81,7 +81,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-image: $picker-mask-bg-img;
+    background-image: $picker-mask-background;
     background-position: top, bottom;
     background-size: 100% 108px;
     background-repeat: no-repeat;
@@ -144,8 +144,8 @@
     height: $picker-item-height;
     line-height: $picker-item-height;
     text-align: center;
-    color: $picker-item-text-color;
-    font-size: $picker-bar-title-font-size;
+    color: $color-title;
+    font-size: $font-size-base;
   }
 
   &-roller-item-hidden {

package/dist/packages/popover/popover.scss

@@ -12,28 +12,28 @@
 
     &-top {
       bottom: 0;
-      border-top-color: $popover-white-background-color;
+      border-top-color: $popover-border-color;
       border-bottom-width: 0;
       margin-bottom: -8px;
     }
 
     &-bottom {
       top: 0px;
-      border-bottom-color: $popover-white-background-color;
+      border-bottom-color: $popover-border-color;
       border-top-width: 0;
       margin-top: -8px;
 
-      &.nut-popover-arrow--bottom {
+      &.nut-popover-arrow-bottom {
         left: 50%;
         transform: translateX(-50%);
       }
 
-      &.nut-popover-arrow--bottom-start {
+      &.nut-popover-arrow-bottom-start {
         left: 16px;
         transform: translateX(0%);
       }
 
-      &.nut-popover-arrow--bottom-end {
+      &.nut-popover-arrow-bottom-end {
         right: 16px;
         transform: translateX(0%);
       }
@@ -41,21 +41,21 @@
 
     &-left {
       right: 0px;
-      border-left-color: $popover-white-background-color;
+      border-left-color: $popover-border-color;
       border-right-width: 0;
       margin-right: -8px;
 
-      &.nut-popover-arrow--left {
+      &.nut-popover-arrow-left {
         top: 50%;
         transform: translateY(-50%);
       }
 
-      &.nut-popover-arrow--left-start {
+      &.nut-popover-arrow-left-start {
         top: 16px;
         transform: translateY(0%);
       }
 
-      &.nut-popover-arrow--left-end {
+      &.nut-popover-arrow-left-end {
         bottom: 16px;
         transform: translateY(0%);
       }
@@ -63,21 +63,21 @@
 
     &-right {
       left: 0px;
-      border-right-color: $popover-white-background-color;
+      border-right-color: $popover-border-color;
       border-left-width: 0;
       margin-left: -8px;
 
-      &.nut-popover-arrow--right {
+      &.nut-popover-arrow-right {
         top: 50%;
         transform: translateY(-50%);
       }
 
-      &.nut-popover-arrow--right-start {
+      &.nut-popover-arrow-right-start {
         top: 16px;
         transform: translateY(0%);
       }
 
-      &.nut-popover-arrow--right-end {
+      &.nut-popover-arrow-right-end {
         bottom: 16px;
         transform: translateY(0%);
       }
@@ -91,7 +91,7 @@
     font-size: $popover-font-size;
     font-family: PingFangSC;
     font-weight: normal;
-    color: $popover-primary-text-color;
+    color: $popover-text-color;
     box-shadow: 0 2px 12px #3232331f;
     max-height: initial;
     overflow-y: initial;
@@ -103,22 +103,18 @@
     }
 
     .nut-popover-menu-item {
+      position: relative;
       display: flex;
       align-items: center;
+      justify-content: center;
       padding: $popover-menu-item-padding;
-      border-bottom: 1px solid $popover-border-bottom-color;
+      border-bottom: 1px solid $popover-divider-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;
       }
@@ -127,9 +123,31 @@
         border-radius: 0px 0px 8px 8px;
       }
 
-      .nut-popover-menu-item-name {
+      &-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 12px;
+        height: 12px;
+        font-size: 12px;
+      }
+
+      &-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 {
@@ -142,48 +160,46 @@
       }
     }
 
-    &--top {
-      .nut-popover-arrow--top {
+    &-top {
+      .nut-popover-arrow-top {
         left: 50%;
         transform: translateX(-50%);
       }
     }
 
-    &--top-end {
-      .nut-popover-arrow--top-end {
+    &-top-end {
+      .nut-popover-arrow-top-end {
         right: 16px;
         transform: translateX(0%);
       }
-
       right: 0;
     }
 
-    &--top-start {
+    &-top-start {
       left: 0;
-
-      .nut-popover-arrow--top-start {
+      .nut-popover-arrow-top-start {
         left: 16px;
         transform: translateX(0%);
       }
     }
 
-    &--bottom-end {
+    &-bottom-end {
       right: 0;
     }
 
-    &--left-end {
+    &-left-end {
       bottom: 0;
     }
 
-    &--left-start {
+    &-left-start {
       top: 0;
     }
 
-    &--right-end {
+    &-right-end {
       bottom: 0;
     }
 
-    &--right-start {
+    &-right-start {
       top: 0;
     }
   }