taro-react-uilib 1.1.0 → 1.2.0

package/dist/styles/components/checkbox.scss

@@ -0,0 +1,117 @@
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/animation.scss";
+
+#{$xh-prefix}-checkbox {
+  display: flex;
+  align-items: flex-start;
+  &.center {
+    align-items: center;
+  }
+  &.end {
+    align-items: flex-end;
+  }
+  &.around {
+    justify-content: space-around;
+  }
+  &.between {
+    justify-content: space-between;
+  }
+  &.rtl {
+    direction: rtl;
+    #{$xh-prefix}-checkbox-label {
+      margin-left: 0;
+      margin-right: 10px;
+      direction: ltr;
+    }
+  }
+  &-input {
+    &:not(.tt) {
+      display: none;
+    }
+    &:checked + &-fake {
+      background-color: var(--color-primary);
+      border-color: transparent;
+      &:after {
+        border-right: 3px solid #FFF;
+        border-bottom: 5px solid #FFF;
+      }
+    }
+    &:disabled + &-fake {
+      background: rgba(0, 0, 0, .04);
+      border-color: $color-disabled;
+      cursor: not-allowed;
+    }
+    &[checked] + &-fake{
+      background-color: var(--color-primary);
+      border-color: transparent;
+      &:after {
+        border-right: 3px solid #FFF;
+        border-bottom: 5px solid #FFF;
+      }
+    }
+    &[checked="true"] {
+      display: block;
+    }
+    &[checked="true"] + &-fake{
+      background-color: var(--color-primary);
+      &:after {
+        border-right: 3px solid #FFF;
+        border-bottom: 5px solid #FFF;
+      }
+    }
+    &[disabled] + &-fake {
+      background: rgba(0, 0, 0, .04);
+      border-color: $color-disabled;
+      cursor: not-allowed;
+    }
+  }
+  &-input-fake:not(.tt) {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    vertical-align: middle;
+    border: 1px solid #707070;
+    border-radius: 3px;
+    position: relative;
+    flex-shrink: 0;
+    transition: background-color .2s;
+    &.circle {
+      border-radius: 50%;
+    }
+    &:after {
+      content: "";
+      display: inline-block;
+      width: 8px;
+      height: 18px;
+      border-right: 3px solid transparent;
+      border-bottom: 5px solid transparent;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+  }
+  &.h5 {
+    #{$xh-prefix}-checkbox-label {
+      line-height: 1;
+    }
+  }
+  &-label {
+    margin-left: 10px;
+  }
+}
+
+
+#{$xh-prefix}-checkbox-group {
+  &.padding {
+    #{$xh-prefix}-checkbox {
+      padding: 30px 0;
+    }
+  }
+  &.border {
+    #{$xh-prefix}-checkbox {
+      border-bottom: 1px solid #EEE;
+    }
+  }
+}

package/dist/styles/components/dialog.scss

@@ -1,3 +1,5 @@
+@import './button.scss';
+@import './mask.scss';
 @import "../../styles/themes/default.scss";
 @import "../../styles/themes/variable.scss";
 @import "../../styles/themes/animation.scss";

package/dist/styles/components/index.scss

@@ -2,6 +2,7 @@
 @import './bankicon.scss';
 @import './button.scss';
 @import './captcha.scss';
+@import './checkbox.scss';
 @import './dialog.scss';
 @import './dialogref.scss';
 @import './fade.scss';
@@ -14,11 +15,15 @@
 @import './page.scss';
 @import './passwordinput.scss';
 @import './picker.scss';
+@import './pickerslot.scss';
 @import './popup.scss';
 @import './progress.scss';
+@import './radio.scss';
 @import './scale.scss';
 @import './scrollview.scss';
 @import './slide.scss';
+@import './space.scss';
+@import './step.scss';
 @import './tabbar.scss';
 @import './themeprovider.scss';
 @import './toast.scss';

package/dist/styles/components/numberkeyboard.scss

@@ -1,5 +1,3 @@
-// @import '../style/themes/variable.scss';
-// @import '../style/themes/default.scss';
 @import "../../styles/themes/variable.scss";
 @import "../../styles/themes/default.scss";
 #{$xh-prefix}-number-keyboard {
@@ -28,7 +26,7 @@
     font-size: 30px;
     font-family: PingFang SC-Regular, PingFang SC;
     font-weight: 400;
-    color: #f6ab03;
+    color: $color-primary-dark;
   }
 
   &-body {

package/dist/styles/components/picker.scss

@@ -1,12 +1,10 @@
+@import './mask.scss';
 @import './popup.scss';
 @import "../../styles/themes/default.scss";
 @import "../../styles/themes/variable.scss";
 
 #{$xh-prefix}-picker {
-  &-field {
-    width: 100%;
-    display: inline-block;
-  }
+  background-color: #FFF;
 
   &-header {
     display: flex;
@@ -18,6 +16,7 @@
     border-bottom: 2px solid $border-color;
     min-height: 80px;
     box-sizing: border-box;
+    padding: 10px 20px;
     &-button {
       display: inline-block;
       font-size: 30px;
@@ -31,117 +30,13 @@
       }
     }
     &-title {
-      font-size: 28px;
+      font-size: 32px;
     }
   }
-
-  &-cancel {
-    color: $font-color-tertiary;
-  }
-
-  &-confirm {
-    color: $color-primary;
-  }
-
-  &-space {
-    display: block;
-    width: 60px;
-    margin-left: 25px;
-  }
-
-  &-close {
-    display: inline-block;
-    & > img {
-      width: 30px;
-      height: 30px;
-      display: inline-block;
-    }
-  }
-
-  &-title-content {
+  &-panel {
+    position: relative;
     display: flex;
-    align-items: center;
-    font-size: 38px;
-    line-height: 38px;
-    color: $font-color;
-    font-weight: bold;
   }
+}
 
-  &-body {
-    display: flex;
-    overflow: hidden;
-    background: #fff;
-    font-size: 30px;
-    position: relative;
-    height: 500px;
-    flex-direction: column;
-    justify-content: center;
-    touch-action: "none";
-    &-view {
-      position: absolute;
-      top: calc(50% - 38px);
-      width: 100%;
-      touch-action: "none";
-      transition: transform 200ms;
-      &-item {
-        height: 76px;
-        line-height: 76px;
-        text-align: center;
-      }
-      &::before {
-        content: " ";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100vh;
-        top: -100vh;
-      }
-      &::after {
-        content: " ";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100vh;
-        top: 0;
-      }
-    }
-    &-mask {
-      position: absolute;
-      z-index: 10000;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      pointer-events: none;
-      &-top {
-        background: linear-gradient(
-          0deg,
-          hsla(0, 0%, 100%, 0.6),
-          hsla(0, 0%, 100%, 0.8) 50%,
-          #fff
-        );
-        flex: auto;
-      }
-      &-middle {
-        height: 68px;
-        border-top: 1px solid $border-color;
-        border-bottom: 1px solid $border-color;
-      }
-      &-bottom {
-        background: linear-gradient(
-          180deg,
-          hsla(0, 0%, 100%, 0.6),
-          hsla(0, 0%, 100%, 0.8) 50%,
-          #fff
-        );
-        flex: auto;
-      }
-    }
-  }
 
-  &-footer {
-    display: block;
-  }
-}

package/dist/styles/components/pickerslot.scss

@@ -0,0 +1,98 @@
+.xh-picker-list {
+  flex: 1;
+  position: relative;
+  height: 252PX;
+  overflow: hidden;
+  text-align: center;
+  touch-action: none;
+
+  .xh-picker-list-panel {
+    transform-style: preserve-3d;
+  }
+
+  .xh-picker-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    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-position: top, bottom;
+    background-size: 100% 108PX;
+    background-repeat: no-repeat;
+    z-index: 3;
+  }
+
+  .xh-picker-indicator {
+    position: absolute;
+    top: 108PX;
+    height: 36PX;
+    width: 100%;
+    border: #d8d8d8;
+    border-left: 0;
+    border-right: 0;
+    color: #1a1a1a;
+    font-size: 4px;
+    z-index: 3;
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .xh-picker-content,
+  .xh-picker-roller {
+    position: absolute;
+    top: 108PX;
+    width: 100%;
+    height: 36PX;
+  }
+
+  .xh-picker-content {
+    background: #fff;
+    z-index: 2;
+    overflow: hidden;
+  }
+
+  .xh-picker-item,
+  .xh-picker-roller-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 36PX;
+    line-height: 36PX;
+    color: #d8d8d8;
+    font-size: 14PX;
+    text-align: center;
+  }
+
+  .xh-picker-item {
+    font-size: 16PX;
+    background: #fff;
+  }
+
+  .xh-picker-roller {
+    z-index: 1;
+    transform-style: preserve-3d;
+
+    .xh-picker-roller-item {
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      color: #333;
+    }
+
+    .xh-picker-roller-item-title {
+      display: block;
+      width: 100%;
+      height: 36PX;
+      line-height: 36PX;
+      color: #1a1a1a;
+      font-size: 16PX;
+    }
+
+    .xh-picker-roller-item-hidden {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+}

package/dist/styles/components/radio.scss

@@ -0,0 +1,102 @@
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/animation.scss";
+
+#{$xh-prefix}-radio {
+  display: flex;
+  align-items: flex-start;
+  &.center {
+    align-items: center;
+  }
+  &.end {
+    align-items: flex-end;
+  }
+  &.around {
+    justify-content: space-around;
+  }
+  &.between {
+    justify-content: space-between;
+  }
+  &.rtl {
+    direction: rtl;
+    .xh-radio-label {
+      margin-left: 0;
+      margin-right: 10px;
+      direction: ltr;
+    }
+  }
+  &-input {
+    &:not(.tt) {
+      display: none;
+    }
+    &:checked + &-fake {
+      background-color: var(--color-primary);
+      border-color: transparent;
+      &:after {
+        border-right: 3px solid #FFF;
+        border-bottom: 5px solid #FFF;
+      }
+    }
+    &:disabled + &-fake {
+      background: rgba(0, 0, 0, .04);
+      border-color: $color-disabled;
+      cursor: not-allowed;
+    }
+    &[checked] + &-fake{
+      background-color: var(--color-primary);
+      border-color: transparent;
+      &:after {
+        border-right: 3px solid #FFF;
+        border-bottom: 5px solid #FFF;
+      }
+    }
+    &[disabled] + &-fake {
+      background: rgba(0, 0, 0, .04);
+      border-color: $color-disabled;
+      cursor: not-allowed;
+    }
+  }
+  &-input-fake:not(.tt) {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    vertical-align: middle;
+    border: 1px solid #707070;
+    border-radius: 3px;
+    position: relative;
+    flex-shrink: 0;
+    transition: background-color .2s;
+    &.circle {
+      border-radius: 50%;
+    }
+    &:after {
+      content: "";
+      display: inline-block;
+      width: 8px;
+      height: 18px;
+      border-right: 3px solid transparent;
+      border-bottom: 5px solid transparent;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+  }
+  &-label {
+    line-height: 1;
+    margin-left: 10px;
+  }
+}
+
+#{$xh-prefix}-radio-group {
+  &.padding {
+    #{$xh-prefix}-radio {
+      padding: 30px 0;
+    }
+  }
+  &.border {
+    #{$xh-prefix}-radio {
+      border-bottom: 1px solid #EEE;
+    }
+  }
+}

package/dist/styles/components/space.scss

@@ -0,0 +1,37 @@
+@import "../../styles/themes/variable.scss";
+@import "../../styles/themes/default.scss";
+@import "../../styles/themes/animation.scss";
+
+$space-prefix-cls: #{$xh-prefix}-space;
+$space-item-prefix-cls: #{$xh-prefix}-space-item;
+#{$space-prefix-cls} {
+  display: inline-flex;
+
+  &-vertical {
+    flex-direction: column;
+  }
+
+  &-align {
+    &-center {
+      align-items: center;
+    }
+
+    &-start {
+      align-items: flex-start;
+    }
+
+    &-end {
+      align-items: flex-end;
+    }
+
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+}
+
+#{$space-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}

package/dist/styles/components/step.scss

@@ -0,0 +1,173 @@
+@import "../../styles/themes/variable.scss";
+
+$class-prefix-step: #{$xh-prefix}-step;
+$class-prefix-steps: #{$xh-prefix}-steps;
+
+#{$class-prefix-step} {
+  --line-to-next-color: #e5e5e5;
+  --icon-color: #e5e5e5;
+
+  #{$class-prefix-step}-indicator {
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 0;
+      background-color: var(--line-to-next-color);
+    }
+    #{$class-prefix-step}-icon-container {
+      position: absolute;
+      z-index: 1;
+      color: var(--icon-color);
+    }
+  }
+
+  &:last-child {
+    #{$class-prefix-step}-indicator::after {
+      display: none;
+    }
+  }
+  &-status-finish {
+    --line-to-next-color: var(--color-primary);
+  }
+
+  &-status-wait {
+    --icon-color: #e5e5e5;
+    #{$class-prefix-step}-title {
+      color: var(--font-color-tertiary);
+    }
+  }
+  &-status-process {
+    --icon-color: var(--color-primary);
+    #{$class-prefix-step}-title {
+      color: var(--color-primary);
+    }
+  }
+  &-status-finish {
+    --icon-color: var(--color-primary);
+  }
+  &-status-error {
+    --icon-color: var(--color-warning);
+    #{$class-prefix-step}-title {
+      color: var(--color-warning);
+    }
+  }
+}
+
+#{$class-prefix-steps} {
+  --indicator-margin-right: 0;
+  --icon-size: 18px;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &-horizontal {
+    display: flex;
+    justify-content: space-around;
+    padding: 8px 0;
+
+    #{$class-prefix-step} {
+      flex: 1;
+
+      #{$class-prefix-step}-indicator {
+        width: 100%;
+        height: 24px;
+        &::after {
+          left: 50%;
+          top: 50%;
+          height: 1px;
+          transform: translateY(-50%);
+          width: 100%;
+        }
+        #{$class-prefix-step}-icon-container {
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+
+    #{$class-prefix-step}-content {
+      text-align: center;
+      font-size: 18px;
+      padding: 2px 8px 0;
+      #{$class-prefix-step}-title {
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+      }
+      #{$class-prefix-step}-description {
+        margin-top: 4px;
+        color: var(--font-color-tertiary);
+        font-size: 24px;
+      }
+    }
+  }
+
+  &-vertical {
+    padding: 8px 16px;
+
+    #{$class-prefix-step} {
+      display: flex;
+      align-items: stretch;
+
+      #{$class-prefix-step}-indicator {
+        flex: none;
+        min-width: 28PX;
+        margin-right: 5px;
+
+        &::after {
+          left: 50%;
+          top: calc(28px * 1.5 / 2);
+          width: 1px;
+          transform: translateX(-50%);
+          height: 100%;
+        }
+        #{$class-prefix-step}-icon-container {
+          top: 28px * 1.5 / 2;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          &.fancy {
+            .xh-step-icon-dot {
+              width: 20px;
+              height: 20px;
+              background-color: #f65f04;
+              border: 10px solid #fcdfcc;
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        #{$class-prefix-step}-content {
+          padding-bottom: 0;
+        }
+      }
+      #{$class-prefix-step}-content {
+        flex: auto;
+        padding-bottom: 32px;
+        #{$class-prefix-step}-title {
+          font-size: var(--title-font-size);
+          line-height: 1.5;
+          font-size: 28px;
+        }
+        #{$class-prefix-step}-description {
+          padding-top: 4px;
+          font-size: 24px;
+          color: var(--font-color-tertiary);
+        }
+      }
+    }
+  }
+}
+
+#{$class-prefix-step}-icon-container {
+  font-size: var(--icon-size);
+}
+
+#{$class-prefix-step}-icon-dot {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  border-radius: 50%;
+}