@nutui/nutui-react-taro 2.7.7 → 2.7.9

package/dist/packages/animate/animate.scss

@@ -1,185 +1,161 @@
 .nut-animate {
-  /* Animation css */
+  /* Animation CSS */
   [class*='nut-animate-'] {
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
     animation-fill-mode: both;
   }
 
-  //右侧向左侧划入
-  .nut-animate-slide-right {
-    animation-name: slide-right;
-  }
-
+  /* Slide Animations */
   @keyframes slide-right {
     0% {
       opacity: 0;
       transform: translateX(100%);
     }
-
     100% {
       opacity: 1;
       transform: translateX(0);
     }
   }
 
-  //左侧向右侧划入
-  .nut-animate-slide-left {
-    animation-name: slide-left;
-  }
-
   @keyframes slide-left {
     0% {
       opacity: 0;
       transform: translateX(-100%);
     }
-
     100% {
       opacity: 1;
       transform: translateX(0);
     }
   }
 
-  //上面向下面划入
-  .nut-animate-slide-top {
-    animation-name: slide-top;
-  }
-
   @keyframes slide-top {
     0% {
       opacity: 0;
       transform: translateY(-100%);
     }
-
     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }
 
-  //下面向上面划入
-  .nut-animate-slide-bottom {
-    animation-name: slide-bottom;
-  }
-
   @keyframes slide-bottom {
     0% {
       opacity: 0;
       transform: translateY(100%);
     }
-
     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }
 
-  //抖动
-  .nut-animate-shake {
-    animation-name: shake;
+  // Assign slide animations
+  // 右侧向左侧滑入
+  .nut-animate-slide-right {
+    animation-name: slide-right;
+  }
+  // 左侧向右侧滑入
+  .nut-animate-slide-left {
+    animation-name: slide-left;
+  }
+  // 上面向下面滑入
+  .nut-animate-slide-top {
+    animation-name: slide-top;
+  }
+  // 下面向上面滑入
+  .nut-animate-slide-bottom {
+    animation-name: slide-bottom;
   }
 
+  /* Shake Animation */
   @keyframes shake {
     0%,
     100% {
       transform: translateX(0);
     }
-
     10% {
       transform: translateX(-9px);
     }
-
     20% {
       transform: translateX(8px);
     }
-
     30% {
       transform: translateX(-7px);
     }
-
     40% {
       transform: translateX(6px);
     }
-
     50% {
       transform: translateX(-5px);
     }
-
     60% {
       transform: translateX(4px);
     }
-
     70% {
       transform: translateX(-3px);
     }
-
     80% {
       transform: translateX(2px);
     }
-
     90% {
       transform: translateX(-1px);
     }
   }
-
-  //心跳
-  .nut-animate-ripple {
-    animation-name: ripple;
+  .nut-animate-shake {
+    animation-name: shake;
   }
 
+  /* Ripple Animation */
   @keyframes ripple {
     0% {
       transform: scale(1);
     }
-
     50% {
       transform: scale(1.1);
     }
   }
-
-  //呼吸灯
-  .nut-animate-breath {
-    animation-name: breath;
-    animation-duration: 2700ms;
-    animation-timing-function: ease-in-out;
-    animation-direction: alternate;
+  .nut-animate-ripple {
+    animation-name: ripple;
   }
 
+  /* Breath Animation */
   @keyframes breath {
-    0% {
+    0%,
+    100% {
       transform: scale(1);
     }
-
     50% {
       transform: scale(1.1);
     }
-
-    100% {
-      transform: scale(1);
-    }
+  }
+  .nut-animate-breath {
+    animation-name: breath;
+    animation-duration: 2700ms;
+    animation-timing-function: ease-in-out;
+    animation-direction: alternate;
   }
 
-  // 水波
+  /* Twinkle Animation */
   .nut-animate-twinkle {
     position: relative;
-
     &::after,
     &::before {
-      width: 60 * 1px;
-      height: 60 * 1px;
+      width: 60px;
+      height: 60px;
       content: '';
       box-sizing: border-box;
-      border: 4 * 1px solid rgba(255, 255, 255, 0.6);
+      border: 4px solid rgba(255, 255, 255, 0.6);
       position: absolute;
-      border-radius: calc(60 / 2) * 1px;
+      border-radius: 30px;
       right: 50%;
-      margin-top: calc(-30 / 2) * 1px;
-      margin-right: calc(-60 / 2) * 1px;
+      margin-top: -30px;
+      margin-right: -30px;
       z-index: 1;
       transform: scale(0);
       animation: twinkle 2s ease-out infinite;
     }
-
     &::after {
       animation-delay: 0.4s;
     }
@@ -189,11 +165,9 @@
     0% {
       transform: scale(0);
     }
-
     20% {
       opacity: 1;
     }
-
     50%,
     100% {
       transform: scale(1.4);
@@ -201,13 +175,13 @@
     }
   }
 
+  /* Flicker Animation */
   .nut-animate-flicker {
     position: relative;
     overflow: hidden;
-
     &::after {
-      width: 100 * 1px;
-      height: 60 * 1px;
+      width: 100px;
+      height: 60px;
       position: absolute;
       left: 0;
       top: 0;
@@ -220,83 +194,67 @@
       );
       animation: flicker 1.5s linear infinite;
       transform: skewX(-20deg);
-      filter: blur(3 * 1px);
+      filter: blur(3px);
     }
   }
 
   @keyframes flicker {
     0% {
-      transform: translateX(-100 * 1px) skewX(-20deg);
+      transform: translateX(-100px) skewX(-20deg);
     }
-
     40%,
     100% {
-      transform: translateX(150 * 1px) skewX(-20deg);
+      transform: translateX(150px) skewX(-20deg);
     }
   }
 
-  // jump-跳跃
-  .nut-animate-jump {
-    transform-origin: center center;
-    animation: jump 0.7s linear;
-  }
-
+  /* Jump Animation */
   @keyframes jump {
     0% {
-      animation-timing-function: ease-in;
-      transform: rotate(0deg) translateY(0);
+      transform: rotate(0) translateY(0);
     }
-
     25% {
-      animation-timing-function: ease-out;
-      transform: rotate(10deg) translateY(20 * 1px);
+      transform: rotate(10deg) translateY(20px);
     }
-
     50% {
-      animation-timing-function: ease-in;
-      transform: rotate(0deg) translateY(-10 * 1px);
+      transform: rotate(0) translateY(-10px);
     }
-
     75% {
-      animation-timing-function: ease-out;
-      transform: rotate(-10deg) translateY(20 * 1px);
+      transform: rotate(-10deg) translateY(20px);
     }
-
     100% {
-      animation-timing-function: ease-in;
-      transform: rotate(0deg) translateY(0);
+      transform: rotate(0) translateY(0);
     }
   }
-
-  // 漂浮
-  .nut-animate-float {
-    position: relative;
-    animation-name: float-pop;
+  .nut-animate-jump {
+    transform-origin: center center;
+    animation: jump 0.7s linear;
   }
 
+  /* Float Animation */
   @keyframes float-pop {
     0% {
-      top: 0px;
+      top: 0;
     }
-
     25% {
       top: 1px;
     }
-
     50% {
       top: 4px;
     }
-
     75% {
       top: 1px;
     }
-
     100% {
-      top: 0px;
+      top: 0;
     }
   }
+  .nut-animate-float {
+    position: relative;
+    animation-name: float-pop;
+  }
 
-  //循环
+  /* Loop Animation */
   .loop {
     animation-iteration-count: infinite;
   }

package/dist/packages/calendar/calendar.scss

@@ -189,18 +189,18 @@
       }
     }
 
-    &-choose-disabled {
-      background-color: $calendar-choose-disable-background-color;
-      color: $calendar-disable-color !important;
-
-      .nut-calendar-day-info-curr {
-        display: none;
-      }
-    }
-
     &-choose {
       background-color: $calendar-choose-background-color;
       color: $calendar-choose-color;
+
+      &-disabled {
+        background-color: $calendar-choose-disable-background-color;
+        color: $calendar-disable-color !important;
+
+        .nut-calendar-day-info-curr {
+          display: none;
+        }
+      }
     }
   }
 

package/dist/packages/swiper/swiper.scss

@@ -6,6 +6,14 @@
   touch-action: none;
   position: relative;
 
+  &-canmove-horizontal {
+    touch-action: pan-y;
+  }
+
+  &-canmove-vertical {
+    touch-action: pan-x;
+  }
+
   &-indicator {
     display: flex;
     position: absolute;
@@ -26,11 +34,13 @@
     z-index: 1;
   }
 }
+
 .nut-swiper-inner {
   width: 100%;
   height: 100%;
   display: flex;
   position: relative;
+
   &-horizontal {
     transform: translateX(var(--swiper-offset));
   }
@@ -60,6 +70,7 @@
     right: 50%;
     transform: translateX(50%);
   }
+
   &-indicator-vertical {
     left: auto;
     right: 12px;