@nutui/nutui-react 0.1.0-beta.1 → 0.1.2

package/dist/packages/picker/picker.scss

@@ -0,0 +1,104 @@
+@import '../popup/popup.scss';
+.nut-picker {
+  background-color: #fff;
+  width: 100%;
+}
+.nut-picker__control {
+  display: flex;
+  height: 56px;
+  font-size: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+
+  .nut-picker__cancel-btn {
+    color: #fa2c19;
+  }
+  .nut-picker__title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.nut-picker__panel {
+  height: 178px;
+  display: flex;
+}
+.nut-picker-list {
+  flex: 1;
+  position: relative;
+  height: 178px;
+  overflow: hidden;
+  text-align: center;
+  .nut-picker-list-panel {
+    transform-style: preserve-3d;
+  }
+  .nut-picker-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    //background-image: linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6));
+    background-position: top, bottom;
+    background-size: 100% 78px;
+    background-repeat: no-repeat;
+    z-index: 3;
+  }
+  .nut-picker-indicator {
+    position: absolute;
+    top: 78px;
+    width: 100%;
+    height: 34px;
+    border-top: 1px solid #ececec;
+    border-bottom: 1px solid #ececec;
+    z-index: 3;
+  }
+
+  .nut-picker-content,
+  .nut-picker-roller {
+    position: absolute;
+    top: 78px;
+    width: 100%;
+    height: 36px;
+  }
+  .nut-picker-content {
+    background: #fff;
+    z-index: 2;
+    overflow: hidden;
+  }
+  .nut-picker-item,
+  .nut-picker-roller-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 36px;
+    line-height: 36px;
+    color: #262626;
+    font-size: 12px;
+    text-align: center;
+  }
+  .nut-picker-item {
+    font-size: 15px;
+    background: #fff;
+  }
+  .nut-picker-roller {
+    z-index: 1;
+    transform-style: preserve-3d;
+    .nut-picker-roller-item {
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      color: #262626;
+    }
+    .nut-picker-roller-item-hidden {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+}
+.nut-picker-placeholder {
+  height: 1px;
+}

package/dist/packages/popover/popover.scss

@@ -0,0 +1,142 @@
+@import '../icon/icon.scss';
+.popBox {
+  // background: skyblue;
+  // // background: #fff;
+  // padding: 20px;
+  .titBox {
+    // margin-bottom: 20px;
+  }
+}
+.nut-popover--dark,
+.nut-popover {
+  position: relative;
+  display: inline-block;
+  margin-right: 20px;
+  .more-background {
+    background: $popover-white-background-color;
+    opacity: 0;
+    position: fixed;
+    width: 100%;
+    height: 1000px;
+    z-index: 10;
+    left: 0;
+  }
+  .popoverContent--left,
+  .popoverContent--right,
+  .popoverContent--top,
+  .popoverContent {
+    z-index: 12;
+    background: $popover-white-background-color;
+    border-radius: 5px;
+    opacity: 1;
+    font-size: 14px;
+    font-family: PingFangSC;
+    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;
+    }
+    .title-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 {
+        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;
+    cursor: not-allowed;
+  }
+}
+
+.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;
+    }
+  }
+  .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;
+    }
+  }
+  .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;
+    }
+  }
+  .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;
+    }
+  }
+}

package/dist/packages/popup/popup.scss

@@ -1,3 +1,5 @@
+@import '../icon/icon.scss';
+@import '../overlay/overlay.scss';
 .popup-slide {
   &-center-enter,
   &-center-exit {

package/dist/packages/radio/radio.scss

@@ -1,3 +1,5 @@
+@import '../icon/icon.scss';
+
 .nut-radio {
   display: flex;
   align-items: center;

package/dist/packages/range/range.scss

@@ -1,3 +1,4 @@
+@import '../toast/toast.scss';
 .nut-range-container {
   display: flex;
   position: relative;

package/dist/packages/rate/rate.scss

@@ -1,3 +1,5 @@
+@import '../icon/icon.scss';
+
 body .nut-rate {
   display: flex;
   &-item {

package/dist/packages/shortpassword/shortpassword.scss

@@ -0,0 +1,115 @@
+@import '../icon/icon.scss';
+@import '../popup/popup.scss';
+.nut-shortpassword {
+  &__title {
+    line-height: 1;
+    font-size: $font-size-3;
+    color: $title-color;
+  }
+
+  &__subtitle {
+    margin-top: 12px;
+    margin-bottom: 24px;
+    line-height: 1;
+    font-size: $font-size-1;
+    color: $text-color;
+  }
+
+  &__input {
+    padding: 0 0 10px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+
+    &-real {
+      position: absolute;
+      right: 0;
+      width: 247px;
+      height: 41px;
+      outline: 0 none;
+      border: 0;
+      text-decoration: none;
+    }
+
+    &-site {
+      width: 247px;
+      height: 41px;
+      border-radius: 4px;
+    }
+
+    &-fake {
+      top: 5%;
+      width: 100%;
+      height: 41px;
+      margin: 0 auto;
+      box-sizing: border-box;
+      background: $shortpsd-background-color;
+      border-radius: 4px;
+      border: 1px solid $shortpsd-border-color;
+      display: flex;
+      position: absolute;
+      left: 0;
+
+      &__li {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &__icon {
+          height: 6px;
+          width: 6px;
+          border-radius: 50%;
+          background: #000;
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  &__message {
+    margin-top: 9px;
+    display: flex;
+    justify-content: space-between;
+    width: 247px;
+
+    &__error {
+      line-height: 1;
+      font-size: $font-size-0;
+      color: $shortpsd-error;
+    }
+
+    &__forget {
+      line-height: 1;
+      font-size: $font-size-1;
+      color: $shortpsd-forget;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+
+    &__cancel {
+      background: $white;
+      border: 1px solid $primary-color;
+      border-radius: 15px;
+      padding: 8px 38px;
+      line-height: 1;
+      font-size: $font-size-2;
+      color: $primary-color;
+    }
+
+    &__sure {
+      background: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%);
+      border-radius: 15px;
+      padding: 8px 38px;
+      line-height: 1;
+      font-size: $font-size-2;
+      color: $white;
+    }
+  }
+}

package/dist/packages/signature/signature.scss

@@ -1,3 +1,4 @@
+@import '../button/button';
 .nut-signature {
   &__inner {
     height: 10rem;

package/dist/packages/step/step.scss

@@ -1,3 +1,4 @@
+@import '../icon/icon.scss';
 .nut-step {
   flex-grow: 0;
   flex-shrink: 0;

package/dist/packages/swiper/swiper.scss

@@ -0,0 +1,45 @@
+.nut-swiper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  box-sizing: content-box;
+  overflow: hidden;
+  &__inner {
+    display: flex;
+    height: 100%;
+  }
+  &__vertical {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+  }
+  &__pagination {
+    display: flex;
+    position: absolute;
+    left: 50%;
+    bottom: 12px;
+    transform: translateX(-50%);
+    i {
+      width: 8px;
+      height: 3px;
+      margin-right: 7px;
+      border-radius: 2px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  &__pagination-vertical {
+    top: 50%;
+    left: 12px;
+    bottom: auto;
+    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    transform: translateY(-50%);
+    i {
+      margin-bottom: 5px;
+    }
+  }
+}

package/dist/packages/swiperitem/swiperitem.scss

@@ -0,0 +1,3 @@
+.nut-swiper-item {
+  height: 100%;
+}

package/dist/packages/tabbaritem/{tabbarItem.scss → tabbaritem.scss}

@@ -1,3 +1,5 @@
+@import '../icon/icon.scss';
+
 .nut-tabbar-item {
   flex: 1;
   text-align: center;

package/dist/packages/tag/tag.scss

@@ -1,3 +1,4 @@
+@import '../icon/icon.scss';
 .nut-tag {
   padding: 0 4px;
   border-radius: 4px;

package/dist/packages/toast/toast.scss

@@ -1,3 +1,5 @@
+@import '../icon/icon.scss';
+
 @keyframes rotation {
   0% {
     -webkit-transform: rotate(0deg);

package/dist/packages/uploader/uploader.scss

@@ -1,3 +1,5 @@
+@import '../icon/icon.scss';
+
 .nut-uploader {
   position: relative;
   display: flex;