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,29 +1,29 @@
1
- @import '../style/var';
2
-
3
- .zt-info {
4
- position: absolute;
5
- top: 0;
6
- right: 0;
7
- box-sizing: border-box;
8
- min-width: @info-size;
9
- padding: @info-padding;
10
- color: @info-color;
11
- font-weight: @info-font-weight;
12
- font-size: @info-font-size;
13
- font-family: @info-font-family;
14
- line-height: 1.2;
15
- text-align: center;
16
- background-color: @info-background-color;
17
- border: @info-border-width solid @white;
18
- border-radius: @info-size;
19
- transform: translate(50%, -50%);
20
- transform-origin: 100%;
21
-
22
- &--dot {
23
- width: @info-dot-size;
24
- min-width: 0;
25
- height: @info-dot-size;
26
- background-color: @info-dot-color;
27
- border-radius: 100%;
28
- }
29
- }
1
+ @import '../style/var';
2
+
3
+ .zt-info {
4
+ position: absolute;
5
+ top: 0;
6
+ right: 0;
7
+ box-sizing: border-box;
8
+ min-width: @info-size;
9
+ padding: @info-padding;
10
+ color: @info-color;
11
+ font-weight: @info-font-weight;
12
+ font-size: @info-font-size;
13
+ font-family: @info-font-family;
14
+ line-height: 1.2;
15
+ text-align: center;
16
+ background-color: @info-background-color;
17
+ border: @info-border-width solid @white;
18
+ border-radius: @info-size;
19
+ transform: translate(50%, -50%);
20
+ transform-origin: 100%;
21
+
22
+ &--dot {
23
+ width: @info-dot-size;
24
+ min-width: 0;
25
+ height: @info-dot-size;
26
+ background-color: @info-dot-color;
27
+ border-radius: 100%;
28
+ }
29
+ }
@@ -1,103 +1,103 @@
1
- @import '../style/var';
2
-
3
- .zt-loading {
4
- position: relative;
5
- color: @loading-spinner-color;
6
- font-size: 0;
7
- vertical-align: middle;
8
-
9
- &__spinner {
10
- position: relative;
11
- display: inline-block;
12
- width: @loading-spinner-size;
13
- // compatible for 1.x, users may set width or height in root element
14
- max-width: 100%;
15
- height: @loading-spinner-size;
16
- max-height: 100%;
17
- vertical-align: middle;
18
- animation: zt-rotate @loading-spinner-animation-duration linear infinite;
19
-
20
- &--spinner {
21
- animation-timing-function: steps(12);
22
-
23
- i {
24
- position: absolute;
25
- top: 0;
26
- left: 0;
27
- width: 100%;
28
- height: 100%;
29
-
30
- &::before {
31
- display: block;
32
- width: 2px;
33
- height: 25%;
34
- margin: 0 auto;
35
- background-color: currentColor;
36
- border-radius: 40%;
37
- content: ' ';
38
- }
39
- }
40
- }
41
-
42
- &--circular {
43
- animation-duration: 2s;
44
- }
45
- }
46
-
47
- &__circular {
48
- display: block;
49
- width: 100%;
50
- height: 100%;
51
-
52
- circle {
53
- animation: zt-circular 1.5s ease-in-out infinite;
54
- stroke: currentColor;
55
- stroke-width: 3;
56
- stroke-linecap: round;
57
- }
58
- }
59
-
60
- &__text {
61
- display: inline-block;
62
- margin-left: @padding-xs;
63
- color: @loading-text-color;
64
- font-size: @loading-text-font-size;
65
- vertical-align: middle;
66
- }
67
-
68
- &--vertical {
69
- display: flex;
70
- flex-direction: column;
71
- align-items: center;
72
-
73
- .zt-loading__text {
74
- margin: @padding-xs 0 0;
75
- }
76
- }
77
- }
78
-
79
- @keyframes zt-circular {
80
- 0% {
81
- stroke-dasharray: 1, 200;
82
- stroke-dashoffset: 0;
83
- }
84
-
85
- 50% {
86
- stroke-dasharray: 90, 150;
87
- stroke-dashoffset: -40;
88
- }
89
-
90
- 100% {
91
- stroke-dasharray: 90, 150;
92
- stroke-dashoffset: -120;
93
- }
94
- }
95
-
96
- .generate-spinner(@n, @i: 1) when (@i =< @n) {
97
- .zt-loading__spinner--spinner i:nth-of-type(@{i}) {
98
- transform: rotate(@i * 30deg);
99
- opacity: 1 - (0.75 / 12) * (@i - 1);
100
- }
101
- .generate-spinner(@n, (@i + 1));
102
- }
103
- .generate-spinner(12);
1
+ @import '../style/var';
2
+
3
+ .zt-loading {
4
+ position: relative;
5
+ color: @loading-spinner-color;
6
+ font-size: 0;
7
+ vertical-align: middle;
8
+
9
+ &__spinner {
10
+ position: relative;
11
+ display: inline-block;
12
+ width: @loading-spinner-size;
13
+ // compatible for 1.x, users may set width or height in root element
14
+ max-width: 100%;
15
+ height: @loading-spinner-size;
16
+ max-height: 100%;
17
+ vertical-align: middle;
18
+ animation: zt-rotate @loading-spinner-animation-duration linear infinite;
19
+
20
+ &--spinner {
21
+ animation-timing-function: steps(12);
22
+
23
+ i {
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+
30
+ &::before {
31
+ display: block;
32
+ width: 2px;
33
+ height: 25%;
34
+ margin: 0 auto;
35
+ background-color: currentColor;
36
+ border-radius: 40%;
37
+ content: ' ';
38
+ }
39
+ }
40
+ }
41
+
42
+ &--circular {
43
+ animation-duration: 2s;
44
+ }
45
+ }
46
+
47
+ &__circular {
48
+ display: block;
49
+ width: 100%;
50
+ height: 100%;
51
+
52
+ circle {
53
+ animation: zt-circular 1.5s ease-in-out infinite;
54
+ stroke: currentColor;
55
+ stroke-width: 3;
56
+ stroke-linecap: round;
57
+ }
58
+ }
59
+
60
+ &__text {
61
+ display: inline-block;
62
+ margin-left: @padding-xs;
63
+ color: @loading-text-color;
64
+ font-size: @loading-text-font-size;
65
+ vertical-align: middle;
66
+ }
67
+
68
+ &--vertical {
69
+ display: flex;
70
+ flex-direction: column;
71
+ align-items: center;
72
+
73
+ .zt-loading__text {
74
+ margin: @padding-xs 0 0;
75
+ }
76
+ }
77
+ }
78
+
79
+ @keyframes zt-circular {
80
+ 0% {
81
+ stroke-dasharray: 1, 200;
82
+ stroke-dashoffset: 0;
83
+ }
84
+
85
+ 50% {
86
+ stroke-dasharray: 90, 150;
87
+ stroke-dashoffset: -40;
88
+ }
89
+
90
+ 100% {
91
+ stroke-dasharray: 90, 150;
92
+ stroke-dashoffset: -120;
93
+ }
94
+ }
95
+
96
+ .generate-spinner(@n, @i: 1) when (@i =< @n) {
97
+ .zt-loading__spinner--spinner i:nth-of-type(@{i}) {
98
+ transform: rotate(@i * 30deg);
99
+ opacity: 1 - (0.75 / 12) * (@i - 1);
100
+ }
101
+ .generate-spinner(@n, (@i + 1));
102
+ }
103
+ .generate-spinner(12);
@@ -98,6 +98,28 @@ var _default = {
98
98
  },
99
99
  vanAddressList: {
100
100
  add: '新增地址'
101
+ },
102
+ ztAvatar: {
103
+ defaultSrc: "https://zartui.egova.com.cn/static/head_shot.png",
104
+ small: "small",
105
+ medium: "medium",
106
+ large: "large",
107
+ square: "square",
108
+ circle: "circle",
109
+ defaultText: "头像"
110
+ },
111
+ ztEmpty: {
112
+ notSearchResult: '没有搜索结果',
113
+ notFound: '页面无法访问',
114
+ developing: '项目建设中',
115
+ error: '通用错误',
116
+ notRight: '您暂未拥有访问权限'
117
+ },
118
+ ztSignature: {
119
+ hint: '请在此签名',
120
+ browserUnsupported: '对不起,当前浏览器不支持Canvas,无法使用本控件!',
121
+ orientationChangeTip: '旋转屏幕触发重新绘制',
122
+ reSign: '重签'
101
123
  }
102
124
  };
103
125
  exports.default = _default;
@@ -5,8 +5,8 @@ exports.BindEventMixin = BindEventMixin;
5
5
 
6
6
  var _event = require("../utils/dom/event");
7
7
 
8
- /**
9
- * Bind event when mounted or activated
8
+ /**
9
+ * Bind event when mounted or activated
10
10
  */
11
11
  var uid = 0;
12
12
 
@@ -13,8 +13,8 @@ var _relation = require("./relation");
13
13
 
14
14
  var _utils = require("../utils");
15
15
 
16
- /**
17
- * Common part of Checkbox & Radio
16
+ /**
17
+ * Common part of Checkbox & Radio
18
18
  */
19
19
  var CheckboxMixin = function CheckboxMixin(_ref) {
20
20
  var parent = _ref.parent,
@@ -5,8 +5,8 @@ exports.ClickOutsideMixin = void 0;
5
5
 
6
6
  var _event = require("../utils/dom/event");
7
7
 
8
- /**
9
- * Listen to click outside event
8
+ /**
9
+ * Listen to click outside event
10
10
  */
11
11
  var ClickOutsideMixin = function ClickOutsideMixin(config) {
12
12
  return {
@@ -3,9 +3,9 @@
3
3
  exports.__esModule = true;
4
4
  exports.SlotsMixin = void 0;
5
5
 
6
- /**
7
- * Use scopedSlots in Vue 2.6+
8
- * downgrade to slots in lower version
6
+ /**
7
+ * Use scopedSlots in Vue 2.6+
8
+ * downgrade to slots in lower version
9
9
  */
10
10
  var SlotsMixin = {
11
11
  methods: {
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.TelemetryMixin = void 0;
5
+
6
+ var _telemetry = require("../telemetry");
7
+
8
+ var TelemetryMixin = {
9
+ mounted: function mounted() {
10
+ var event = new _telemetry.TelemetryEvent(this.$options.name, {});
11
+
12
+ _telemetry.Telemetry.sharedInstance.trackAppear(event);
13
+ },
14
+ unmountd: function unmountd() {
15
+ var event = new _telemetry.TelemetryEvent(this.$options.name, {});
16
+
17
+ _telemetry.Telemetry.sharedInstance.trackDisappear(event);
18
+ }
19
+ };
20
+ exports.TelemetryMixin = TelemetryMixin;
@@ -1,74 +1,74 @@
1
- @import '../style/var';
2
-
3
- .zt-nav-bar {
4
- position: relative;
5
- z-index: @nav-bar-z-index;
6
- line-height: @line-height-lg;
7
- text-align: center;
8
- background-color: @nav-bar-background-color;
9
- user-select: none;
10
-
11
- &--fixed {
12
- position: fixed;
13
- top: 0;
14
- left: 0;
15
- width: 100%;
16
- }
17
-
18
- &--safe-area-inset-top {
19
- padding-top: constant(safe-area-inset-top);
20
- padding-top: env(safe-area-inset-top);
21
- }
22
-
23
- .zt-icon {
24
- color: @nav-bar-icon-color;
25
- }
26
-
27
- &__content {
28
- position: relative;
29
- display: flex;
30
- align-items: center;
31
- height: @nav-bar-height;
32
- }
33
-
34
- &__arrow {
35
- margin-right: @padding-base;
36
- font-size: @nav-bar-arrow-size;
37
- }
38
-
39
- &__title {
40
- max-width: 60%;
41
- margin: 0 auto;
42
- color: @nav-bar-title-text-color;
43
- font-weight: @font-weight-bold;
44
- font-size: @nav-bar-title-font-size;
45
- }
46
-
47
- &__left,
48
- &__right {
49
- position: absolute;
50
- top: 0;
51
- bottom: 0;
52
- display: flex;
53
- align-items: center;
54
- padding: 0 @padding-md;
55
- font-size: @font-size-md;
56
- cursor: pointer;
57
-
58
- &:active {
59
- opacity: @active-opacity;
60
- }
61
- }
62
-
63
- &__left {
64
- left: 0;
65
- }
66
-
67
- &__right {
68
- right: 0;
69
- }
70
-
71
- &__text {
72
- color: @nav-bar-text-color;
73
- }
74
- }
1
+ @import '../style/var';
2
+
3
+ .zt-nav-bar {
4
+ position: relative;
5
+ z-index: @nav-bar-z-index;
6
+ line-height: @line-height-lg;
7
+ text-align: center;
8
+ background-color: @nav-bar-background-color;
9
+ user-select: none;
10
+
11
+ &--fixed {
12
+ position: fixed;
13
+ top: 0;
14
+ left: 0;
15
+ width: 100%;
16
+ }
17
+
18
+ &--safe-area-inset-top {
19
+ padding-top: constant(safe-area-inset-top);
20
+ padding-top: env(safe-area-inset-top);
21
+ }
22
+
23
+ .zt-icon {
24
+ color: @nav-bar-icon-color;
25
+ }
26
+
27
+ &__content {
28
+ position: relative;
29
+ display: flex;
30
+ align-items: center;
31
+ height: @nav-bar-height;
32
+ }
33
+
34
+ &__arrow {
35
+ margin-right: @padding-base;
36
+ font-size: @nav-bar-arrow-size;
37
+ }
38
+
39
+ &__title {
40
+ max-width: 60%;
41
+ margin: 0 auto;
42
+ color: @nav-bar-title-text-color;
43
+ font-weight: @font-weight-bold;
44
+ font-size: @nav-bar-title-font-size;
45
+ }
46
+
47
+ &__left,
48
+ &__right {
49
+ position: absolute;
50
+ top: 0;
51
+ bottom: 0;
52
+ display: flex;
53
+ align-items: center;
54
+ padding: 0 @padding-md;
55
+ font-size: @font-size-md;
56
+ cursor: pointer;
57
+
58
+ &:active {
59
+ opacity: @active-opacity;
60
+ }
61
+ }
62
+
63
+ &__left {
64
+ left: 0;
65
+ }
66
+
67
+ &__right {
68
+ right: 0;
69
+ }
70
+
71
+ &__text {
72
+ color: @nav-bar-text-color;
73
+ }
74
+ }
@@ -1 +1 @@
1
- .zt-number-keyboard{position:fixed;bottom:0;left:0;z-index:100;width:100%;padding-bottom:22px;background-color:#f2f3f5;-webkit-user-select:none;user-select:none}.zt-number-keyboard--with-title{border-radius:20px 20px 0 0}.zt-number-keyboard__header{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;height:34px;padding-top:6px;color:#646566;font-size:16px}.zt-number-keyboard__title{display:inline-block;font-weight:400}.zt-number-keyboard__title-left{position:absolute;left:0}.zt-number-keyboard__body{display:-webkit-box;display:-webkit-flex;display:flex;padding:6px 0 0 6px}.zt-number-keyboard__keys{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:3;-webkit-flex:3;flex:3;-webkit-flex-wrap:wrap;flex-wrap:wrap}.zt-number-keyboard__close{position:absolute;right:0;height:100%;padding:0 16px;color:#576b95;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt-number-keyboard__close:active{opacity:.7}.zt-number-keyboard__sidebar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-number-keyboard--unfit{padding-bottom:0}.zt-key{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:48px;font-size:28px;line-height:1.5;background-color:#fff;border-radius:8px;cursor:pointer}.zt-key--large{position:absolute;top:0;right:6px;bottom:6px;left:0;height:auto}.zt-key--blue,.zt-key--delete{font-size:16px}.zt-key--active{background-color:#ebedf0}.zt-key--blue{color:#fff;background-color:#0091fa}.zt-key--blue.zt-key--active{background-color:#0073c7}.zt-key__wrapper{position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-flex-basis:33%;flex-basis:33%;box-sizing:border-box;padding:0 6px 6px 0}.zt-key__wrapper--wider{-webkit-flex-basis:66%;flex-basis:66%}.zt-key__delete-icon{width:32px;height:22px}.zt-key__collapse-icon{width:30px;height:24px}.zt-key__loading-icon{color:#fff}
1
+ .zt-number-keyboard{position:fixed;bottom:0;left:0;z-index:100;width:calc(100% - 24px);padding:16px 8px 8px 16px;background-color:#f2f3f5;-webkit-user-select:none;user-select:none}.zt-number-keyboard--with-title{border-radius:20px 20px 0 0}.zt-number-keyboard__header{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;height:34px;padding-top:6px;color:#646566;font-size:16px}.zt-number-keyboard__title{display:inline-block;font-weight:400}.zt-number-keyboard__title-left{position:absolute;left:0}.zt-number-keyboard__body{display:-webkit-box;display:-webkit-flex;display:flex}.zt-number-keyboard__keys{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:3;-webkit-flex:3;flex:3;-webkit-flex-wrap:wrap;flex-wrap:wrap}.zt-number-keyboard__close{position:absolute;right:0;height:100%;padding:0 16px;color:#576b95;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt-number-keyboard__close:active{opacity:.7}.zt-number-keyboard__sidebar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-number-keyboard--unfit{padding-bottom:0}.zt-key{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:44px;font-size:28px;line-height:1.5;background-color:#fff;border-radius:8px;cursor:pointer}.zt-key--large{position:absolute;top:0;right:6px;bottom:6px;left:0;height:auto}.zt-key--blue,.zt-key--delete{font-size:16px}.zt-key--active{background-color:#ebedf0}.zt-key--blue{color:#fff;background-color:#0091fa}.zt-key--blue.zt-key--active{background-color:#0073c7}.zt-key__wrapper{position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-flex-basis:33%;flex-basis:33%;box-sizing:border-box;padding:0 8px 8px 0}.zt-key__wrapper--wider{-webkit-flex-basis:66%;flex-basis:66%}.zt-key__delete-icon{width:32px;height:22px}.zt-key__collapse-icon{width:30px;height:24px}.zt-key__loading-icon{color:#fff}.zt-cell .zt-field__label{color:rgba(0,0,0,.6)}