btxui 1.0.2 → 1.0.5

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 (194) hide show
  1. package/favicon.png +0 -0
  2. package/index.js +3289 -0
  3. package/index.js.gz +0 -0
  4. package/index.umd.cjs +1 -0
  5. package/package.json +11 -23
  6. package/README.md +0 -42
  7. package/app.vue +0 -162
  8. package/assets/css/_main.js +0 -73
  9. package/assets/css/btx.min.css +0 -1
  10. package/assets/css/btx.mob.min.css +0 -1
  11. package/assets/css/btx.pad.min.css +0 -1
  12. package/assets/css/btx.webapp.min.css +0 -1
  13. package/assets/css/custom_fonts/iconfont.css +0 -37
  14. package/assets/css/custom_fonts/iconfont.eot +0 -0
  15. package/assets/css/custom_fonts/iconfont.svg +0 -47
  16. package/assets/css/custom_fonts/iconfont.ttf +0 -0
  17. package/assets/css/custom_fonts/iconfont.woff +0 -0
  18. package/assets/css/custom_fonts/iconfont.woff2 +0 -0
  19. package/assets/css/res-l.css +0 -47
  20. package/assets/css/res-m.css +0 -47
  21. package/assets/css/res-s.css +0 -61
  22. package/assets/custom_fonts/iconfont.css +0 -37
  23. package/assets/custom_fonts/iconfont.eot +0 -0
  24. package/assets/custom_fonts/iconfont.svg +0 -47
  25. package/assets/custom_fonts/iconfont.ttf +0 -0
  26. package/assets/custom_fonts/iconfont.woff +0 -0
  27. package/assets/custom_fonts/iconfont.woff2 +0 -0
  28. package/assets/js/Btx.js +0 -196
  29. package/assets/js/Utils.js +0 -421
  30. package/assets/js/fastclick.js +0 -802
  31. package/assets/js/lazy.min.js +0 -2
  32. package/assets/js/touchwipe.js +0 -111
  33. package/assets/server.js +0 -8
  34. package/assets/start_site_code_str.js +0 -119
  35. package/cdn/css/btx.min.css +0 -1
  36. package/cdn/css/btx.min.css.map +0 -1
  37. package/cdn/fonts/iconfont.ttf +0 -0
  38. package/cdn/fonts/iconfont.woff +0 -0
  39. package/cdn/fonts/iconfont.woff2 +0 -0
  40. package/components/BTXUI/app/app-wid.vue +0 -182
  41. package/components/BTXUI/btn/btn-wid.vue +0 -128
  42. package/components/BTXUI/carousel/carousel-wid.vue +0 -138
  43. package/components/BTXUI/checkbox/checkbox-wid.vue +0 -72
  44. package/components/BTXUI/confirm/confirm-wid.vue +0 -279
  45. package/components/BTXUI/content/content-checkbox-wid.vue +0 -44
  46. package/components/BTXUI/content/content-node-wid.vue +0 -114
  47. package/components/BTXUI/content/content-tag-wid.vue +0 -25
  48. package/components/BTXUI/content/content-wid.vue +0 -254
  49. package/components/BTXUI/core/anis/ani-fail.vue +0 -46
  50. package/components/BTXUI/core/anis/ani-loading.vue +0 -32
  51. package/components/BTXUI/core/anis/ani-notic.vue +0 -47
  52. package/components/BTXUI/core/anis/ani-success.vue +0 -48
  53. package/components/BTXUI/core/b-drag.vue +0 -258
  54. package/components/BTXUI/core/b-grid.vue +0 -84
  55. package/components/BTXUI/core/b-hot.vue +0 -171
  56. package/components/BTXUI/core/b-icon.vue +0 -76
  57. package/components/BTXUI/core/b-img.vue +0 -84
  58. package/components/BTXUI/core/b-input.vue +0 -198
  59. package/components/BTXUI/core/b-list.vue +0 -276
  60. package/components/BTXUI/core/b-text/doc.ts +0 -9
  61. package/components/BTXUI/core/b-text/index.vue +0 -16
  62. package/components/BTXUI/core/b-textarea.vue +0 -58
  63. package/components/BTXUI/core/b-video.vue +0 -35
  64. package/components/BTXUI/core/b-view/doc.ts +0 -10
  65. package/components/BTXUI/core/b-view/index.vue +0 -20
  66. package/components/BTXUI/core/b-webview.vue +0 -20
  67. package/components/BTXUI/core/lib/ChapterLink.js +0 -49
  68. package/components/BTXUI/core/lib/Search.vue +0 -60
  69. package/components/BTXUI/core/styles/doc.ts +0 -55
  70. package/components/BTXUI/core/styles/index.vue +0 -98
  71. package/components/BTXUI/core/styles/prestyles.ts +0 -471
  72. package/components/BTXUI/core/styles/theme.ts +0 -29
  73. package/components/BTXUI/drawer/drawer-wid.vue +0 -165
  74. package/components/BTXUI/drawer/title-tag-wid.vue +0 -114
  75. package/components/BTXUI/form/form-select-wid.vue +0 -57
  76. package/components/BTXUI/form/form-wid.vue +0 -324
  77. package/components/BTXUI/formPannel/form-pannel-wid.vue +0 -133
  78. package/components/BTXUI/imgsUpload/imgs-upload-wid.vue +0 -149
  79. package/components/BTXUI/index.js +0 -83
  80. package/components/BTXUI/pageFlip/page-flip-wid.vue +0 -206
  81. package/components/BTXUI/pannel/pannel-wid.vue +0 -167
  82. package/components/BTXUI/range/range-wid.vue +0 -134
  83. package/components/BTXUI/search/search-wid.vue +0 -80
  84. package/components/BTXUI/select/select-wid.vue +0 -186
  85. package/components/BTXUI/slider/slider-wid.vue +0 -444
  86. package/components/BTXUI/tab/tab-wid.vue +0 -109
  87. package/components/BTXUI/table/table-wid.vue +0 -324
  88. package/components/BTXUI/tag/tag-wid.vue +0 -183
  89. package/components/BTXUI/tags/tags-wid.vue +0 -121
  90. package/components/BTXUI/tooltip/tooltip-wid.vue +0 -146
  91. package/components/BTXUI/upload/upload-wid.vue +0 -215
  92. package/components/BTXUI/waterfall/waterfall-wid.vue +0 -166
  93. package/components/header-info.vue +0 -167
  94. package/composables/@types.ts +0 -4
  95. package/composables/api.ts +0 -18
  96. package/env.d.ts +0 -5
  97. package/main.js +0 -16
  98. package/nuxt.config.ts +0 -51
  99. package/pages/article.vue +0 -16
  100. package/pages/download.vue +0 -50
  101. package/pages/example/app_wid/app/data_demo.vue +0 -9
  102. package/pages/example/app_wid/app/download_demo.vue +0 -9
  103. package/pages/example/app_wid/app/list_demo.vue +0 -11
  104. package/pages/example/app_wid/app/system_demo.vue +0 -9
  105. package/pages/example/app_wid/app_wid_demo.vue +0 -198
  106. package/pages/example/app_wid/btn_wid_demo.vue +0 -179
  107. package/pages/example/app_wid/carousel_wid_demo.vue +0 -152
  108. package/pages/example/app_wid/checkbox_wid_demo.vue +0 -65
  109. package/pages/example/app_wid/confirm_wid_demo.vue +0 -197
  110. package/pages/example/app_wid/content_wid_demo.vue +0 -369
  111. package/pages/example/app_wid/drawer_wid_demo.vue +0 -155
  112. package/pages/example/app_wid/form_pannel_wid_demo.vue +0 -338
  113. package/pages/example/app_wid/form_wid_demo.vue +0 -550
  114. package/pages/example/app_wid/imgs_upload_wid_demo.vue +0 -159
  115. package/pages/example/app_wid/index.js +0 -158
  116. package/pages/example/app_wid/page_flip_wid_demo.vue +0 -99
  117. package/pages/example/app_wid/pannel_wid_demo.vue +0 -177
  118. package/pages/example/app_wid/range_wid_demo.vue +0 -101
  119. package/pages/example/app_wid/search_wid_demo.vue +0 -75
  120. package/pages/example/app_wid/select_wid_demo.vue +0 -217
  121. package/pages/example/app_wid/slider_wid_demo.vue +0 -143
  122. package/pages/example/app_wid/tab_wid_demo.vue +0 -170
  123. package/pages/example/app_wid/table_wid_demo.vue +0 -377
  124. package/pages/example/app_wid/tag_wid_demo.vue +0 -133
  125. package/pages/example/app_wid/tags_wid_demo.vue +0 -143
  126. package/pages/example/app_wid/tooltip_wid_demo.vue +0 -117
  127. package/pages/example/app_wid/upload_wid_demo.vue +0 -123
  128. package/pages/example/base_wid/b_drag_demo.vue +0 -159
  129. package/pages/example/base_wid/b_grid_demo.vue +0 -225
  130. package/pages/example/base_wid/b_hot_demo.vue +0 -135
  131. package/pages/example/base_wid/b_icon_demo.vue +0 -80
  132. package/pages/example/base_wid/b_img_demo.vue +0 -95
  133. package/pages/example/base_wid/b_input_demo.vue +0 -171
  134. package/pages/example/base_wid/b_list_demo.vue +0 -241
  135. package/pages/example/base_wid/b_style_demo.vue +0 -928
  136. package/pages/example/base_wid/b_text_demo.vue +0 -36
  137. package/pages/example/base_wid/b_textarea_demo.vue +0 -64
  138. package/pages/example/base_wid/b_video_demo.vue +0 -42
  139. package/pages/example/base_wid/b_view_demo.vue +0 -36
  140. package/pages/example/base_wid/index.js +0 -76
  141. package/pages/example/content.js +0 -49
  142. package/pages/example/global_style/animation.vue +0 -197
  143. package/pages/example/global_style/color.vue +0 -134
  144. package/pages/example/global_style/decoration.vue +0 -546
  145. package/pages/example/global_style/icon.vue +0 -345
  146. package/pages/example/global_style/index.js +0 -52
  147. package/pages/example/global_style/layout.vue +0 -846
  148. package/pages/example/global_style/special.vue +0 -37
  149. package/pages/example/global_style/table.vue +0 -298
  150. package/pages/example/global_style/text.vue +0 -159
  151. package/pages/index.vue +0 -43
  152. package/pages/level_widget.vue +0 -11
  153. package/pages/start.vue +0 -200
  154. package/plugins/index.ts +0 -2
  155. package/public/favicon.gif +0 -0
  156. package/public/fonts/iconfont.ttf +0 -0
  157. package/public/fonts/iconfont.woff +0 -0
  158. package/public/fonts/iconfont.woff2 +0 -0
  159. package/public/img/banner.jpg +0 -0
  160. package/public/img/banner2.jpg +0 -0
  161. package/public/img/bg_pattern.png +0 -0
  162. package/public/img/btx.jpg +0 -0
  163. package/public/img/btx_ui.jpg +0 -0
  164. package/public/img/dir.png +0 -0
  165. package/public/img/f.png +0 -0
  166. package/public/img/head.jpg +0 -0
  167. package/public/img/head2.jpg +0 -0
  168. package/public/img/home_ico.png +0 -0
  169. package/public/img/icons.svg +0 -164
  170. package/public/img/mechanism/b-style.png +0 -0
  171. package/public/img/mechanism/slider-wid.png +0 -0
  172. package/public/img/mechanism/upload-wid.png +0 -0
  173. package/public/img/transform_origin.png +0 -0
  174. package/sass/animation.scss +0 -400
  175. package/sass/btx.mob.scss +0 -10
  176. package/sass/btx.pad.scss +0 -3
  177. package/sass/btx.scss +0 -22
  178. package/sass/btx.webapp.scss +0 -22
  179. package/sass/colors.scss +0 -65
  180. package/sass/decoration.scss +0 -220
  181. package/sass/flex.scss +0 -29
  182. package/sass/icons.scss +0 -100
  183. package/sass/layout.scss +0 -88
  184. package/sass/reset.scss +0 -111
  185. package/sass/response/flex_mixin.scss +0 -91
  186. package/sass/response/layout_mixin.scss +0 -227
  187. package/sass/response/main.scss +0 -59
  188. package/sass/response/text_mixin.scss +0 -65
  189. package/sass/scroll.scss +0 -100
  190. package/sass/special.scss +0 -13
  191. package/sass/table.scss +0 -103
  192. package/sass/text.scss +0 -86
  193. package/sass/webpack.config.js +0 -31
  194. package/tsconfig.json +0 -4
@@ -1,400 +0,0 @@
1
- $duration: .7s;
2
- $fast_duration: .4s;
3
- $slow_duration: 1.4s;
4
-
5
- %duration {
6
- animation-duration: $duration;
7
- }
8
- %reverse {
9
- animation-direction: reverse;
10
- }
11
-
12
-
13
- .trans { //中速过度动画
14
- transition: all $duration;
15
- }
16
- .trans-fast { //快速过度动画
17
- transition: all $fast_duration;
18
- }
19
- .trans-slow { //慢速过度动画
20
- transition: all $slow_duration;
21
- }
22
- .trans-no { //无过度动画
23
- transition: none;
24
- }
25
-
26
-
27
- //过渡动画延迟
28
- @for $i from 1 to 10{
29
- .trans-delay-d#{$i} {
30
- transition-delay: #{calc($i / 10)}s;
31
- }
32
- @if $i < 6 {
33
- .trans-delay-#{$i} {
34
- transition-delay: #{$i}s;
35
- }
36
- .trans-delay-#{$i}d5 {
37
- transition-delay: #{$i + .5}s;
38
- }
39
- }
40
- }
41
-
42
-
43
- //animation 动画 ---------------------------------------------------------------
44
-
45
- .ani { //中速动画
46
- animation-duration: $duration;
47
- }
48
-
49
- .ani-fast { //快速动画
50
- animation-duration: $fast_duration;
51
- }
52
-
53
- .ani-slow { //慢速动画
54
- animation-duration: $slow_duration;
55
- }
56
-
57
- .ani-mode-forwards {
58
- animation-fill-mode: forwards;
59
- }
60
-
61
- .ani-mode-backwards {
62
- animation-fill-mode: backwards;
63
- }
64
-
65
- .ani-mode-both {
66
- animation-fill-mode: both;
67
- }
68
-
69
- //animation 动画延迟
70
- @for $i from 1 to 11{
71
- @if $i < 10 {
72
- .ani-delay-d#{$i} {
73
- animation-delay: #{calc($i / 10)}s !important;
74
- }
75
- }
76
- .ani-delay-#{$i} {
77
- animation-delay: #{$i}s !important;
78
- }
79
- }
80
-
81
-
82
- //animation 动画迭代
83
- @for $i from 1 to 7{
84
- .ani-loop-#{$i} {
85
- animation-iteration-count: $i;
86
- }
87
- }
88
- .ani-loop {
89
- animation-iteration-count: infinite;
90
- }
91
-
92
-
93
- .ani-fade-in,
94
- .ani-fade-out{ //淡入动画
95
- animation-name: fadeIn;
96
- @extend %duration;
97
- }
98
- .ani-fade-out{ //淡出动画
99
- @extend %reverse;
100
- }
101
- @-webkit-keyframes fadeIn {
102
- from {
103
- opacity: 0;
104
- visibility: hidden;
105
- }
106
- to{
107
- opacity: 1;
108
- visibility: visible;
109
- }
110
- }
111
- @keyframes fadeIn {
112
- from {
113
- opacity: 0;
114
- visibility: hidden;
115
- }
116
- to{
117
- opacity: 1;
118
- visibility: visible;
119
- }
120
- }
121
-
122
-
123
- .ani-scale-fade-in,
124
- .ani-scale-fade-out{ //缩放式淡入动画
125
- animation-name: scaleFadeIn;
126
- @extend %duration;
127
- }
128
- .ani-scale-fade-out{ //放缩式淡出动画
129
- @extend %reverse;
130
- }
131
- @-webkit-keyframes scaleFadeIn {
132
- from {
133
- opacity: 0;
134
- -webkit-transform: scale(0);
135
- }
136
- to{
137
- opacity: 1;
138
- -webkit-transform: scale(1);
139
- }
140
- }
141
- @keyframes scaleFadeIn {
142
- from {
143
- opacity: 0;
144
- transform: scale(0);
145
- }
146
- to{
147
- opacity: 1;
148
- transform: scale(1);
149
- }
150
- }
151
-
152
-
153
- .ani-v-stretch-h-in { //先垂直后水平伸展式动画
154
- animation-name: stretchV2HIn;
155
- animation-timing-function: ease-out;
156
- @extend %duration;
157
- }
158
- @-webkit-keyframes stretchV2HIn {
159
- 0% {
160
- opacity: 0;
161
- -webkit-transform: scale(0, 0);
162
- }
163
- 70% {
164
- opacity: 1;
165
- -webkit-transform: scale(.2, 1);
166
- }
167
- 100%{
168
- -webkit-transform: scale(1, 1);
169
- }
170
- }
171
- @keyframes stretchV2HIn {
172
- 0% {
173
- opacity: 0;
174
- transform: scale(0, 0);
175
- }
176
- 70% {
177
- opacity: 1;
178
- transform: scale(.2, 1);
179
- }
180
- 100%{
181
- transform: scale(1, 1);
182
- }
183
- }
184
-
185
-
186
- .ani-h-stretch-v-in { //先水平后垂直伸展式动画
187
- animation-name: stretchH2VIn;
188
- animation-timing-function: ease-out;
189
- @extend %duration;
190
- }
191
- @-webkit-keyframes stretchH2VIn {
192
- 0% {
193
- opacity: 0;
194
- -webkit-transform: scale(0, 0);
195
- }
196
- 70% {
197
- opacity: 1;
198
- -webkit-transform: scale(1, .2);
199
- }
200
- 100%{
201
- -webkit-transform: scale(1, 1);
202
- }
203
- }
204
- @keyframes stretchH2VIn {
205
- 0% {
206
- opacity: 0;
207
- transform: scale(0, 0);
208
- }
209
- 70% {
210
- opacity: 1;
211
- transform: scale(1, .2);
212
- }
213
- 100%{
214
- transform: scale(1, 1);
215
- }
216
- }
217
-
218
-
219
- //由左向右滑动动画
220
- .ani-left-to-right{
221
- animation-name: aniLeftSliderToRight;
222
- @extend %duration;
223
- }
224
- @-webkit-keyframes aniLeftSliderToRight {
225
- from {
226
- -webkit-transform: translateX(-150%);
227
- }
228
- to{
229
- -webkit-transform: translateX(0%);
230
- }
231
- }
232
- @keyframes aniLeftSliderToRight {
233
- from {
234
- transform: translateX(-150%);
235
- }
236
- to{
237
- transform: translateX(0%);
238
- }
239
- }
240
-
241
-
242
- //由右向左滑动动画
243
- .ani-right-to-left{
244
- animation-name: aniRightSliderToLeft;
245
- @extend %duration;
246
- }
247
- @-webkit-keyframes aniRightSliderToLeft {
248
- from {
249
- -webkit-transform: translateX(150%);
250
- }
251
- to{
252
- -webkit-transform: translateX(0%);
253
- }
254
- }
255
- @keyframes aniRightSliderToLeft {
256
- from {
257
- transform: translateX(150%);
258
- }
259
- to{
260
- transform: translateX(0%);
261
- }
262
- }
263
-
264
-
265
- //由上向下滑动动画
266
- .ani-top-to-bottom{
267
- animation-name: aniTopSliderToBottom;
268
- @extend %duration;
269
- }
270
- @-webkit-keyframes aniTopSliderToBottom {
271
- from {
272
- -webkit-transform: translateY(-150%);
273
- }
274
- to{
275
- -webkit-transform: translateY(0%);
276
- }
277
- }
278
- @keyframes aniTopSliderToBottom {
279
- from {
280
- transform: translateY(-150%);
281
- }
282
- to{
283
- transform: translateY(0%);
284
- }
285
- }
286
-
287
-
288
- //由下向上滑动动画
289
- .ani-bottom-to-top{
290
- animation-name: aniBottomSliderToTop;
291
- @extend %duration;
292
- }
293
- @-webkit-keyframes aniBottomSliderToTop {
294
- from {
295
- -webkit-transform: translateY(150%);
296
- }
297
- to{
298
- -webkit-transform: translateY(0%);
299
- }
300
- }
301
- @keyframes aniBottomSliderToTop {
302
- from {
303
- transform: translateY(150%);
304
- }
305
- to{
306
- transform: translateY(0%);
307
- }
308
- }
309
-
310
-
311
- //旋转 360 度动画
312
- .ani-rotate {
313
- animation-name: aniRotate;
314
- @extend %duration;
315
- }
316
- @-webkit-keyframes aniRotate {
317
- 0%{
318
- -webkit-transform: rotate(0deg);
319
- }
320
- 100%{
321
- -webkit-transform: rotate(360deg);
322
- }
323
- }
324
- @keyframes aniRotate {
325
- 0%{
326
- transform: rotate(0deg);
327
- }
328
- 100%{
329
- transform: rotate(360deg);
330
- }
331
- }
332
-
333
-
334
- //旋转 180 度动画
335
- .ani-rotate-half {
336
- animation-name: aniRotateHalf;
337
- @extend %duration;
338
- }
339
- @-webkit-keyframes aniRotateHalf {
340
- 0%{
341
- -webkit-transform: rotate(0deg);
342
- }
343
- 100%{
344
- -webkit-transform: rotate(180deg);
345
- }
346
- }
347
- @keyframes aniRotateHalf {
348
- 0%{
349
- transform: rotate(0deg);
350
- }
351
- 100%{
352
- transform: rotate(180deg);
353
- }
354
- }
355
-
356
-
357
- //旋转 90 度动画
358
- .ani-rotate-90 {
359
- animation-name: aniRotate90;
360
- @extend %duration;
361
- }
362
- @-webkit-keyframes aniRotate90 {
363
- 0%{
364
- -webkit-transform: rotate(0deg);
365
- }
366
- 100%{
367
- -webkit-transform: rotate(90deg);
368
- }
369
- }
370
- @keyframes aniRotate90 {
371
- 0%{
372
- transform: rotate(0deg);
373
- }
374
- 100%{
375
- transform: rotate(90deg);
376
- }
377
- }
378
-
379
-
380
- //旋转 45 度动画
381
- .ani-rotate-45 {
382
- animation-name: aniRotate45;
383
- @extend %duration;
384
- }
385
- @-webkit-keyframes aniRotate45 {
386
- 0%{
387
- -webkit-transform: rotate(0deg);
388
- }
389
- 100%{
390
- -webkit-transform: rotate(45deg);
391
- }
392
- }
393
- @keyframes aniRotate45 {
394
- 0%{
395
- transform: rotate(0deg);
396
- }
397
- 100%{
398
- transform: rotate(45deg);
399
- }
400
- }
package/sass/btx.mob.scss DELETED
@@ -1,10 +0,0 @@
1
- @import "./response/main.scss";
2
-
3
- @include auto_gen_response_class(-s);
4
-
5
- html {
6
- font-size: 11px;
7
- }
8
- .bg-fixed {
9
- background-attachment: scroll;
10
- }
package/sass/btx.pad.scss DELETED
@@ -1,3 +0,0 @@
1
- @import "./response/main.scss";
2
-
3
- @include auto_gen_response_class(-m);
package/sass/btx.scss DELETED
@@ -1,22 +0,0 @@
1
- @import "./colors.scss";
2
-
3
- @import "./reset.scss";
4
-
5
- @import "./text.scss";
6
-
7
- @import "./layout.scss";
8
-
9
- @import "./table.scss";
10
-
11
- @import "./decoration.scss";
12
-
13
- @import "./animation.scss";
14
-
15
- @import "./icons.scss";
16
-
17
- @import "./special.scss";
18
-
19
- @import "./response/main.scss";
20
-
21
- @include auto_gen_response_class();
22
-
@@ -1,22 +0,0 @@
1
- @import "./reset.scss";
2
-
3
- @import "./scroll.scss";
4
-
5
- @import "./icons.scss";
6
-
7
- @import "./response/flex_mixin.scss";
8
-
9
- //栅格系统
10
-
11
- //全局样式
12
- @include auto_gen_grid_class("");
13
-
14
- //平板端
15
- @media only screen and (max-width: 1367px){
16
- @include auto_gen_grid_class(-m);
17
- }
18
-
19
- //移动端
20
- @media only screen and (max-width: 740px){
21
- @include auto_gen_grid_class(-s);
22
- }
package/sass/colors.scss DELETED
@@ -1,65 +0,0 @@
1
- $none: transparent; //全透明色
2
-
3
- $main: #051c24; //主题色-遂蓝
4
-
5
- $sub: #b4967a; //辅助色-锡金
6
-
7
- $light: #fff; //纯白
8
-
9
- $dark: #111; //纯黑
10
-
11
- $dgray: #373737; //深灰
12
-
13
- $mgray: #a7a7a7; //中灰
14
-
15
- $lgray: #eee; //浅灰
16
-
17
- $blue: #4085f3; //湛蓝
18
-
19
- $red: #ec4334; //玫红
20
-
21
- $green: #02b9a1; //青绿
22
-
23
- $yellow: #fdba00; //橙黄
24
-
25
- $neutral: rgba(130,130,130,.15); //中性色
26
-
27
- //生成色彩(文字、填充、描边)类
28
- @mixin auto_gen_color_class {
29
- $colors: (none $none), (sub $sub), (main $main), (light $light), (dark $dark), (dgray $dgray), (mgray $mgray), (lgray $lgray), (blue $blue), (green $green), (yellow $yellow), (red $red), (neutral, $neutral);
30
- @each $color in $colors{
31
- .color-#{"" + nth($color, 1)}{
32
- color: nth($color, 2);
33
- }
34
- .bg-color-#{"" + nth($color, 1)}{
35
- background-color: nth($color, 2);
36
- }
37
- .line-#{"" + nth($color, 1)}{
38
- border-color: nth($color, 2) !important;
39
- }
40
- }
41
- }
42
- @include auto_gen_color_class();
43
-
44
-
45
- //生成不透明度阶梯类
46
- %visibility {
47
- visibility: visible;
48
- };
49
- @mixin auto_gen_opacity_class {
50
- .alpha-0 {
51
- opacity: 0;
52
- visibility: hidden;
53
- }
54
- @for $i from 1 to 10{
55
- .alpha-d#{$i} {
56
- opacity: calc($i / 10);
57
- @extend %visibility;
58
- }
59
- }
60
- .alpha-1 {
61
- opacity: 1;
62
- @extend %visibility;
63
- }
64
- }
65
- @include auto_gen_opacity_class();