taro-react-uilib 1.0.4 → 1.0.24

package/dist/styles/components/alert.scss

@@ -1,4 +1,9 @@
-#{$xh-prefix}-alert-button {
-  width: 300px;
-  height: 90px;
-}
+.xh-alert-button {
+  color: #f6ab00;
+  font-size: 32px;
+  font-weight: 800;
+  border-top: 2px solid #f8f8f8;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding: 18px 0;
+}

package/dist/styles/components/animated.scss

@@ -0,0 +1,152 @@
+:global {
+  .fade {
+    &-enter,
+    &-appear {
+      opacity: 0;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transition: opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+  }
+
+  .scale {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: scale(1);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: scale(0.8);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+
+  .slide-up {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateY(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateY(100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+
+  .slide-down {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateY(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateY(-100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+
+  .slide-left {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateX(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateX(100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+
+  .slide-right {
+    &-enter,
+    &-appear {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+
+    &-enter-active,
+    &-appear-active {
+      opacity: 1;
+      transform: translateX(0);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translateX(-100%);
+      transition: transform 0.3s, opacity 0.3s;
+    }
+  }
+}

package/dist/styles/components/bankicon.scss

@@ -1,4 +1,6 @@
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
 #{$xh-prefix}-bank-icon {
   width: 60px;
   height: 60px;
-}
+}

package/dist/styles/components/button.scss

@@ -1,24 +1,23 @@
-// @import '../../styles/themes/variable.scss';
-// @import '../../styles/themes/default.scss';
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
 
-button[disabled] {
-  color: unset;
+button[disabled][type="primary"] {
+  background-color: #d5d5d5;
+  color: #fff;
 }
-
 #{$xh-prefix}-button {
   position: relative;
   font-size: $btn-font-size;
   border-style: unset;
   outline: 0;
-  padding: 0;
   box-sizing: border-box;
-  line-height: 2.55;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-
+  padding: 4px 0;
+  line-height: 2.55555556;
   &::after {
-    content: ' ';
+    content: " ";
     position: absolute;
     top: 50%;
     left: 50%;
@@ -59,10 +58,11 @@ button[disabled] {
     background-color: $color-warning;
     color: #fff;
   }
-  
 
   &-disabled {
-    opacity: .5;
+    background: #d5d5d5;
+    color: #fff;
+    box-shadow: unset;
   }
 
   &-square {
@@ -73,9 +73,12 @@ button[disabled] {
     border-radius: 55px;
   }
 
+  &-rectangle {
+    border-radius: 0;
+  }
+
   &-normal {
     width: 570px;
-    height: 90px;
   }
 
   &-small {
@@ -87,11 +90,19 @@ button[disabled] {
     width: 100%;
     padding: 14px 0;
   }
+  &-ghost {
+    background-color: #fff;
+  }
 
   &-webutton {
     display: inline-block;
+    margin: 0;
     &.xh-button-small {
       padding: 0;
     }
+    &[type="default"] {
+      background-color: #fff;
+      color: $font-color;
+    }
   }
 }

package/dist/styles/components/captcha.scss

@@ -1,3 +1,15 @@
-#{$xh-prefix}-downbutton {
-  width: 140px;
+@import './button.scss';
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
+
+#{$xh-prefix}-captcha {
+  color: $color-primary;
+  background-color: #fff;
+  border-color: #666;
+  &:disabled {
+    color: #d5d5d5;
+  }
+  &[disabled] {
+    color: #d5d5d5;
+  }
 }

package/dist/styles/components/confirm.scss

@@ -1,11 +1,20 @@
-
 .xh-confirm-footer {
   display: flex;
   justify-content: space-between;
-}
-
-.alert-button {
-  width: 44%;
-  height: 80px;
-  line-height: 1;
+  border-top: 2px solid #f8f8f8;
+  &-button {
+    flex: 1;
+    font-size: 32px;
+    font-weight: 800;
+    padding: 18px 0;
+  }
+  &-cancel-button {
+    color: #000;
+    border-right: 2px solid #f8f8f8;
+    border-bottom-left-radius: 10px;
+  }
+  &-confirm-button {
+    color: #f6ab00;
+    border-bottom-right-radius: 10px;
+  }
 }

package/dist/styles/components/dialog.scss

@@ -0,0 +1,224 @@
+@import "../../styles/themes/default.scss";
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/animation.scss";
+
+#{$xh-prefix}-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  z-index: 999;
+  align-items: center;
+  justify-content: center;
+  &-content {
+    position: absolute;
+    background-color: #fff;
+    z-index: 999;
+    width: 600px;
+    padding-top: 60px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    text-align: center;
+    &-header {
+      font-size: 38px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      line-height: 53px;
+      color: #333333;
+      padding: 0 60px;
+    }
+    &-content {
+      margin: 66px auto 0;
+      font-size: 34px;
+      font-family: PingFang SC;
+      color: #999;
+      padding: 0 60px;
+    }
+    &-footer {
+      margin-top: 60px;
+      .xh-alert-button {
+        color: #f6ab00;
+        font-size: 32px;
+        font-weight: 800;
+        border-top: 2px solid #f8f8f8;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        padding: 18px 0;
+      }
+
+      .xh-confirm-footer {
+        display: flex;
+        justify-content: space-between;
+        border-top: 2px solid #f8f8f8;
+        &-button {
+          flex: 1;
+          font-size: 32px;
+          font-weight: 800;
+          padding: 18px 0;
+        }
+        &-cancel-button {
+          color: #000;
+          border-right: 2px solid #f8f8f8;
+          border-bottom-left-radius: 10px;
+        }
+        &-confirm-button {
+          color: #f6ab00;
+          border-bottom-right-radius: 10px;
+        }
+      }
+    }
+  }
+}
+
+.fade {
+  &-enter,
+  &-appear {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    opacity: 1;
+    transition: opacity 0.3s;
+  }
+
+  &-exit {
+    opacity: 1;
+  }
+
+  &-exit-active {
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+}
+
+.scale {
+  &-enter,
+  &-appear {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  &-enter-active,
+  &-appear-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+
+  &-exit {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &-exit-active {
+    opacity: 0;
+    transform: scale(0.8);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+}
+
+.slide-up {
+  &-enter,
+  &-appear {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  &-enter-active,
+  &-appear-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+
+  &-exit {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &-exit-active {
+    opacity: 0;
+    transform: translateY(100%);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+}
+
+.slide-down {
+  &-enter,
+  &-appear {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  &-enter-active,
+  &-appear-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+
+  &-exit {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &-exit-active {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+}
+
+.slide-left {
+  &-enter,
+  &-appear {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  &-enter-active,
+  &-appear-active {
+    opacity: 1;
+    transform: translateX(0);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+
+  &-exit {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &-exit-active {
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+}
+
+.slide-right {
+  &-enter,
+  &-appear {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  &-enter-active,
+  &-appear-active {
+    opacity: 1;
+    transform: translateX(0);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+
+  &-exit {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &-exit-active {
+    opacity: 0;
+    transform: translateX(-100%);
+    transition: transform 0.3s, opacity 0.3s;
+  }
+}