@webitel/ui-sdk 23.12.11 → 23.12.13
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 +7 -7
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +7 -7
- package/dist/ui-sdk.umd.js.map +1 -1
- package/dist/ui-sdk.umd.min.js +1 -1
- package/dist/ui-sdk.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/wt-button/_variables.scss +0 -30
- package/src/components/wt-icon/_variables.scss +0 -11
- package/src/components/wt-rounded-action/_variables.scss +4 -33
- package/src/components/wt-rounded-action/wt-rounded-action.vue +12 -59
- package/src/css/styleguide/colors/_colors.scss +1 -1
package/package.json
CHANGED
|
@@ -37,35 +37,5 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
:root.theme--dark {
|
|
40
|
-
// COLORS
|
|
41
|
-
--btn-primary-color: var(--primary-color);
|
|
42
|
-
--btn-primary-hover-color: var(--primary-hover-color);
|
|
43
|
-
--btn-primary-text-color: var(--on-primary-color);
|
|
44
|
-
|
|
45
|
-
--btn-secondary-color: var(--dp-10-surface-color);
|
|
46
|
-
--btn-secondary-hover-color: var(--dp-14-surface-color);
|
|
47
40
|
--btn-secondary-text-color: var(--grey-lighten-4);
|
|
48
|
-
|
|
49
|
-
--btn-success-color: var(--success-color);
|
|
50
|
-
--btn-success-hover-color: var(--success-hover-color);
|
|
51
|
-
--btn-success-text-color: var(--grey-lighten-5);
|
|
52
|
-
|
|
53
|
-
--btn-info-color: var(--info-color);
|
|
54
|
-
--btn-info-hover-color: var(--info-hover-color);
|
|
55
|
-
--btn-info-text-color: var(--grey-lighten-5);
|
|
56
|
-
|
|
57
|
-
--btn-job-color: var(--job-color);
|
|
58
|
-
--btn-job-hover-color: var(--job-hover-color);
|
|
59
|
-
--btn-job-text-color: var(--grey-lighten-5);
|
|
60
|
-
|
|
61
|
-
--btn-error-color: var(--error-color);
|
|
62
|
-
--btn-error-hover-color: var(--error-hover-color);
|
|
63
|
-
--btn-error-text-color: var(--grey-lighten-5);
|
|
64
|
-
|
|
65
|
-
--btn-transfer-color: var(--transfer-color);
|
|
66
|
-
--btn-transfer-hover-color: var(--transfer-hover-color);
|
|
67
|
-
--btn-transfer-text-color: var(--on-transfer-color);
|
|
68
|
-
|
|
69
|
-
--btn-disabled-color: var(--dp-16-surface-color);
|
|
70
|
-
--btn-disabled-text-color: var(--grey-lighten-1);
|
|
71
41
|
}
|
|
@@ -25,16 +25,5 @@
|
|
|
25
25
|
|
|
26
26
|
:root.theme--dark {
|
|
27
27
|
--icon-color: var(--grey-lighten-2);
|
|
28
|
-
--icon-primary-color: var(--primary-color);
|
|
29
28
|
--icon-disabled-color: var(--grey-darken-2);
|
|
30
|
-
--icon-error-color: var(--error-color);
|
|
31
|
-
--icon-success-color: var(--success-color);
|
|
32
|
-
--icon-warning-color: var(--warning-color);
|
|
33
|
-
--icon-on-dark-color: var(--white);
|
|
34
|
-
--icon-on-light-color: var(--grey-darken-3);
|
|
35
|
-
--icon-on-primary-color: var(--on-primary-color);
|
|
36
|
-
--icon-info-color: var(--info-color);
|
|
37
|
-
--icon-chat-color: var(--chat-color);
|
|
38
|
-
--icon-transfer-color: var(--transfer-color);
|
|
39
|
-
--icon-job-color: var(--job-color);
|
|
40
29
|
}
|
|
@@ -4,42 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
--rounded-action-rounded-border-radius: var(--border-radius--pill);
|
|
6
6
|
|
|
7
|
-
--rounded-action-
|
|
8
|
-
--rounded-action-
|
|
7
|
+
--rounded-action-bg-color: var(--dp-18-surface-color);
|
|
8
|
+
--rounded-action-bg-hover-color: var(--dp-20-surface-color);
|
|
9
9
|
|
|
10
|
-
--rounded-action-
|
|
11
|
-
--rounded-action-secondary-hover-color: var(--dp-18-surface-color);
|
|
12
|
-
--rounded-action-secondary-active-color: var(--grey-lighten-1);
|
|
13
|
-
|
|
14
|
-
--rounded-action-success-color: var(--success-color);
|
|
15
|
-
--rounded-action-success-hover-color: var(--success-hover-color);
|
|
16
|
-
|
|
17
|
-
--rounded-action-error-color: var(--error-color);
|
|
18
|
-
--rounded-action-error-hover-color: var(--error-hover-color);
|
|
19
|
-
|
|
20
|
-
--rounded-action-transfer-color: var(--transfer-color);
|
|
21
|
-
--rounded-action-transfer-hover-color: var(--transfer-hover-color);
|
|
22
|
-
|
|
23
|
-
--rounded-action-disabled-color: var(--dp-18-surface-color);
|
|
10
|
+
--rounded-action-active-color: var(--grey-lighten-1);
|
|
24
11
|
}
|
|
25
12
|
|
|
26
13
|
:root.theme--dark {
|
|
27
|
-
--rounded-action-primary-color: var(--primary-color);
|
|
28
|
-
--rounded-action-primary-hover-color: var(--primary-hover-color);
|
|
29
|
-
|
|
30
|
-
--rounded-action-secondary-color: var(--dp-20-surface-color);
|
|
31
|
-
--rounded-action-secondary-hover-color: var(--dp-18-surface-color);
|
|
32
14
|
--rounded-action-secondary-active-color: var(--grey-darken-1);
|
|
33
|
-
|
|
34
|
-
--rounded-action-success-color: var(--success-color);
|
|
35
|
-
--rounded-action-success-hover-color: var(--success-hover-color);
|
|
36
|
-
|
|
37
|
-
--rounded-action-error-color: var(--error-color);
|
|
38
|
-
--rounded-action-error-hover-color: var(--error-hover-color);
|
|
39
|
-
|
|
40
|
-
--rounded-action-transfer-color: var(--transfer-color);
|
|
41
|
-
--rounded-action-transfer-hover-color: var(--transfer-hover-color);
|
|
42
|
-
|
|
43
|
-
--rounded-action-disabled-color: var(--dp-18-surface-color);
|
|
44
|
-
|
|
15
|
+
--rounded-action-active-color: var(--grey-darken-1);
|
|
45
16
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<button
|
|
3
3
|
:class="[
|
|
4
|
-
`wt-rounded-action--color-${color}`,
|
|
5
4
|
`wt-rounded-action--size-${size}`,
|
|
6
5
|
{ 'wt-rounded-action--active': active },
|
|
7
6
|
{ 'wt-rounded-action--disabled': disabled },
|
|
@@ -83,7 +82,7 @@ const iColor = computed(() => {
|
|
|
83
82
|
}
|
|
84
83
|
});
|
|
85
84
|
const loaderColor = computed(() => {
|
|
86
|
-
if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
|
|
85
|
+
// if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
|
|
87
86
|
return 'contrast';
|
|
88
87
|
});
|
|
89
88
|
</script>
|
|
@@ -99,11 +98,16 @@ const loaderColor = computed(() => {
|
|
|
99
98
|
line-height: 0;
|
|
100
99
|
padding: var(--rounded-action-padding);
|
|
101
100
|
border: var(--rounded-action-border-size) solid;
|
|
102
|
-
|
|
103
|
-
border-color: var(--rounded-action-
|
|
101
|
+
background: var(--rounded-action-bg-color);
|
|
102
|
+
border-color: var(--rounded-action-bg-color);
|
|
104
103
|
border-radius: var(--border-radius);
|
|
105
104
|
transition: var(--transition);
|
|
106
105
|
|
|
106
|
+
&:hover {
|
|
107
|
+
background: var(--rounded-action-bg-hover-color);
|
|
108
|
+
border-color: var(--rounded-action-bg-hover-color);
|
|
109
|
+
}
|
|
110
|
+
|
|
107
111
|
&--wide {
|
|
108
112
|
width: 100%;
|
|
109
113
|
}
|
|
@@ -112,66 +116,15 @@ const loaderColor = computed(() => {
|
|
|
112
116
|
border-radius: var(--rounded-action-rounded-border-radius);
|
|
113
117
|
}
|
|
114
118
|
|
|
115
|
-
&--
|
|
116
|
-
|
|
117
|
-
//background: var(--rounded-action-primary-color);
|
|
118
|
-
border-color: var(--rounded-action-primary-color);
|
|
119
|
-
|
|
120
|
-
&:hover {
|
|
121
|
-
//background: var(--rounded-action-primary-hover-color);
|
|
122
|
-
border-color: var(--rounded-action-primary-hover-color);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
&-secondary {
|
|
127
|
-
//background: var(--rounded-action-secondary-color);
|
|
128
|
-
border-color: var(--rounded-action-secondary-color);
|
|
129
|
-
|
|
130
|
-
&:hover {
|
|
131
|
-
//background: var(--rounded-action-secondary-hover-color);
|
|
132
|
-
border-color: var(--rounded-action-secondary-hover-color);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
&.wt-rounded-action--active {
|
|
136
|
-
//background: transparent;
|
|
137
|
-
border-color: var(--rounded-action-secondary-active-color);
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
&-success {
|
|
142
|
-
//background: var(--rounded-action-success-color);
|
|
143
|
-
border-color: var(--rounded-action-success-color);
|
|
144
|
-
|
|
145
|
-
&:hover {
|
|
146
|
-
//background: var(--rounded-action-success-hover-color);
|
|
147
|
-
border-color: var(--rounded-action-success-hover-color);
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
&-error {
|
|
152
|
-
//background: var(--rounded-action-error-color);
|
|
153
|
-
border-color: var(--rounded-action-error-color);
|
|
154
|
-
|
|
155
|
-
&:hover {
|
|
156
|
-
//background: var(--rounded-action-error-hover-color);
|
|
157
|
-
border-color: var(--rounded-action-error-hover-color);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
&-transfer {
|
|
162
|
-
//background: var(--rounded-action-transfer-color);
|
|
163
|
-
border-color: var(--rounded-action-transfer-color);
|
|
119
|
+
&--active {
|
|
120
|
+
border-color: var(--rounded-action-secondary-active-color);
|
|
164
121
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
border-color: var(--rounded-action-transfer-hover-color);
|
|
168
|
-
}
|
|
122
|
+
&:hover {
|
|
123
|
+
border-color: var(--rounded-action-secondary-active-color);
|
|
169
124
|
}
|
|
170
125
|
}
|
|
171
126
|
|
|
172
127
|
&.wt-rounded-action--disabled {
|
|
173
|
-
//background: var(--rounded-action-disabled-color);
|
|
174
|
-
border-color: var(--rounded-action-disabled-color);
|
|
175
128
|
pointer-events: none;
|
|
176
129
|
}
|
|
177
130
|
|