cbvirtua 1.0.10 → 1.0.12

package/vant/style/animation.less

@@ -0,0 +1,139 @@
+@import './var';
+
+@keyframes van-slide-up-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes van-slide-up-leave {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes van-slide-down-enter {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes van-slide-down-leave {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes van-slide-left-enter {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-left-leave {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-right-enter {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-right-leave {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes van-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes van-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes van-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.van-fade {
+  &-enter-active {
+    animation: @animation-duration-base van-fade-in both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: @animation-duration-base van-fade-out both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-up {
+  &-enter-active {
+    animation: van-slide-up-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-up-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-down {
+  &-enter-active {
+    animation: van-slide-down-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-down-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-left {
+  &-enter-active {
+    animation: van-slide-left-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-left-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-right {
+  &-enter-active {
+    animation: van-slide-right-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-right-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}

package/vant/style/base.less

@@ -0,0 +1,10 @@
+/**
+ * Entry of basic styles
+ */
+
+@import './var';
+@import './normalize';
+@import './ellipsis';
+@import './clearfix';
+@import './hairline';
+@import './animation';

package/vant/style/clearfix.less

@@ -0,0 +1,5 @@
+@import './mixins/clearfix';
+
+.van-clearfix {
+  .clearfix();
+}

package/vant/style/demo/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('ellipsis')">
+      <div class="van-ellipsis">{{ t('text1') }}</div>
+      <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
+    </demo-block>
+
+    <demo-block card :title="t('hairline')">
+      <div class="van-hairline--top" />
+    </demo-block>
+
+    <demo-block card :title="t('animation')">
+      <van-cell is-link title="Fade" @click="animate('van-fade')" />
+      <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
+      <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
+      <van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
+      <van-cell
+        is-link
+        title="Slide Right"
+        @click="animate('van-slide-right')"
+      />
+    </demo-block>
+
+    <transition :name="transitionName">
+      <div v-show="show" class="demo-animate-block" />
+    </transition>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      hairline: '1px 边框',
+      ellipsis: '文字省略',
+      animation: '动画',
+      toggle: '切换动画',
+      text1: '这是一段最多显示一行的文字，后面的内容会省略',
+      text2:
+        '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
+    },
+    'en-US': {
+      hairline: 'Hairline',
+      ellipsis: 'Text Ellipsis',
+      animation: 'Animation',
+      toggle: 'Switch animation',
+      text1:
+        'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
+      text2:
+        'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
+    },
+  },
+
+  data() {
+    return {
+      show: false,
+      transitionName: '',
+    };
+  },
+
+  methods: {
+    animate(transitionName) {
+      this.show = true;
+      this.transitionName = transitionName;
+
+      setTimeout(() => {
+        this.show = false;
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-style {
+  .van-ellipsis,
+  .van-multi-ellipsis--l2 {
+    max-width: 300px;
+    margin-left: @padding-md;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  .van-ellipsis {
+    margin-bottom: @padding-md;
+  }
+
+  .van-hairline--top {
+    height: 30px;
+    background-color: @white;
+
+    &::after {
+      top: 5px;
+    }
+  }
+
+  .demo-animate-block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: @blue;
+    border-radius: 8px;
+  }
+}
+</style>

package/vant/style/ellipsis.less

@@ -0,0 +1,13 @@
+@import './mixins/ellipsis';
+
+.van-ellipsis {
+  .ellipsis();
+}
+
+.van-multi-ellipsis--l2 {
+  .multi-ellipsis(2);
+}
+
+.van-multi-ellipsis--l3 {
+  .multi-ellipsis(3);
+}

package/vant/style/hairline.less

@@ -0,0 +1,47 @@
+@import './var';
+@import './mixins/hairline';
+
+[class*='van-hairline'] {
+  &::after {
+    .hairline();
+  }
+}
+
+.van-hairline {
+  &,
+  &--top,
+  &--left,
+  &--right,
+  &--bottom,
+  &--surround,
+  &--top-bottom {
+    position: relative;
+  }
+
+  &--top::after {
+    border-top-width: @border-width-base;
+  }
+
+  &--left::after {
+    border-left-width: @border-width-base;
+  }
+
+  &--right::after {
+    border-right-width: @border-width-base;
+  }
+
+  &--bottom::after {
+    border-bottom-width: @border-width-base;
+  }
+
+  &,
+  &-unset {
+    &--top-bottom::after {
+      border-width: @border-width-base 0;
+    }
+  }
+
+  &--surround::after {
+    border-width: @border-width-base;
+  }
+}

package/vant/style/mixins/clearfix.less

@@ -0,0 +1,7 @@
+.clearfix() {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

package/vant/style/mixins/ellipsis.less

@@ -0,0 +1,15 @@
+.multi-ellipsis(@lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: @lines;
+
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+.ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/vant/style/mixins/hairline.less

@@ -0,0 +1,39 @@
+@import '../var';
+
+.hairline-common() {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+}
+
+.hairline(@color: @border-color) {
+  .hairline-common();
+
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid @color;
+  transform: scale(0.5);
+}
+
+.hairline-top(@color: @border-color, @left: 0, @right: 0) {
+  .hairline-common();
+
+  top: 0;
+  right: @right;
+  left: @left;
+  border-top: 1px solid @color;
+  transform: scaleY(0.5);
+}
+
+.hairline-bottom(@color: @border-color, @left: 0, @right: 0) {
+  .hairline-common();
+
+  right: @right;
+  bottom: 0;
+  left: @left;
+  border-bottom: 1px solid @color;
+  transform: scaleY(0.5);
+}

package/vant/style/normalize.less

@@ -0,0 +1,38 @@
+@import './var';
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  font-family: @base-font-family;
+}
+
+a {
+  text-decoration: none;
+}
+
+input,
+button,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+
+a,
+input,
+button,
+textarea,
+[class*='van-'] {
+  &:focus {
+    outline: none;
+  }
+}
+
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/vant/style/reset.less

@@ -0,0 +1,171 @@
+@import './var';
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  border: 0;
+}
+
+html {
+  line-height: 1;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption,
+th,
+td {
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+q,
+blockquote {
+  quotes: none;
+}
+
+q::before,
+q::after,
+blockquote::before,
+blockquote::after {
+  content: '';
+  content: none;
+}
+
+a img {
+  border: none;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+* {
+  box-sizing: content-box;
+}
+
+body {
+  color: @text-color;
+  background-color: @background-color;
+}
+
+a {
+  text-decoration: none;
+  background: transparent;
+}
+
+button,
+input[type='number'],
+input[type='text'],
+input[type='password'],
+input[type='email'],
+input[type='search'],
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  -webkit-appearance: none;
+}