@timus-networks/theme 2.4.140 → 2.4.142

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 (39) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -1
  3. package/dist/runtime/assets/scss/main.css +65 -52
  4. package/dist/runtime/components/development/example.form.vue +11 -11
  5. package/dist/runtime/components/development/example.input.vue +12 -1
  6. package/dist/runtime/components/development/example.menu.vue +355 -0
  7. package/dist/runtime/components/development/example.tooltip.vue +15 -15
  8. package/dist/runtime/pages/theme.vue +1 -0
  9. package/dist/runtime/public/scss/element-plus/autocomplete.css +2 -2
  10. package/dist/runtime/public/scss/element-plus/base.css +2 -2
  11. package/dist/runtime/public/scss/element-plus/button.css +1 -0
  12. package/dist/runtime/public/scss/element-plus/button.scss +1 -0
  13. package/dist/runtime/public/scss/element-plus/common/var.scss +22 -20
  14. package/dist/runtime/public/scss/element-plus/date-picker/picker.css +4 -4
  15. package/dist/runtime/public/scss/element-plus/date-picker.css +4 -4
  16. package/dist/runtime/public/scss/element-plus/dropdown.css +7 -6
  17. package/dist/runtime/public/scss/element-plus/dropdown.scss +3 -2
  18. package/dist/runtime/public/scss/element-plus/index.css +65 -52
  19. package/dist/runtime/public/scss/element-plus/input.css +1 -1
  20. package/dist/runtime/public/scss/element-plus/input.scss +1 -1
  21. package/dist/runtime/public/scss/element-plus/menu.css +14 -5
  22. package/dist/runtime/public/scss/element-plus/menu.scss +7 -2
  23. package/dist/runtime/public/scss/element-plus/option.css +7 -5
  24. package/dist/runtime/public/scss/element-plus/option.scss +2 -0
  25. package/dist/runtime/public/scss/element-plus/pagination.css +16 -14
  26. package/dist/runtime/public/scss/element-plus/pagination.scss +2 -0
  27. package/dist/runtime/public/scss/element-plus/popper.css +0 -8
  28. package/dist/runtime/public/scss/element-plus/popper.scss +4 -4
  29. package/dist/runtime/public/scss/element-plus/select-dropdown-v2.css +2 -2
  30. package/dist/runtime/public/scss/element-plus/select-dropdown.css +2 -2
  31. package/dist/runtime/public/scss/element-plus/select-v2.css +9 -7
  32. package/dist/runtime/public/scss/element-plus/select.css +9 -7
  33. package/dist/runtime/public/scss/element-plus/table-column.css +2 -2
  34. package/dist/runtime/public/scss/element-plus/time-picker.css +4 -4
  35. package/dist/runtime/public/scss/element-plus/time-select.css +4 -4
  36. package/dist/runtime/public/scss/element-plus/tooltip.css +308 -0
  37. package/dist/runtime/public/scss/element-plus/tooltip.scss +15 -0
  38. package/dist/runtime/public/scss/element-plus/var.css +2 -2
  39. package/package.json +1 -1
@@ -331,12 +331,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
331
331
 
332
332
  .el-select-dropdown__list {
333
333
  list-style: none;
334
- padding: 6px 0;
334
+ padding: 8px;
335
335
  margin: 0;
336
336
  box-sizing: border-box;
337
337
  }
338
338
  .el-select-dropdown__list.el-vl__window {
339
- margin: 6px 0;
339
+ margin: 8px;
340
340
  padding: 0;
341
341
  }
342
342
 
@@ -331,12 +331,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
331
331
 
332
332
  .el-select-dropdown__list {
333
333
  list-style: none;
334
- padding: 6px 0;
334
+ padding: 8px;
335
335
  margin: 0;
336
336
  box-sizing: border-box;
337
337
  }
338
338
  .el-select-dropdown__list.el-vl__window {
339
- margin: 6px 0;
339
+ margin: 8px;
340
340
  padding: 0;
341
341
  }
342
342
 
@@ -359,19 +359,21 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
359
359
  white-space: nowrap;
360
360
  overflow: hidden;
361
361
  text-overflow: ellipsis;
362
- color: var(--el-text-color-secondary);
362
+ color: var(--el-text-color-neutral-light-9);
363
363
  height: 32px;
364
364
  line-height: 32px;
365
365
  box-sizing: border-box;
366
366
  cursor: pointer;
367
+ border-radius: var(--el-border-radius-small);
367
368
  }
368
369
  .el-select-dropdown__item.is-hovering {
369
- background-color: var(--el-color-white);
370
- color: var(--el-color-primary);
370
+ background-color: var(--el-color-neutral-light-1);
371
+ color: var(--el-text-color-neutral-light-9);
371
372
  }
372
373
 
373
374
  .el-select-dropdown__item.is-selected {
374
- color: var(--el-color-primary);
375
+ color: var(--el-text-color-neutral-light-9);
376
+ background-color: var(--el-color-neutral-light-2);
375
377
  font-weight: 500;
376
378
  }
377
379
 
@@ -390,7 +392,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
390
392
  border-right: none;
391
393
  background-repeat: no-repeat;
392
394
  background-position: center;
393
- background-color: var(--el-color-primary);
395
+ background-color: var(--el-text-color-neutral-light-9);
394
396
  mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
395
397
  mask-size: 100% 100%;
396
398
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
@@ -331,12 +331,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
331
331
 
332
332
  .el-select-dropdown__list {
333
333
  list-style: none;
334
- padding: 6px 0;
334
+ padding: 8px;
335
335
  margin: 0;
336
336
  box-sizing: border-box;
337
337
  }
338
338
  .el-select-dropdown__list.el-vl__window {
339
- margin: 6px 0;
339
+ margin: 8px;
340
340
  padding: 0;
341
341
  }
342
342
 
@@ -359,19 +359,21 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
359
359
  white-space: nowrap;
360
360
  overflow: hidden;
361
361
  text-overflow: ellipsis;
362
- color: var(--el-text-color-secondary);
362
+ color: var(--el-text-color-neutral-light-9);
363
363
  height: 32px;
364
364
  line-height: 32px;
365
365
  box-sizing: border-box;
366
366
  cursor: pointer;
367
+ border-radius: var(--el-border-radius-small);
367
368
  }
368
369
  .el-select-dropdown__item.is-hovering {
369
- background-color: var(--el-color-white);
370
- color: var(--el-color-primary);
370
+ background-color: var(--el-color-neutral-light-1);
371
+ color: var(--el-text-color-neutral-light-9);
371
372
  }
372
373
 
373
374
  .el-select-dropdown__item.is-selected {
374
- color: var(--el-color-primary);
375
+ color: var(--el-text-color-neutral-light-9);
376
+ background-color: var(--el-color-neutral-light-2);
375
377
  font-weight: 500;
376
378
  }
377
379
 
@@ -390,7 +392,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
390
392
  border-right: none;
391
393
  background-repeat: no-repeat;
392
394
  background-position: center;
393
- background-color: var(--el-color-primary);
395
+ background-color: var(--el-text-color-neutral-light-9);
394
396
  mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
395
397
  mask-size: 100% 100%;
396
398
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
@@ -327,8 +327,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
327
327
  font-size: var(--el-font-size-base);
328
328
  }
329
329
  .el-table-filter__list-item:hover {
330
- background-color: var(--el-color-white);
331
- color: var(--el-color-primary);
330
+ background-color: var(--el-color-neutral-light-1);
331
+ color: var(--el-color-neutral-light-9);
332
332
  }
333
333
  .el-table-filter__list-item.is-active {
334
334
  background-color: var(--el-color-primary);
@@ -448,10 +448,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
448
448
  }
449
449
 
450
450
  .el-date-editor {
451
- --el-date-editor-width: 220px;
452
- --el-date-editor-monthrange-width: 300px;
453
- --el-date-editor-daterange-width: 350px;
454
- --el-date-editor-datetimerange-width: 400px;
451
+ --el-date-editor-width: 100%;
452
+ --el-date-editor-monthrange-width: 100%;
453
+ --el-date-editor-daterange-width: 100%;
454
+ --el-date-editor-datetimerange-width: 100%;
455
455
  --el-input-text-color: var(--el-text-color-regular);
456
456
  --el-input-border: var(--el-border);
457
457
  --el-input-hover-border: var(--el-border-color-hover);
@@ -448,10 +448,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
448
448
  }
449
449
 
450
450
  .el-date-editor {
451
- --el-date-editor-width: 220px;
452
- --el-date-editor-monthrange-width: 300px;
453
- --el-date-editor-daterange-width: 350px;
454
- --el-date-editor-datetimerange-width: 400px;
451
+ --el-date-editor-width: 100%;
452
+ --el-date-editor-monthrange-width: 100%;
453
+ --el-date-editor-daterange-width: 100%;
454
+ --el-date-editor-datetimerange-width: 100%;
455
455
  --el-input-text-color: var(--el-text-color-regular);
456
456
  --el-input-border: var(--el-border);
457
457
  --el-input-hover-border: var(--el-border-color-hover);
@@ -0,0 +1,308 @@
1
+ @charset "UTF-8";
2
+ /* Element Chalk Variables */
3
+ :root {
4
+ --bs-white-rgb: 255, 255, 255;
5
+ --bs-black-rgb: 0, 0, 0;
6
+ --bs-bg-opacity: 1;
7
+ --el-color-white: white;
8
+ --el-color-black: black;
9
+ }
10
+ :root {
11
+ --el-color-light-light-1: rgba(255, 255, 255, 0.01);
12
+ }
13
+ :root {
14
+ --el-color-light-light-2: rgba(255, 255, 255, 0.01);
15
+ }
16
+ :root {
17
+ --el-color-light-light-3: rgba(255, 255, 255, 0.01);
18
+ }
19
+ :root {
20
+ --el-color-light-light-4: rgba(255, 255, 255, 0.01);
21
+ }
22
+ :root {
23
+ --el-color-light-light-5: rgba(255, 255, 255, 0.01);
24
+ --el-color-light: rgba(255, 255, 255, 0.01);
25
+ }
26
+ :root {
27
+ --el-color-light-light-6: rgba(255, 255, 255, 0.01);
28
+ }
29
+ :root {
30
+ --el-color-light-light-7: rgba(255, 255, 255, 0.01);
31
+ }
32
+ :root {
33
+ --el-color-light-light-8: rgba(255, 255, 255, 0.01);
34
+ }
35
+ :root {
36
+ --el-color-light-light-9: rgba(255, 255, 255, 0.01);
37
+ }
38
+ :root {
39
+ --el-color-default-light-1: #ddd7f7;
40
+ }
41
+ :root {
42
+ --el-color-default-light-2: #bcafef;
43
+ }
44
+ :root {
45
+ --el-color-default-light-3: #9a87e6;
46
+ }
47
+ :root {
48
+ --el-color-default-light-4: #795fde;
49
+ }
50
+ :root {
51
+ --el-color-default-light-5: #5737d6;
52
+ --el-color-default: #5737d6;
53
+ }
54
+ :root {
55
+ --el-color-default-light-6: #462cab;
56
+ }
57
+ :root {
58
+ --el-color-default-light-7: #342180;
59
+ }
60
+ :root {
61
+ --el-color-default-light-8: #231656;
62
+ }
63
+ :root {
64
+ --el-color-default-light-9: #110b2b;
65
+ }
66
+ :root {
67
+ --el-color-primary-light-1: #ddd7f7;
68
+ }
69
+ :root {
70
+ --el-color-primary-light-2: #bcafef;
71
+ }
72
+ :root {
73
+ --el-color-primary-light-3: #9a87e6;
74
+ }
75
+ :root {
76
+ --el-color-primary-light-4: #795fde;
77
+ }
78
+ :root {
79
+ --el-color-primary-light-5: #5737d6;
80
+ --el-color-primary: #5737d6;
81
+ }
82
+ :root {
83
+ --el-color-primary-light-6: #462cab;
84
+ }
85
+ :root {
86
+ --el-color-primary-light-7: #342180;
87
+ }
88
+ :root {
89
+ --el-color-primary-light-8: #231656;
90
+ }
91
+ :root {
92
+ --el-color-primary-light-9: #110b2b;
93
+ }
94
+ :root {
95
+ --el-color-secondary-light-1: #eeedef;
96
+ }
97
+ :root {
98
+ --el-color-secondary-light-2: #dcdbe0;
99
+ }
100
+ :root {
101
+ --el-color-secondary-light-3: #cbcad0;
102
+ }
103
+ :root {
104
+ --el-color-secondary-light-4: #b9b8c1;
105
+ }
106
+ :root {
107
+ --el-color-secondary-light-5: #a8a6b1;
108
+ --el-color-secondary: #a8a6b1;
109
+ }
110
+ :root {
111
+ --el-color-secondary-light-6: #8b8993;
112
+ }
113
+ :root {
114
+ --el-color-secondary-light-7: #6e6c74;
115
+ }
116
+ :root {
117
+ --el-color-secondary-light-8: #515056;
118
+ }
119
+ :root {
120
+ --el-color-secondary-light-9: #343337;
121
+ }
122
+ :root {
123
+ --el-color-neutral-light-1: #eeedef;
124
+ }
125
+ :root {
126
+ --el-color-neutral-light-2: #dcdbe0;
127
+ }
128
+ :root {
129
+ --el-color-neutral-light-3: #cbcad0;
130
+ }
131
+ :root {
132
+ --el-color-neutral-light-4: #b9b8c1;
133
+ }
134
+ :root {
135
+ --el-color-neutral-light-5: #a8a6b1;
136
+ --el-color-neutral: #a8a6b1;
137
+ }
138
+ :root {
139
+ --el-color-neutral-light-6: #8b8993;
140
+ }
141
+ :root {
142
+ --el-color-neutral-light-7: #6e6c74;
143
+ }
144
+ :root {
145
+ --el-color-neutral-light-8: #515056;
146
+ }
147
+ :root {
148
+ --el-color-neutral-light-9: #343337;
149
+ }
150
+ :root {
151
+ --el-color-info-light-1: #d9ecff;
152
+ }
153
+ :root {
154
+ --el-color-info-light-2: #b2d9ff;
155
+ }
156
+ :root {
157
+ --el-color-info-light-3: #8cc7fe;
158
+ }
159
+ :root {
160
+ --el-color-info-light-4: #65b4fe;
161
+ }
162
+ :root {
163
+ --el-color-info-light-5: #3fa1fe;
164
+ --el-color-info: #3fa1fe;
165
+ }
166
+ :root {
167
+ --el-color-info-light-6: #3283cf;
168
+ }
169
+ :root {
170
+ --el-color-info-light-7: #2665a1;
171
+ }
172
+ :root {
173
+ --el-color-info-light-8: #194772;
174
+ }
175
+ :root {
176
+ --el-color-info-light-9: #0d2944;
177
+ }
178
+ :root {
179
+ --el-color-danger-light-1: #f9dede;
180
+ }
181
+ :root {
182
+ --el-color-danger-light-2: #f4bcbd;
183
+ }
184
+ :root {
185
+ --el-color-danger-light-3: #ee9b9d;
186
+ }
187
+ :root {
188
+ --el-color-danger-light-4: #e9797c;
189
+ }
190
+ :root {
191
+ --el-color-danger-light-5: #e3585b;
192
+ --el-color-danger: #e3585b;
193
+ }
194
+ :root {
195
+ --el-color-danger-light-6: #b94749;
196
+ }
197
+ :root {
198
+ --el-color-danger-light-7: #8f3638;
199
+ }
200
+ :root {
201
+ --el-color-danger-light-8: #642526;
202
+ }
203
+ :root {
204
+ --el-color-danger-light-9: #3a1415;
205
+ }
206
+ :root {
207
+ --el-color-error-light-1: #f9dede;
208
+ }
209
+ :root {
210
+ --el-color-error-light-2: #f4bcbd;
211
+ }
212
+ :root {
213
+ --el-color-error-light-3: #ee9b9d;
214
+ }
215
+ :root {
216
+ --el-color-error-light-4: #e9797c;
217
+ }
218
+ :root {
219
+ --el-color-error-light-5: #e3585b;
220
+ --el-color-error: #e3585b;
221
+ }
222
+ :root {
223
+ --el-color-error-light-6: #b94749;
224
+ }
225
+ :root {
226
+ --el-color-error-light-7: #8f3638;
227
+ }
228
+ :root {
229
+ --el-color-error-light-8: #642526;
230
+ }
231
+ :root {
232
+ --el-color-error-light-9: #3a1415;
233
+ }
234
+ :root {
235
+ --el-color-success-light-1: #dbf1e2;
236
+ }
237
+ :root {
238
+ --el-color-success-light-2: #b7e2c6;
239
+ }
240
+ :root {
241
+ --el-color-success-light-3: #94d4a9;
242
+ }
243
+ :root {
244
+ --el-color-success-light-4: #70c58d;
245
+ }
246
+ :root {
247
+ --el-color-success-light-5: #4cb770;
248
+ --el-color-success: #4cb770;
249
+ }
250
+ :root {
251
+ --el-color-success-light-6: #3d925a;
252
+ }
253
+ :root {
254
+ --el-color-success-light-7: #2e6e43;
255
+ }
256
+ :root {
257
+ --el-color-success-light-8: #1e492d;
258
+ }
259
+ :root {
260
+ --el-color-success-light-9: #0f2516;
261
+ }
262
+ :root {
263
+ --el-color-warning-light-1: #faf3dc;
264
+ }
265
+ :root {
266
+ --el-color-warning-light-2: #f6e8ba;
267
+ }
268
+ :root {
269
+ --el-color-warning-light-3: #f1dc97;
270
+ }
271
+ :root {
272
+ --el-color-warning-light-4: #edd175;
273
+ }
274
+ :root {
275
+ --el-color-warning-light-5: #e8c552;
276
+ --el-color-warning: #e8c552;
277
+ }
278
+ :root {
279
+ --el-color-warning-light-6: #bda042;
280
+ }
281
+ :root {
282
+ --el-color-warning-light-7: #927b32;
283
+ }
284
+ :root {
285
+ --el-color-warning-light-8: #665722;
286
+ }
287
+ :root {
288
+ --el-color-warning-light-9: #3b3212;
289
+ }
290
+ /**
291
+ Bununla selectorun içerisine variable ekleyebiliyorsun
292
+ .selector{
293
+ // --el-button-text-color: var(--el-color-primary); -> bu eklenir
294
+ @include css-var-from-global(('button-text-color'), ('color-primary'));
295
+
296
+ // bununla property'ye değer atayabilirsin (hiyerarşik alıyor)
297
+ color: getCssVar('colors-neutral-light-2');
298
+
299
+ // bununla da property alınabililyor
300
+ font-size: map.get($select, 'font-size');
301
+ }
302
+ **/
303
+ .el-tooltip.el-popper.is-dark {
304
+ padding: 8px 16px;
305
+ background-color: var(--el-color-neutral-light-9);
306
+ color: var(--el-color-neutral-light-6);
307
+ box-shadow: 0 2px 2px 0 var(--el-color-neutral-light-6);
308
+ }
@@ -0,0 +1,15 @@
1
+ @use 'mixins/mixins' as *;
2
+ @use 'mixins/var' as *;
3
+ @use 'common/var' as *;
4
+ @use 'mixins/button' as *;
5
+
6
+ .el-tooltip {
7
+ &.el-popper {
8
+ &.is-dark {
9
+ padding: 8px 16px;
10
+ background-color: var(--el-color-neutral-light-9);
11
+ color: var(--el-color-neutral-light-6);
12
+ box-shadow: 0 2px 2px 0 var(--el-color-neutral-light-6);
13
+ }
14
+ }
15
+ }
@@ -376,8 +376,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
376
376
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
377
377
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
378
378
  --el-disabled-bg-color: var(--el-color-neutral-light-1);
379
- --el-disabled-text-color: var(--el-color-neutral-light-4);
380
- --el-disabled-border-color: var(--el-color-neutral-light-4);
379
+ --el-disabled-text-color: var(--el-color-neutral-light-6);
380
+ --el-disabled-border-color: var(--el-color-neutral-light-5);
381
381
  --el-overlay-color: rgba(0, 0, 0, 0.8);
382
382
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
383
383
  --el-overlay-color-lighter: #4cb770;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
- "version": "2.4.140",
3
+ "version": "2.4.142",
4
4
  "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
5
5
  "type": "module",
6
6
  "exports": {