dpzvc3-ui 3.1.4 → 3.1.6

package/src/styles/components/slide-Bar.less

@@ -1,149 +0,0 @@
-@import "../base/variable.less";
-
-.dpzvc3-slideBar {
-  border-top-color: @SlideBarBgColor;
-  border-bottom-color: @SlideBarBgColor;
-  border-top-style: solid;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-top-width: 1px;
-
-  //border-bottom: 1px solid #eee;
-  //border-top: 1px solid #eee;
-  .dpzvc3-slideBar-child {
-    overflow: hidden;
-
-    background-color: @SlideBackgroundCorlor;
-
-    >a {
-
-      color: @slideChildColor;
-    }
-  }
-}
-
-.dpzvc3-slideBar {
-  display: block;
-  width: 100%;
-  background: #ffffff;
-  overflow: hidden;
-  position: relative;
-
-  &-header {
-    overflow-x: scroll;
-    overflow-y: hidden;
-    width: 100%;
-    position: relative;
-    //&.fixed {
-    //  position: absolute;
-    //  top:0;
-    //  left:0;
-    //  z-index:10;
-    //  background: #fff;
-    //}
-  }
-}
-
-.dpzvc3-slideBar-wrapper {
-
-
-  //border-bottom: 1px solid #eeeeee;
-}
-
-.dpzvc3-slideBar-wrapper-absolute {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: @ThemeColor;
-  transition: transform .2s ease-out;
-  will-change: transform;
-  z-index: 3;
-}
-
-//.dpzvc3-slideBar-wrapper::before {
-//  width:100%;
-//  bottom:0;
-//  left: 0;
-//  position: absolute;
-//  content: '';
-//  height: 1px;
-//  background: #eeeeee;
-//
-//}
-
-.dpzvc3-slideBar-wrapper .dpzvc3-slideBar-child {
-  height: 100%;
-  line-height: 1;
-}
-
-.dpzvc3-slideBar-wrapper .dpzvc3-slideBar-child.active>a {
-  color: @ThemeColor;
-}
-
-.dpzvc3-slideBar-wrapper .dpzvc3-slideBar-child a {
-  display: inline-block;
-  width: 100%;
-}
-
-.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex {
-  display: flex;
-  align-items: center;
-
-}
-
-.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex.normal {
-  flex-direction: row;
-}
-
-.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex.vertical {
-  flex-direction: column;
-}
-
-.dpzvc3-slideBar-wrapper.dpzvc3-slideBar-flex .dpzvc3-slideBar-child {
-  flex: 1;
-  width: 0;
-}
-
-.dpzvc3-slideBar-slide {
-  width: auto;
-}
-
-.dpzvc3-slideBar-slide .dpzvc3-slideBar-child {
-  display: inline-block;
-  margin-bottom: -3px;
-}
-
-//.dpzvc3-slideBar-slide .dpzvc3-slideBar-child.normalChild {
-//  height: 30px;
-//}
-
-.dpzvc3-slideBar-container {
-  width: 100%;
-  position: relative;
-  left: 0;
-  top: 0;
-  overflow: hidden;
-}
-
-.dpzvc3-slideBar-content {
-  transition: transform .2s ease-in;
-  will-change: transform;
-  height: 100%;
-  //display: flex;
-  //flex-flow: row nowrap;
-
-  overflow: auto;
-}
-
-.dpzvc3-slideBar-content.dpzvc3-slideBar-dragging {
-  transition: none;
-  will-change: none;
-}
-
-.dpzvc3-slideBar-content-item {
-  //flex: 1;
-  //width:0;
-  display: inline-block;
-  height: 100%;
-
-}

package/src/styles/components/spinner.less

@@ -1,329 +0,0 @@
-@import "../base/variable.less";
-// spinner.less - 完整可用版本（无 unit()/round()，可直接编译）
-@SpinnerSize: 28px;
-@SpinnerColor: #ccc;
-
-// ---------- Blade Spinner ----------
-.dpzvc3-spinner-blade {
-  position: relative;
-  height: @SpinnerSize;
-  width: @SpinnerSize;
-
-  .blade {
-    position: absolute;
-    left: 44.5%;
-    top: 37%;
-    width: 10%;
-    height: 25%;
-    border-radius: ~'50% / 20%';
-    animation: dpzvc3-spinner-blade 1s linear infinite;
-    background-color: @SpinnerColor;
-  }
-
-  .blade-0 {
-    transform: rotate(30deg) translate(0, -150%);
-    animation-delay: -1.6667s;
-  }
-
-  .blade-1 {
-    transform: rotate(60deg) translate(0, -150%);
-    animation-delay: -1.5s;
-  }
-
-  .blade-2 {
-    transform: rotate(90deg) translate(0, -150%);
-    animation-delay: -1.3333s;
-  }
-
-  .blade-3 {
-    transform: rotate(120deg) translate(0, -150%);
-    animation-delay: -1.1667s;
-  }
-
-  .blade-4 {
-    transform: rotate(150deg) translate(0, -150%);
-    animation-delay: -1s;
-  }
-
-  .blade-5 {
-    transform: rotate(180deg) translate(0, -150%);
-    animation-delay: -0.8333s;
-  }
-
-  .blade-6 {
-    transform: rotate(210deg) translate(0, -150%);
-    animation-delay: -0.6667s;
-  }
-
-  .blade-7 {
-    transform: rotate(240deg) translate(0, -150%);
-    animation-delay: -0.5s;
-  }
-
-  .blade-8 {
-    transform: rotate(270deg) translate(0, -150%);
-    animation-delay: -0.3333s;
-  }
-
-  .blade-9 {
-    transform: rotate(300deg) translate(0, -150%);
-    animation-delay: -0.1667s;
-  }
-
-  .blade-10 {
-    transform: rotate(330deg) translate(0, -150%);
-    animation-delay: 0s;
-  }
-
-  .blade-11 {
-    transform: rotate(360deg) translate(0, -150%);
-    animation-delay: 0.1667s;
-  }
-}
-
-@keyframes dpzvc3-spinner-blade {
-  0% {
-    opacity: 0.85;
-  }
-
-  50% {
-    opacity: 0.25;
-  }
-
-  100% {
-    opacity: 0.25;
-  }
-}
-
-// ---------- Double Bounce Spinner ----------
-.dpzvc3-spinner-double-bounce {
-  position: relative;
-  height: @SpinnerSize;
-  width: @SpinnerSize;
-
-  .bounce {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    opacity: 0.6;
-    position: absolute;
-    top: 0;
-    left: 0;
-    animation: dpzvc3-spinner-double-bounce 2s infinite ease-in-out;
-    background-color: @SpinnerColor;
-  }
-
-  .bounce-1 {
-    animation-delay: -1s;
-  }
-}
-
-@keyframes dpzvc3-spinner-double-bounce {
-
-  0%,
-  100% {
-    transform: scale(0);
-  }
-
-  50% {
-    transform: scale(1);
-  }
-}
-
-// ---------- Triple Bounce Spinner ----------
-@unitSize: @SpinnerSize / 3; // 28px / 3 = 9.3333px
-
-.dpzvc3-spinner-triple-bounce {
-  font-size: 0;
-  padding: (@SpinnerSize - @unitSize) / 2 0;
-
-  .bounce {
-    border-radius: 100%;
-    display: inline-block;
-    animation: dpzvc3-spinner-triple-bounce 1.4s infinite ease-in-out both;
-    background-color: @SpinnerColor;
-    width: @unitSize;
-    height: @unitSize;
-  }
-
-  .bounce-0 {
-    animation-delay: -0.32s;
-  }
-
-  .bounce-1 {
-    animation-delay: -0.16s;
-    margin: 0 (@unitSize * 0.4);
-  }
-}
-
-@keyframes dpzvc3-spinner-triple-bounce {
-
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-
-  40% {
-    transform: scale(1);
-  }
-}
-
-// ---------- Fading Circle Spinner ----------
-.dpzvc3-spinner-fading-circle {
-  position: relative;
-  height: @SpinnerSize;
-  width: @SpinnerSize;
-
-  .block {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-
-    .circle {
-      margin: 0 auto;
-      width: 15%;
-      height: 15%;
-      border-radius: 100%;
-      animation: dpzvc3-spinner-fading-circle 1.2s infinite ease-in-out both;
-      background-color: @SpinnerColor;
-    }
-  }
-
-  // 写死 12 个 block 类
-  .block-0 {
-    transform: rotate(0deg);
-
-    .circle-0 {
-      animation-delay: -1.2s;
-    }
-  }
-
-  .block-1 {
-    transform: rotate(30deg);
-
-    .circle-1 {
-      animation-delay: -1.1s;
-    }
-  }
-
-  .block-2 {
-    transform: rotate(60deg);
-
-    .circle-2 {
-      animation-delay: -1s;
-    }
-  }
-
-  .block-3 {
-    transform: rotate(90deg);
-
-    .circle-3 {
-      animation-delay: -0.9s;
-    }
-  }
-
-  .block-4 {
-    transform: rotate(120deg);
-
-    .circle-4 {
-      animation-delay: -0.8s;
-    }
-  }
-
-  .block-5 {
-    transform: rotate(150deg);
-
-    .circle-5 {
-      animation-delay: -0.7s;
-    }
-  }
-
-  .block-6 {
-    transform: rotate(180deg);
-
-    .circle-6 {
-      animation-delay: -0.6s;
-    }
-  }
-
-  .block-7 {
-    transform: rotate(210deg);
-
-    .circle-7 {
-      animation-delay: -0.5s;
-    }
-  }
-
-  .block-8 {
-    transform: rotate(240deg);
-
-    .circle-8 {
-      animation-delay: -0.4s;
-    }
-  }
-
-  .block-9 {
-    transform: rotate(270deg);
-
-    .circle-9 {
-      animation-delay: -0.3s;
-    }
-  }
-
-  .block-10 {
-    transform: rotate(300deg);
-
-    .circle-10 {
-      animation-delay: -0.2s;
-    }
-  }
-
-  .block-11 {
-    transform: rotate(330deg);
-
-    .circle-11 {
-      animation-delay: -0.1s;
-    }
-  }
-}
-
-@keyframes dpzvc3-spinner-fading-circle {
-
-  0%,
-  39%,
-  100% {
-    opacity: 0;
-  }
-
-  40% {
-    opacity: 1;
-  }
-}
-
-// ---------- Snake Spinner ----------
-.dpzvc3-spinner-snake {
-  animation: dpzvc3-spinner-snake 0.8s infinite linear;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: 50%;
-  box-sizing: border-box;
-  height: @SpinnerSize;
-  width: @SpinnerSize;
-  border-width: @SpinnerSize / 8;
-  border-top-color: @SpinnerColor;
-  border-left-color: @SpinnerColor;
-  border-bottom-color: @SpinnerColor;
-}
-
-@keyframes dpzvc3-spinner-snake {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/styles/components/swipe.less

@@ -1,125 +0,0 @@
-.dpzvc3-swipe {
-  width: 100%;
-  position: relative;
-  height: auto;
-  overflow-x: hidden;
-
-  &-wrapper {
-
-    position: relative;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    // transition: transform .2s ease-out;
-    will-change: transform;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  &-item {
-    flex: 1;
-
-    &.multiple {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-
-    }
-
-    >img {
-      display: block;
-      width: 100%;
-      height: 80%;
-      object-fit: cover;
-    }
-
-    >span {
-      display: block;
-      width: 100%;
-      line-height: 25px;
-      text-align: center;
-
-    }
-  }
-
-  &-single {
-    display: block;
-
-    >img {
-      display: block;
-      width: 100%;
-      height: 80%;
-      object-fit: cover;
-    }
-
-    >span {
-      display: block;
-      width: 100%;
-      line-height: 25px;
-      text-align: center;
-    }
-
-  }
-
-  &-multiple {
-    display: block;
-    flex: 1;
-    height: 100%;
-
-    >img {
-      display: block;
-      width: 100%;
-      height: 80%;
-      object-fit: cover;
-    }
-
-    >span {
-      display: block;
-      width: 100%;
-      line-height: 25px;
-      text-align: center;
-    }
-  }
-
-  &-dragging {
-    transition: none;
-    will-change: none
-  }
-
-  &-dots {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    align-items: center;
-
-    &-item {
-      margin: 0 2px;
-      background: #ffffff;
-      opacity: 0.3;
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      display: inline-block;
-
-    }
-
-    &-bottom {
-      bottom: 20px;
-    }
-
-    &-top {
-      top: 20px;
-    }
-  }
-
-  .dpzvc3-swipe-dots-item.active {
-    opacity: 1;
-  }
-
-}

package/src/styles/components/switchBar.less

@@ -1,88 +0,0 @@
-.dpzvc3-switch-ui {
-  display: block;
-  width: 35px;
-  height: 20px;
-  background: #ccc;
-  border-radius: 100px;
-  cursor: pointer;
-  position: relative;
-  -webkit-transition: all .3s ease;
-  -moz-transition: all .3s ease;
-  transition: all .3s ease;
-
-  &.small {
-    width: 24px;
-    height: 14px;
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    width: 18px;
-    height: 18px;
-    border-radius: 100px;
-    background: #fff;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
-    position: absolute;
-    left: 1px;
-    top: 1px;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    transition: all .3s ease;
-  }
-
-
-  &.small:after {
-    width: 12px;
-    height: 12px;
-  }
-
-  &:active:after {
-    width: 24px;
-  }
-
-  &.small:active:after {
-    width: 16px;
-  }
-
-
-
-
-}
-
-
-
-
-.dpzvc3-switch-checkbox:checked~label {
-  background: #39f;
-}
-
-.dpzvc3-switch-checkbox:checked~label:after {
-  left: 16px;
-}
-
-.dpzvc3-switch-checkbox:checked~label:active:after {
-  left: 10px;
-}
-
-
-.dpzvc3-switch-checkbox:checked~label.small:after {
-  left: 11px;
-}
-
-.dpzvc3-switch-checkbox:checked~label.small:active:after {
-  left: 7px;
-}
-
-.dpzvc3-switch-checkbox:disabled~label {
-  background: #d5d5d5;
-  pointer-events: none;
-}
-
-.dpzvc3-switch-checkbox:disabled~label:after {
-  background: #bcbdbc;
-}
-
-.dpzvc3-switch-checkbox.hidden {
-  display: none;
-}