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

package/dist/packages/popover/popover.scss

@@ -0,0 +1,142 @@
+@import '@nutui/nutui-react/dist/packages/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/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/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%;
+}