dpzvc3-ui 3.1.4 → 3.1.6

package/src/styles/components/tab.less

@@ -1,71 +0,0 @@
-@import "../base/variable.less";
-
-.dpzvc3-tab {
-  background: @TabBgColor;
-  position: absolute;
-  height: @TabHeight;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  box-sizing: content-box;
-
-
-  ul {
-    display: flex;
-    height: 100%;
-
-    li {
-      position: relative;
-      flex: 1;
-      width: 0%;
-      height: 100%;
-      color: @TabTxtColor;
-      font-size: @TabTxtSize;
-      line-height: @TabTxtSize;
-
-      a {
-        width: 100%;
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate3d(-50%, -50%, 0);
-        vertical-align: middle;
-        text-align: center;
-        color: #666666;
-
-        i {
-          display: inline-block;
-          font-size: 22px;
-          line-height: 1;
-          margin-top: 2px;
-          text-align: center;
-        }
-
-
-        span {
-          display: inline-block;
-          width: 100%;
-          text-align: center;
-          line-height: 23px;
-        }
-
-        p {
-          width: 100%;
-          display: inline-block;
-        }
-
-
-        &.cur {
-          color: @TabTxtColorCur;
-        }
-
-      }
-
-
-
-    }
-  }
-
-
-}

package/src/styles/components/text.less

@@ -1,82 +0,0 @@
-@import "../base/variable.less";
-
-.dpzvc3-textBar {
-
-  background: #ffffff;
-  overflow: hidden;
-
-  &-input {
-    width: 100%;
-    display: inline-block;
-
-    &>input {
-      border: 1px solid @TextBorderColor;
-      border-radius: 0;
-      height: @TextInputHeight;
-      box-sizing: border-box;
-      width: 100%;
-      padding-left: 10px;
-      color: @TextColor;
-      transition: all .2s linear;
-    }
-
-    &>input:focus {
-
-      border-color: @ThemeColor;
-      box-shadow: 0 0 2px @ThemeColor
-    }
-
-    &>input::placeholder {
-      color: @TextPlaceholderColor;
-      font-family: "Microsoft Tai Le";
-    }
-  }
-
-
-  &-textarea {
-
-    width: 100%;
-    display: inline-block;
-
-    &>textarea {
-      width: 100%;
-      padding: 10px 5px;
-      box-sizing: border-box;
-      height: @TextAreaHeight;
-      border: 1px solid @TextBorderColor;
-      border-radius: 0;
-      color: @TextColor;
-      transition: border-color .2s linear;
-      will-change: border-color;
-      font-size: 12px;
-    }
-
-    &>textarea:focus {
-      border-color: #39f;
-      box-shadow: 0 0 2px #39f
-    }
-
-    &>textarea::placeholder {
-      color: #e5e5e5;
-      font-family: "Microsoft Tai Le";
-    }
-  }
-
-
-
-  &-tip {
-    flex: 1;
-    align-self: center;
-    text-indent: 3px;
-    line-height: 1;
-    font-size: 12px;
-  }
-
-  &-tip.success {
-    color: lightgreen;
-  }
-
-  &-tip.error {
-    color: red;
-  }
-}

package/src/styles/components/toTop.less

@@ -1,28 +0,0 @@
-@import "../base/variable.less";
-
-.dpzvc3-toTop {
-  position: fixed;
-  right: 15px;
-  bottom: 80px;
-  z-index: 100;
-
-  &-wrapper {
-    position: relative;
-    width: 45px;
-    height: 45px;
-    border-radius: 100%;
-    background: @ThemeColor;
-
-    &:before {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      content: '';
-      border-top: 2px solid #ffffff;
-      border-right: 2px solid #ffffff;
-      transform: rotate(-45deg) translate3d(-15%, -60%, 0);
-      height: 15px;
-      width: 15px;
-    }
-  }
-}

package/src/styles/components/upload.less

@@ -1,23 +0,0 @@
-.dpzvc3-upload {
-  position: relative;
-
-  &-wrapper {
-    width: 100%;
-    height: 100%;
-    background: #39f;
-    color: #ffffff;
-    line-height: 50px;
-    text-align: center;
-    border-radius: 10px;
-  }
-
-  input[type=file] {
-    position: absolute;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-}

package/src/styles/index.less

@@ -1,39 +0,0 @@
-// base
-@import "base/variable.less";
-@import "base/reset.less";
-
-// utils
-@import "utils/animation.less";
-@import "utils/nowrap.less";
-@import "utils/1px.less";
-
-// components
-@import "components/rater.less";
-@import "components/header.less";
-@import "components/actionsheet.less";
-@import "components/message.less";
-@import "components/picker.less";
-@import "components/tab.less";
-@import "components/modal.less";
-@import "components/prompt.less";
-@import "components/slide-Bar.less";
-@import "components/button.less";
-@import "components/checkBox.less";
-@import "components/radioBox.less";
-@import "components/editor.less";
-@import "components/number.less";
-@import "components/text.less";
-@import "components/swipe.less";
-@import "components/switchBar.less";
-@import "components/upload.less";
-@import "components/spinner.less";
-@import "components/loadmore.less";
-@import "components/popup.less";
-@import "components/indicator.less";
-@import "components/progress.less";
-@import "components/toTop.less";
-@import "components/cell.less";
-@import "components/cell-swipe.less";
-@import "components/badge.less";
-@import "components/card.less";
-@import "base/font.less";

package/src/styles/utils/1px.less

@@ -1,206 +0,0 @@
-// 使用1px类时，需要注意 如果是absolute定位的，在引入mx-1px后，需要重新写入absolute定位
-@import "../base/variable.less";
-
-.dpzvc3-1px {
-  &-all {
-    .dpzvc3-1px(@BorderColor);
-  }
-
-  &-top {
-    .dpzvc3-1px-side(@BorderColor, top, before);
-  }
-
-  &-bottom {
-    .dpzvc3-1px-side(@BorderColor, bottom, after);
-  }
-
-  &-left {
-    .dpzvc3-1px-side(@BorderColor, left, before);
-  }
-
-  &-right {
-    .dpzvc3-1px-side(@BorderColor, right, after);
-  }
-
-  &-left-right {
-    .dpzvc3-1px-side(@BorderColor, left, before);
-    .dpzvc3-1px-side(@BorderColor, right, after);
-  }
-
-  &-top-bottom {
-    .dpzvc3-1px-side(@BorderColor, top, before);
-    .dpzvc3-1px-side(@BorderColor, bottom, after);
-  }
-
-  &-left-top {
-    .dpzvc3-1px-side(@BorderColor, left, before);
-    .dpzvc3-1px-side(@BorderColor, top, after);
-  }
-
-  &-left-bottom {
-    .dpzvc3-1px-side(@BorderColor, left, before);
-    .dpzvc3-1px-side(@BorderColor, bottom, after);
-  }
-
-  &-right-top {
-    .dpzvc3-1px-side(@BorderColor, right, before);
-    .dpzvc3-1px-side(@BorderColor, top, after);
-  }
-
-  &-right-bottom {
-    .dpzvc3-1px-side(@BorderColor, right, before);
-    .dpzvc3-1px-side(@BorderColor, bottom, after);
-  }
-}
-
-// @mixin
-.dpzvc3-1px(@color: #ccc) {
-  position: relative;
-  border-color: @color;
-
-  &:before {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    transform-origin: 0 0;
-    box-sizing: border-box;
-    pointer-events: none;
-    border: 1px solid;
-    border-color: inherit;
-    border-radius: inherit;
-  }
-
-  @media screen and (-webkit-min-device-pixel-ratio:1.5) {
-    &:before {
-      width: 150%;
-      height: 150%;
-      transform: scale(0.6667);
-    }
-  }
-
-  @media screen and (-webkit-min-device-pixel-ratio: 2) {
-    &:before {
-      width: 200%;
-      height: 200%;
-      transform: scale(0.5);
-    }
-  }
-}
-
-.dpzvc3-1px-side-base(@color, @pseudo) {
-  position: relative;
-  border-color: @color;
-
-  &:@{pseudo} {
-    position: absolute;
-    content: "";
-    transform-origin: 0 0;
-  }
-}
-
-.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =top) {
-  .dpzvc3-1px-side-base(@color, @pseudo);
-
-  &:@{pseudo} {
-    width: 100%;
-    height: 1px;
-    top: 0;
-    left: 0;
-    border-top: 1px solid;
-    border-color: inherit;
-  }
-
-  .dpzvc3-1px-device-fix(@pseudo, "Y");
-}
-
-.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =bottom) {
-  .dpzvc3-1px-side-base(@color, @pseudo);
-
-  &:@{pseudo} {
-    width: 100%;
-    height: 1px;
-    bottom: -1px;
-    left: 0;
-    border-bottom: 1px solid;
-    border-color: inherit;
-  }
-
-  .dpzvc3-1px-device-fix(@pseudo, "Y");
-}
-
-.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =left) {
-  .dpzvc3-1px-side-base(@color, @pseudo);
-
-  &:@{pseudo} {
-    width: 1px;
-    height: 100%;
-    top: 0;
-    left: 0;
-    border-left: 1px solid;
-    border-color: inherit;
-  }
-
-  .dpzvc3-1px-device-fix(@pseudo, "X");
-}
-
-.dpzvc3-1px-side(@color: #ccc, @direction: top, @pseudo: before) when (@direction =right) {
-  .dpzvc3-1px-side-base(@color, @pseudo);
-
-  &:@{pseudo} {
-    width: 1px;
-    height: 100%;
-    top: 0;
-    right: -1px;
-    border-right: 1px solid;
-    border-color: inherit;
-  }
-
-  .dpzvc3-1px-device-fix(@pseudo, "X");
-}
-
-.dpzvc3-1px-device-fix(@pseudo, @transform) when (@transform ="X") {
-  @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
-    &:@{pseudo} {
-      transform: scaleX(0.6667);
-    }
-  }
-
-  @media screen and (-webkit-min-device-pixel-ratio: 2) {
-    &:@{pseudo} {
-      transform: scaleX(0.5);
-    }
-  }
-
-  @media screen and (-webkit-min-device-pixel-ratio: 3) {
-    &:@{pseudo} {
-      transform: scaleX(0.333);
-    }
-  }
-}
-
-;
-
-.dpzvc3-1px-device-fix(@pseudo, @transform) when (@transform ="Y") {
-  @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
-    &:@{pseudo} {
-      transform: scaleY(0.6667);
-    }
-  }
-
-  @media screen and (-webkit-min-device-pixel-ratio: 2) {
-    &:@{pseudo} {
-      transform: scaleY(0.5);
-    }
-  }
-
-  @media screen and (-webkit-min-device-pixel-ratio: 3) {
-    &:@{pseudo} {
-      transform: scaleY(0.333);
-    }
-  }
-}
-
-;

package/src/styles/utils/animation.less

@@ -1,165 +0,0 @@
-.dpzvc3-ani {
-    &-fade {
-
-        &-enter-from,
-        &-leave-to {
-            opacity: 0;
-        }
-
-        &-enter-to,
-        &-leave-from {
-            opacity: 1;
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: opacity .3s ease;
-            will-change: opacity;
-        }
-    }
-
-    &-bottom {
-
-        &-enter-from,
-        &-leave-to {
-            transform: translate3d(0, 100%, 0);
-        }
-
-        &-enter-to,
-        &-leave-from {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: transform .3s ease-out 100ms;
-            will-change: transform;
-        }
-    }
-
-    &-scale {
-
-        &-enter-from,
-        &-leave-to {
-            transform: translate3d(-50%, -50%, 0) scale(.9);
-            opacity: .2;
-        }
-
-        &-enter-to,
-        &-leave-from {
-            transform: translate3d(-50%, -50%, 0) scale(1);
-            opacity: 1;
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: all .3s ease-in;
-            will-change: transform, opacity;
-        }
-    }
-
-    &-top {
-
-        &-enter-from,
-        &-leave-to {
-            transform: translate3d(0, -100%, 0);
-        }
-
-        &-enter-to,
-        &-leave-from {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: transform .3s ease-out 100ms;
-            will-change: transform;
-        }
-    }
-
-    &-left {
-
-        &-enter-from,
-        &-leave-to {
-            transform: translate3d(-100%, 0, 0);
-        }
-
-        &-enter-to,
-        &-leave-from {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: all .3s ease;
-            will-change: transform;
-        }
-    }
-
-    &-right {
-
-        &-enter-from,
-        &-leave-to {
-            transform: translate3d(100%, 0, 0);
-        }
-
-        &-enter-to,
-        &-leave-from {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: all .3s ease;
-            will-change: transform;
-        }
-    }
-
-    &-slide-up {
-
-        &-enter-from,
-        &-leave-to {
-            transform: translate3d(0, 100%, 0);
-        }
-
-        &-enter-to,
-        &-leave-from {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: all .3s ease;
-            will-change: transform;
-        }
-    }
-
-    &-slide-down {
-
-        &-enter-from,
-        &-leave-to {
-            transform: translate3d(0, -100%, 0);
-        }
-
-        &-enter-to,
-        &-leave-from {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &-enter-active,
-        &-leave-active {
-            transition: all .3s ease;
-            will-change: transform;
-        }
-    }
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(0deg) translateZ(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg) translateZ(0deg);
-    }
-}

package/src/styles/utils/nowrap.less

@@ -1,19 +0,0 @@
-.dpzvc3-nowrap {
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.dpzvc3-nowrap(@n, @i: 1) when (@i <=@n) {
-  .dpzvc3-nowrap-@{i} {
-    .dpzvc3-nowrap();
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: @i;
-  }
-
-  .dpzvc3-nowrap(@n, (@i+1));
-}
-
-.dpzvc3-nowrap(5);

package/src/template/index.ejs

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <title>丁平中vc移动端组件</title>
-  <meta name="viewport"
-        content="width=device-width,
-                 initial-scale=1.0,
-                 maximum-scale=1.0,
-                 minimum-scale=1.0">
-  <style>
-    html, body {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script>
-    (function (doc, win) {
-      var docEl = doc.documentElement;
-
-      function recalc() {
-        var clientWidth = docEl.clientWidth;
-        if (!clientWidth) return;
-
-        if (clientWidth > 750) clientWidth = 750;
-
-        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
-      }
-
-      win.addEventListener('resize', recalc);
-      doc.addEventListener('DOMContentLoaded', recalc);
-    })(document, window);
-  </script>
-</body>
-</html>