@nutui/nutui-react-taro 1.2.2-beta.0 → 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/range/range.scss

@@ -1,23 +1,114 @@
+
+.nut-theme-dark {
+  .nut-range-container {
+    background: $dark-background;
+    .min,
+    .max {
+      color: $dark-color-gray;
+    }
+    .nut-range {
+      &-mark-text {
+        color: $dark-color-gray;
+      }
+      &-button {
+        .number {
+          color: $dark-color;
+        }
+      }
+    }
+  }
+}
+
 .nut-range-container {
   display: flex;
   position: relative;
   width: 100%;
-  height: 3px;
+  height: 4px;
   align-items: center;
-  touch-action: pan-y;
   .min,
   .max {
     font-size: $font-size-1;
-    color: $range-max;
+    color: $range-tip-font-color;
     user-select: none;
   }
+  &-vertical {
+    height: 100%;
+    flex-direction: column;
+    padding: 0px 15px;
+    .nut-range {
+      width: 4px;
+      height: 100%;
+      &-button {
+        &-wrapper,
+        &-wrapper-right {
+          position: absolute;
+          top: initial;
+          bottom: 0px;
+          left: 50%;
+          right: initial;
+          transform: translate3d(-50%, 50%, 0);
+        }
+
+        &-wrapper-left {
+          top: 0px;
+          left: 50%;
+          right: initial;
+          transform: translate3d(-50%, -50%, 0);
+        }
+      }
+      .number {
+        transform: translate3d(100%, 0, 0);
+      }
+      &-vertical {
+        margin: 10px 0px;
+      }
+      &-mark {
+        position: absolute;
+        width: 100%;
+        right: 50%;
+        overflow: visible;
+        font-size: 12px;
+        height: 100%;
+        top: initial;
+        width: 36px;
+        padding: 0px;
+      }
+
+      &-mark-text {
+        width: 20px;
+        position: absolute;
+        display: inline-block;
+        line-height: 16px;
+        color: #999;
+        text-align: center;
+        word-break: keep-all;
+        user-select: none;
+        transform: translateY(-50%);
+        &-active {
+          .nut-range-tick {
+            background: $range-bar-bg-color;
+          }
+        }
+      }
+      &-tick {
+        position: absolute;
+        top: 0px;
+        left: 30px;
+        width: 11px;
+        height: 11px;
+        margin-left: -0px;
+        border-radius: 50%;
+        background-color: $range-bg-color-tick;
+      }
+    }
+  }
 }
 .nut-range {
   display: block;
   position: relative;
   width: 100%;
-  height: 3px;
-  background-color: $rang-bg-color;
+  height: 4px;
+  background-color: $range-bg-color;
   border-radius: 2px;
   cursor: pointer;
   &::before {
@@ -34,23 +125,24 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background: $rang-bar-bg-color;
+    background: $range-bar-bg-color;
     border-radius: inherit;
     transition: all 0.2s;
   }
 
   &-button {
     display: block;
-    width: 24px;
-    height: 24px;
-    background-color: $white;
+    width: $range-bar-btn-width;
+    height: $range-bar-btn-height;
+    background-color: $range-bar-btn-bg-color;
     border-radius: 50%;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: 1px solid $primary-color;
+    border: $range-bar-btn-border;
     outline: none;
 
     &-wrapper,
     &-wrapper-right {
+      touch-action: none;
       position: absolute;
       top: 50%;
       right: 0;
@@ -66,6 +158,7 @@
       transform: translate3d(-50%, -50%, 0);
       cursor: grab;
       outline: none;
+      touch-action: none;
     }
 
     .number {
@@ -76,11 +169,11 @@
       justify-content: center;
       user-select: none;
       font-size: $font-size-1;
-      color: $range-max;
+      color: $range-tip-font-color;
       transform: translate3d(0, -100%, 0);
     }
   }
-  &__disabled {
+  &-disabled {
     cursor: not-allowed;
     opacity: 0.54;
 
@@ -90,7 +183,42 @@
       cursor: not-allowed;
     }
   }
-  &__show-number {
+  &-show-number {
     margin: 0 15px;
   }
+
+  &-mark {
+    position: absolute;
+    width: 100%;
+    overflow: visible;
+    top: 50%;
+    font-size: 12px;
+    padding-top: 14px;
+  }
+
+  &-mark-text {
+    position: absolute;
+    display: inline-block;
+    line-height: 16px;
+    color: #999;
+    text-align: center;
+    word-break: keep-all;
+    user-select: none;
+    transform: translateX(-50%);
+    &-active {
+      .nut-range-tick {
+        background: $range-bar-bg-color;
+      }
+    }
+  }
+  &-tick {
+    position: absolute;
+    top: -20px;
+    width: 11px;
+    height: 11px;
+    // margin-left: -11px;
+    left: 0px;
+    border-radius: 50%;
+    background-color: $range-bg-color-tick;
+  }
 }

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/sidenavbar/sidenavbar.scss

@@ -0,0 +1,69 @@
+$nutSidenavbarItemHeight: 40px;
+.nut-sidenavbar {
+  color: #1d1d21;
+  font-size: 14px;
+  height: 100%;
+  overflow: auto;
+  display: block;
+  background-color: #fff;
+  .arrow-icon {
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: 16px;
+    top: 18px;
+    cursor: pointer;
+  }
+  .arrow-down {
+    border-top: 4px solid #909ca4;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+  }
+  .arrow-up {
+    border-bottom: 4px solid #909ca4;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+  }
+  &__head {
+    height: $nutSidenavbarItemHeight;
+    background: #eeeff2;
+    padding: 10px;
+  }
+  &__title {
+    height: $nutSidenavbarItemHeight;
+    padding: 10px 8px 10px 20px;
+    background: #f5f5f5;
+  }
+  &__content {
+    position: relative;
+    display: block;
+  }
+  &__list {
+    &.nutShow {
+      .nut-sidenavbar__content {
+        height: auto;
+        overflow: inherit;
+      }
+    }
+    &.nutHide {
+      .nut-sidenavbar__content {
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .border-bt {
+    position: relative;
+    &:after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      background: #eeeff2;
+      transform: scale(1, 0.5);
+      left: 0;
+      bottom: 0;
+    }
+  }
+}

package/dist/packages/sidenavbaritem/sidenavbaritem.scss

@@ -0,0 +1,8 @@
+$nutSidenavbarItemHeight: 40px;
+
+.nut-subsidenavbar {
+  &__item {
+    height: $nutSidenavbarItemHeight;
+    padding: 10px 8px 10px 55px;
+  }
+}

package/dist/packages/subsidenavbar/subsidenavbar.scss

@@ -0,0 +1,23 @@
+$nutSidenavbarItemHeight: 40px;
+
+.nut-subsidenavbar {
+  &__title {
+    height: $nutSidenavbarItemHeight;
+    padding: 10px 8px 10px 35px;
+    background: #f7f8fa;
+  }
+  &__list {
+    &.nutShow {
+      .nut-subsidenavbar__content {
+        height: auto;
+        overflow: inherit;
+      }
+    }
+    &.nutHide {
+      .nut-subsidenavbar__content {
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+}