cy-element-ui 1.0.44 → 1.0.46

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 (207) hide show
  1. package/lib/element-ui.common.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/lib/theme-chalk/alert.css +1 -0
  4. package/lib/theme-chalk/aside.css +1 -0
  5. package/lib/theme-chalk/autocomplete.css +1 -0
  6. package/lib/theme-chalk/avatar.css +1 -0
  7. package/lib/theme-chalk/backtop.css +1 -0
  8. package/lib/theme-chalk/badge.css +1 -0
  9. package/lib/theme-chalk/base.css +1 -1
  10. package/lib/theme-chalk/breadcrumb.css +1 -0
  11. package/lib/theme-chalk/button.css +1 -0
  12. package/lib/theme-chalk/calendar.css +1 -0
  13. package/lib/theme-chalk/card.css +1 -0
  14. package/lib/theme-chalk/carousel-item.css +1 -0
  15. package/lib/theme-chalk/carousel.css +1 -0
  16. package/lib/theme-chalk/cascader-panel.css +1 -0
  17. package/lib/theme-chalk/cascader.css +1 -0
  18. package/lib/theme-chalk/checkbox.css +1 -0
  19. package/lib/theme-chalk/col.css +1 -0
  20. package/lib/theme-chalk/collapse.css +1 -0
  21. package/lib/theme-chalk/color-picker.css +1 -0
  22. package/lib/theme-chalk/container.css +1 -0
  23. package/lib/theme-chalk/date-picker.css +1 -0
  24. package/lib/theme-chalk/descriptions-item.css +1 -0
  25. package/lib/theme-chalk/descriptions.css +1 -0
  26. package/lib/theme-chalk/dialog.css +1 -0
  27. package/lib/theme-chalk/display.css +1 -0
  28. package/lib/theme-chalk/divider.css +1 -0
  29. package/lib/theme-chalk/drawer.css +1 -0
  30. package/lib/theme-chalk/dropdown.css +1 -0
  31. package/lib/theme-chalk/empty.css +1 -0
  32. package/lib/theme-chalk/footer.css +1 -0
  33. package/lib/theme-chalk/form.css +1 -0
  34. package/lib/theme-chalk/header.css +1 -0
  35. package/lib/theme-chalk/icon.css +1 -0
  36. package/lib/theme-chalk/image.css +1 -0
  37. package/lib/theme-chalk/index.css +1 -1
  38. package/lib/theme-chalk/input-number.css +1 -0
  39. package/lib/theme-chalk/input.css +1 -0
  40. package/lib/theme-chalk/link.css +1 -0
  41. package/lib/theme-chalk/loading.css +1 -0
  42. package/lib/theme-chalk/main.css +1 -0
  43. package/lib/theme-chalk/menu.css +1 -0
  44. package/lib/theme-chalk/message-box.css +1 -0
  45. package/lib/theme-chalk/message.css +1 -0
  46. package/lib/theme-chalk/notification.css +1 -0
  47. package/lib/theme-chalk/option-group.css +1 -0
  48. package/lib/theme-chalk/option.css +1 -0
  49. package/lib/theme-chalk/page-header.css +1 -0
  50. package/lib/theme-chalk/pagination.css +1 -0
  51. package/lib/theme-chalk/popconfirm.css +1 -0
  52. package/lib/theme-chalk/popover.css +1 -0
  53. package/lib/theme-chalk/popper.css +1 -0
  54. package/lib/theme-chalk/progress.css +1 -0
  55. package/lib/theme-chalk/radio-button.css +1 -0
  56. package/lib/theme-chalk/radio-group.css +1 -0
  57. package/lib/theme-chalk/radio.css +1 -0
  58. package/lib/theme-chalk/rate.css +1 -0
  59. package/lib/theme-chalk/reset.css +1 -0
  60. package/lib/theme-chalk/result.css +1 -0
  61. package/lib/theme-chalk/row.css +1 -0
  62. package/lib/theme-chalk/scrollbar.css +1 -0
  63. package/lib/theme-chalk/select-dropdown.css +1 -0
  64. package/lib/theme-chalk/select.css +1 -0
  65. package/lib/theme-chalk/skeleton-item.css +1 -0
  66. package/lib/theme-chalk/skeleton.css +1 -0
  67. package/lib/theme-chalk/slider.css +1 -0
  68. package/lib/theme-chalk/spinner.css +1 -0
  69. package/lib/theme-chalk/statistic.css +1 -0
  70. package/lib/theme-chalk/step.css +1 -0
  71. package/lib/theme-chalk/steps.css +1 -0
  72. package/lib/theme-chalk/switch.css +1 -0
  73. package/lib/theme-chalk/table-column.css +1 -0
  74. package/lib/theme-chalk/table.css +1 -0
  75. package/lib/theme-chalk/tabs.css +1 -0
  76. package/lib/theme-chalk/tag.css +1 -0
  77. package/lib/theme-chalk/time-picker.css +1 -0
  78. package/lib/theme-chalk/time-select.css +1 -0
  79. package/lib/theme-chalk/timeline-item.css +1 -0
  80. package/lib/theme-chalk/timeline.css +1 -0
  81. package/lib/theme-chalk/tooltip.css +1 -0
  82. package/lib/theme-chalk/transfer.css +1 -0
  83. package/lib/theme-chalk/tree.css +1 -0
  84. package/lib/theme-chalk/upload.css +1 -0
  85. package/package.json +2 -2
  86. package/packages/theme-chalk/src/common/var.scss +16 -16
  87. package/packages/theme-cy/gulpfile.js +14 -1
  88. package/src/index.js +1 -1
  89. package/lib/theme-chalk/README.md +0 -33
  90. package/lib/theme-chalk/gulpfile.js +0 -40
  91. package/lib/theme-chalk/package.json +0 -35
  92. package/lib/theme-chalk/src/alert.scss +0 -147
  93. package/lib/theme-chalk/src/aside.scss +0 -7
  94. package/lib/theme-chalk/src/autocomplete.scss +0 -80
  95. package/lib/theme-chalk/src/avatar.scss +0 -51
  96. package/lib/theme-chalk/src/backtop.scss +0 -22
  97. package/lib/theme-chalk/src/badge.scss +0 -57
  98. package/lib/theme-chalk/src/base.scss +0 -2
  99. package/lib/theme-chalk/src/breadcrumb.scss +0 -55
  100. package/lib/theme-chalk/src/button.scss +0 -262
  101. package/lib/theme-chalk/src/calendar.scss +0 -79
  102. package/lib/theme-chalk/src/card.scss +0 -32
  103. package/lib/theme-chalk/src/carousel-item.scss +0 -50
  104. package/lib/theme-chalk/src/carousel.scss +0 -161
  105. package/lib/theme-chalk/src/cascader-panel.scss +0 -120
  106. package/lib/theme-chalk/src/cascader.scss +0 -182
  107. package/lib/theme-chalk/src/checkbox.scss +0 -359
  108. package/lib/theme-chalk/src/col.scss +0 -156
  109. package/lib/theme-chalk/src/collapse.scss +0 -63
  110. package/lib/theme-chalk/src/color-picker.scss +0 -384
  111. package/lib/theme-chalk/src/common/popup.scss +0 -42
  112. package/lib/theme-chalk/src/common/transition.scss +0 -99
  113. package/lib/theme-chalk/src/common/var.scss +0 -1028
  114. package/lib/theme-chalk/src/container.scss +0 -14
  115. package/lib/theme-chalk/src/date-picker/date-picker.scss +0 -97
  116. package/lib/theme-chalk/src/date-picker/date-range-picker.scss +0 -101
  117. package/lib/theme-chalk/src/date-picker/date-table.scss +0 -151
  118. package/lib/theme-chalk/src/date-picker/month-table.scss +0 -82
  119. package/lib/theme-chalk/src/date-picker/picker-panel.scss +0 -117
  120. package/lib/theme-chalk/src/date-picker/picker.scss +0 -197
  121. package/lib/theme-chalk/src/date-picker/time-picker.scss +0 -85
  122. package/lib/theme-chalk/src/date-picker/time-range-picker.scss +0 -31
  123. package/lib/theme-chalk/src/date-picker/time-spinner.scss +0 -110
  124. package/lib/theme-chalk/src/date-picker/year-table.scss +0 -51
  125. package/lib/theme-chalk/src/date-picker.scss +0 -12
  126. package/lib/theme-chalk/src/descriptions-item.scss +0 -42
  127. package/lib/theme-chalk/src/descriptions.scss +0 -111
  128. package/lib/theme-chalk/src/dialog.scss +0 -123
  129. package/lib/theme-chalk/src/display.scss +0 -12
  130. package/lib/theme-chalk/src/divider.scss +0 -47
  131. package/lib/theme-chalk/src/drawer.scss +0 -219
  132. package/lib/theme-chalk/src/dropdown.scss +0 -182
  133. package/lib/theme-chalk/src/empty.scss +0 -45
  134. package/lib/theme-chalk/src/footer.scss +0 -8
  135. package/lib/theme-chalk/src/form.scss +0 -167
  136. package/lib/theme-chalk/src/header.scss +0 -8
  137. package/lib/theme-chalk/src/icon.scss +0 -1167
  138. package/lib/theme-chalk/src/image.scss +0 -179
  139. package/lib/theme-chalk/src/index.scss +0 -90
  140. package/lib/theme-chalk/src/input-number.scss +0 -180
  141. package/lib/theme-chalk/src/input.scss +0 -360
  142. package/lib/theme-chalk/src/link.scss +0 -81
  143. package/lib/theme-chalk/src/loading.scss +0 -96
  144. package/lib/theme-chalk/src/main.scss +0 -12
  145. package/lib/theme-chalk/src/menu.scss +0 -289
  146. package/lib/theme-chalk/src/message-box.scss +0 -226
  147. package/lib/theme-chalk/src/message.scss +0 -120
  148. package/lib/theme-chalk/src/mixins/_button.scss +0 -81
  149. package/lib/theme-chalk/src/mixins/config.scss +0 -4
  150. package/lib/theme-chalk/src/mixins/function.scss +0 -44
  151. package/lib/theme-chalk/src/mixins/mixins.scss +0 -190
  152. package/lib/theme-chalk/src/mixins/utils.scss +0 -39
  153. package/lib/theme-chalk/src/notification.scss +0 -99
  154. package/lib/theme-chalk/src/option-group.scss +0 -42
  155. package/lib/theme-chalk/src/option.scss +0 -36
  156. package/lib/theme-chalk/src/page-header.scss +0 -41
  157. package/lib/theme-chalk/src/pagination.scss +0 -295
  158. package/lib/theme-chalk/src/popconfirm.scss +0 -16
  159. package/lib/theme-chalk/src/popover.scss +0 -40
  160. package/lib/theme-chalk/src/popper.scss +0 -101
  161. package/lib/theme-chalk/src/progress.scss +0 -141
  162. package/lib/theme-chalk/src/radio-button.scss +0 -113
  163. package/lib/theme-chalk/src/radio-group.scss +0 -9
  164. package/lib/theme-chalk/src/radio.scss +0 -199
  165. package/lib/theme-chalk/src/rate.scss +0 -49
  166. package/lib/theme-chalk/src/reset.scss +0 -79
  167. package/lib/theme-chalk/src/result.scss +0 -61
  168. package/lib/theme-chalk/src/row.scss +0 -43
  169. package/lib/theme-chalk/src/scrollbar.scss +0 -72
  170. package/lib/theme-chalk/src/select-dropdown.scss +0 -62
  171. package/lib/theme-chalk/src/select.scss +0 -152
  172. package/lib/theme-chalk/src/skeleton-item.scss +0 -84
  173. package/lib/theme-chalk/src/skeleton.scss +0 -40
  174. package/lib/theme-chalk/src/slider.scss +0 -250
  175. package/lib/theme-chalk/src/spinner.scss +0 -44
  176. package/lib/theme-chalk/src/statistic.scss +0 -38
  177. package/lib/theme-chalk/src/step.scss +0 -317
  178. package/lib/theme-chalk/src/steps.scss +0 -20
  179. package/lib/theme-chalk/src/switch.scss +0 -116
  180. package/lib/theme-chalk/src/table-column.scss +0 -97
  181. package/lib/theme-chalk/src/table.scss +0 -564
  182. package/lib/theme-chalk/src/tabs.scss +0 -602
  183. package/lib/theme-chalk/src/tag.scss +0 -163
  184. package/lib/theme-chalk/src/time-picker.scss +0 -8
  185. package/lib/theme-chalk/src/time-select.scss +0 -37
  186. package/lib/theme-chalk/src/timeline-item.scss +0 -86
  187. package/lib/theme-chalk/src/timeline.scss +0 -14
  188. package/lib/theme-chalk/src/tooltip.scss +0 -141
  189. package/lib/theme-chalk/src/transfer.scss +0 -227
  190. package/lib/theme-chalk/src/tree.scss +0 -123
  191. package/lib/theme-chalk/src/upload.scss +0 -603
  192. /package/lib/theme-chalk/{src/breadcrumb-item.scss → breadcrumb-item.css} +0 -0
  193. /package/lib/theme-chalk/{src/button-group.scss → button-group.css} +0 -0
  194. /package/lib/theme-chalk/{src/checkbox-button.scss → checkbox-button.css} +0 -0
  195. /package/lib/theme-chalk/{src/checkbox-group.scss → checkbox-group.css} +0 -0
  196. /package/lib/theme-chalk/{src/collapse-item.scss → collapse-item.css} +0 -0
  197. /package/lib/theme-chalk/{src/dropdown-item.scss → dropdown-item.css} +0 -0
  198. /package/lib/theme-chalk/{src/dropdown-menu.scss → dropdown-menu.css} +0 -0
  199. /package/lib/theme-chalk/{src/fonts → fonts}/element-icons.ttf +0 -0
  200. /package/lib/theme-chalk/{src/fonts → fonts}/element-icons.woff +0 -0
  201. /package/lib/theme-chalk/{src/form-item.scss → form-item.css} +0 -0
  202. /package/lib/theme-chalk/{src/infinite-scroll.scss → infinite-scroll.css} +0 -0
  203. /package/lib/theme-chalk/{src/infiniteScroll.scss → infiniteScroll.css} +0 -0
  204. /package/lib/theme-chalk/{src/menu-item-group.scss → menu-item-group.css} +0 -0
  205. /package/lib/theme-chalk/{src/menu-item.scss → menu-item.css} +0 -0
  206. /package/lib/theme-chalk/{src/submenu.scss → submenu.css} +0 -0
  207. /package/lib/theme-chalk/{src/tab-pane.scss → tab-pane.css} +0 -0
@@ -1,289 +0,0 @@
1
- @import "mixins/mixins";
2
- @import "mixins/utils";
3
- @import "common/var";
4
- @import "common/transition";
5
-
6
- @mixin menu-item {
7
- height: 56px;
8
- line-height: 56px;
9
- font-size: $--menu-item-font-size;
10
- color: $--menu-item-font-color;
11
- padding: 0 20px;
12
- list-style: none;
13
- cursor: pointer;
14
- position: relative;
15
- transition: border-color .3s, background-color .3s, color .3s;
16
- box-sizing: border-box;
17
- white-space: nowrap;
18
-
19
- * {
20
- vertical-align: middle;
21
- }
22
-
23
- i {
24
- color: $--color-text-secondary;
25
- }
26
-
27
- &:hover,
28
- &:focus {
29
- outline: none;
30
- background-color: $--menu-item-hover-fill;
31
- }
32
-
33
- @include when(disabled) {
34
- opacity: 0.25;
35
- cursor: not-allowed;
36
- background: none !important;
37
- }
38
- }
39
-
40
- @include b(menu) {
41
- border-right: solid 1px #e6e6e6;
42
- list-style: none;
43
- position: relative;
44
- margin: 0;
45
- padding-left: 0;
46
- background-color: $--menu-background-color;
47
- @include utils-clearfix;
48
- &.el-menu--horizontal {
49
- border-bottom: solid 1px #e6e6e6;
50
- }
51
-
52
- @include m(horizontal) {
53
- border-right: none;
54
- & > .el-menu-item {
55
- float: left;
56
- height: 60px;
57
- line-height: 60px;
58
- margin: 0;
59
- border-bottom: 2px solid transparent;
60
- color: $--color-text-secondary;
61
-
62
- a,
63
- a:hover {
64
- color: inherit;
65
- }
66
-
67
- &:not(.is-disabled):hover,
68
- &:not(.is-disabled):focus{
69
- background-color: #fff;
70
- }
71
- }
72
- & > .el-submenu {
73
- float: left;
74
-
75
- &:focus,
76
- &:hover {
77
- outline: none;
78
- .el-submenu__title {
79
- color: $--color-text-primary;
80
- }
81
- }
82
-
83
- &.is-active {
84
- .el-submenu__title {
85
- border-bottom: 2px solid $--color-primary;
86
- color: $--color-text-primary;
87
- }
88
- }
89
-
90
- & .el-submenu__title {
91
- height: 60px;
92
- line-height: 60px;
93
- border-bottom: 2px solid transparent;
94
- color: $--color-text-secondary;
95
-
96
- &:hover {
97
- background-color: #fff;
98
- }
99
- }
100
- & .el-submenu__icon-arrow {
101
- position: static;
102
- vertical-align: middle;
103
- margin-left: 8px;
104
- margin-top: -3px;
105
- }
106
- }
107
- & .el-menu {
108
- & .el-menu-item,
109
- & .el-submenu__title {
110
- background-color: $--color-white;
111
- float: none;
112
- height: 36px;
113
- line-height: 36px;
114
- padding: 0 10px;
115
- color: $--color-text-secondary;
116
- }
117
- & .el-menu-item.is-active,
118
- & .el-submenu.is-active > .el-submenu__title {
119
- color: $--color-text-primary;
120
- }
121
- }
122
- & .el-menu-item:not(.is-disabled):hover,
123
- & .el-menu-item:not(.is-disabled):focus {
124
- outline: none;
125
- color: $--color-text-primary;
126
- }
127
- & > .el-menu-item.is-active {
128
- border-bottom: 2px solid $--color-primary;
129
- color: $--color-text-primary;
130
- }
131
- }
132
- @include m(collapse) {
133
- width: 64px;
134
-
135
- > .el-menu-item,
136
- > .el-submenu > .el-submenu__title {
137
- [class^="el-icon-"] {
138
- margin: 0;
139
- vertical-align: middle;
140
- width: 24px;
141
- text-align: center;
142
- }
143
- .el-submenu__icon-arrow {
144
- display: none;
145
- }
146
- span {
147
- height: 0;
148
- width: 0;
149
- overflow: hidden;
150
- visibility: hidden;
151
- display: inline-block;
152
- }
153
- }
154
-
155
- > .el-menu-item.is-active i {
156
- color: inherit;
157
- }
158
-
159
- .el-menu .el-submenu {
160
- min-width: 200px;
161
- }
162
-
163
- .el-submenu {
164
- position: relative;
165
- & .el-menu {
166
- position: absolute;
167
- margin-left: 5px;
168
- top: 0;
169
- left: 100%;
170
- z-index: 10;
171
- border: 1px solid $--border-color-light;
172
- border-radius: $--border-radius-small;
173
- box-shadow: $--box-shadow-light;
174
- }
175
-
176
- &.is-opened {
177
- > .el-submenu__title .el-submenu__icon-arrow {
178
- transform: none;
179
- }
180
- }
181
- }
182
- }
183
- @include m(popup) {
184
- z-index: 100;
185
- min-width: 200px;
186
- border: none;
187
- padding: 5px 0;
188
- border-radius: $--border-radius-small;
189
- box-shadow: $--box-shadow-light;
190
-
191
- &-bottom-start {
192
- margin-top: 5px;
193
- }
194
- &-right-start {
195
- margin-left: 5px;
196
- margin-right: 5px;
197
- }
198
- }
199
- }
200
- @include b(menu-item) {
201
- @include menu-item;
202
-
203
- & [class^="el-icon-"] {
204
- margin-right: 5px;
205
- width: 24px;
206
- text-align: center;
207
- font-size: 18px;
208
- vertical-align: middle;
209
- }
210
- @include when(active) {
211
- color: $--color-primary;
212
- i {
213
- color: inherit;
214
- }
215
- }
216
- }
217
-
218
- @include b(submenu) {
219
- list-style: none;
220
- margin: 0;
221
- padding-left: 0;
222
-
223
- @include e(title) {
224
- @include menu-item;
225
-
226
- &:hover {
227
- background-color: $--menu-item-hover-fill;
228
- }
229
- }
230
- & .el-menu {
231
- border: none;
232
- }
233
- & .el-menu-item {
234
- height: 50px;
235
- line-height: 50px;
236
- padding: 0 45px;
237
- min-width: 200px;
238
- }
239
- @include e(icon-arrow) {
240
- position: absolute;
241
- top: 50%;
242
- right: 20px;
243
- margin-top: -7px;
244
- transition: transform .3s;
245
- font-size: 12px;
246
- }
247
- @include when(active) {
248
- .el-submenu__title {
249
- border-bottom-color: $--color-primary;
250
- }
251
- }
252
- @include when(opened) {
253
- > .el-submenu__title .el-submenu__icon-arrow {
254
- transform: rotateZ(180deg);
255
- }
256
- }
257
- @include when(disabled) {
258
- .el-submenu__title,
259
- .el-menu-item {
260
- opacity: 0.25;
261
- cursor: not-allowed;
262
- background: none !important;
263
- }
264
- }
265
- [class^="el-icon-"] {
266
- vertical-align: middle;
267
- margin-right: 5px;
268
- width: 24px;
269
- text-align: center;
270
- font-size: 18px;
271
- }
272
- }
273
-
274
- @include b(menu-item-group) {
275
- > ul {
276
- padding: 0;
277
- }
278
- @include e(title) {
279
- padding: 7px 0 7px 20px;
280
- line-height: normal;
281
- font-size: 12px;
282
- color: $--color-text-secondary;
283
- }
284
- }
285
-
286
- .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
287
- transition: .2s;
288
- opacity: 0;
289
- }
@@ -1,226 +0,0 @@
1
- @import "mixins/mixins";
2
- @import "common/var";
3
- @import "common/popup";
4
- @import "button";
5
- @import "input";
6
-
7
- @include b(message-box) {
8
- display: inline-block;
9
- width: $--msgbox-width;
10
- padding-bottom: 10px;
11
- vertical-align: middle;
12
- background-color: $--color-white;
13
- border-radius: $--msgbox-border-radius;
14
- border: 1px solid $--border-color-lighter;
15
- font-size: $--messagebox-font-size;
16
- box-shadow: $--box-shadow-light;
17
- text-align: left;
18
- overflow: hidden;
19
- backface-visibility: hidden;
20
-
21
- @include e(wrapper) {
22
- position: fixed;
23
- top: 0;
24
- bottom: 0;
25
- left: 0;
26
- right: 0;
27
- text-align: center;
28
-
29
- &::after {
30
- content: "";
31
- display: inline-block;
32
- height: 100%;
33
- width: 0;
34
- vertical-align: middle;
35
- }
36
- }
37
-
38
- @include e(header) {
39
- position: relative;
40
- padding: $--msgbox-padding-primary;
41
- padding-bottom: 10px;
42
- }
43
-
44
- @include e(title) {
45
- padding-left: 0;
46
- margin-bottom: 0;
47
- font-size: $--messagebox-font-size;
48
- line-height: 1;
49
- color: $--messagebox-title-color;
50
- }
51
-
52
- @include e(headerbtn) {
53
- position: absolute;
54
- top: $--msgbox-padding-primary;
55
- right: $--msgbox-padding-primary;
56
- padding: 0;
57
- border: none;
58
- outline: none;
59
- background: transparent;
60
- font-size: $--message-close-size;
61
- cursor: pointer;
62
-
63
- .el-message-box__close {
64
- color: $--color-info;
65
- }
66
-
67
- &:focus, &:hover {
68
- .el-message-box__close {
69
- color: $--color-primary;
70
- }
71
- }
72
-
73
- }
74
-
75
- @include e(content) {
76
- padding: 10px $--msgbox-padding-primary;
77
- color: $--messagebox-content-color;
78
- font-size: $--messagebox-content-font-size;
79
- }
80
-
81
- @include e(container) {
82
- position: relative;
83
- }
84
-
85
- @include e(input) {
86
- padding-top: 15px;
87
-
88
- & input.invalid {
89
- border-color: $--color-danger;
90
- &:focus {
91
- border-color: $--color-danger;
92
- }
93
- }
94
- }
95
-
96
- @include e(status) {
97
- position: absolute;
98
- top: 50%;
99
- transform: translateY(-50%);
100
- font-size: 24px !important;
101
-
102
- &::before {
103
- // 防止图标切割
104
- padding-left: 1px;
105
- }
106
-
107
- + .el-message-box__message {
108
- padding-left: 36px;
109
- padding-right: 12px;
110
- }
111
-
112
- &.el-icon-success {
113
- color: $--messagebox-success-color;
114
- }
115
-
116
- &.el-icon-info {
117
- color: $--messagebox-info-color;
118
- }
119
-
120
- &.el-icon-warning {
121
- color: $--messagebox-warning-color;
122
- }
123
-
124
- &.el-icon-error {
125
- color: $--messagebox-danger-color;
126
- }
127
- }
128
-
129
- @include e(message) {
130
- margin: 0;
131
-
132
- & p {
133
- margin: 0;
134
- line-height: 24px;
135
- }
136
- }
137
-
138
- @include e(errormsg) {
139
- color: $--color-danger;
140
- font-size: $--messagebox-error-font-size;
141
- min-height: 18px;
142
- margin-top: 2px;
143
- }
144
-
145
- @include e(btns) {
146
- padding: 5px 15px 0;
147
- text-align: right;
148
-
149
- & button:nth-child(2) {
150
- margin-left: 10px;
151
- }
152
- }
153
-
154
- @include e(btns-reverse) {
155
- flex-direction: row-reverse;
156
- }
157
-
158
- // centerAlign 布局
159
- @include m(center) {
160
- padding-bottom: 30px;
161
-
162
- @include e(header) {
163
- padding-top: 30px;
164
- }
165
-
166
- @include e(title) {
167
- position: relative;
168
- display: flex;
169
- align-items: center;
170
- justify-content: center;
171
- }
172
-
173
- @include e(status) {
174
- position: relative;
175
- top: auto;
176
- padding-right: 5px;
177
- text-align: center;
178
- transform: translateY(-1px);
179
- }
180
-
181
- @include e(message) {
182
- margin-left: 0;
183
- }
184
-
185
- @include e((btns, content)) {
186
- text-align: center;
187
- }
188
-
189
- @include e(content) {
190
- $padding-horizontal: $--msgbox-padding-primary + 12px;
191
-
192
- padding-left: $padding-horizontal;
193
- padding-right: $padding-horizontal;
194
- }
195
- }
196
- }
197
-
198
- .msgbox-fade-enter-active {
199
- animation: msgbox-fade-in .3s;
200
- }
201
-
202
- .msgbox-fade-leave-active {
203
- animation: msgbox-fade-out .3s;
204
- }
205
-
206
- @keyframes msgbox-fade-in {
207
- 0% {
208
- transform: translate3d(0, -20px, 0);
209
- opacity: 0;
210
- }
211
- 100% {
212
- transform: translate3d(0, 0, 0);
213
- opacity: 1;
214
- }
215
- }
216
-
217
- @keyframes msgbox-fade-out {
218
- 0% {
219
- transform: translate3d(0, 0, 0);
220
- opacity: 1;
221
- }
222
- 100% {
223
- transform: translate3d(0, -20px, 0);
224
- opacity: 0;
225
- }
226
- }
@@ -1,120 +0,0 @@
1
- @import "mixins/mixins";
2
- @import "common/var";
3
-
4
- @include b(message) {
5
- min-width: $--message-min-width;
6
- box-sizing: border-box;
7
- border-radius: $--border-radius-base;
8
- border-width: $--border-width-base;
9
- border-style: $--border-style-base;
10
- border-color: $--border-color-lighter;
11
- position: fixed;
12
- left: 50%;
13
- top: 20px;
14
- transform: translateX(-50%);
15
- background-color: $--message-background-color;
16
- transition: opacity 0.3s, transform .4s, top 0.4s;
17
- overflow: hidden;
18
- padding: $--message-padding;
19
- display: flex;
20
- align-items: center;
21
-
22
- @include when(center) {
23
- justify-content: center;
24
- }
25
-
26
- @include when(closable) {
27
- .el-message__content {
28
- padding-right: 16px;
29
- }
30
- }
31
-
32
- p {
33
- margin: 0;
34
- }
35
-
36
- @include m(info) {
37
- .el-message__content {
38
- color: $--message-info-font-color;
39
- }
40
- }
41
-
42
- @include m(success) {
43
- background-color: $--color-success-lighter;
44
- border-color: $--color-success-light;
45
-
46
- .el-message__content {
47
- color: $--message-success-font-color;
48
- }
49
- }
50
-
51
- @include m(warning) {
52
- background-color: $--color-warning-lighter;
53
- border-color: $--color-warning-light;
54
-
55
- .el-message__content {
56
- color: $--message-warning-font-color;
57
- }
58
- }
59
-
60
- @include m(error) {
61
- background-color: $--color-danger-lighter;
62
- border-color: $--color-danger-light;
63
-
64
- .el-message__content {
65
- color: $--message-danger-font-color;
66
- }
67
- }
68
-
69
- @include e(icon) {
70
- margin-right: 10px;
71
- }
72
-
73
- @include e(content) {
74
- padding: 0;
75
- font-size: 14px;
76
- line-height: 1;
77
- &:focus {
78
- outline-width: 0;
79
- }
80
- }
81
-
82
- @include e(closeBtn) {
83
- position: absolute;
84
- top: 50%;
85
- right: 15px;
86
- transform: translateY(-50%);
87
- cursor: pointer;
88
- color: $--message-close-icon-color;
89
- font-size: $--message-close-size;
90
-
91
- &:focus {
92
- outline-width: 0;
93
- }
94
- &:hover {
95
- color: $--message-close-hover-color;
96
- }
97
- }
98
-
99
- & .el-icon-success {
100
- color: $--message-success-font-color;
101
- }
102
-
103
- & .el-icon-error {
104
- color: $--message-danger-font-color;
105
- }
106
-
107
- & .el-icon-info {
108
- color: $--message-info-font-color;
109
- }
110
-
111
- & .el-icon-warning {
112
- color: $--message-warning-font-color;
113
- }
114
- }
115
-
116
- .el-message-fade-enter,
117
- .el-message-fade-leave-active {
118
- opacity: 0;
119
- transform: translate(-50%, -100%);
120
- }
@@ -1,81 +0,0 @@
1
- @import "../common/var";
2
- @mixin button-plain($color) {
3
- color: $color;
4
- background: mix($--color-white, $color, 90%);
5
- border-color: mix($--color-white, $color, 60%);
6
-
7
- &:hover,
8
- &:focus {
9
- background: $color;
10
- border-color: $color;
11
- color: $--color-white;
12
- }
13
-
14
- &:active {
15
- background: mix($--color-black, $color, $--button-active-shade-percent);
16
- border-color: mix($--color-black, $color, $--button-active-shade-percent);
17
- color: $--color-white;
18
- outline: none;
19
- }
20
-
21
- &.is-disabled {
22
- &,
23
- &:hover,
24
- &:focus,
25
- &:active {
26
- color: mix($--color-white, $color, 40%);
27
- background-color: mix($--color-white, $color, 90%);
28
- border-color: mix($--color-white, $color, 80%);
29
- }
30
- }
31
- }
32
-
33
- @mixin button-variant($color, $background-color, $border-color) {
34
- color: $color;
35
- background-color: $background-color;
36
- border-color: $border-color;
37
-
38
- &:hover,
39
- &:focus {
40
- background: mix($--color-white, $background-color, $--button-hover-tint-percent);
41
- border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
42
- color: $color;
43
- }
44
-
45
- &:active {
46
- background: mix($--color-black, $background-color, $--button-active-shade-percent);
47
- border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
48
- color: $color;
49
- outline: none;
50
- }
51
-
52
- &.is-active {
53
- background: mix($--color-black, $background-color, $--button-active-shade-percent);
54
- border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
55
- color: $color;
56
- }
57
-
58
- &.is-disabled {
59
- &,
60
- &:hover,
61
- &:focus,
62
- &:active {
63
- color: $--color-white;
64
- background-color: mix($background-color, $--color-white);
65
- border-color: mix($border-color, $--color-white);
66
- }
67
- }
68
-
69
- &.is-plain {
70
- @include button-plain($background-color);
71
- }
72
- }
73
-
74
- @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
75
- padding: $padding-vertical $padding-horizontal;
76
- font-size: $font-size;
77
- border-radius: $border-radius;
78
- &.is-round {
79
- padding: $padding-vertical $padding-horizontal;
80
- }
81
- }
@@ -1,4 +0,0 @@
1
- $namespace: 'el';
2
- $element-separator: '__';
3
- $modifier-separator: '--';
4
- $state-prefix: 'is-';