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

package/dist/packages/animate/animate.scss

@@ -1,284 +0,0 @@
-.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

@@ -1,45 +0,0 @@
-.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

@@ -1,93 +0,0 @@
-.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

@@ -1,58 +0,0 @@
-.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

@@ -1,14 +0,0 @@
-.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

@@ -1,29 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-.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

@@ -1,60 +0,0 @@
-.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));
-    }
-  }
-}