zartui 0.1.21 → 0.1.25

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 (251) hide show
  1. package/README.md +20 -20
  2. package/changelog.generated.md +15 -0
  3. package/es/area/style/index.js +4 -0
  4. package/es/area/style/less.js +4 -0
  5. package/es/avatar/index.css +1 -1
  6. package/es/avatar/index.js +54 -36
  7. package/es/avatar/index.less +39 -11
  8. package/es/avatar/local.less +1 -1
  9. package/es/button/index.js +4 -1
  10. package/es/button/index.less +206 -206
  11. package/es/calendar/index.less +250 -250
  12. package/es/calendar/style/index.js +1 -1
  13. package/es/calendar/style/less.js +1 -1
  14. package/es/cell/index.less +103 -103
  15. package/es/cell-group/index.less +22 -22
  16. package/es/checkbox/index.less +89 -89
  17. package/es/checkbox-group/index.less +8 -8
  18. package/es/col/index.less +20 -20
  19. package/es/datetime-picker/style/index.js +4 -0
  20. package/es/datetime-picker/style/less.js +4 -0
  21. package/es/dialog/index.css +1 -1
  22. package/es/dialog/index.less +125 -125
  23. package/es/dialog/style/index.js +1 -1
  24. package/es/dialog/style/less.js +1 -1
  25. package/es/empty/Developing.js +1643 -0
  26. package/es/empty/Error.js +484 -0
  27. package/es/empty/NotFound.js +645 -0
  28. package/es/empty/NotRight.js +395 -0
  29. package/es/empty/Search.js +336 -0
  30. package/es/empty/index.css +1 -0
  31. package/es/empty/index.js +105 -0
  32. package/es/empty/index.less +33 -0
  33. package/es/empty/style/index.js +2 -0
  34. package/es/empty/style/less.js +2 -0
  35. package/es/field/index.less +172 -172
  36. package/es/icon/index.less +10 -10
  37. package/es/icon/local.less +1 -1
  38. package/es/image/index.less +47 -47
  39. package/es/image-preview/index.less +103 -103
  40. package/es/image-preview/style/index.js +1 -1
  41. package/es/image-preview/style/less.js +1 -1
  42. package/es/index.js +6 -3
  43. package/es/info/index.less +29 -29
  44. package/es/loading/index.less +103 -103
  45. package/es/locale/lang/zh-CN.js +22 -0
  46. package/es/mixins/bind-event.js +2 -2
  47. package/es/mixins/checkbox.js +2 -2
  48. package/es/mixins/click-outside.js +2 -2
  49. package/es/mixins/slots.js +3 -3
  50. package/es/mixins/telemetry.js +11 -0
  51. package/es/nav-bar/index.less +74 -74
  52. package/es/number-keyboard/index.css +1 -1
  53. package/es/number-keyboard/index.less +144 -142
  54. package/es/overlay/index.less +11 -11
  55. package/es/password-input/index.css +1 -0
  56. package/es/password-input/index.js +80 -0
  57. package/es/password-input/index.less +83 -0
  58. package/es/password-input/style/index.js +2 -0
  59. package/es/password-input/style/less.js +2 -0
  60. package/es/pdf-viewer/style/index.js +1 -1
  61. package/es/pdf-viewer/style/less.js +1 -1
  62. package/es/picker/PickerColumn.js +5 -6
  63. package/es/picker/index.js +34 -5
  64. package/es/picker/index.less +151 -151
  65. package/es/picker/shared.js +4 -0
  66. package/es/picker/style/index.js +4 -0
  67. package/es/picker/style/less.js +4 -0
  68. package/es/popup/index.less +137 -137
  69. package/es/popup/style/index.js +1 -1
  70. package/es/popup/style/less.js +1 -1
  71. package/es/radio/index.less +86 -86
  72. package/es/radio-group/index.less +8 -8
  73. package/es/rate/index.css +1 -1
  74. package/es/rate/index.js +1 -1
  75. package/es/rate/index.less +47 -47
  76. package/es/row/index.less +42 -42
  77. package/es/signature/index.css +1 -0
  78. package/es/signature/index.js +230 -0
  79. package/es/signature/index.less +50 -0
  80. package/es/signature/style/index.js +9 -0
  81. package/es/signature/style/less.js +9 -0
  82. package/es/slider/index.less +94 -94
  83. package/es/step/index.less +139 -139
  84. package/es/stepper/index.less +130 -130
  85. package/es/steps/index.less +21 -21
  86. package/es/sticky/index.less +11 -11
  87. package/es/style/animation.less +139 -139
  88. package/es/style/base.less +11 -11
  89. package/es/style/clearfix.less +5 -5
  90. package/es/style/ellipsis.less +13 -13
  91. package/es/style/hairline.less +47 -47
  92. package/es/style/halfPxBorder.less +15 -15
  93. package/es/style/mixins/clearfix.less +7 -7
  94. package/es/style/mixins/ellipsis.less +15 -15
  95. package/es/style/mixins/hairline.less +39 -39
  96. package/es/style/normalize.less +38 -38
  97. package/es/style/reset.less +171 -171
  98. package/es/style/var.less +941 -919
  99. package/es/swipe/index.less +56 -56
  100. package/es/swipe-cell/index.less +29 -29
  101. package/es/swipe-item/index.less +8 -8
  102. package/es/switch/index.less +56 -56
  103. package/es/switch/shared.js +2 -2
  104. package/es/switch-cell/index.less +15 -15
  105. package/es/tab/index.less +17 -17
  106. package/es/tabs/index.less +153 -153
  107. package/es/tag/index.less +99 -99
  108. package/es/telemetry/index.js +72 -0
  109. package/es/toast/index.js +1 -1
  110. package/es/toast/index.less +75 -75
  111. package/es/toast/style/index.js +1 -1
  112. package/es/toast/style/less.js +1 -1
  113. package/es/uploader/index.less +163 -163
  114. package/es/uploader/style/index.js +1 -1
  115. package/es/uploader/style/less.js +1 -1
  116. package/es/utils/create/bem.js +7 -7
  117. package/es/utils/create/component.js +37 -7
  118. package/es/utils/dom/raf.js +2 -2
  119. package/es/utils/dom/reset-scroll.js +3 -3
  120. package/es/utils/index.js +29 -29
  121. package/es/utils/media/image-util.js +138 -0
  122. package/es/utils/router.js +2 -2
  123. package/lib/7893e51cf0a4877dac80.worker.js +10 -0
  124. package/lib/area/style/index.js +4 -0
  125. package/lib/area/style/less.js +4 -0
  126. package/lib/avatar/index.css +1 -1
  127. package/lib/avatar/index.js +55 -37
  128. package/lib/avatar/index.less +39 -11
  129. package/lib/avatar/local.less +1 -1
  130. package/lib/be09b519a460e229fd8d.worker.js +2527 -0
  131. package/lib/button/index.js +5 -0
  132. package/lib/button/index.less +206 -206
  133. package/lib/calendar/index.less +250 -250
  134. package/lib/calendar/style/index.js +1 -1
  135. package/lib/calendar/style/less.js +1 -1
  136. package/lib/cell/index.less +103 -103
  137. package/lib/cell-group/index.less +22 -22
  138. package/lib/checkbox/index.less +89 -89
  139. package/lib/checkbox-group/index.less +8 -8
  140. package/lib/col/index.less +20 -20
  141. package/lib/datetime-picker/style/index.js +4 -0
  142. package/lib/datetime-picker/style/less.js +4 -0
  143. package/lib/dialog/index.css +1 -1
  144. package/lib/dialog/index.less +125 -125
  145. package/lib/dialog/style/index.js +1 -1
  146. package/lib/dialog/style/less.js +1 -1
  147. package/lib/empty/Developing.js +1648 -0
  148. package/lib/empty/Error.js +489 -0
  149. package/lib/empty/NotFound.js +650 -0
  150. package/lib/empty/NotRight.js +400 -0
  151. package/lib/empty/Search.js +341 -0
  152. package/lib/empty/index.css +1 -0
  153. package/lib/empty/index.js +119 -0
  154. package/lib/empty/index.less +33 -0
  155. package/lib/empty/style/index.js +2 -0
  156. package/lib/empty/style/less.js +2 -0
  157. package/lib/field/index.less +172 -172
  158. package/lib/icon/index.less +10 -10
  159. package/lib/icon/local.less +1 -1
  160. package/lib/image/index.less +47 -47
  161. package/lib/image-preview/index.less +103 -103
  162. package/lib/image-preview/style/index.js +1 -1
  163. package/lib/image-preview/style/less.js +1 -1
  164. package/lib/index.css +1 -1
  165. package/lib/index.js +14 -2
  166. package/lib/index.less +6 -3
  167. package/lib/info/index.less +29 -29
  168. package/lib/loading/index.less +103 -103
  169. package/lib/locale/lang/zh-CN.js +22 -0
  170. package/lib/mixins/bind-event.js +2 -2
  171. package/lib/mixins/checkbox.js +2 -2
  172. package/lib/mixins/click-outside.js +2 -2
  173. package/lib/mixins/slots.js +3 -3
  174. package/lib/mixins/telemetry.js +20 -0
  175. package/lib/nav-bar/index.less +74 -74
  176. package/lib/number-keyboard/index.css +1 -1
  177. package/lib/number-keyboard/index.less +144 -142
  178. package/lib/overlay/index.less +11 -11
  179. package/lib/password-input/index.css +1 -0
  180. package/lib/password-input/index.js +93 -0
  181. package/lib/password-input/index.less +83 -0
  182. package/lib/password-input/style/index.js +2 -0
  183. package/lib/password-input/style/less.js +2 -0
  184. package/lib/pdf-viewer/style/index.js +1 -1
  185. package/lib/pdf-viewer/style/less.js +1 -1
  186. package/lib/picker/PickerColumn.js +5 -6
  187. package/lib/picker/index.js +36 -6
  188. package/lib/picker/index.less +151 -151
  189. package/lib/picker/shared.js +4 -0
  190. package/lib/picker/style/index.js +4 -0
  191. package/lib/picker/style/less.js +4 -0
  192. package/lib/popup/index.less +137 -137
  193. package/lib/popup/style/index.js +1 -1
  194. package/lib/popup/style/less.js +1 -1
  195. package/lib/radio/index.less +86 -86
  196. package/lib/radio-group/index.less +8 -8
  197. package/lib/rate/index.css +1 -1
  198. package/lib/rate/index.js +1 -1
  199. package/lib/rate/index.less +47 -47
  200. package/lib/row/index.less +42 -42
  201. package/lib/signature/index.css +1 -0
  202. package/lib/signature/index.js +242 -0
  203. package/lib/signature/index.less +50 -0
  204. package/lib/signature/style/index.js +9 -0
  205. package/lib/signature/style/less.js +9 -0
  206. package/lib/slider/index.less +94 -94
  207. package/lib/step/index.less +139 -139
  208. package/lib/stepper/index.less +130 -130
  209. package/lib/steps/index.less +21 -21
  210. package/lib/sticky/index.less +11 -11
  211. package/lib/style/animation.less +139 -139
  212. package/lib/style/base.less +11 -11
  213. package/lib/style/clearfix.less +5 -5
  214. package/lib/style/ellipsis.less +13 -13
  215. package/lib/style/hairline.less +47 -47
  216. package/lib/style/halfPxBorder.less +15 -15
  217. package/lib/style/mixins/clearfix.less +7 -7
  218. package/lib/style/mixins/ellipsis.less +15 -15
  219. package/lib/style/mixins/hairline.less +39 -39
  220. package/lib/style/normalize.less +38 -38
  221. package/lib/style/reset.less +171 -171
  222. package/lib/style/var.less +941 -919
  223. package/lib/swipe/index.less +56 -56
  224. package/lib/swipe-cell/index.less +29 -29
  225. package/lib/swipe-item/index.less +8 -8
  226. package/lib/switch/index.less +56 -56
  227. package/lib/switch/shared.js +2 -2
  228. package/lib/switch-cell/index.less +15 -15
  229. package/lib/tab/index.less +17 -17
  230. package/lib/tabs/index.less +153 -153
  231. package/lib/tag/index.less +99 -99
  232. package/lib/telemetry/index.js +82 -0
  233. package/lib/toast/index.js +1 -1
  234. package/lib/toast/index.less +75 -75
  235. package/lib/toast/style/index.js +1 -1
  236. package/lib/toast/style/less.js +1 -1
  237. package/lib/uploader/index.less +163 -163
  238. package/lib/uploader/style/index.js +1 -1
  239. package/lib/uploader/style/less.js +1 -1
  240. package/lib/utils/create/bem.js +7 -7
  241. package/lib/utils/create/component.js +41 -7
  242. package/lib/utils/dom/raf.js +2 -2
  243. package/lib/utils/dom/reset-scroll.js +3 -3
  244. package/lib/utils/index.js +29 -29
  245. package/lib/utils/media/image-util.js +153 -0
  246. package/lib/utils/router.js +2 -2
  247. package/lib/zart.js +27476 -55536
  248. package/lib/zart.min.js +5 -5
  249. package/package.json +74 -74
  250. package/lib/a037f57fc4d92a8a1f1e.worker.js +0 -60600
  251. package/lib/b7cf90b4775181215df7.worker.js +0 -10
@@ -1,172 +1,172 @@
1
- @import '../style/var';
2
-
3
- .zt-field {
4
- &__label {
5
- flex: none;
6
- box-sizing: border-box;
7
- width: @field-label-width;
8
- margin-right: @field-label-margin-right;
9
- color: @field-label-color;
10
- text-align: left;
11
- word-wrap: break-word;
12
-
13
- &--center {
14
- text-align: center;
15
- }
16
-
17
- &--right {
18
- text-align: right;
19
- }
20
- }
21
-
22
- &--disabled {
23
- .zt-field__label {
24
- color: @field-disabled-text-color;
25
- }
26
- }
27
-
28
- &__value {
29
- overflow: visible;
30
- }
31
-
32
- &__body {
33
- display: flex;
34
- align-items: center;
35
- }
36
-
37
- &__control {
38
- display: block;
39
- box-sizing: border-box;
40
- width: 100%;
41
- min-width: 0; // for flex-shrink in field__button
42
- margin: 0;
43
- padding: 0;
44
- color: @field-input-text-color;
45
- line-height: inherit;
46
- text-align: left;
47
- background-color: transparent;
48
- border: 0;
49
- resize: none;
50
-
51
- &::placeholder {
52
- color: @field-placeholder-text-color;
53
- }
54
-
55
- &:disabled {
56
- color: @field-input-disabled-text-color;
57
- cursor: not-allowed;
58
- opacity: 1;
59
- // fix disabled color in mobile safari
60
- -webkit-text-fill-color: @field-input-disabled-text-color;
61
- }
62
-
63
- &:read-only {
64
- cursor: default;
65
- }
66
-
67
- &--center {
68
- justify-content: center;
69
- text-align: center;
70
- }
71
-
72
- &--right {
73
- justify-content: flex-end;
74
- text-align: right;
75
- }
76
-
77
- &--custom {
78
- display: flex;
79
- align-items: center;
80
- min-height: @cell-line-height;
81
- }
82
-
83
- // for ios wechat
84
- &[type='date'],
85
- &[type='time'],
86
- &[type='datetime-local'] {
87
- min-height: @cell-line-height;
88
- }
89
-
90
- // for safari
91
- &[type='search'] {
92
- -webkit-appearance: none;
93
- }
94
- }
95
-
96
- &__clear,
97
- &__icon,
98
- &__button,
99
- &__right-icon {
100
- flex-shrink: 0;
101
- }
102
-
103
- &__clear,
104
- &__right-icon {
105
- margin-right: -@padding-xs;
106
- padding: 0 @padding-xs;
107
- line-height: inherit;
108
- }
109
-
110
- &__clear {
111
- color: @field-clear-icon-color;
112
- font-size: @field-clear-icon-size;
113
- cursor: pointer;
114
- }
115
-
116
- &__left-icon .zt-icon,
117
- &__right-icon .zt-icon {
118
- display: block;
119
- font-size: @field-icon-size;
120
- line-height: inherit;
121
- }
122
-
123
- &__left-icon {
124
- margin-right: @padding-base;
125
- }
126
-
127
- &__right-icon {
128
- color: @field-right-icon-color;
129
- }
130
-
131
- &__button {
132
- padding-left: @padding-xs;
133
- }
134
-
135
- &__error-message {
136
- color: @field-error-message-color;
137
- font-size: @field-error-message-text-color;
138
- text-align: left;
139
-
140
- &--center {
141
- text-align: center;
142
- }
143
-
144
- &--right {
145
- text-align: right;
146
- }
147
- }
148
-
149
- &__word-limit {
150
- margin-top: @padding-base;
151
- color: @field-word-limit-color;
152
- font-size: @field-word-limit-font-size;
153
- line-height: @field-word-limit-line-height;
154
- text-align: right;
155
- }
156
-
157
- &--error {
158
- .zt-field__control {
159
- &,
160
- &::placeholder {
161
- color: @field-input-error-text-color;
162
- -webkit-text-fill-color: currentColor;
163
- }
164
- }
165
- }
166
-
167
- &--min-height {
168
- .zt-field__control {
169
- min-height: @field-text-area-min-height;
170
- }
171
- }
172
- }
1
+ @import '../style/var';
2
+
3
+ .zt-field {
4
+ &__label {
5
+ flex: none;
6
+ box-sizing: border-box;
7
+ width: @field-label-width;
8
+ margin-right: @field-label-margin-right;
9
+ color: @field-label-color;
10
+ text-align: left;
11
+ word-wrap: break-word;
12
+
13
+ &--center {
14
+ text-align: center;
15
+ }
16
+
17
+ &--right {
18
+ text-align: right;
19
+ }
20
+ }
21
+
22
+ &--disabled {
23
+ .zt-field__label {
24
+ color: @field-disabled-text-color;
25
+ }
26
+ }
27
+
28
+ &__value {
29
+ overflow: visible;
30
+ }
31
+
32
+ &__body {
33
+ display: flex;
34
+ align-items: center;
35
+ }
36
+
37
+ &__control {
38
+ display: block;
39
+ box-sizing: border-box;
40
+ width: 100%;
41
+ min-width: 0; // for flex-shrink in field__button
42
+ margin: 0;
43
+ padding: 0;
44
+ color: @field-input-text-color;
45
+ line-height: inherit;
46
+ text-align: left;
47
+ background-color: transparent;
48
+ border: 0;
49
+ resize: none;
50
+
51
+ &::placeholder {
52
+ color: @field-placeholder-text-color;
53
+ }
54
+
55
+ &:disabled {
56
+ color: @field-input-disabled-text-color;
57
+ cursor: not-allowed;
58
+ opacity: 1;
59
+ // fix disabled color in mobile safari
60
+ -webkit-text-fill-color: @field-input-disabled-text-color;
61
+ }
62
+
63
+ &:read-only {
64
+ cursor: default;
65
+ }
66
+
67
+ &--center {
68
+ justify-content: center;
69
+ text-align: center;
70
+ }
71
+
72
+ &--right {
73
+ justify-content: flex-end;
74
+ text-align: right;
75
+ }
76
+
77
+ &--custom {
78
+ display: flex;
79
+ align-items: center;
80
+ min-height: @cell-line-height;
81
+ }
82
+
83
+ // for ios wechat
84
+ &[type='date'],
85
+ &[type='time'],
86
+ &[type='datetime-local'] {
87
+ min-height: @cell-line-height;
88
+ }
89
+
90
+ // for safari
91
+ &[type='search'] {
92
+ -webkit-appearance: none;
93
+ }
94
+ }
95
+
96
+ &__clear,
97
+ &__icon,
98
+ &__button,
99
+ &__right-icon {
100
+ flex-shrink: 0;
101
+ }
102
+
103
+ &__clear,
104
+ &__right-icon {
105
+ margin-right: -@padding-xs;
106
+ padding: 0 @padding-xs;
107
+ line-height: inherit;
108
+ }
109
+
110
+ &__clear {
111
+ color: @field-clear-icon-color;
112
+ font-size: @field-clear-icon-size;
113
+ cursor: pointer;
114
+ }
115
+
116
+ &__left-icon .zt-icon,
117
+ &__right-icon .zt-icon {
118
+ display: block;
119
+ font-size: @field-icon-size;
120
+ line-height: inherit;
121
+ }
122
+
123
+ &__left-icon {
124
+ margin-right: @padding-base;
125
+ }
126
+
127
+ &__right-icon {
128
+ color: @field-right-icon-color;
129
+ }
130
+
131
+ &__button {
132
+ padding-left: @padding-xs;
133
+ }
134
+
135
+ &__error-message {
136
+ color: @field-error-message-color;
137
+ font-size: @field-error-message-text-color;
138
+ text-align: left;
139
+
140
+ &--center {
141
+ text-align: center;
142
+ }
143
+
144
+ &--right {
145
+ text-align: right;
146
+ }
147
+ }
148
+
149
+ &__word-limit {
150
+ margin-top: @padding-base;
151
+ color: @field-word-limit-color;
152
+ font-size: @field-word-limit-font-size;
153
+ line-height: @field-word-limit-line-height;
154
+ text-align: right;
155
+ }
156
+
157
+ &--error {
158
+ .zt-field__control {
159
+ &,
160
+ &::placeholder {
161
+ color: @field-input-error-text-color;
162
+ -webkit-text-fill-color: currentColor;
163
+ }
164
+ }
165
+ }
166
+
167
+ &--min-height {
168
+ .zt-field__control {
169
+ min-height: @field-text-area-min-height;
170
+ }
171
+ }
172
+ }
@@ -1,10 +1,10 @@
1
- @import '../style/var';
2
- @import '~zart-icons/src/encode-woff2.less';
3
-
4
- .zt-icon {
5
- &__image {
6
- width: 1em;
7
- height: 1em;
8
- object-fit: contain;
9
- }
10
- }
1
+ @import '../style/var';
2
+ @import '~zart-icons/src/encode-woff2.less';
3
+
4
+ .zt-icon {
5
+ &__image {
6
+ width: 1em;
7
+ height: 1em;
8
+ object-fit: contain;
9
+ }
10
+ }
@@ -1 +1 @@
1
- @import '~zart-icons/src/encode.less';
1
+ @import '~zart-icons/src/encode.less';
@@ -1,47 +1,47 @@
1
- @import '../style/var';
2
-
3
- .zt-image {
4
- position: relative;
5
- display: inline-block;
6
-
7
- &--round {
8
- overflow: hidden;
9
- border-radius: 50%;
10
-
11
- img {
12
- border-radius: inherit;
13
- }
14
- }
15
-
16
- &__img,
17
- &__error,
18
- &__loading {
19
- display: block;
20
- width: 100%;
21
- height: 100%;
22
- }
23
-
24
- &__error,
25
- &__loading {
26
- position: absolute;
27
- top: 0;
28
- left: 0;
29
- display: flex;
30
- flex-direction: column;
31
- align-items: center;
32
- justify-content: center;
33
- color: @image-placeholder-text-color;
34
- font-size: @image-placeholder-font-size;
35
- background-color: @image-placeholder-background-color;
36
- }
37
-
38
- &__loading-icon {
39
- color: @image-loading-icon-color;
40
- font-size: @image-loading-icon-size;
41
- }
42
-
43
- &__error-icon {
44
- color: @image-error-icon-color;
45
- font-size: @image-error-icon-size;
46
- }
47
- }
1
+ @import '../style/var';
2
+
3
+ .zt-image {
4
+ position: relative;
5
+ display: inline-block;
6
+
7
+ &--round {
8
+ overflow: hidden;
9
+ border-radius: 50%;
10
+
11
+ img {
12
+ border-radius: inherit;
13
+ }
14
+ }
15
+
16
+ &__img,
17
+ &__error,
18
+ &__loading {
19
+ display: block;
20
+ width: 100%;
21
+ height: 100%;
22
+ }
23
+
24
+ &__error,
25
+ &__loading {
26
+ position: absolute;
27
+ top: 0;
28
+ left: 0;
29
+ display: flex;
30
+ flex-direction: column;
31
+ align-items: center;
32
+ justify-content: center;
33
+ color: @image-placeholder-text-color;
34
+ font-size: @image-placeholder-font-size;
35
+ background-color: @image-placeholder-background-color;
36
+ }
37
+
38
+ &__loading-icon {
39
+ color: @image-loading-icon-color;
40
+ font-size: @image-loading-icon-size;
41
+ }
42
+
43
+ &__error-icon {
44
+ color: @image-error-icon-color;
45
+ font-size: @image-error-icon-size;
46
+ }
47
+ }
@@ -1,103 +1,103 @@
1
- @import '../style/var';
2
-
3
- .zt-image-preview {
4
- position: fixed;
5
- top: 0;
6
- left: 0;
7
- width: 100%;
8
- height: 100%;
9
-
10
- &__swipe {
11
- height: 100%;
12
-
13
- &-item {
14
- display: flex;
15
- align-items: center;
16
- justify-content: center;
17
- overflow: hidden;
18
- }
19
- }
20
-
21
- &__cover {
22
- position: absolute;
23
- top: 0;
24
- left: 0;
25
- }
26
-
27
- &__image {
28
- width: 100%;
29
- transition-property: transform;
30
-
31
- &--vertical {
32
- width: auto;
33
- height: 100%;
34
- }
35
-
36
- img {
37
- // disable desktop browser image drag
38
- -webkit-user-drag: none;
39
- }
40
-
41
- .zt-image {
42
- &__error {
43
- top: 30%;
44
- height: 40%;
45
- }
46
-
47
- &__error-icon {
48
- font-size: 36px;
49
- }
50
-
51
- &__loading {
52
- background-color: transparent;
53
- }
54
- }
55
- }
56
-
57
- &__index {
58
- position: absolute;
59
- top: @padding-md;
60
- left: 50%;
61
- color: @image-preview-index-text-color;
62
- font-size: @image-preview-index-font-size;
63
- line-height: @image-preview-index-line-height;
64
- text-shadow: @image-preview-index-text-shadow;
65
- transform: translate(-50%, 0);
66
- }
67
-
68
- &__overlay {
69
- background-color: @image-preview-overlay-background-color;
70
- }
71
-
72
- &__close-icon {
73
- position: absolute;
74
- z-index: @image-preview-close-icon-z-index;
75
- color: @image-preview-close-icon-color;
76
- font-size: @image-preview-close-icon-size;
77
- cursor: pointer;
78
-
79
- &:active {
80
- color: @image-preview-close-icon-active-color;
81
- }
82
-
83
- &--top-left {
84
- top: @image-preview-close-icon-margin;
85
- left: @image-preview-close-icon-margin;
86
- }
87
-
88
- &--top-right {
89
- top: @image-preview-close-icon-margin;
90
- right: @image-preview-close-icon-margin;
91
- }
92
-
93
- &--bottom-left {
94
- bottom: @image-preview-close-icon-margin;
95
- left: @image-preview-close-icon-margin;
96
- }
97
-
98
- &--bottom-right {
99
- right: @image-preview-close-icon-margin;
100
- bottom: @image-preview-close-icon-margin;
101
- }
102
- }
103
- }
1
+ @import '../style/var';
2
+
3
+ .zt-image-preview {
4
+ position: fixed;
5
+ top: 0;
6
+ left: 0;
7
+ width: 100%;
8
+ height: 100%;
9
+
10
+ &__swipe {
11
+ height: 100%;
12
+
13
+ &-item {
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ overflow: hidden;
18
+ }
19
+ }
20
+
21
+ &__cover {
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ }
26
+
27
+ &__image {
28
+ width: 100%;
29
+ transition-property: transform;
30
+
31
+ &--vertical {
32
+ width: auto;
33
+ height: 100%;
34
+ }
35
+
36
+ img {
37
+ // disable desktop browser image drag
38
+ -webkit-user-drag: none;
39
+ }
40
+
41
+ .zt-image {
42
+ &__error {
43
+ top: 30%;
44
+ height: 40%;
45
+ }
46
+
47
+ &__error-icon {
48
+ font-size: 36px;
49
+ }
50
+
51
+ &__loading {
52
+ background-color: transparent;
53
+ }
54
+ }
55
+ }
56
+
57
+ &__index {
58
+ position: absolute;
59
+ top: @padding-md;
60
+ left: 50%;
61
+ color: @image-preview-index-text-color;
62
+ font-size: @image-preview-index-font-size;
63
+ line-height: @image-preview-index-line-height;
64
+ text-shadow: @image-preview-index-text-shadow;
65
+ transform: translate(-50%, 0);
66
+ }
67
+
68
+ &__overlay {
69
+ background-color: @image-preview-overlay-background-color;
70
+ }
71
+
72
+ &__close-icon {
73
+ position: absolute;
74
+ z-index: @image-preview-close-icon-z-index;
75
+ color: @image-preview-close-icon-color;
76
+ font-size: @image-preview-close-icon-size;
77
+ cursor: pointer;
78
+
79
+ &:active {
80
+ color: @image-preview-close-icon-active-color;
81
+ }
82
+
83
+ &--top-left {
84
+ top: @image-preview-close-icon-margin;
85
+ left: @image-preview-close-icon-margin;
86
+ }
87
+
88
+ &--top-right {
89
+ top: @image-preview-close-icon-margin;
90
+ right: @image-preview-close-icon-margin;
91
+ }
92
+
93
+ &--bottom-left {
94
+ bottom: @image-preview-close-icon-margin;
95
+ left: @image-preview-close-icon-margin;
96
+ }
97
+
98
+ &--bottom-right {
99
+ right: @image-preview-close-icon-margin;
100
+ bottom: @image-preview-close-icon-margin;
101
+ }
102
+ }
103
+ }
@@ -1,9 +1,9 @@
1
1
  import '../../style/base.css';
2
2
  import '../../loading/index.css';
3
+ import '../../overlay/index.css';
3
4
  import '../../info/index.css';
4
5
  import '../../icon/index.css';
5
6
  import '../../image/index.css';
6
- import '../../overlay/index.css';
7
7
  import '../../popup/index.css';
8
8
  import '../../swipe/index.css';
9
9
  import '../../swipe-item/index.css';
@@ -1,9 +1,9 @@
1
1
  import '../../style/base.less';
2
2
  import '../../loading/index.less';
3
+ import '../../overlay/index.less';
3
4
  import '../../info/index.less';
4
5
  import '../../icon/index.less';
5
6
  import '../../image/index.less';
6
- import '../../overlay/index.less';
7
7
  import '../../popup/index.less';
8
8
  import '../../swipe/index.less';
9
9
  import '../../swipe-item/index.less';