@nutui/nutui-react 1.2.3-beta.4 → 1.3.1-beta.0

package/dist/packages/popover/popover.scss

@@ -1,16 +1,12 @@
-.popBox {
-  // background: skyblue;
-  // // background: #fff;
-  // padding: 20px;
-  .titBox {
-    // margin-bottom: 20px;
-  }
-}
-.nut-popover--dark,
+
 .nut-popover {
-  position: relative;
   display: inline-block;
-  margin-right: 20px;
+
+  > div {
+    position: relative;
+    // z-index: 9999;
+  }
+
   .more-background {
     background: $popover-white-background-color;
     opacity: 0;
@@ -20,10 +16,163 @@
     z-index: 10;
     left: 0;
   }
-  .popoverContent--left,
-  .popoverContent--right,
-  .popoverContent--top,
-  .popoverContent {
+
+  .popover-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+  }
+
+  // top
+
+  .popover-arrow-top {
+    bottom: 0;
+    border-top-color: $popover-white-background-color;
+    border-bottom-width: 0;
+    margin-bottom: -8px;
+  }
+
+  .popover-content--top {
+    left: 50%;
+    transform: translateX(-50%);
+
+    .popover-arrow--top {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .popover-content--top-end {
+    .popover-arrow--top-end {
+      right: 16px;
+      transform: translateX(0%);
+    }
+
+    right: 0;
+  }
+
+  .popover-content--top-start {
+    left: 0;
+
+    .popover-arrow--top-start {
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  // bottom
+  .popover-content--bottom {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .popover-content--bottom-end {
+    right: 0;
+  }
+
+  .popover-content--bottom-start {
+    left: 0;
+  }
+
+  // left
+  .popover-content--left {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-content--left-end {
+    bottom: 0;
+  }
+
+  .popover-content--left-start {
+    top: 0;
+  }
+
+  // right
+  .popover-content--right {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-content--right-end {
+    bottom: 0;
+  }
+
+  .popover-content--right-start {
+    top: 0;
+  }
+
+  // arrow bottom
+  .popover-arrow-bottom {
+    top: 0px;
+    border-bottom-color: $popover-white-background-color;
+    border-top-width: 0;
+    margin-top: -8px;
+  }
+
+  .popover-arrow--bottom {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .popover-arrow--bottom-start {
+    left: 16px;
+    transform: translateX(0%);
+  }
+
+  .popover-arrow--bottom-end {
+    right: 16px;
+    transform: translateX(0%);
+  }
+
+  // arrow  left
+  .popover-arrow-left {
+    right: 0px;
+    border-left-color: $popover-white-background-color;
+    border-right-width: 0;
+    margin-right: -8px;
+  }
+
+  .popover-arrow--left {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-arrow--left-start {
+    top: 16px;
+    transform: translateY(0%);
+  }
+
+  .popover-arrow--left-end {
+    bottom: 16px;
+    transform: translateY(0%);
+  }
+
+  // arrow right
+  .popover-arrow-right {
+    left: 0px;
+    border-right-color: $popover-white-background-color;
+    border-left-width: 0;
+    margin-left: -8px;
+  }
+
+  .popover-arrow--right {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-arrow--right-start {
+    top: 16px;
+    transform: translateY(0%);
+  }
+
+  .popover-arrow--right-end {
+    bottom: 16px;
+    transform: translateY(0%);
+  }
+
+  .popover-content {
     z-index: 12;
     background: $popover-white-background-color;
     border-radius: 5px;
@@ -33,63 +182,37 @@
     font-weight: normal;
     color: $popover-primary-text-color;
     position: absolute;
-    .popoverArrow {
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid $popover-white-background-color;
+    box-shadow: 0 2px 12px #3232331f;
+    opacity: 0;
+    transition: opacity 0.1s;
+
+    &.popover-content-show {
+      opacity: 1;
     }
-    .title-item {
+
+    .popover-menu-item {
       display: flex;
       align-items: center;
       padding-bottom: 8px;
       margin: 8px;
       border-bottom: 1px solid $popover-border-bottom-color;
+
       &:first-child {
         margin-top: 15px;
       }
+
       &:last-child {
         margin-bottom: 2px;
         border-bottom: none;
       }
-      .title-name {
+
+      .popover-menu-item-name {
         margin-right: 12px;
         margin-left: 8px;
         width: 100%;
       }
     }
   }
-  .popoverContent--top {
-    .popoverArrow--top {
-      position: absolute;
-      top: auto;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid $popover-white-background-color;
-      border-bottom: 10px solid transparent;
-    }
-  }
-  .popoverContent--left {
-    .popoverArrow--left {
-      position: absolute;
-      border-left: 10px solid $popover-white-background-color;
-      border-right: 10px solid transparent;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-    }
-  }
-  .popoverContent--right {
-    .popoverArrow--right {
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid $popover-white-background-color;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-    }
-  }
 
   .disabled {
     color: $popover-disable-color;
@@ -100,42 +223,41 @@
 .nut-popover--dark {
   background: $popover-dark-background-color;
   color: $popover-white-background-color;
-  .popoverContent--left,
-  .popoverContent--right,
-  .popoverContent--top,
-  .popoverContent {
-    background: $popover-dark-background-color;
-    color: $popover-white-background-color;
-    .popoverArrow {
-      border-bottom: 10px solid $popover-dark-background-color;
+
+  .popover-content {
+    background: $popover-dark-background-color !important;
+    color: $popover-white-background-color !important;
+  }
+
+  .popover-content--bottom,
+  .popover-content--bottom-start,
+  .popover-content--bottom-end {
+    .popover-arrow {
+      border-bottom-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--top {
-    .popoverArrow--top {
-      position: absolute;
-      top: auto;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid $popover-dark-background-color;
-      border-bottom: 10px solid transparent;
+
+  .popover-content--top,
+  .popover-content--top-start,
+  .popover-content--top-end {
+    .popover-arrow {
+      border-top-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--left {
-    .popoverArrow--left {
-      position: absolute;
-      border-left: 10px solid $popover-dark-background-color;
-      border-right: 10px solid transparent;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+
+  .popover-content--left,
+  .popover-content--left-start,
+  .popover-content--left-end {
+    .popover-arrow {
+      border-left-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--right {
-    .popoverArrow--right {
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid $popover-dark-background-color;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+
+  .popover-content--right,
+  .popover-content--right-start,
+  .popover-content--right-end {
+    .popover-arrow {
+      border-right-color: $popover-dark-background-color;
     }
   }
 }

package/dist/packages/popup/popup.scss

@@ -92,7 +92,7 @@
   max-height: 100%;
   overflow-y: auto;
   background-color: $white;
-  transition: transform 0.2s;
+  transition: transform 0.5s;
   -webkit-overflow-scrolling: touch;
 }
 

package/dist/packages/rate/rate.scss

@@ -1,35 +1,36 @@
 
-body .nut-rate {
+.nut-rate {
   display: flex;
   &-item {
     display: flex;
     flex-shrink: 0;
     position: relative;
-    &:last-child {
-      margin-right: 0;
-    }
 
     &__icon {
       color: $rate-icon-color;
       cursor: pointer;
-
-      &::before {
-        position: relative;
-        top: auto;
-        left: auto;
-        transform: none;
-      }
-
       &--disabled {
         color: $rate-icon-void-color;
       }
-      &--half {
+
+      &.nut-rate-item__icon.nut-rate-item__icon--half {
         position: absolute;
         width: 50% !important;
         left: 0;
         top: 0;
         overflow: hidden;
       }
+
+      &.nut-rate-item__icon::before {
+        position: relative;
+        top: auto;
+        left: auto;
+        transform: none;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
     }
   }
 }

package/dist/packages/searchbar/searchbar.scss

@@ -52,6 +52,7 @@
     top: 53%;
   }
   &__input {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     width: $searchbar-input-width;

package/dist/packages/shortpassword/shortpassword.scss

@@ -27,6 +27,7 @@
       outline: 0 none;
       border: 0;
       text-decoration: none;
+      z-index: -99;
     }
 
     &-site {
@@ -102,7 +103,11 @@
     }
 
     &__sure {
-      background: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%);
+      background: linear-gradient(
+        135deg,
+        $primary-color 0%,
+        $primary-color-end 100%
+      );
       border-radius: 15px;
       padding: 8px 38px;
       line-height: 1;

package/dist/packages/swipe/swipe.scss

@@ -0,0 +1,33 @@
+.nut-swipe {
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+
+  &__wrapper {
+    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+    transition-property: transform;
+    .nut-button {
+      height: 100%;
+    }
+    .nut-cell {
+      margin: 0;
+    }
+  }
+
+  &__left,
+  &__right {
+    position: absolute;
+    top: 0;
+    height: 100%;
+  }
+
+  &__left {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &__right {
+    right: 0;
+    transform: translate3d(101%, 0, 0);
+  }
+}

package/dist/packages/textarea/textarea.scss

@@ -1,3 +1,12 @@
+.nut-theme-dark {
+  .nut-textarea {
+    background: $dark-background;
+    &__textarea {
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-textarea {
   position: relative;
   width: 100%;
@@ -22,7 +31,7 @@
     color: $textarea-limit-color;
   }
   &__textarea {
-    min-height: $textarea-height;
+    // min-height: $textarea-height;
     outline: none;
     display: block;
     box-sizing: border-box;
@@ -30,10 +39,16 @@
     min-width: 0;
     margin: 0;
     padding: 0;
+    font-size: $textarea-font;
     color: $textarea-text-color;
     text-align: left;
     background-color: transparent;
     border: 0;
     resize: none;
   }
+  .cpoyText {
+    position: absolute;
+    top: -999999px;
+    left: -999999px;
+  }
 }

package/dist/packages/toast/toast.scss

@@ -12,21 +12,17 @@
   position: fixed;
   left: 0;
   bottom: 150px;
-  top: 50%;
-  transform: translateY(-50%);
   width: 100%;
   text-align: center;
   pointer-events: none;
   z-index: 9999;
   &-small {
-    .nut-toast__inner,
-    .nut-toast__text {
+    .nut-toast__inner {
       font-size: $font-size-small;
     }
   }
   &-large {
-    .nut-toast__inner,
-    .nut-toast__text {
+    .nut-toast__inner {
       font-size: $font-size-large;
     }
   }
@@ -36,21 +32,28 @@
     justify-content: center;
     pointer-events: auto;
     height: 100%;
+    background: $toast-cover-bg-color;
   }
   &__inner {
     display: inline-block;
-    font-size: $font-size-base;
+    font-size: $toast-text-font-size;
     min-width: 40%;
     max-width: 65%;
     text-align: center;
-    padding: 24px 30px;
+    padding: $toast-inner-padding;
     word-break: break-all;
-    background: rgba(0, 0, 0, 0);
-    border-radius: 12px;
-    color: $white;
+    background: $toast-inner-bg-color;
+    border-radius: $toast-inner-border-radius;
+    color: $toast-font-color;
+  }
+  &-text {
+    font-size: $toast-text-font-size;
+    &:empty {
+      margin-bottom: -8px;
+    }
   }
-  &__text {
-    font-size: 14px;
+  &-title {
+    font-size: $toast-title-font-size;
     &:empty {
       margin-bottom: -8px;
     }