@nutui/nutui 3.1.0 → 3.1.2-3.beta-4

package/dist/packages/pagination/index.scss

@@ -0,0 +1,69 @@
+.nut-theme-dark {
+  .nut-pagination {
+    &-prev,
+    &-item,
+    &-next {
+      background: $dark-background;
+      border-color: $dark-color-gray;
+    }
+    &-simple {
+      background: $dark-background;
+    }
+    .simple-border {
+      border-color: $dark-color-gray;
+    }
+    .disabled {
+      background: $dark-background;
+    }
+  }
+}
+.nut-pagination {
+  display: flex;
+  font-size: $pagination-font-size;
+  color: $pagination-color;
+  &-contain {
+    display: flex;
+  }
+  &-simple {
+    height: 39px;
+    width: 124px;
+    line-height: 39px;
+    text-align: center;
+  }
+  &-prev,
+  &-item,
+  &-next {
+    height: 39px;
+    min-width: 39px;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $white;
+    border-radius: $pagination-item-border-radius;
+    border: $pagination-item-border-width solid $pagination-item-border-color;
+    cursor: pointer;
+  }
+  &-prev,
+  &-item {
+    border-right: none;
+  }
+  &-prev,
+  &-next {
+    padding: $pagination-prev-next-padding;
+  }
+  .simple-border {
+    border-right: $pagination-item-border-width solid $pagination-item-border-color;
+  }
+  .active {
+    color: $white;
+    border: none;
+    background: $pagination-active-background-color;
+  }
+  .disabled {
+    color: $pagination-disable-color;
+    background-color: $pagination-disable-background-color;
+    cursor: not-allowed;
+  }
+}

package/dist/packages/picker/index.scss

@@ -1,55 +1,48 @@
 .nut-picker {
-  &__content {
-    display: block;
-    position: relative;
-    text-align: center;
-    overflow-y: hidden;
-    &:hover {
-      cursor: grab;
-    }
-  }
-  &__mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(
-        180deg,
-        hsla(0, 0%, 100%, 0.9),
-        hsla(0, 0%, 100%, 0.4)
-      ),
-      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
-    background-repeat: no-repeat;
-    background-position: top, bottom;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    pointer-events: none;
-  }
+  // 标题
   &__bar {
     display: flex;
     height: 56px;
     align-items: center;
     justify-content: space-between;
-    padding: 15px;
   }
+  &__button {
+    cursor: pointer;
+    padding: $picker-bar-button-padding;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+  }
+  &__left {
+    color: $picker-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
+  }
+  &__right {
+    color: $picker-ok-color;
+    font-size: $picker-bar-ok-font-size;
+  }
+
   &__column {
     display: flex;
     position: relative;
+    height: 252px;
   }
   &__columnitem {
     width: 0;
     flex-grow: 1;
     height: 100%;
   }
-  &__left {
-    color: #fa2c19;
-    font-size: 16px;
-  }
-  &__button {
-    cursor: pointer;
+
+  &__title {
+    flex: 1;
+    @include oneline-ellipsis();
+    text-align: center;
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
   }
+
   &__wrapper {
     display: block;
   }
@@ -61,10 +54,98 @@
   }
   &__hairline {
     position: absolute;
-    height: 35px;
+    top: 108px;
+    height: 34px;
+    width: 100%;
+    border: $picker-item-active-line-border;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  &__list {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 252px;
+    overflow: hidden;
+    text-align: center;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &-roller {
+    display: block;
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: $picker-item-height;
+    z-index: 1;
+    transform-style: preserve-3d;
+
+    &-item {
+      display: block;
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: $picker-item-height;
+      line-height: $picker-item-height;
+      color: $picker-item-text-color;
+      font-size: $picker-item-text-font-size;
+
+      &-hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+    }
+
+    &-item-tile {
+      display: block;
+      width: 100%;
+      height: $picker-item-height;
+      line-height: $picker-item-height;
+      color: $picker-item-text-color;
+      font-size: $picker-item-text-font-size;
+    }
+  }
+
+  &-roller-mask {
+    position: absolute;
     width: 100%;
-    border: 1px solid #d8d8d8;
+    display: block;
+    height: 100%;
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)),
+      linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    background-size: 100% 108px;
+    z-index: 1;
+  }
+
+  &-content {
+    display: block;
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: $picker-item-height;
+    color: $picker-item-active-text-color;
+    z-index: 2;
+    overflow: hidden;
     border-left: 0;
     border-right: 0;
   }
+  &-list-panel {
+    display: block;
+    transform-style: preserve-3d;
+  }
+  &-item {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
+    text-align: center;
+    font-size: 16px;
+    color: $picker-columns-item-color;
+  }
 }

package/dist/packages/popover/index.scss

@@ -0,0 +1,454 @@
+.nut-popover {
+  overflow-y: inherit;
+  transform: inherit;
+
+  // 遮罩
+  .more-background {
+    opacity: 0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    left: 0;
+    top: 0;
+  }
+
+  .popover-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+  }
+  // top
+  &[data-popper-placement^='top'] {
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+    }
+  }
+
+  &[data-popper-placement='top'] {
+    .popover-arrow {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &[data-popper-placement='top-start'] {
+    .popover-arrow {
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  &[data-popper-placement='top-end'] {
+    .popover-arrow {
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  // left
+  &[data-popper-placement^='left'] {
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+    }
+  }
+
+  &[data-popper-placement='left'] {
+    .popover-arrow {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &[data-popper-placement='left-start'] {
+    .popover-arrow {
+      top: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  &[data-popper-placement='left-end'] {
+    .popover-arrow {
+      bottom: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  // right
+
+  &[data-popper-placement^='right'] {
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+    }
+  }
+
+  &[data-popper-placement='right'] {
+    .popover-arrow {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &[data-popper-placement='right-start'] {
+    .popover-arrow {
+      top: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  &[data-popper-placement='right-end'] {
+    .popover-arrow {
+      bottom: 16px;
+      transform: translateY(0%);
+    }
+  }
+  // bottom
+  &[data-popper-placement^='bottom'] {
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+    }
+  }
+
+  &[data-popper-placement='bottom'] {
+    .popover-arrow {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &[data-popper-placement='bottom-start'] {
+    .popover-arrow {
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  &[data-popper-placement='bottom-end'] {
+    .popover-arrow {
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-menu {
+    display: block;
+    background: $popover-white-background-color;
+    border-radius: 5px;
+    font-size: 14px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: $popover-primary-text-color;
+    box-shadow: 0 2px 12px rgb(50 50 51 / 12%);
+    .popover-menu-item {
+      display: flex;
+      align-items: center;
+      padding-bottom: 8px;
+      padding: 8px 0;
+      margin: 0 8px;
+      border-bottom: 1px solid $popover-border-bottom-color;
+
+      &:last-child {
+        border-bottom: none;
+      }
+      .popover-menu-name {
+        display: block;
+        margin-right: 12px;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .disabled {
+    color: $popover-disable-color;
+    cursor: not-allowed;
+  }
+}
+
+.nut-popover--dark {
+  color: $popover-white-background-color;
+
+  &[data-popper-placement^='top'] {
+    .popover-arrow {
+      border-top-color: $popover-dark-background-color;
+    }
+  }
+
+  &[data-popper-placement^='left'] {
+    .popover-arrow {
+      border-left-color: $popover-dark-background-color;
+    }
+  }
+
+  &[data-popper-placement^='right'] {
+    .popover-arrow {
+      border-right-color: $popover-dark-background-color;
+    }
+  }
+
+  &[data-popper-placement^='bottom'] {
+    .popover-arrow {
+      border-bottom-color: $popover-dark-background-color;
+    }
+  }
+
+  .popover-menu {
+    background: $popover-dark-background-color;
+    color: $popover-white-background-color;
+  }
+}
+
+// Taro
+.nut-popover-taro {
+  position: relative;
+  display: inline-block;
+  .more-background {
+    opacity: 0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    left: 0;
+    top: 0;
+  }
+
+  .popover-content {
+    position: absolute;
+    z-index: 12;
+    min-width: 80px;
+
+    .popover-arrow {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: 8px solid transparent;
+    }
+
+    .popover-menu {
+      box-shadow: 0 2px 12px rgb(50 50 51 / 12%);
+      border-radius: 5px;
+      font-size: 14px;
+      font-family: PingFangSC;
+      font-weight: normal;
+      color: $popover-primary-text-color;
+      background: $popover-white-background-color;
+      .popover-menu-item {
+        display: flex;
+        align-items: center;
+        padding: 8px 0;
+        margin: 0 8px;
+        border-bottom: 1px solid $popover-border-bottom-color;
+        &:last-child {
+          border-bottom: none;
+        }
+        .popover-menu-name {
+          margin-right: 12px;
+          margin-left: 8px;
+          width: 100%;
+        }
+      }
+    }
+  }
+  // bottom
+  .popover-content--bottom {
+    left: 50%;
+    transform: translateX(-50%);
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .popover-content--bottom-start {
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-content--bottom-end {
+    right: 0;
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  // top
+  .popover-content--top {
+    left: 50%;
+    transform: translateX(-50%);
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .popover-content--top-start {
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-content--top-end {
+    right: 0;
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+  // left
+  .popover-content--left {
+    top: 50%;
+    transform: translateY(-50%);
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  .popover-content--left-start {
+    top: 0%;
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+      top: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-content--left-end {
+    bottom: 0%;
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+      bottom: 16px;
+      transform: translateX(0%);
+    }
+  }
+  // right
+  .popover-content--right {
+    top: 50%;
+    transform: translateY(-50%);
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .popover-content--right-start {
+    top: 0%;
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+      top: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  .popover-content--right-end {
+    bottom: 0%;
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+      bottom: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  .disabled {
+    color: $popover-disable-color;
+    cursor: not-allowed;
+  }
+}
+
+.nut-popover-taro--dark {
+  color: $popover-white-background-color;
+  .popover-content--bottom,
+  .popover-content--bottom-start,
+  .popover-content--bottom-end {
+    .popover-arrow {
+      border-bottom-color: $popover-dark-background-color;
+    }
+  }
+  .popover-content--top,
+  .popover-content--top-start,
+  .popover-content--top-end {
+    .popover-arrow {
+      border-top-color: $popover-dark-background-color;
+    }
+  }
+  .popover-content--left,
+  .popover-content--left-start,
+  .popover-content--left-end {
+    .popover-arrow {
+      border-left-color: $popover-dark-background-color;
+    }
+  }
+  .popover-content--right,
+  .popover-content--right-start,
+  .popover-content--right-end {
+    .popover-arrow {
+      border-right-color: $popover-dark-background-color;
+    }
+  }
+  .popover-menu {
+    background: $popover-dark-background-color !important;
+    color: $popover-white-background-color !important;
+  }
+}

package/dist/packages/popup/index.scss

@@ -46,6 +46,10 @@
   &.round {
     border-radius: $popup-border-radius $popup-border-radius 0 0;
   }
+  &--safebottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 .popup-right {
@@ -83,6 +87,9 @@
   background-color: $white;
   transition: transform 0.2s;
   -webkit-overflow-scrolling: touch;
+  .nutui-popup__content-wrapper {
+    height: 100%;
+  }
 }
 
 .nut-overflow-hidden {