dpzvc-ui 1.0.0

package/src/styles/components/actionSheet.less

@@ -0,0 +1,43 @@
+.dpzvc-actionSheet {
+  background: #eeeeee;
+  font-size: 15px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 300;
+  width: 100%;
+
+  &-wrapper {
+    width: 100%;
+    height: auto;
+    margin-bottom: 5px;
+
+    &-action {
+      width: 100%;
+
+
+      height: 45px;
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-bottom: 1px solid #eeeeee;
+
+      &:nth-last-child(1) {
+        border-bottom: none;
+      }
+    }
+
+  }
+
+
+  &-cancle {
+
+    width: 100%;
+    height: 45px;
+    background: #ffffff;
+    display: inline-block;
+    text-align: center;
+    line-height: 45px;
+  }
+}

package/src/styles/components/badge.less

@@ -0,0 +1,79 @@
+.dpzvc-badge {
+  position: relative;
+  display: inline-block;
+  color: @BadgeColor;
+  text-align: center;
+  line-height: 1;
+  vertical-align: middle;
+
+  &-size-normal {
+    height: @BadgeNormalHeight;
+    border-radius: @BadgeNormalHeight/2;
+    font-size: @BadgeNormalFontSize;
+    padding: @BadgeNormalPadding;
+    min-width: @BadgeNormalHeight;
+    top: -@BadgeNormalHeight/2;
+    line-height: @BadgeNormalHeight - 2;
+  }
+
+  &-size-large {
+    height: @BadgeLargeHeight;
+    border-radius: @BadgeLargeHeight/2;
+    font-size: @BadgeLargeFontSize;
+    padding: @BadgeLargePadding;
+    min-width: @BadgeLargeHeight;
+    top: -@BadgeLargeHeight/2;
+    line-height: @BadgeLargeHeight - 2;
+
+  }
+
+  &-size-small {
+    height: @BadgeSmallHeight;
+    border-radius: @BadgeSmallHeight/2;
+    font-size: @BadgeSmallFontSize;
+    padding: @BadgeSmallPadding;
+    min-width: @BadgeSmallHeight;
+    top: -@BadgeSmallHeight/2;
+    line-height: @BadgeSmallHeight - 2;
+  }
+
+  &-dot {
+    position: absolute;
+    transform-origin: 0 center;
+    top: -4px;
+    right: -8px;
+    height: 8px;
+    width: 8px;
+    min-width: 0;
+    padding: 0;
+    border-radius: 100%;
+  }
+
+  &-success {
+    background-color: @BadgeSuccessBg;
+  }
+
+  &-danger {
+    background-color: @BadgeDangerBg;
+  }
+
+  &-warning {
+    background-color: @BadgeWarningBg;
+  }
+
+  &-normal {
+    background-color: @BadgeNormalBg;
+  }
+
+  >sup {
+    position: absolute;
+    right: 0;
+    text-align: center;
+    transform-origin: -10% center;
+    z-index: 10;
+    box-shadow: 0 0 0 1px #fff;
+    transform: translateX(50%);
+    border: 1px solid transparent;
+    box-sizing: border-box;
+  }
+}

package/src/styles/components/button.less

@@ -0,0 +1,123 @@
+@width: 40px;
+
+.dpzvc-button {
+  position: relative;
+  width: 100%;
+  overflow-x: hidden;
+  box-sizing: content-box;
+
+
+  .loading {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &-radius {
+    border-radius: 5px;
+  }
+
+}
+
+.dpzvc-button.dpzvc-button-circle {
+
+  width: @width;
+  height: @width;
+  border-radius: 50%
+}
+
+.dpzvc-button .dpzvc-button-btn {
+  width: 100%;
+  height: 100%;
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0;
+  }
+
+}
+
+.dpzvc-button-inline {
+  letter-spacing: -3px;
+}
+
+.dpzvc-button-inline>button {
+
+  letter-spacing: 0;
+}
+
+.dpzvc-button-success {
+  background: @ButtonSuccessBgColor;
+  color: @ButtonColor;
+  border-color: @ButtonSuccessBgColor;
+
+  &:active {
+    background: @SuccessActiveBgColor;
+    border-color: @SuccessActiveBgColor;
+  }
+}
+
+.dpzvc-button-danger {
+  color: @ButtonColor;
+  background-color: @ButtonDangerBgColor;
+  border-color: @ButtonDangerBgColor;
+
+  &:active {
+    background: @DangerActiveBgColor;
+    border-color: @DangerActiveBgColor;
+  }
+}
+
+.dpzvc-button-primary {
+  color: #4d4d4d;
+  background-color: @ButtonPrimaryBgColor;
+  border-color: @ButtonPrimaryBgColor;
+
+  &:active {
+    background-color: @PrimaryActiveBgColor;
+    border-color: @PrimaryActiveBgColor;
+  }
+}
+
+.dpzvc-button-warning {
+  color: @ButtonColor;
+  background-color: @ButtonWarningBgColor;
+  border-color: @ButtonWarningBgColor;
+
+  &:active {
+    background-color: @WarningActiveBgColor;
+    border-color: @WarningActiveBgColor;
+  }
+}
+
+.dpzvc-button-normal {
+  color: @ButtonColor;
+  background-color: @ButtonNormalBgColor;
+  border-color: @ButtonNormalBgColor;
+
+  &:active {
+    background-color: @NormalActiveBgColor;
+    border-color: @NormalActiveBgColor;
+  }
+}
+
+.dpzvc-button-text {
+  color: #657180;
+  background-color: @ButtonTextBgColor;
+  border-color: @ButtonTextBgColor;
+
+  &:active {
+    background-color: @TextActiveBgColor;
+    border-color: @TextActiveBgColor;
+  }
+}
+
+.dpzvc-button-btn.dpzvc-button-disabled {
+  color: @ButtonColor;
+  opacity: .6;
+}

package/src/styles/components/card.less

@@ -0,0 +1,31 @@
+.dpzvc-card {
+  background: #ffffff;
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  overflow: hidden;
+
+  &-header,
+  &-footer {
+    position: relative;
+    box-sizing: border-box;
+    padding: 0 10px;
+    display: flex;
+    height: 48px;
+    overflow: hidden;
+
+  }
+
+
+  &-content {
+    position: relative;
+    box-sizing: border-box;
+
+    .main {
+      min-height: 300px;
+
+    }
+  }
+
+
+}

package/src/styles/components/cell-swipe.less

@@ -0,0 +1,20 @@
+.dpzvc-cell-swipe {
+  &-group {
+    height: 100%;
+  }
+
+  &-btn {
+    height: 100%;
+    line-height: 48px;
+    text-align: center;
+    padding: 0 10px;
+    display: inline-block;
+
+  }
+}
+
+.dpzvc-cell-main,
+.dpzvc-cell-left,
+.dpzvc-cell-right {
+  transition: transform 150ms ease-in;
+}

package/src/styles/components/cell.less

@@ -0,0 +1,71 @@
+.dpzvc-cell {
+  box-sizing: border-box;
+  color: inherit;
+  background-color: #ffffff;
+  min-height: 48px;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  text-decoration: none;
+
+  &-mask:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0;
+
+  }
+
+  &:active>&-mask:before {
+    opacity: .1;
+  }
+
+  &-left {
+    position: absolute;
+    left: 0;
+
+    height: 100%;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  &-main {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    min-height: inherit;
+    overflow: hidden;
+    padding: 0 10px;
+    width: 100%;
+    font-size: 16px;
+
+    &-title {
+      flex: 1;
+
+    }
+
+    &-label {
+      font-size: 12px;
+      color: #999;
+      margin-top: 6px;
+      display: block;
+    }
+
+    &-value {
+      color: #999;
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/src/styles/components/checkBox.less

@@ -0,0 +1,111 @@
+.dpzvc-checkbox {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.dpzvc-checkBoxGroup-vertical .dpzvc-checkbox {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+
+.dpzvc-checkbox-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+  line-height: 1;
+  position: relative
+}
+
+.dpzvc-checkbox-inner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  top: 0;
+  left: 0;
+  border: 1px solid #d7dde4;
+  border-radius: 2px;
+  background-color: #fff;
+  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
+
+  &:after {
+    content: "";
+    display: table;
+    width: 4px;
+    height: 8px;
+    position: absolute;
+    top: 1px;
+    left: 4px;
+    border: 2px solid #fff;
+    border-top: 0;
+    border-left: 0;
+    transform: rotate(45deg) scale(0);
+    transition: all .2s ease-in-out;
+  }
+}
+
+.dpzvc-checkbox-checked {
+  .dpzvc-checkbox-inner {
+    border-color: @checkBoxColor;
+    background-color: @checkBoxColor;
+
+    &:after {
+      content: "";
+      display: table;
+      width: 4px;
+      height: 8px;
+      position: absolute;
+      top: 1px;
+      left: 4px;
+      border: 2px solid #fff;
+      border-top: 0;
+      border-left: 0;
+      transform: rotate(45deg) scale(1);
+      transition: all .2s ease-in-out;
+    }
+  }
+
+  .dpzvc-checkbox-disable+span {
+    color: #f3f3f3;
+    cursor: not-allowed;
+  }
+}
+
+.dpzvc-checkbox-input {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.dpzvc-checkbox-disable {
+  .dpzvc-checkbox-inner {
+    background-color: #f3f3f3;
+    border-color: #d7dde4;
+
+    input {
+      cursor: not-allowed;
+    }
+
+  }
+
+  &.dpzvc-checkbox-checked {
+    .dpzvc-checkbox-inner {
+      background-color: #f3f3f3;
+      border-color: #d7dde4;
+    }
+  }
+}
+
+.dpzvc-checkbox-disable+span {
+  color: #f3f3f3;
+  cursor: not-allowed;
+}

package/src/styles/components/editor.less

@@ -0,0 +1,3 @@
+.ace-twilight{
+  background-color: #555!important;
+}

package/src/styles/components/header.less

@@ -0,0 +1,70 @@
+.dpzvc-header {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+
+    &+div {
+        padding-top: @HeaderHeight;
+    }
+
+    &>header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: @HeaderHeight;
+        background: @HeaderBgColor;
+        color: @HeaderTxtColor;
+    }
+
+    .left,
+    .right {
+        height: 100%;
+        font-size: @FontSizeSmall;
+        display: flex;
+        align-items: center;
+
+    }
+
+    .left {
+        padding-left: @SpaceHor;
+
+        .arrow {
+            width: 8px;
+            height: 8px;
+            border-top: 1px solid #ffffff;
+            border-left: 1px solid #ffffff;
+            transform: rotate(-45deg);
+            display: inline-block;
+        }
+
+        .text {
+            display: inline-block;
+        }
+
+    }
+
+    .right {
+        padding-right: @SpaceHor;
+    }
+
+    .title {
+        flex: 1;
+        font-size: @HeaderTitleSize;
+        padding: 0 @SpaceHor;
+        text-align: center;
+    }
+
+    &.dpzvc-header-fixed>header {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: 3;
+    }
+
+    .header-place {
+        padding-top: @HeaderHeight;
+
+    }
+}

package/src/styles/components/indicator.less

@@ -0,0 +1,37 @@
+.dpzvc-Indicator {
+  width: 100%;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+
+  &-container {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    width: 35%;
+    height: 0;
+    padding-bottom: 35%;
+
+  }
+
+  &-wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .7);
+    border-radius: @BorderRadius;
+
+    >span {
+      margin-top: 20px;
+      font-size: 16px;
+    }
+  }
+}

package/src/styles/components/loadmore.less

@@ -0,0 +1,48 @@
+.dpzvc-loadmore {
+  height: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+
+  //-webkit-overflow-scrolling: touch;
+  &-top,
+  &-bottom {
+
+    position: relative;
+    height: 0;
+    line-height: 40px;
+    overflow: hidden;
+    font-size: 14px;
+    transform: translateZ(0);
+
+    .dpzvc-loadmore-status {
+      vertical-align: middle;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+
+      .spinner {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .dpzvc-loadmore-text {
+        margin-left: 5px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &-bottom {
+    height: 40px;
+  }
+
+  &-content {
+    height: auto;
+    background: #ffffff;
+
+  }
+
+  &-drag {
+    transition: all .3s linear;
+  }
+}

package/src/styles/components/message.less

@@ -0,0 +1,57 @@
+.dpzvc-message {
+  z-index: 300;
+  width: 150px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  //transform: translate3d(50%,50%,0);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  white-space: normal;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.7);
+  overflow-y: scroll;
+
+  &-position-center {
+
+    transform: translate3d(-50%, -50%, 0)
+  }
+
+  &-position-top {
+    top: 5%;
+    transform: translate3d(-50%, 0, 0)
+  }
+
+  &-position-bottom {
+
+    top: 90%;
+    transform: translate3d(-50%, 0, 0)
+  }
+
+  &-left {
+    display: block;
+    padding: 10px;
+  }
+
+  &-text {
+    width: calc(100% - 30px);
+    padding: 0 15px;
+    line-height: 40px;
+    color: #ffffff;
+    font-size: 18px;
+    white-space: normal;
+  }
+}
+
+.dpzvc-message-group {
+
+  position: static;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 150px;
+
+}