@webitel/ui-sdk 23.12.5 → 23.12.7
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/ui-sdk.common.js +73 -73
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +75 -75
- package/dist/ui-sdk.umd.js.map +1 -1
- package/dist/ui-sdk.umd.min.js +2 -2
- package/dist/ui-sdk.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/wt-app-header/_variables.scss +1 -1
- package/src/components/wt-avatar/_variables.scss +1 -1
- package/src/components/wt-chip/wt-chip.scss +1 -1
- package/src/components/wt-datepicker/_variables.scss +1 -1
- package/src/components/wt-icon/Readme.md +1 -1
- package/src/components/wt-icon/_variables.scss +2 -0
- package/src/components/wt-icon/wt-icon.vue +4 -1
- package/src/components/wt-indicator/_variables.scss +3 -3
- package/src/components/wt-load-bar/wt-load-bar.vue +2 -2
- package/src/components/wt-loader/_variables.scss +2 -2
- package/src/components/wt-navigation-bar/wt-navigation-bar.vue +1 -1
- package/src/components/wt-player/_variables.scss +1 -1
- package/src/components/wt-progress-bar/_variables.scss +2 -2
- package/src/components/wt-progress-bar/wt-progress-bar.vue +1 -1
- package/src/components/wt-slider/wt-slider.vue +1 -1
- package/src/components/wt-tabs/_variables.scss +1 -1
- package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue +1 -1
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
|
|
16
16
|
--wt-app-navigator-item-border: 1px solid;
|
|
17
17
|
--wt-app-navigator-item-border-color: var(--secondary-color);
|
|
18
|
-
--wt-app-navigator-item-border-color--hover: var(--
|
|
18
|
+
--wt-app-navigator-item-border-color--hover: var(--primary-color);
|
|
19
19
|
|
|
20
20
|
--wt-header-actions-min-width: 120px;
|
|
21
21
|
--wt-header-actions-content-sections-gap: var(--spacing-lg);
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
--dp-hover-color: var(--secondary-color-50);
|
|
40
40
|
--dp-hover-text-color: var(--contrast-color);
|
|
41
41
|
--dp-hover-icon-color: var(--icon-color--hover);
|
|
42
|
-
--dp-primary-color: var(--
|
|
42
|
+
--dp-primary-color: var(--primary-color);
|
|
43
43
|
--dp-primary-text-color: var(--main-color);
|
|
44
44
|
--dp-secondary-color: var(--secondary-color);
|
|
45
45
|
--dp-border-color: var(--form-border-color);
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Different color icons:
|
|
7
7
|
```vue
|
|
8
|
-
const colors = ['default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer'];
|
|
8
|
+
const colors = ['default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
|
|
9
9
|
|
|
10
10
|
<div
|
|
11
11
|
style="display: flex; align-items: center; gap: 5px;"
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
--icon-info-color: var(--info-color);
|
|
19
19
|
--icon-chat-color: var(--chat-color);
|
|
20
20
|
--icon-transfer-color: var(--transfer-color);
|
|
21
|
+
--icon-job-color: var(--job-color);
|
|
21
22
|
--icon-disabled-color: var(--grey-lighten-4);
|
|
22
23
|
}
|
|
23
24
|
|
|
@@ -33,4 +34,5 @@
|
|
|
33
34
|
--icon-info-color: var(--info-color);
|
|
34
35
|
--icon-chat-color: var(--chat-color);
|
|
35
36
|
--icon-transfer-color: var(--transfer-color);
|
|
37
|
+
--icon-job-color: var(--job-color);
|
|
36
38
|
}
|
|
@@ -35,7 +35,7 @@ const props = defineProps({
|
|
|
35
35
|
default: 'md',
|
|
36
36
|
},
|
|
37
37
|
/**
|
|
38
|
-
* @values 'default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer'
|
|
38
|
+
* @values 'default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
|
|
39
39
|
*/
|
|
40
40
|
color: {
|
|
41
41
|
type: String,
|
|
@@ -115,6 +115,9 @@ svg {
|
|
|
115
115
|
&-transfer .wt-icon__icon {
|
|
116
116
|
fill: var(--icon-transfer-color);
|
|
117
117
|
}
|
|
118
|
+
&-job .wt-icon__icon {
|
|
119
|
+
fill: var(--icon-job-color);
|
|
120
|
+
}
|
|
118
121
|
&-disabled .wt-icon__icon {
|
|
119
122
|
fill: var(--icon-disabled-color);
|
|
120
123
|
}
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
--indicator-dot-offset: var(--spacing-2xs);
|
|
6
6
|
|
|
7
7
|
--indicator-text-margin: var(--spacing-2xs);
|
|
8
|
-
|
|
9
|
-
--indicator-primary-color: var(--
|
|
8
|
+
|
|
9
|
+
--indicator-primary-color: var(--primary-color);
|
|
10
10
|
|
|
11
11
|
--indicator-secondary-color: var(--secondary-color);
|
|
12
12
|
|
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
--indicator-transfer-color: var(--transfer-color);
|
|
20
20
|
|
|
21
21
|
--indicator-break-out-color: hsla(36, 90%, 50%, 1);
|
|
22
|
-
}
|
|
22
|
+
}
|
|
@@ -40,7 +40,7 @@ export default {
|
|
|
40
40
|
width: 100%;
|
|
41
41
|
padding: var(--load-bar-padding);
|
|
42
42
|
line-height: 0;
|
|
43
|
-
border: 1px solid var(--
|
|
43
|
+
border: 1px solid var(--primary-color);
|
|
44
44
|
border-radius: var(--border-radius);
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -49,7 +49,7 @@ export default {
|
|
|
49
49
|
height: var(--load-bar-height);
|
|
50
50
|
transition: var(--transition);
|
|
51
51
|
border-radius: var(--load-bar-border-radius);
|
|
52
|
-
background: var(--
|
|
52
|
+
background: var(--primary-color);
|
|
53
53
|
will-change: width;
|
|
54
54
|
}
|
|
55
55
|
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.wt-player {
|
|
2
|
-
--plyr-color-main: var(--
|
|
2
|
+
--plyr-color-main: var(--primary-color);
|
|
3
3
|
--plyr-audio-control-color: var(--icon-primary-color);
|
|
4
4
|
// --plyr-control-toggle-checked-background: var(--main-color);
|
|
5
5
|
--player-close-icon-transform-translate-x: var(--spacing-md);
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
--progress-bar-padding: var(--spacing-3xs);
|
|
5
5
|
--progress-bar-border-radius: var(--progress-bar-padding);
|
|
6
6
|
|
|
7
|
-
--progress-bar-bg-color--primary: var(--
|
|
7
|
+
--progress-bar-bg-color--primary: var(--primary-color);
|
|
8
8
|
--progress-bar-bg-color--secondary: var(--secondary-color);
|
|
9
9
|
--progress-bar-bg-color--success: var(--true-color);
|
|
10
10
|
--progress-bar-bg-color--danger: var(--false-color);
|
|
11
|
-
}
|
|
11
|
+
}
|
|
@@ -62,7 +62,7 @@ export default {
|
|
|
62
62
|
display: inline-block;
|
|
63
63
|
height: var(--progress-bar-height);
|
|
64
64
|
will-change: width;
|
|
65
|
-
background: var(--
|
|
65
|
+
background: var(--primary-color);
|
|
66
66
|
border-radius: var(--progress-bar-border-radius) 0 0 var(--progress-bar-border-radius);
|
|
67
67
|
transition: var(--transition);
|
|
68
68
|
}
|
|
@@ -80,7 +80,7 @@ export default {
|
|
|
80
80
|
computed: {
|
|
81
81
|
progressStyle() { // To achieve the correct color styling:
|
|
82
82
|
const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
|
|
83
|
-
return `linear-gradient(to right, var(--
|
|
83
|
+
return `linear-gradient(to right, var(--primary-color) ${progressPercent}%, var(--secondary-color) 0%)`;
|
|
84
84
|
},
|
|
85
85
|
verticalHeight() { // in order to have correct parent height after slider rotation
|
|
86
86
|
return this.vertical ? `${this.height}px` : '100%';
|