@nutui/nutui-react-taro 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/styles/themes/default.scss

@@ -4,87 +4,87 @@
 @import '../animation/index.scss';
 @import '../../es/packages/watermark/style/watermark.scss';
 @import '../../es/packages/virtuallist/style/virtuallist.scss';
-@import '../../es/packages/video/style/video.scss';
 @import '../../es/packages/uploader/style/uploader.scss';
-@import '../../es/packages/tour/style/tour.scss';
+@import '../../es/packages/video/style/video.scss';
 @import '../../es/packages/trendarrow/style/trendarrow.scss';
+@import '../../es/packages/tour/style/tour.scss';
 @import '../../es/packages/toast/style/toast.scss';
 @import '../../es/packages/timeselect/style/timeselect.scss';
 @import '../../es/packages/timedetail/style/timedetail.scss';
-@import '../../es/packages/textarea/style/textarea.scss';
 @import '../../es/packages/tag/style/tag.scss';
-@import '../../es/packages/tabpane/style/tabpane.scss';
+@import '../../es/packages/textarea/style/textarea.scss';
 @import '../../es/packages/tabs/style/tabs.scss';
+@import '../../es/packages/tabpane/style/tabpane.scss';
 @import '../../es/packages/table/style/table.scss';
 @import '../../es/packages/tabbaritem/style/tabbaritem.scss';
 @import '../../es/packages/tabbar/style/tabbar.scss';
-@import '../../es/packages/swiperitem/style/swiperitem.scss';
 @import '../../es/packages/switch/style/switch.scss';
+@import '../../es/packages/swiperitem/style/swiperitem.scss';
 @import '../../es/packages/swiper/style/swiper.scss';
 @import '../../es/packages/swipe/style/swipe.scss';
-@import '../../es/packages/subsidenavbar/style/subsidenavbar.scss';
 @import '../../es/packages/sticky/style/sticky.scss';
+@import '../../es/packages/subsidenavbar/style/subsidenavbar.scss';
 @import '../../es/packages/steps/style/steps.scss';
 @import '../../es/packages/step/style/step.scss';
 @import '../../es/packages/space/style/space.scss';
 @import '../../es/packages/skeleton/style/skeleton.scss';
-@import '../../es/packages/signature/style/signature.scss';
-@import '../../es/packages/sidenavbaritem/style/sidenavbaritem.scss';
 @import '../../es/packages/sidenavbar/style/sidenavbar.scss';
+@import '../../es/packages/sidenavbaritem/style/sidenavbaritem.scss';
+@import '../../es/packages/signature/style/signature.scss';
 @import '../../es/packages/shortpassword/style/shortpassword.scss';
 @import '../../es/packages/searchbar/style/searchbar.scss';
-@import '../../es/packages/safearea/style/safearea.scss';
 @import '../../es/packages/row/style/row.scss';
 @import '../../es/packages/resultpage/style/resultpage.scss';
+@import '../../es/packages/safearea/style/safearea.scss';
 @import '../../es/packages/range/style/range.scss';
 @import '../../es/packages/rate/style/rate.scss';
 @import '../../es/packages/radiogroup/style/radiogroup.scss';
-@import '../../es/packages/pulltorefresh/style/pulltorefresh.scss';
 @import '../../es/packages/radio/style/radio.scss';
-@import '../../es/packages/progress/style/progress.scss';
 @import '../../es/packages/price/style/price.scss';
+@import '../../es/packages/progress/style/progress.scss';
+@import '../../es/packages/pulltorefresh/style/pulltorefresh.scss';
 @import '../../es/packages/popup/style/popup.scss';
-@import '../../es/packages/popover/style/popover.scss';
 @import '../../es/packages/picker/style/picker.scss';
-@import '../../es/packages/pagination/style/pagination.scss';
+@import '../../es/packages/popover/style/popover.scss';
 @import '../../es/packages/overlay/style/overlay.scss';
-@import '../../es/packages/noticebar/style/noticebar.scss';
-@import '../../es/packages/numberkeyboard/style/numberkeyboard.scss';
+@import '../../es/packages/pagination/style/pagination.scss';
 @import '../../es/packages/notify/style/notify.scss';
+@import '../../es/packages/numberkeyboard/style/numberkeyboard.scss';
+@import '../../es/packages/noticebar/style/noticebar.scss';
 @import '../../es/packages/navbar/style/navbar.scss';
 @import '../../es/packages/menuitem/style/menuitem.scss';
 @import '../../es/packages/menu/style/menu.scss';
 @import '../../es/packages/loading/style/loading.scss';
-@import '../../es/packages/layout/style/layout.scss';
 @import '../../es/packages/inputnumber/style/inputnumber.scss';
 @import '../../es/packages/input/style/input.scss';
+@import '../../es/packages/layout/style/layout.scss';
 @import '../../es/packages/infiniteloading/style/infiniteloading.scss';
 @import '../../es/packages/indicator/style/indicator.scss';
 @import '../../es/packages/imagepreview/style/imagepreview.scss';
 @import '../../es/packages/image/style/image.scss';
 @import '../../es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
-@import '../../es/packages/hoverbutton/style/hoverbutton.scss';
 @import '../../es/packages/griditem/style/griditem.scss';
-@import '../../es/packages/formitem/style/formitem.scss';
+@import '../../es/packages/hoverbutton/style/hoverbutton.scss';
 @import '../../es/packages/grid/style/grid.scss';
-@import '../../es/packages/form/style/form.scss';
+@import '../../es/packages/formitem/style/formitem.scss';
 @import '../../es/packages/fixednav/style/fixednav.scss';
+@import '../../es/packages/form/style/form.scss';
 @import '../../es/packages/empty/style/empty.scss';
 @import '../../es/packages/ellipsis/style/ellipsis.scss';
+@import '../../es/packages/elevator/style/elevator.scss';
 @import '../../es/packages/drag/style/drag.scss';
 @import '../../es/packages/divider/style/divider.scss';
-@import '../../es/packages/elevator/style/elevator.scss';
 @import '../../es/packages/dialog/style/dialog.scss';
 @import '../../es/packages/datepicker/style/datepicker.scss';
-@import '../../es/packages/countup/style/countup.scss';
 @import '../../es/packages/countdown/style/countdown.scss';
+@import '../../es/packages/countup/style/countup.scss';
 @import '../../es/packages/configprovider/style/configprovider.scss';
 @import '../../es/packages/collapseitem/style/collapseitem.scss';
 @import '../../es/packages/collapse/style/collapse.scss';
 @import '../../es/packages/col/style/col.scss';
 @import '../../es/packages/circleprogress/style/circleprogress.scss';
-@import '../../es/packages/checkboxgroup/style/checkboxgroup.scss';
 @import '../../es/packages/checkbox/style/checkbox.scss';
+@import '../../es/packages/checkboxgroup/style/checkboxgroup.scss';
 @import '../../es/packages/cellgroup/style/cellgroup.scss';
 @import '../../es/packages/cell/style/cell.scss';
 @import '../../es/packages/cascader/style/cascader.scss';
@@ -93,14 +93,14 @@
 @import '../../es/packages/calendarcard/style/calendarcard.scss';
 @import '../../es/packages/calendar/style/calendar.scss';
 @import '../../es/packages/button/style/button.scss';
-@import '../../es/packages/barrage/style/barrage.scss';
 @import '../../es/packages/badge/style/badge.scss';
+@import '../../es/packages/barrage/style/barrage.scss';
 @import '../../es/packages/backtop/style/backtop.scss';
 @import '../../es/packages/avatargroup/style/avatargroup.scss';
 @import '../../es/packages/avatarcropper/style/avatarcropper.scss';
 @import '../../es/packages/avatar/style/avatar.scss';
-@import '../../es/packages/audio/style/audio.scss';
 @import '../../es/packages/animate/style/animate.scss';
+@import '../../es/packages/audio/style/audio.scss';
 @import '../../es/packages/animatingnumbers/style/animatingnumbers.scss';
 @import '../../es/packages/address/style/address.scss';
 @import '../../es/packages/actionsheet/style/actionsheet.scss';

package/dist/styles/variables.scss

@@ -229,7 +229,7 @@ $button-default-disabled-color: var(
 $button-default-padding: var(--nutui-button-default-padding, 0px 12px) !default;
 $button-default-font-size: var(
   --nutui-button-default-font-size,
-  $font-size-base
+  $font-size-s
 ) !default;
 $button-default-font-weight: var(
   --nutui-button-default-font-weight,
@@ -240,14 +240,14 @@ $button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default;
 $button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default;
 $button-xlarge-font-size: var(
   --nutui-button-xlarge-font-size,
-  $font-size-xxl
+  $font-size-xl
 ) !default;
 
 $button-large-height: var(--nutui-button-large-height, 40px) !default;
 $button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default;
 $button-large-font-size: var(
   --nutui-button-large-font-size,
-  $font-size-l
+  $font-size-base
 ) !default;
 $button-large-font-weight: var(
   --nutui-button-large-font-weight,
@@ -273,7 +273,7 @@ $button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default;
 $button-mini-height: var(--nutui-button-mini-height, 24px) !default;
 $button-mini-font-size: var(
   --nutui-button-mini-font-size,
-  $font-size-s
+  $font-size-xs
 ) !default;
 $button-mini-border-radius: var(
   --nutui-button-mini-border-radius,
@@ -288,13 +288,12 @@ $button-primary-border-color: var(
   --nutui-button-primary-border-color,
   $color-primary
 ) !default;
-$button-primary-background-color: $color-primary;
+$button-primary-background-color: linear-gradient(
+  90deg,
+  $color-primary-stop-1 0%,
+  $color-primary-stop-2 100%
+) !default;
 
-// linear-gradient(
-//   135deg,
-//   $color-primary-stop-1 0%,
-//   $color-primary-stop-2 100%
-// ) !default;
 $button-primary-disabled: var(
   --nutui-button-primary-disabled,
   $color-primary-disabled-special
@@ -368,6 +367,10 @@ $button-danger-disabled: var(
   $color-danger-disabled
 ) !default;
 
+$button-xlarge-text-icon-margin: var(
+  --nutui-button-xlarge-text-icon-margin,
+  6px
+) !default;
 $button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default;
 
 // cell（✅）
@@ -775,43 +778,43 @@ $numberkeyboard-key-confirm-background-color: var(
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
 $countdown-color: var(--nutui-countdown-color, $color-primary) !default;
-$countdown-font-size: var(--nutui-countdown-font-size, 10px) !default;
-$coutdown-font-weight: var(--nutui-countdown-font-weight, 400) !default;
-$countdown-height: var(--nutui-countdown-height, 14px) !default;
-$countdown-width: var(--nutui-countdown-width, 20px) !default;
-$countdown-number-padding: var(
-  --nutui-countdown-number-padding,
-  0 1px
+$countdown-font-size: var(--nutui-countdown-font-size, $font-size-xs) !default;
+$coutdown-font-weight: var(
+  --nutui-countdown-font-weight,
+  $font-weight
 ) !default;
+$countdown-height: var(--nutui-countdown-height, 16px) !default;
+$countdown-width: var(--nutui-countdown-width, 16px) !default;
+$countdown-number-padding: var(--nutui-countdown-number-padding, 0 0) !default;
 $countdown-number-border-radius: var(
   --nutui-countdown-number-border-radius,
-  2px
-) !default;
-$countdown-number-margin: var(--nutui-countdown-number-margin, 0 2px) !default;
-$countdown-number-border-color: var(
-  --nutui-countdown-number-border-color,
-  $color-primary-light-pressed
+  $radius-xxs
 ) !default;
+$countdown-number-margin: var(--nutui-countdown-number-margin, 0 1px) !default;
 $countdown-number-color: var(
   --nutui-countdown-number-color,
   $color-primary
 ) !default;
 $countdown-number-background-color: var(
   --nutui-countdown-number-background-color,
-  transparent
+  $color-background-overlay
 ) !default;
-$countdown-number-primary-border-color: var(
-  --nutui-countdown-number-primary-border-color,
-  $color-primary
+$countdown-number-border-color: var(
+  --nutui-countdown-number-border-color,
+  $color-primary-light-pressed
 ) !default;
 $countdown-number-primary-color: var(
   --nutui-countdown-number-primary-color,
-  #ffffff
+  $color-primary-text
 ) !default;
 $countdown-number-primary-background-color: var(
   --nutui-countdown-number-primary-background-color,
   $color-primary
 ) !default;
+$countdown-number-primary-border-color: var(
+  --nutui-countdown-number-primary-border-color,
+  $color-primary
+) !default;
 
 //large price（✅）
 $price-symbol-padding-right: var(
@@ -1596,7 +1599,7 @@ $badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
 $badge-icon-size: var(--nutui-badge-icon-size, 12px) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
-  translateY(-50%) translateX(100%)
+  translateX(100%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
 $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
@@ -1634,7 +1637,10 @@ $popover-menu-item-padding: var(
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;
-$progress-color: var(--nutui-progress-color, #ff0f23) !default;
+$progress-color: var(
+  --nutui-progress-color,
+  $color-primary-gradient-1
+) !default;
 $progress-background: var(
   --nutui-progress-background,
   $color-background
@@ -1646,7 +1652,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  #ff0f23
+  $color-primary-gradient-1
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
@@ -1697,10 +1703,13 @@ $pagination-prev-next-padding: var(
 ) !default;
 $pagination-lite-width: var(--nutui-pagination-lite-width, 40px) !default;
 $pagination-lite-height: var(--nutui-pagination-lite-height, 20px) !default;
-$pagination-lite-radius: var(--nutui-pagination-lite-radius, 6px) !default;
+$pagination-lite-radius: var(
+  --nutui-pagination-lite-radius,
+  $radius-xs
+) !default;
 $pagination-lite-background-color: var(
   --nutui-pagination-lite-background-color,
-  var(--nutui-black-7)
+  rgba(0, 0, 0, 0.45)
 ) !default;
 $pagination-lite-active-background-color: var(
   --nutui-pagination-lite-active-background-color,
@@ -2103,7 +2112,7 @@ $navbar-width: var(--nutui-navbar-width, 100%) !default;
 $navbar-height: var(--nutui-navbar-height, 44px) !default;
 $navbar-margin-bottom: var(--nutui-navbar-margin-bottom, 20px) !default;
 $navbar-background: var(--nutui-navbar-background, $color-background) !default;
-$navbar-box-shadow: var(--nutui-navbar-box-shadow, 0px) !default;
+$navbar-box-shadow: var(--nutui-navbar-box-shadow, 0 0 transparent) !default;
 $navbar-color: var(--nutui-navbar-color, $color-title) !default;
 $navbar-font-size: var(--nutui-navbar-font-size, $font-size-base) !default;
 $navbar-title-font-size: var(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/es/packages/nutui.react.build.js",
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@nutui/icons-react-taro": "2.0.0-beta.0",
+    "@nutui/icons-react-taro": "^2.0.1",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@react-spring/web": "~9.6.1",

package/dist/cjs/packages/actionsheet/style/style.harmony.css

@@ -1,70 +0,0 @@
-.nut-actionsheet {
-  display: block;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-  text-align: center;
-}
-.nut-actionsheet.nut-popup {
-  min-height: 10%;
-  background-color: #ffffff;
-  padding: 0 4px;
-}
-.nut-actionsheet .nut-popup-title {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-.nut-actionsheet-list {
-  display: block;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
-}
-.nut-actionsheet-cancel {
-  display: block;
-  padding: 10px;
-  text-align: center;
-  line-height: 24px;
-  font-size: 14px;
-  color: #1A1A1A;
-  background-color: #ffffff;
-  cursor: pointer;
-}
-.nut-actionsheet-item {
-  display: block;
-  padding: 10px;
-  text-align: center;
-  line-height: 24px;
-  font-size: 14px;
-  color: #1A1A1A;
-  background-color: #ffffff;
-  cursor: pointer;
-}
-.nut-actionsheet-cancel-description {
-  display: block;
-  font-size: 12px;
-  color: #505259;
-}
-.nut-actionsheet-item-description {
-  display: block;
-  font-size: 12px;
-  color: #505259;
-}
-.nut-actionsheet-cancel.danger {
-  color: #FF0F23;
-}
-.nut-actionsheet-item.danger {
-  color: #FF0F23;
-}
-.nut-actionsheet-cancel.disabled {
-  color: #C2C4CC !important;
-  cursor: not-allowed;
-}
-.nut-actionsheet-item.disabled {
-  color: #C2C4CC !important;
-  cursor: not-allowed;
-}
-.nut-actionsheet-cancel {
-  margin-top: 5px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: 0;
-}

package/dist/cjs/packages/address/style/style.harmony.css

@@ -1,48 +0,0 @@
-.nut-address-elevator {
-  display: flex;
-  margin-top: 20px;
-}
-.nut-address-exist {
-  display: block;
-  padding: 15px 20px 0;
-  height: 279px;
-  overflow-y: auto;
-  box-sizing: border-box;
-}
-.nut-address-exist-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-  font-size: 12px;
-  line-height: 14px;
-  color: #1A1A1A;
-}
-.nut-address-exist-item.active {
-  font-weight: 500;
-}
-.nut-address-exist-item-info {
-  margin-left: 9px;
-}
-.nut-address-footer {
-  width: 100%;
-  height: 54px;
-  padding: 6px 0px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-.nut-address-footer-btn {
-  width: 90%;
-  height: 42px;
-  line-height: 42px;
-  margin: auto;
-  text-align: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
-  border-radius: 21px;
-  font-size: 15px;
-  color: #ffffff;
-}
-
-[dir=rtl] .nut-address-exist-item-info,
-.nut-rtl .nut-address-exist-item-info {
-  margin-left: 0;
-  margin-right: 9px;
-}

package/dist/cjs/packages/animate/style/style.harmony.css

@@ -1,234 +0,0 @@
-.nut-animate {
-  /* Animation css */
-}
-.nut-animate .nut-ani-container {
-  display: inline-block;
-}
-.nut-animate [class*=nut-animate-] {
-  animation-duration: 0.5s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
-}
-.nut-animate .nut-animate-slide-right {
-  animation-name: slide-right;
-}
-@keyframes slide-right {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.nut-animate .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 .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 .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 .nut-animate-shake {
-  animation-name: shake;
-}
-@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 .nut-animate-ripple {
-  animation-name: ripple;
-}
-@keyframes ripple {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-}
-.nut-animate .nut-animate-breath {
-  animation-name: breath;
-  animation-duration: 2700ms;
-  animation-timing-function: ease-in-out;
-  animation-direction: alternate;
-}
-@keyframes breath {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-.nut-animate .nut-animate-twinkle {
-  position: relative;
-}
-.nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before {
-  width: 60px;
-  height: 60px;
-  content: "";
-  box-sizing: border-box;
-  border: 4px solid rgba(255, 255, 255, 0.6);
-  position: absolute;
-  border-radius: 30px;
-  right: 50%;
-  margin-top: -15px;
-  margin-right: -30px;
-  z-index: 1;
-  transform: scale(0);
-  animation: twinkle 2s ease-out infinite;
-}
-.nut-animate .nut-animate-twinkle::after {
-  animation-delay: 0.4s;
-}
-@keyframes twinkle {
-  0% {
-    transform: scale(0);
-  }
-  20% {
-    opacity: 1;
-  }
-  50%, 100% {
-    transform: scale(1.4);
-    opacity: 0;
-  }
-}
-.nut-animate .nut-animate-flicker {
-  position: relative;
-  overflow: hidden;
-}
-.nut-animate .nut-animate-flicker::after {
-  width: 100px;
-  height: 60px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0.73;
-  content: "";
-  background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
-  animation: flicker 1.5s linear infinite;
-  transform: skewX(-20deg);
-  filter: blur(3px);
-}
-@keyframes flicker {
-  0% {
-    transform: translateX(-100px) skewX(-20deg);
-  }
-  40%, 100% {
-    transform: translateX(150px) skewX(-20deg);
-  }
-}
-.nut-animate .nut-animate-jump {
-  transform-origin: center center;
-  animation: jump 0.7s linear;
-}
-@keyframes jump {
-  0% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(0);
-  }
-  25% {
-    animation-timing-function: ease-out;
-    transform: rotate(10deg) translateY(20px);
-  }
-  50% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(-10px);
-  }
-  75% {
-    animation-timing-function: ease-out;
-    transform: rotate(-10deg) translateY(20px);
-  }
-  100% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(0);
-  }
-}
-.nut-animate .nut-animate-float {
-  position: relative;
-  animation-name: float-pop;
-}
-@keyframes float-pop {
-  0% {
-    top: 0px;
-  }
-  25% {
-    top: 1px;
-  }
-  50% {
-    top: 4px;
-  }
-  75% {
-    top: 1px;
-  }
-  100% {
-    top: 0px;
-  }
-}
-.nut-animate .loop {
-  animation-iteration-count: infinite;
-}