@timus-networks/theme 2.4.138 → 2.4.141
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.
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/assets/scss/main.css +112 -107
- package/dist/runtime/components/development/example.alert.vue +16 -1
- package/dist/runtime/public/scss/element-plus/alert.css +37 -37
- package/dist/runtime/public/scss/element-plus/alert.scss +8 -8
- package/dist/runtime/public/scss/element-plus/autocomplete.css +2 -2
- package/dist/runtime/public/scss/element-plus/base.css +3 -3
- package/dist/runtime/public/scss/element-plus/common/var.scss +23 -22
- package/dist/runtime/public/scss/element-plus/date-picker/picker.css +4 -4
- package/dist/runtime/public/scss/element-plus/date-picker.css +4 -4
- package/dist/runtime/public/scss/element-plus/dropdown.css +7 -6
- package/dist/runtime/public/scss/element-plus/dropdown.scss +3 -2
- package/dist/runtime/public/scss/element-plus/index.css +112 -107
- package/dist/runtime/public/scss/element-plus/message-box.css +4 -4
- package/dist/runtime/public/scss/element-plus/message.css +24 -24
- package/dist/runtime/public/scss/element-plus/notification.css +4 -4
- package/dist/runtime/public/scss/element-plus/option.css +7 -5
- package/dist/runtime/public/scss/element-plus/option.scss +2 -0
- package/dist/runtime/public/scss/element-plus/pagination.css +16 -14
- package/dist/runtime/public/scss/element-plus/pagination.scss +2 -0
- package/dist/runtime/public/scss/element-plus/select-dropdown-v2.css +2 -2
- package/dist/runtime/public/scss/element-plus/select-dropdown.css +2 -2
- package/dist/runtime/public/scss/element-plus/select-v2.css +9 -7
- package/dist/runtime/public/scss/element-plus/select.css +9 -7
- package/dist/runtime/public/scss/element-plus/table-column.css +2 -2
- package/dist/runtime/public/scss/element-plus/time-picker.css +4 -4
- package/dist/runtime/public/scss/element-plus/time-select.css +4 -4
- package/dist/runtime/public/scss/element-plus/var.css +3 -3
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
position: relative;
|
|
8
8
|
|
|
9
9
|
width: 100%;
|
|
10
|
-
padding:
|
|
10
|
+
padding: 8px 16px;
|
|
11
11
|
margin: 0;
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
border-radius: getCssVar('border-radius-small');
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
border-style: getCssVar('border-style');
|
|
16
16
|
border-color: getCssVar('alert', 'border-color');
|
|
17
17
|
position: relative;
|
|
18
|
-
background-color: getCssVar('color', '
|
|
18
|
+
background-color: getCssVar('color', 'neutral-light-1');
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
opacity: 1;
|
|
21
21
|
display: flex;
|
|
@@ -44,26 +44,26 @@
|
|
|
44
44
|
|
|
45
45
|
@each $type in $semantic {
|
|
46
46
|
@include m($type) {
|
|
47
|
-
@include css-var-from-global(('alert', 'bg-color'), ('color', $type, 'light-1'));
|
|
48
|
-
@include css-var-from-global(('alert', 'border-color'), ('color', $type, 'light-3'));
|
|
47
|
+
@include css-var-from-global(('alert', 'bg-color'), ('color', if($type == 'info', 'neutral', $type), 'light-1'));
|
|
48
|
+
@include css-var-from-global(('alert', 'border-color'), ('color', if($type == 'info', 'neutral', $type), 'light-3'));
|
|
49
49
|
|
|
50
50
|
&.is-light {
|
|
51
51
|
background-color: getCssVar('alert', 'bg-color');
|
|
52
|
-
color: getCssVar('color', $type, 'light-
|
|
52
|
+
color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
|
|
53
53
|
|
|
54
54
|
.#{$namespace}-alert__description {
|
|
55
|
-
color: getCssVar('color', $type, 'light-
|
|
55
|
+
color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
&.is-dark {
|
|
60
|
-
background-color: getCssVar('color', $type);
|
|
60
|
+
background-color: getCssVar('color', if($type == 'info', 'neutral', $type));
|
|
61
61
|
color: getCssVar('color', 'white');
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
@include when(light) {
|
|
65
65
|
.#{$namespace}-alert__close-btn {
|
|
66
|
-
color: getCssVar('color', $type, 'light-
|
|
66
|
+
color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
}
|
|
@@ -377,10 +377,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
377
377
|
text-overflow: ellipsis;
|
|
378
378
|
}
|
|
379
379
|
.el-autocomplete-suggestion li:hover {
|
|
380
|
-
background-color: var(--el-color-
|
|
380
|
+
background-color: var(--el-color-neutral-light-1);
|
|
381
381
|
}
|
|
382
382
|
.el-autocomplete-suggestion li.highlighted {
|
|
383
|
-
background-color: var(--el-color-
|
|
383
|
+
background-color: var(--el-color-neutral-light-1);
|
|
384
384
|
}
|
|
385
385
|
.el-autocomplete-suggestion li.divider {
|
|
386
386
|
margin-top: 6px;
|
|
@@ -304,7 +304,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
304
304
|
--el-color-white: #ffffff;
|
|
305
305
|
--el-color-black: #000000;
|
|
306
306
|
--el-color-primary-rgb: 87, 55, 214;
|
|
307
|
-
--el-color-secondary-rgb:
|
|
307
|
+
--el-color-secondary-rgb: 168, 166, 177;
|
|
308
308
|
--el-color-neutral-rgb: 168, 166, 177;
|
|
309
309
|
--el-color-success-rgb: 76, 183, 112;
|
|
310
310
|
--el-color-warning-rgb: 232, 197, 82;
|
|
@@ -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-
|
|
380
|
-
--el-disabled-border-color: var(--el-color-neutral-light-
|
|
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;
|
|
@@ -25,7 +25,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
25
25
|
|
|
26
26
|
// types
|
|
27
27
|
$types: primary, secondary, neutral, success, warning, danger, error, info;
|
|
28
|
-
$semantic: success, info, warning, error
|
|
28
|
+
$semantic: primary, success, info, warning, error;
|
|
29
29
|
$sizes: large, medium, small, mini;
|
|
30
30
|
$variants: 1, 2, 4, 3, 5, 6, 7, 8, 9;
|
|
31
31
|
// Color
|
|
@@ -38,7 +38,7 @@ $colors: map.deep-merge(
|
|
|
38
38
|
'base': #5737d6,
|
|
39
39
|
),
|
|
40
40
|
'secondary': (
|
|
41
|
-
'base': #
|
|
41
|
+
'base': #a8a6b1,
|
|
42
42
|
),
|
|
43
43
|
'neutral': (
|
|
44
44
|
'base': #a8a6b1,
|
|
@@ -245,8 +245,8 @@ $disabled: () !default;
|
|
|
245
245
|
$disabled: map.merge(
|
|
246
246
|
(
|
|
247
247
|
'bg-color': getCssVar('color', 'neutral', 'light-1'),
|
|
248
|
-
'text-color': getCssVar('color', 'neutral', 'light-
|
|
249
|
-
'border-color': getCssVar('color', 'neutral', 'light-
|
|
248
|
+
'text-color': getCssVar('color', 'neutral', 'light-6'),
|
|
249
|
+
'border-color': getCssVar('color', 'neutral', 'light-5'),
|
|
250
250
|
),
|
|
251
251
|
$disabled
|
|
252
252
|
);
|
|
@@ -450,11 +450,12 @@ $select: map.merge(
|
|
|
450
450
|
$select-option: () !default;
|
|
451
451
|
$select-option: map.merge(
|
|
452
452
|
(
|
|
453
|
-
'text-color': getCssVar('text-color-
|
|
453
|
+
'text-color': getCssVar('text-color', 'neutral', 'light-9'),
|
|
454
454
|
'disabled-color': getCssVar('text-color-disabled'),
|
|
455
455
|
'height': 32px,
|
|
456
|
-
'hover-background': getCssVar('color', '
|
|
457
|
-
'selected-text-color': getCssVar('color-
|
|
456
|
+
'hover-background': getCssVar('color', 'neutral', 'light-1'),
|
|
457
|
+
'selected-text-color': getCssVar('text-color', 'neutral', 'light-9'),
|
|
458
|
+
'selected-bg-color': getCssVar('color', 'neutral', 'light-2'),
|
|
458
459
|
'padding': 16px,
|
|
459
460
|
),
|
|
460
461
|
$select-option
|
|
@@ -477,7 +478,7 @@ $select-dropdown: map.merge(
|
|
|
477
478
|
'shadow': getCssVar('box-shadow-light'),
|
|
478
479
|
'empty-color': getCssVar('text-color-secondary'),
|
|
479
480
|
'max-height': 274px,
|
|
480
|
-
'padding':
|
|
481
|
+
'padding': 8px,
|
|
481
482
|
'empty-padding': 10px 0,
|
|
482
483
|
'header-padding': 10px,
|
|
483
484
|
'footer-padding': 10px,
|
|
@@ -547,7 +548,7 @@ $alert: map.merge(
|
|
|
547
548
|
'description-font-size': 10px,
|
|
548
549
|
'close-font-size': 14px,
|
|
549
550
|
'close-customed-font-size': 14px,
|
|
550
|
-
'icon-size':
|
|
551
|
+
'icon-size': 12px,
|
|
551
552
|
'icon-large-size': 32px,
|
|
552
553
|
),
|
|
553
554
|
$alert
|
|
@@ -1004,13 +1005,13 @@ $table-cell-padding: map.merge(
|
|
|
1004
1005
|
$pagination: () !default;
|
|
1005
1006
|
$pagination: map.merge(
|
|
1006
1007
|
(
|
|
1007
|
-
'font-size':
|
|
1008
|
+
'font-size': 12px,
|
|
1008
1009
|
'bg-color': getCssVar('fill-color', 'blank'),
|
|
1009
|
-
'text-color': getCssVar('color-neutral-light-
|
|
1010
|
+
'text-color': getCssVar('color-neutral-light-6'),
|
|
1010
1011
|
'border-radius': 2px,
|
|
1011
|
-
'button-color': getCssVar('color-neutral-light-
|
|
1012
|
-
'button-width':
|
|
1013
|
-
'button-height':
|
|
1012
|
+
'button-color': getCssVar('color-neutral-light-6'),
|
|
1013
|
+
'button-width': 24px,
|
|
1014
|
+
'button-height': 28px,
|
|
1014
1015
|
'select-height': 20px,
|
|
1015
1016
|
'button-disabled-color': getCssVar('text-color-placeholder'),
|
|
1016
1017
|
'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
|
|
@@ -1018,9 +1019,9 @@ $pagination: map.merge(
|
|
|
1018
1019
|
'hover-color': getCssVar('color-primary'),
|
|
1019
1020
|
'font-size-small': 12px,
|
|
1020
1021
|
'button-width-small': 24px,
|
|
1021
|
-
'button-height-small':
|
|
1022
|
+
'button-height-small': 28px,
|
|
1022
1023
|
'button-width-large': 40px,
|
|
1023
|
-
'button-height-large':
|
|
1024
|
+
'button-height-large': 28px,
|
|
1024
1025
|
'item-gap': 16px,
|
|
1025
1026
|
'width': 100%,
|
|
1026
1027
|
),
|
|
@@ -1165,8 +1166,8 @@ $dropdown: () !default;
|
|
|
1165
1166
|
$dropdown: map.merge(
|
|
1166
1167
|
(
|
|
1167
1168
|
'menu-box-shadow': getCssVar('box-shadow-light'),
|
|
1168
|
-
'menuItem-hover-fill': getCssVar('color-
|
|
1169
|
-
'menuItem-hover-color': getCssVar('color-
|
|
1169
|
+
'menuItem-hover-fill': getCssVar('color-neutral-light-1'),
|
|
1170
|
+
'menuItem-hover-color': getCssVar('color-neutral-light-9'),
|
|
1170
1171
|
'menu-index': 10,
|
|
1171
1172
|
),
|
|
1172
1173
|
$dropdown
|
|
@@ -1294,10 +1295,10 @@ $datepicker: map.merge(
|
|
|
1294
1295
|
$date-editor: () !default;
|
|
1295
1296
|
$date-editor: map.merge(
|
|
1296
1297
|
(
|
|
1297
|
-
'width':
|
|
1298
|
-
'monthrange-width':
|
|
1299
|
-
'daterange-width':
|
|
1300
|
-
'datetimerange-width':
|
|
1298
|
+
'width': 100%,
|
|
1299
|
+
'monthrange-width': 100%,
|
|
1300
|
+
'daterange-width': 100%,
|
|
1301
|
+
'datetimerange-width': 100%,
|
|
1301
1302
|
),
|
|
1302
1303
|
$date-editor
|
|
1303
1304
|
);
|
|
@@ -448,10 +448,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
448
448
|
}
|
|
449
449
|
|
|
450
450
|
.el-date-editor {
|
|
451
|
-
--el-date-editor-width:
|
|
452
|
-
--el-date-editor-monthrange-width:
|
|
453
|
-
--el-date-editor-daterange-width:
|
|
454
|
-
--el-date-editor-datetimerange-width:
|
|
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);
|
|
@@ -831,10 +831,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
831
831
|
}
|
|
832
832
|
|
|
833
833
|
.el-date-editor {
|
|
834
|
-
--el-date-editor-width:
|
|
835
|
-
--el-date-editor-monthrange-width:
|
|
836
|
-
--el-date-editor-daterange-width:
|
|
837
|
-
--el-date-editor-datetimerange-width:
|
|
834
|
+
--el-date-editor-width: 100%;
|
|
835
|
+
--el-date-editor-monthrange-width: 100%;
|
|
836
|
+
--el-date-editor-daterange-width: 100%;
|
|
837
|
+
--el-date-editor-datetimerange-width: 100%;
|
|
838
838
|
--el-input-text-color: var(--el-text-color-regular);
|
|
839
839
|
--el-input-border: var(--el-border);
|
|
840
840
|
--el-input-hover-border: var(--el-border-color-hover);
|
|
@@ -302,8 +302,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
302
302
|
**/
|
|
303
303
|
.el-dropdown {
|
|
304
304
|
--el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
|
|
305
|
-
--el-dropdown-menuItem-hover-fill: var(--el-color-
|
|
306
|
-
--el-dropdown-menuItem-hover-color: var(--el-color-
|
|
305
|
+
--el-dropdown-menuItem-hover-fill: var(--el-color-neutral-light-1);
|
|
306
|
+
--el-dropdown-menuItem-hover-color: var(--el-color-neutral-light-9);
|
|
307
307
|
--el-dropdown-menu-index: 10;
|
|
308
308
|
display: inline-flex;
|
|
309
309
|
position: relative;
|
|
@@ -322,8 +322,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
322
322
|
}
|
|
323
323
|
.el-dropdown__popper {
|
|
324
324
|
--el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
|
|
325
|
-
--el-dropdown-menuItem-hover-fill: var(--el-color-
|
|
326
|
-
--el-dropdown-menuItem-hover-color: var(--el-color-
|
|
325
|
+
--el-dropdown-menuItem-hover-fill: var(--el-color-neutral-light-1);
|
|
326
|
+
--el-dropdown-menuItem-hover-color: var(--el-color-neutral-light-9);
|
|
327
327
|
--el-dropdown-menu-index: 10;
|
|
328
328
|
}
|
|
329
329
|
.el-dropdown__popper.el-popper {
|
|
@@ -420,7 +420,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
420
420
|
top: 0;
|
|
421
421
|
left: 0;
|
|
422
422
|
z-index: var(--el-dropdown-menu-index);
|
|
423
|
-
padding:
|
|
423
|
+
padding: 8px;
|
|
424
424
|
margin: 0;
|
|
425
425
|
background-color: var(--el-bg-color-overlay);
|
|
426
426
|
border: none;
|
|
@@ -438,9 +438,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
438
438
|
margin: 0;
|
|
439
439
|
font-size: var(--el-font-size-small);
|
|
440
440
|
font-weight: 500;
|
|
441
|
-
color: var(--el-text-color-
|
|
441
|
+
color: var(--el-text-color-neutral-light-9);
|
|
442
442
|
cursor: pointer;
|
|
443
443
|
outline: none;
|
|
444
|
+
border-radius: var(--el-border-radius-small);
|
|
444
445
|
}
|
|
445
446
|
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:not(.is-disabled):focus {
|
|
446
447
|
background-color: var(--el-dropdown-menuItem-hover-fill);
|
|
@@ -152,7 +152,7 @@ $dropdown-menu-padding-vertical: map.merge(
|
|
|
152
152
|
top: 0;
|
|
153
153
|
left: 0;
|
|
154
154
|
z-index: getCssVar('dropdown-menu-index');
|
|
155
|
-
padding: map.get($dropdown-menu-padding-vertical, '
|
|
155
|
+
padding: map.get($dropdown-menu-padding-vertical, 'large');
|
|
156
156
|
margin: 0;
|
|
157
157
|
background-color: getCssVar('bg-color', 'overlay');
|
|
158
158
|
border: none;
|
|
@@ -171,9 +171,10 @@ $dropdown-menu-padding-vertical: map.merge(
|
|
|
171
171
|
margin: 0;
|
|
172
172
|
font-size: getCssVar('font-size', 'small');
|
|
173
173
|
font-weight: 500;
|
|
174
|
-
color: getCssVar('text-color', '
|
|
174
|
+
color: getCssVar('text-color', 'neutral', 'light-9');
|
|
175
175
|
cursor: pointer;
|
|
176
176
|
outline: none;
|
|
177
|
+
border-radius: getCssVar('border-radius-small');
|
|
177
178
|
&:not(.is-disabled):hover,
|
|
178
179
|
&:not(.is-disabled):focus {
|
|
179
180
|
background-color: getCssVar('dropdown-menuItem-hover-fill');
|