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

package/dist/packages/animate/animate.scss

@@ -0,0 +1,284 @@
+.nut-animate {
+  .nut-ani-container {
+    display: inline-block;
+  }
+  /* 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;
+  }
+  @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;
+  }
+  @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;
+  }
+  @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;
+  }
+  @keyframes breath {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  // 水波
+  .nut-animate-twinkle {
+    position: relative;
+    &::after,
+    &::before {
+      width: 60 * 1px;
+      height: 60 * 1px;
+      content: '';
+      box-sizing: border-box;
+      border: 4 * 1px solid rgba(255, 255, 255, 0.6);
+      position: absolute;
+      border-radius: calc(60 / 2) * 1px;
+      right: 50%;
+      margin-top: calc(-30 / 2) * 1px;
+      margin-right: calc(-60 / 2) * 1px;
+      z-index: 1;
+      transform: scale(0);
+      animation: twinkle 2s ease-out infinite;
+    }
+
+    &::after {
+      animation-delay: 0.4s;
+    }
+  }
+  @keyframes twinkle {
+    0% {
+      transform: scale(0);
+    }
+    20% {
+      opacity: 1;
+    }
+    50%,
+    100% {
+      transform: scale(1.4);
+      opacity: 0;
+    }
+  }
+
+  .nut-animate-flicker {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+      width: 100 * 1px;
+      height: 60 * 1px;
+      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(3 * 1px);
+    }
+  }
+  @keyframes flicker {
+    0% {
+      transform: translateX(-100 * 1px) skewX(-20deg);
+    }
+    40%,
+    100% {
+      transform: translateX(150 * 1px) skewX(-20deg);
+    }
+  }
+
+  // jump-跳跃
+  .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(20 * 1px);
+    }
+    50% {
+      animation-timing-function: ease-in;
+      transform: rotate(0deg) translateY(-10 * 1px);
+    }
+    75% {
+      animation-timing-function: ease-out;
+      transform: rotate(-10deg) translateY(20 * 1px);
+    }
+    100% {
+      animation-timing-function: ease-in;
+      transform: rotate(0deg) translateY(0);
+    }
+  }
+
+  // 漂浮
+  .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;
+    }
+  }
+
+  //循环
+  .loop {
+    animation-iteration-count: infinite;
+  }
+}

package/dist/packages/animatingnumbers/countup.scss

@@ -0,0 +1,45 @@
+.nut-theme-dark {
+  .nut-countup {
+    &__list {
+      .nut-countup__listitem {
+        color: $dark1;
+      }
+    }
+  }
+}
+.nut-countup {
+  &__list {
+    display: inline-flex;
+    height: $countup-height;
+    overflow: hidden;
+  }
+  &__listitem {
+    height: $countup-height;
+    overflow: hidden;
+    font-size: $countup-base-size;
+    color: $title-color;
+    font-weight: bold;
+  }
+  &__number,
+  &__separator {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    span {
+      height: $countup-height;
+      line-height: $countup-height;
+    }
+  }
+}
+// 自定义样式
+.custom-coutup {
+  .nut-countup__listitem--number {
+    margin: 0 $countup-lr-margin;
+    border-radius: $countup-border-raduis;
+    color: $countup-color;
+    background-color: $countup-bgcolor;
+  }
+  .nut-countup__number {
+    width: $countup-width;
+  }
+}

package/dist/packages/audio/audio.scss

@@ -0,0 +1,93 @@
+.nut-theme-dark {
+  .nut-audio {
+    .nut-audio__icon {
+      &-stop::after {
+        background-color: $dark3;
+      }
+    }
+    .nut-audio__none-container {
+      .nut-voice {
+        border: 1px solid $white;
+      }
+    }
+  }
+}
+
+.nut-audio {
+  &__icon {
+    position: relative;
+    display: inline-block;
+    &-box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      background: #fff;
+      border-radius: 50%;
+      box-shadow: 0 0 8px rgba(117, 117, 117, 0.5);
+
+      .nut-icon-am-rotate {
+        transform: rotate((360));
+        animation-timing-function: ease-in-out;
+      }
+    }
+
+    .nut-audio__icon-stop {
+      position: relative;
+      &::after {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%);
+        content: '';
+        height: 2px;
+        width: 30px;
+        background: $disable-color;
+        transform: rotate(45deg);
+        transform-origin: 8px -18px;
+      }
+    }
+  }
+
+  &__progress {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0px auto;
+    padding: 10px 0;
+
+    &-bar-wrapper {
+      flex: 1;
+      margin: 0 10px;
+    }
+    .time {
+      min-width: 50px;
+      font-size: 12px;
+      text-align: center;
+    }
+    .nut-range-button {
+      width: 8px;
+      height: 8px;
+    }
+  }
+  .custom-button-group {
+    .nut-button--primary {
+      margin: 0 5px;
+    }
+  }
+  .custom-button-group-disable {
+    .nut-button--primary {
+      margin: 0 5px;
+      pointer-events: none;
+    }
+  }
+  .disable {
+    color: blue;
+  }
+  .nut-audio__none-container {
+    .nut-voice {
+      border: 1px solid $title-color;
+    }
+  }
+}

package/dist/packages/avatar/avatar.scss

@@ -0,0 +1,58 @@
+.nut-avatar {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto; // 防止被压缩
+  text-align: center;
+  .avatar-img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    flex-shrink: 0;
+  }
+  .icon {
+    background-size: 100% 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .nut-icon__img {
+    width: 100%;
+    height: 100%;
+  }
+  .text {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    overflow: hidden;
+  }
+}
+.nut-avatar-large {
+  width: $avatar-large-width;
+  height: $avatar-large-height;
+  line-height: $avatar-large-height;
+}
+.nut-avatar-small {
+  width: $avatar-small-width;
+  height: $avatar-small-height;
+  line-height: $avatar-small-height;
+}
+.nut-avatar-normal {
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+  line-height: $avatar-normal-height;
+}
+.nut-avatar-round {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.nut-avatar-square {
+  border-radius: $avatar-square;
+}

package/dist/packages/avatargroup/avatargroup.scss

@@ -0,0 +1,14 @@
+.nut-avatar-group {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto; // 防止被压缩
+  .nut-avatar {
+    border: 1px solid #fff;
+    &:not(:first-of-type) {
+      margin-left: -8px;
+    }
+  }
+}

package/dist/packages/backtop/backtop.scss

@@ -0,0 +1,29 @@
+.nut-theme-dark {
+  .nut-backtop {
+    &.show {
+      background: $dark6;
+      color: $dark1;
+    }
+  }
+}
+.nut-backtop {
+  display: none;
+  position: fixed;
+  &.show {
+    width: 40px;
+    height: 40px;
+    background: $background-color3;
+    color: $title-color;
+    border: 1px solid $backtop-border-color;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &.show :active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  &-main {
+    transition: all 0.2s ease-in-out;
+  }
+}

package/dist/packages/badge/badge.scss

@@ -0,0 +1,53 @@
+.nut-theme-dark {
+  .nut-badge {
+    &.show {
+      background: $dark4;
+      color: $dark1;
+    }
+  }
+}
+
+.nut-badge {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin-right: 40px;
+
+  .slot-icons {
+    position: absolute;
+    background: $badge-background-color;
+    top: -20%;
+    right: -20%;
+    padding: $badge-padding;
+    text-align: center;
+    border: $badge-border;
+    border-radius: $badge-border-radius;
+    z-index: $badge-z-index;
+  }
+
+  .sup {
+    position: absolute;
+    background: $badge-background-color;
+    color: $badge-default-background-color;
+    padding: $badge-padding;
+    font-size: $badge-font-size;
+    font-weight: normal;
+    text-align: center;
+    line-height: 16px;
+    border: $badge-border;
+    border-radius: $badge-border-radius;
+  }
+
+  .nut-badge__content {
+    transform: $badge-content-transform;
+  }
+
+  .is-dot {
+    width: $badge-dot-width;
+    height: $badge-dot-height;
+    border: $badge-border;
+    border-radius: $badge-dot-border-radius;
+    padding: $badge-dot-padding;
+  }
+}

package/dist/packages/barrage/barrage.scss

@@ -0,0 +1,60 @@
+.nut-theme-dark {
+  .nut-barrage {
+    background-color: $dark6;
+    color: $dark1;
+    .barrage-item {
+      background: linear-gradient(to right, $dark3, $dark10);
+    }
+  }
+}
+
+.nut-barrage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: $background-color;
+  color: $title-color;
+  .barrage-item {
+    width: 120px;
+    // max-width: 150px;
+    display: block;
+    position: absolute;
+    right: 0;
+    padding: 3px 25px;
+    border-radius: 50px;
+    font-size: 12px;
+    text-align: center;
+    white-space: pre;
+    transform: translateX(100%);
+    background: linear-gradient(to right, $gray3, rgba(0, 0, 0, 0));
+    box-sizing: border-box;
+    &.move {
+      will-change: transform;
+      animation-name: moving;
+      animation-timing-function: linear;
+      animation-play-state: running;
+    }
+  }
+  @keyframes moving {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      // transform: translateX(-250%);
+      // transform: translateX(-180%);
+      transform: translateX(var(--move-distance));
+    }
+  }
+  @-webkit-keyframes moving {
+    from {
+      -webkit-transform: translateX(100%);
+    }
+    to {
+      transform: translateX(var(--move-distance));
+    }
+  }
+}