vue-color-ui 0.0.60 → 0.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/css/animation.css +147 -0
  2. package/lib/css/icon.css +925 -0
  3. package/lib/css/main.css +3532 -0
  4. package/lib/style.css +1 -1
  5. package/lib/temp-color-ui.js +28 -29
  6. package/lib/temp-color-ui.umd.cjs +2 -2
  7. package/package.json +2 -2
package/lib/css/animation.css ADDED
@@ -0,0 +1,147 @@
1
+ /*
2
+ Animation 微动画
3
+ 基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
4
+ */
5
+ /* css 滤镜 控制黑白底色gif的 */
6
+ .gif-black{
7
+ mix-blend-mode: screen;
8
+ }
9
+ .gif-white{
10
+ mix-blend-mode: multiply;
11
+ }
12
+ /* Animation css */
13
+ [class*=animation-] {
14
+ animation-duration: .5s;
15
+ animation-timing-function: ease-out;
16
+ animation-fill-mode: both
17
+ }
18
+ .animation-fade {
19
+ animation-name: fade;
20
+ animation-duration: .8s;
21
+ animation-timing-function: linear
22
+ }
23
+ .animation-scale-up {
24
+ animation-name: scale-up
25
+ }
26
+ .animation-scale-down {
27
+ animation-name: scale-down
28
+ }
29
+ .animation-slide-top {
30
+ animation-name: slide-top
31
+ }
32
+ .animation-slide-bottom {
33
+ animation-name: slide-bottom
34
+ }
35
+ .animation-slide-left {
36
+ animation-name: slide-left
37
+ }
38
+ .animation-slide-right {
39
+ animation-name: slide-right
40
+ }
41
+ .animation-shake {
42
+ animation-name: shake
43
+ }
44
+ .animation-reverse {
45
+ animation-direction: reverse
46
+ }
47
+ @keyframes fade {
48
+ 0% {
49
+ opacity: 0
50
+ }
51
+ 100% {
52
+ opacity: 1
53
+ }
54
+ }
55
+ @keyframes scale-up {
56
+ 0% {
57
+ opacity: 0;
58
+ transform: scale(.2)
59
+ }
60
+ 100% {
61
+ opacity: 1;
62
+ transform: scale(1)
63
+ }
64
+ }
65
+ @keyframes scale-down {
66
+ 0% {
67
+ opacity: 0;
68
+ transform: scale(1.8)
69
+ }
70
+ 100% {
71
+ opacity: 1;
72
+ transform: scale(1)
73
+ }
74
+ }
75
+ @keyframes slide-top {
76
+ 0% {
77
+ opacity: 0;
78
+ transform: translateY(-100%)
79
+ }
80
+ 100% {
81
+ opacity: 1;
82
+ transform: translateY(0)
83
+ }
84
+ }
85
+ @keyframes slide-bottom {
86
+ 0% {
87
+ opacity: 0;
88
+ transform: translateY(100%)
89
+ }
90
+ 100% {
91
+ opacity: 1;
92
+ transform: translateY(0)
93
+ }
94
+ }
95
+ @keyframes shake {
96
+ 0%,
97
+ 100% {
98
+ transform: translateX(0)
99
+ }
100
+ 10% {
101
+ transform: translateX(-9px)
102
+ }
103
+ 20% {
104
+ transform: translateX(8px)
105
+ }
106
+ 30% {
107
+ transform: translateX(-7px)
108
+ }
109
+ 40% {
110
+ transform: translateX(6px)
111
+ }
112
+ 50% {
113
+ transform: translateX(-5px)
114
+ }
115
+ 60% {
116
+ transform: translateX(4px)
117
+ }
118
+ 70% {
119
+ transform: translateX(-3px)
120
+ }
121
+ 80% {
122
+ transform: translateX(2px)
123
+ }
124
+ 90% {
125
+ transform: translateX(-1px)
126
+ }
127
+ }
128
+ @keyframes slide-left {
129
+ 0% {
130
+ opacity: 0;
131
+ transform: translateX(-100%)
132
+ }
133
+ 100% {
134
+ opacity: 1;
135
+ transform: translateX(0)
136
+ }
137
+ }
138
+ @keyframes slide-right {
139
+ 0% {
140
+ opacity: 0;
141
+ transform: translateX(100%)
142
+ }
143
+ 100% {
144
+ opacity: 1;
145
+ transform: translateX(0)
146
+ }
147
+ }