@nutui/nutui-react-taro 3.0.6 → 3.0.7

package/dist/cjs/packages/popover/style/popover.scss

@@ -30,13 +30,14 @@
         transform: rotate(90deg) translateY(-50%);
       }
 
-      &.nut-popover-arrow-left-start {
+      &.nut-popover-arrow-left-top {
         top: 16px;
         right: -8px;
         transform: rotate(90deg) translateY(0%);
       }
 
-      &.nut-popover-arrow-left-end {
+      &.nut-popover-arrow-left-bottom {
+        top: auto;
         bottom: 16px;
         right: -8px;
         transform: rotate(90deg) translateY(0%);
@@ -51,13 +52,13 @@
         transform: rotate(-90deg) translateY(-50%);
       }
 
-      &.nut-popover-arrow-right-start {
+      &.nut-popover-arrow-right-top {
         top: 16px;
         left: -8px;
         transform: rotate(-90deg) translateY(0%);
       }
 
-      &.nut-popover-arrow-right-end {
+      &.nut-popover-arrow-right-bottom {
         bottom: 16px;
         left: -8px;
         transform: rotate(-90deg) translateY(0%);
@@ -75,13 +76,16 @@
     max-height: initial;
     overflow-y: initial;
 
-    .nut-popover-menu-item {
+    &-group {
+      padding: 0 $popover-padding;
+    }
+
+    .nut-popover-item {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 $popover-menu-item-padding;
       border-bottom: 1px solid $popover-divider-color;
-      max-width: $popover-menu-item-width;
+      max-width: $popover-item-width;
       word-wrap: break-word;
 
       &:last-child {
@@ -89,48 +93,42 @@
         border-bottom: none;
       }
 
-      &-icon {
+      &-icon,
+      &-action-icon {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 12px;
-        height: 12px;
-        font-size: 12px;
+        width: $font-size-s;
+        height: $font-size-s;
+        font-size: $font-size-s;
         .nut-icon {
-          width: 12px;
-          height: 12px;
-          font-size: 12px;
+          width: $font-size-s;
+          height: $font-size-s;
+          font-size: $font-size-s;
         }
       }
 
+      &-icon {
+        margin-right: $spacing-xxs;
+      }
+
       &-name {
         width: calc(100% - 34px);
         word-break: keep-all;
-        margin: 0 8px 0 4px;
         flex: 1;
       }
 
       &-action-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 12px;
-        height: 12px;
-        font-size: 12px;
         color: $color-text;
-        .nut-icon {
-          width: 12px;
-          height: 12px;
-          font-size: 12px;
-        }
+        margin-left: $spacing-base;
       }
 
-      &.nut-popover-menu-disabled {
+      &.nut-popover-item-disabled {
         color: $popover-disable-color;
         cursor: not-allowed;
       }
 
-      &.nut-popover-menu-taroitem {
+      &.nut-popover-taroitem {
         display: flex;
       }
     }
@@ -143,18 +141,18 @@
       }
     }
 
-    &-top-end {
+    &-top-right {
       right: 0;
-      .nut-popover-arrow-top-end {
+      .nut-popover-arrow-top-right {
         right: 16px;
         bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
       }
     }
 
-    &-top-start {
+    &-top-left {
       left: 0;
-      .nut-popover-arrow-top-start {
+      .nut-popover-arrow-top-left {
         left: 16px;
         bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
@@ -168,35 +166,35 @@
       }
     }
 
-    &-bottom-end {
+    &-bottom-right {
       right: 0;
-      .nut-popover-arrow-bottom-end {
+      .nut-popover-arrow-bottom-right {
         right: 16px;
         transform: translateX(0%);
       }
     }
 
-    &-bottom-start {
+    &-bottom-left {
       left: 0;
-      .nut-popover-arrow-bottom-start {
+      .nut-popover-arrow-bottom-left {
         left: 16px;
         transform: translateX(0%);
       }
     }
 
-    &-left-end {
+    &-left-bottom {
       bottom: 0;
     }
 
-    &-left-start {
+    &-left-top {
       top: 0;
     }
 
-    &-right-end {
+    &-right-bottom {
       bottom: 0;
     }
 
-    &-right-start {
+    &-right-top {
       top: 0;
     }
   }
@@ -215,7 +213,7 @@
   .nut-popover-content {
     background: $popover-text-color !important;
     color: $popover-content-background-color !important;
-    .nut-popover-menu-item {
+    .nut-popover-item {
       &-action-icon {
         color: rgba(255, 255, 255, 0.8);
       }
@@ -226,7 +224,7 @@
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
   .nut-popover-content {
-    .nut-popover-menu-item {
+    .nut-popover-item {
       &-name {
         margin-left: 0;
         margin-right: 4px;
@@ -234,7 +232,6 @@
 
       &-action-icon {
         right: auto;
-        left: $popover-menu-item-padding;
       }
     }
     &-top {
@@ -244,21 +241,21 @@
         transform: translateX(50%);
       }
     }
-    &-top-end {
+    &-top-right {
       right: auto;
       left: 0;
 
-      .nut-popover-arrow-top-end {
+      .nut-popover-arrow-top-right {
         right: auto;
         left: 16px;
       }
     }
 
-    &-top-start {
+    &-top-left {
       left: auto;
       right: 0;
 
-      .nut-popover-arrow-top-start {
+      .nut-popover-arrow-top-left {
         left: auto;
         right: 16px;
       }
@@ -271,22 +268,22 @@
         transform: translateX(50%);
       }
     }
-    &-bottom-end {
+    &-bottom-right {
       right: auto;
 
       left: 0;
 
-      .nut-popover-arrow-bottom-end {
+      .nut-popover-arrow-bottom-right {
         right: auto;
         left: 16px;
       }
     }
 
-    &-bottom-start {
+    &-bottom-left {
       left: auto;
       right: 0;
 
-      .nut-popover-arrow-bottom-start {
+      .nut-popover-arrow-bottom-left {
         left: auto;
         right: 16px;
       }

package/dist/cjs/packages/popover/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {
@@ -411,12 +411,13 @@
   top: 50%;
   transform: rotate(90deg) translateY(-50%);
 }
-.nut-popover-arrow-left.nut-popover-arrow-left-start {
+.nut-popover-arrow-left.nut-popover-arrow-left-top {
   top: 16px;
   right: -8px;
   transform: rotate(90deg) translateY(0%);
 }
-.nut-popover-arrow-left.nut-popover-arrow-left-end {
+.nut-popover-arrow-left.nut-popover-arrow-left-bottom {
+  top: auto;
   bottom: 16px;
   right: -8px;
   transform: rotate(90deg) translateY(0%);
@@ -429,12 +430,12 @@
   left: -6px;
   transform: rotate(-90deg) translateY(-50%);
 }
-.nut-popover-arrow-right.nut-popover-arrow-right-start {
+.nut-popover-arrow-right.nut-popover-arrow-right-top {
   top: 16px;
   left: -8px;
   transform: rotate(-90deg) translateY(0%);
 }
-.nut-popover-arrow-right.nut-popover-arrow-right-end {
+.nut-popover-arrow-right.nut-popover-arrow-right-bottom {
   bottom: 16px;
   left: -8px;
   transform: rotate(-90deg) translateY(0%);
@@ -449,57 +450,51 @@
   max-height: initial;
   overflow-y: initial;
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item {
+.nut-popover .nut-popover-content-group {
+  padding: 0 var(--nutui-popover-padding, 8px);
+}
+.nut-popover .nut-popover-content .nut-popover-item {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--nutui-popover-menu-item-padding, 8px);
   border-bottom: 1px solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  max-width: var(--nutui-popover-menu-item-width, 160px);
+  max-width: var(--nutui-popover-item-width, 160px);
   word-wrap: break-word;
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item:last-child {
+.nut-popover .nut-popover-content .nut-popover-item:last-child {
   margin-bottom: 0px;
   border-bottom: none;
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item-icon {
+.nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
+  width: var(--nutui-font-size-s, 12px);
+  height: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, 12px);
+}
+.nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon {
+  width: var(--nutui-font-size-s, 12px);
+  height: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, 12px);
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item-icon .nut-icon {
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
+.nut-popover .nut-popover-content .nut-popover-item-icon {
+  margin-right: var(--nutui-spacing-xxs, 4px);
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item-name {
+.nut-popover .nut-popover-content .nut-popover-item-name {
   width: calc(100% - 34px);
   word-break: keep-all;
-  margin: 0 8px 0 4px;
   flex: 1;
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
+.nut-popover .nut-popover-content .nut-popover-item-action-icon {
   color: var(--nutui-color-text, #505259);
+  margin-left: var(--nutui-spacing-base, 8px);
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item-action-icon .nut-icon {
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
-}
-.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled {
+.nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled {
   color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   cursor: not-allowed;
 }
-.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-taroitem {
+.nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem {
   display: flex;
 }
 .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -507,18 +502,18 @@
   transform-origin: center left;
   transform: rotate(180deg) translateX(-50%);
 }
-.nut-popover .nut-popover-content-top-end {
+.nut-popover .nut-popover-content-top-right {
   right: 0;
 }
-.nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end {
+.nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
   right: 16px;
   bottom: -3.5px;
   transform: rotate(180deg) translateX(0%);
 }
-.nut-popover .nut-popover-content-top-start {
+.nut-popover .nut-popover-content-top-left {
   left: 0;
 }
-.nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start {
+.nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
   left: 16px;
   bottom: -3.5px;
   transform: rotate(180deg) translateX(0%);
@@ -527,30 +522,30 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.nut-popover .nut-popover-content-bottom-end {
+.nut-popover .nut-popover-content-bottom-right {
   right: 0;
 }
-.nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end {
+.nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
   right: 16px;
   transform: translateX(0%);
 }
-.nut-popover .nut-popover-content-bottom-start {
+.nut-popover .nut-popover-content-bottom-left {
   left: 0;
 }
-.nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start {
+.nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
   left: 16px;
   transform: translateX(0%);
 }
-.nut-popover .nut-popover-content-left-end {
+.nut-popover .nut-popover-content-left-bottom {
   bottom: 0;
 }
-.nut-popover .nut-popover-content-left-start {
+.nut-popover .nut-popover-content-left-top {
   top: 0;
 }
-.nut-popover .nut-popover-content-right-end {
+.nut-popover .nut-popover-content-right-bottom {
   bottom: 0;
 }
-.nut-popover .nut-popover-content-right-start {
+.nut-popover .nut-popover-content-right-top {
   top: 0;
 }
 
@@ -565,19 +560,18 @@
   background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important;
   color: var(--nutui-popover-content-background-color, #ffffff) !important;
 }
-.nut-popover-dark .nut-popover-content .nut-popover-menu-item-action-icon {
+.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon {
   color: rgba(255, 255, 255, 0.8);
 }
 
-[dir=rtl] .nut-popover .nut-popover-content .nut-popover-menu-item-name,
-.nut-rtl .nut-popover .nut-popover-content .nut-popover-menu-item-name {
+[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-name,
+.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name {
   margin-left: 0;
   margin-right: 4px;
 }
-[dir=rtl] .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon,
-.nut-rtl .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
+[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-action-icon,
+.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon {
   right: auto;
-  left: var(--nutui-popover-menu-item-padding, 8px);
 }
 [dir=rtl] .nut-popover .nut-popover-content-top .nut-popover-arrow-top,
 .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -585,23 +579,23 @@
   right: 50%;
   transform: translateX(50%);
 }
-[dir=rtl] .nut-popover .nut-popover-content-top-end,
-.nut-rtl .nut-popover .nut-popover-content-top-end {
+[dir=rtl] .nut-popover .nut-popover-content-top-right,
+.nut-rtl .nut-popover .nut-popover-content-top-right {
   right: auto;
   left: 0;
 }
-[dir=rtl] .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end,
-.nut-rtl .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end {
+[dir=rtl] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right,
+.nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
   right: auto;
   left: 16px;
 }
-[dir=rtl] .nut-popover .nut-popover-content-top-start,
-.nut-rtl .nut-popover .nut-popover-content-top-start {
+[dir=rtl] .nut-popover .nut-popover-content-top-left,
+.nut-rtl .nut-popover .nut-popover-content-top-left {
   left: auto;
   right: 0;
 }
-[dir=rtl] .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start,
-.nut-rtl .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start {
+[dir=rtl] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left,
+.nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
   left: auto;
   right: 16px;
 }
@@ -611,23 +605,23 @@
   right: 50%;
   transform: translateX(50%);
 }
-[dir=rtl] .nut-popover .nut-popover-content-bottom-end,
-.nut-rtl .nut-popover .nut-popover-content-bottom-end {
+[dir=rtl] .nut-popover .nut-popover-content-bottom-right,
+.nut-rtl .nut-popover .nut-popover-content-bottom-right {
   right: auto;
   left: 0;
 }
-[dir=rtl] .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end,
-.nut-rtl .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end {
+[dir=rtl] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right,
+.nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
   right: auto;
   left: 16px;
 }
-[dir=rtl] .nut-popover .nut-popover-content-bottom-start,
-.nut-rtl .nut-popover .nut-popover-content-bottom-start {
+[dir=rtl] .nut-popover .nut-popover-content-bottom-left,
+.nut-rtl .nut-popover .nut-popover-content-bottom-left {
   left: auto;
   right: 0;
 }
-[dir=rtl] .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start,
-.nut-rtl .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start {
+[dir=rtl] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left,
+.nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
   left: auto;
   right: 16px;
 }